機械学習を使用して自然言語を理解し、人間のような応答を生成する、OpenAI によって設計された高度な言語モデルである ChatGPT については既に説明しました。 膨大な知識ベースを持ち、洗練された言語の「理解」により、情報を探している人の強力な相棒としての役割を果たすことができます。 幅広い質問に答えたり、アドバイスを提供したり、さまざまなトピックに関する会話に参加したりでき、膨大な数の分野でその能力を証明しています.
しかし、ChatGPT は Web ページを作成できますか? それをタスクに取り、調べてみましょう。
これは、最新バージョンがリリースされる前に、ChatGPT 3.5 を使用して作成されたことに注意してください。
いくつかの基本的な HTML から始めましょう。 とすれば ChatGPT は、才能のあるコーダーおよびプログラミング アシスタントとしての地位をすでに証明しています。、これは大したテストではありません。
「Hello, World」HTML ページを正常に作成するために ChatGPT で使用したプロンプトを次に示します。
シンプルな「Hello, World!」を作成します。 HTML を使用したウェブページ
ChatGPT は、次の基本的な HTML を生成しましたが、当然のことながら、意図したとおりに動作しました。
<!DOCTYPE html>
<html> <head> <title>Hello, World!</title> </head> <body> <h1>Hello, World!</h1> </body>
</html>ChatGPT は、これを拡張子「.html」のファイルに配置し、ブラウザーで開くことをお勧めします。 任務完了。
スクリーンショットは気にしません。 フォーマットされていない HTML 出力を見たことがあるでしょう。
見栄えを良くするためにChatGPTに依頼しましょう。
CSS を使用して、このページの見栄えをよくすることはできますか?
ChatGPT は次のように吐き出します。
この例では、CSS を使用して Web ページの背景色を水色に変更し、テキストをページの中央に配置し、見出しの色をネイビーに変更し、見出しのフォント サイズを 4em に増やします。
CSS をいじって、Web ページのスタイルを設定できます。
css を別のファイルに入れて、index.html ファイルにリンクすることもお勧めします。
これは次のようになります：
ChatGPT が HTML と CSS を使用して作成したシンプルな Web ページ
確かに改善されましたが、これはまだ子供の遊びです。 ただし、先に進む前に、ChatGPT のアドバイスに従って、HTML と CSS を分離しましょう。
CSS を別のファイルに入れ、それを index.html ファイルにリンクするにはどうすればよいですか?
別の CSS ファイルを作成し、それを HTML ファイルにリンクするには、
headHTML ファイルのセクション。 これを行う方法の例を次に示します。
- 「index.html」ファイルと同じディレクトリに「styles.css」という新しいファイルを作成します。
- CSS コードを「styles.css」ファイルに追加します。
- 「index.html」ファイルで、次の行を
headセクション：
<link rel="stylesheet" type="text/css" href="styles.css">
rel属性は、現在のドキュメントとリンクされたドキュメントの間の関係を指定します。type属性は、リンクされたドキュメントのタイプを指定し、href属性は、リンクされたドキュメントの場所を指定します。- 両方のファイルを保存し、Web ブラウザーで「index.html」を開きます。 「styles.css」のスタイルが Web ページに適用されます。
「https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css」などのオンライン リンクから css ファイルを含めることもできます。
これは Web ページにも適用されるため、ローカル ディレクトリに含める必要はありません。
次のことを行う Craigslist スタイルの Web ページを作成します。
– 新しい広告を追加できます
– 既存の広告を削除できます
– 既存のすべての広告を一覧表示できます
– 既存の広告を編集できる
Craigslist スタイルの Web ページを作成するには、HTML、CSS、JavaScript、および PHP や Node.js などのバックエンド言語を組み合わせて使用して、Web ページの動的な側面を処理する必要があります。 Web ページの基本構造がどのように見えるかの例を次に示します。
<!DOCTYPE html>
<html> <head> <title>Craigslist-style Webpage</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>Craigslist-style Webpage</h1> <form id="add-ad-form"> <label for="title">Title:</label> <input type="text" id="title" name="title"> <br> <label for="description">Description:</label> <textarea id="description" name="description"></textarea> <br> <button type="submit">Add Ad</button> </form> <table id="ads-table"> <thead> <tr> <th>Title</th> <th>Description</th> <th>Actions</th> </tr> </thead> <tbody> <!-- This section will be populated with ads using JavaScript --> </tbody> </table> <script src="script.js"></script> </body>
</html>結果として得られるバックグラウンド機能のないフロントエンド ページは見栄えがよくありません。 だから私は尋ねます：
CSS ファイルを使用して、Web サイトをよりプロフェッショナルに見せることはできますか? カラーパレットはイタリアのナショナルカラーにしたいです。
そして、ChatGPT が必要です (「追加」ボタンの上にカーソルを合わせると、ボタンが赤くなります)。
ChatGPT によって作成されたスタイルのシンプルな HTML フォーム
しかし、JavaScript はどうでしょうか。 ChatGPT がそれを追加できるかどうか見てみましょう。
リスティングに新しい広告を追加して表示するための JavaScript を追加できますか?
// Get references to the form and table
const addAdForm = document.querySelector("#add-ad-form");
const adsTable = document.querySelector("#ads-table tbody"); // Handle the form submit event
addAdForm.addEventListener("submit", function(event) { event.preventDefault(); // Get the values from the form inputs const title = document.querySelector("#title").value; const description = document.querySelector("#description").value; // Create a new table row and add the ad data const newRow = document.createElement("tr"); newRow.innerHTML = ` <td>${title}</td> <td>${description}</td> <td> <button>Edit</button> <button>Delete</button> </td> `; // Add the new row to the table adsTable.appendChild(newRow); // Clear the form inputs addAdForm.reset();
});そして結果：
ChatGPT によって作成された JavaScript を使用した半機能 HTML フォーム
悪くない。 いくつかのプロンプトで、何もない状態から、醜い HTML へ、より良い HTML へ、そして JavaScript へと移行しました。 何か.
便利なことを試してみましょう。 以下は、いくつかの特定の要件を備えた、ブログ用の単純な (しかし潜在的に役立つ) ホームページを作成するためのプロンプトです。
ウェブページを作ってみましょう。 これらの要件に準拠したブログ ホームページを生成するために必要な HTML と CSS およびその他すべてを作成していただきたいと思います。
– ページは 1024px の幅を使用します
– ページの上部に大きなフォントでタイトルが表示されます
– この下には、ブログの 3 つの役立つページへのリンクが並んでいるはずです
– この下には、業界標準のサイズに準拠したクリック可能なバナー広告が表示されます
– この下には最新のブログのセクションがあり、6 つのタイルが 2 行に並んだタイル レイアウトで 3 つの最新のエントリが表示されます。
– 最新のブログエントリの下には、ウェブサイトの創設者に関する情報とその写真をリストする「概要」セクションが必要です
– この下には、以下を含む典型的なフッターが必要です
– lorem ipsum を使用してテキストを入力します
– ページは魅力的で、モダンなスタイルを使用する必要があります
– 最新のブログ タイルに CSS ホバー効果があるはずです
ChatGPT によって生成された HTML と CSS は次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Blog</title> <style> body { font-family: Arial, sans-serif; max-width: 1024px; margin: 0 auto; padding: 1rem; } h1 { font-size: 2.5rem; text-align: center; margin-bottom: 1rem; } nav { display: flex; justify-content: center; margin-bottom: 1rem; } nav a { text-decoration: none; color: #333; margin: 0 1rem; } .banner { display: block; width: 728px; height: 90px; background-color: #ccc; margin: 0 auto 1rem; text-align: center; line-height: 90px; } .blogs { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 1rem; } .blog { width: 32%; background-color: #f0f0f0; padding: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; cursor: pointer; } .blog:hover { transform: translateY(-10px); } .about { display: flex; margin-bottom: 1rem; } .about img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; margin-right: 1rem; } .about p { flex: 1; } footer { background-color: #333; color: #fff; padding: 1rem; text-align: center; font-size: 0.875rem; } </style>
</head> <body> <h1>My Awesome Blog</h1> <nav> <a href="#">Useful Page 1</a> <a href="#">Useful Page 2</a> <a href="#">Useful Page 3</a> </nav> <a href="#" class="banner">Ad - 728x90</a> <div class="blogs"> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> </div> <div class="about"> <img src="founder.jpg" alt="Founder's Photo"> <div> <h2>About the Founder</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis. Integer sit amet tincidunt turpis, a lacinia ligula.</p> </div> </div> <footer> © 2023 My Awesome Blog. All Rights Reserved. </footer> </body>
</html>そして、ここに最終製品があります：
ChatGPT で作成したシンプルなブログ ホームページ
かなり良さそうです。 つまり、プロンプトに追加の CSS ガイダンスを追加することで見栄えが良くなる可能性があると確信していますが、全体として、それは悪いスタートではありません. 左上のタイルに表示されるように、タイルにホバー効果もあります (ホバーするとわずかに上がります)。
6 つのメモとして、「2 行 3 タイルのタイル レイアウトの 2 つの最新エントリ」を要求しましたが、ChatGPT はこのタイルを XNUMX で生成しました。 コラム を代わりにお使いください。
ChatGPT は、非常にシンプルでわかりやすいプロンプトを表示するだけで、Web ページを生成できるいくつかの機能を確かに示しているようです。 何か動的なものを生成するように求められたときにどのように機能するのか、さまざまなコンポーネントを一緒に織り込むように人間にどのように指示するのだろうか. 次回に向けてのテストです。
マシュー・メイヨー (@ mattmayo13）は、データサイエンティストであり、KDnuggetsの編集長であり、独創的なオンラインデータサイエンスおよび機械学習リソースです。 彼の関心は、自然言語処理、アルゴリズムの設計と最適化、教師なし学習、ニューラルネットワーク、機械学習への自動化されたアプローチにあります。 マシューは、コンピューターサイエンスの修士号と、データマイニングの卒業証書を取得しています。 彼はkdnuggets [dot] comのeditor1で連絡を取ることができます。
- SEO を活用したコンテンツと PR 配信。 今日増幅されます。
- Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
- 情報源： https://www.kdnuggets.com/2023/03/chatgpt-webpage-construction.html?utm_source=rss&utm_medium=rss&utm_campaign=using-chatgpt-for-webpage-construction
