ホームページ >ウェブフロントエンド >フロントエンドQ&A >HTML Web ページの作成手順
HTML Web ページの作成手順
- WBOYオリジナル
- 2023-05-29 18:23:383625ブラウズ
HTML (Hypertext Markup Language) は、Web デザイン、開発、組版に使用されるマークアップ言語です。現在、さまざまな Web 編集ツールが利用可能ですが、HTML の基本を学ぶことが依然として重要です。 HTML Web ページを作成するための基本的な手順は次のとおりです。
- 新しい Web ページの作成
新しい HTML Web ページを作成するには、プレーン テキストを準備する必要があります。 Windows メモ帳や macOS TextEdit などのエディタ。エディターを開き、新しいドキュメントを作成し、「index.html」などの「.html」形式で保存します。
- HTML 構造の追加
新しい HTML ファイルに、HTML の構造を入力する必要があります。この構造は、Web ページのコンテンツを表示する方法をブラウザーに指示します。一般に、この構造は HTML、ヘッド、ボディの 3 つの主要部分で構成されます。
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
页面内容
</body>
</html>この構造では、DOCTYPE ステートメントがブラウザに最新の HTML バージョンを使用するように指示します。 html タグは HTML ドキュメントを定義し、すべての HTML 要素をこのタグ内で定義する必要があります。 head タグには、ページ タイトル、CSS スタイル、JavaScript スクリプトなどのページに関するメタデータが含まれています。 body タグには、段落、画像、リンクなどのページの主要なコンテンツが含まれます。
- コンテンツの追加
次に、ページへの実際のコンテンツの追加を開始できます。 HTML タグを使用して、タイトル、段落、画像、表などのさまざまなコンテンツ タイプを定義できます。一般的に使用される HTML タグの一部を次に示します:
-
4a249f0d628e2318394fd9b75b4636b1-4e9ee319e0fa4abc21ff286eeb145ecc: Title -
< ;p>：段落 -
a1f02c36ba31691bcfe87b2722de723b：図 -
3499910bf9dac5ae3c52d5ede7383485：リンク -
ff6d136ddc5fdfeffaf53ff6ee95f185/c34106e0b4e09414b63b2ea253ff83d6:順序なし/順序付きリスト -
f5d188ed2c074f8b944552db028f98a1:テーブル -
ff9c23ada1bcecdd1a0fb5d5a0f18437: Form
たとえば、タイトル、段落、画像、リンクを含むサンプル HTML コードを次に示します:
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是我的第一个网页，很高兴能与你分享!</p>
<img src="mypic.jpg" alt="我的图片">
<p>请<a href="http://www.baidu.com">点击这里</a>访问百度搜索引擎。</p>
</body>
</html>これらのタグをエディタに入力するときは、コードが適切にフォーマットされていて読みやすいことを確認してください。スペースやインデントを使用すると、コードが読みやすくなります。
- CSS スタイルの追加
CSS (Cascading Style Sheets) を使用して、Web ページの外観と表示効果を制御できます。内部スタイル シートまたは外部スタイル シートを使用して CSS スタイルを追加できます。以下は内部スタイル シートの例です。
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
font-size: 36px;
}
p {
color: darkblue;
font-size: 18px;
}
</style>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是我的第一个网页，很高兴能与你分享！</p>
</body>
</html> この例では、c9ccee2e6ea535a969eb3f532ad9fe89 タグを使用して CSS スタイルを定義します。ページの背景色を青、タイトル テキストの色を濃い青、フォント サイズを 36 ピクセルに設定します。段落テキストの色を真の青、フォント サイズを 18 ピクセルに設定します。
- 保存してプレビュー
最後に、HTML Web ページの編集と書式設定が完了したら、Web ページを保存してプレビューします。 Web ページを表示するには、Google Chrome、Mozilla Firefox、Microsoft Edge などのブラウザを使用する必要があります。ブラウザで HTML ファイルを開くと、コードで作成した Web コンテンツが表示されるはずです。
概要
HTML は、Web デザイン、開発、組版に使用されるマークアップ言語です。新しい HTML ファイルを作成し、HTML 構造、コンテンツ、スタイルを追加することで、基本的な Web ページを作成できます。 Web ページを作成するときは、コードが明確に構造化されており、読みやすく理解しやすいものであることを常に確認する必要があります。 HTML を読んで練習することで、優れた Web デザイナーおよび開発者になれるでしょう。
以上がHTML Web ページの作成手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。