HTML fileを作成して、簡単なウェブページを作ってみた
HTML (HyperText Markup Language)
1) 基本的な構造:
<!DOCTYPE html>: HTML文書のバージョンとタイプを指定します。
<html>: HTML文書のルート要素です。</html>
<head>: ページのメタ情報や外部リソースの参照など、文書のヘッダーを定義します。</head>
<title>: ページのタイトルを指定します。</title>
<meta>: メタデータを定義します。</meta>
<body>: ページの本文を定義します。</body>
2) テキスト:
<h1> : h1見出しを定義します。 </h1>
<h2> : h2見出しを定義します。 </h2>
<h3> : h3見出しを定義します。 </h3>
<h4> : h4見出しを定義します。 </h4>
<h5> : h5見出しを定義します。 </h5>
<h6> : h6見出しを定義します。 </h6>
<p>: 段落を定義します。</p>
<span>: インライン要素にスタイルを適用するためのコンテナを定義します。</span>
<strong>: 強調表示されたテキストを定義します。</strong>
<em>: 強調表示されたテキストを定義します。</em>
3) リンク:
<a>: ハイパーリンクを定義します。</a>
4) 画像:
<img>: 画像を埋め込みます。</img>
5) リスト:
<ul>: 順序なしリストを定義します。</ul>
<ol>: 順序付きリストを定義します。</ol>
<li>: リストアイテムを定義します。</li>
6) 表:
<table>: 表を定義します。</table>
<tr>: 表の行を定義します。</tr>
<td>: 表のセルを定義します。</td>
<th>: 表の見出しセルを定義します。</th>
7) フォーム:
<form>: 入力フォームを定義します。</form>
<input>: 入力フィールドを定義します。</input>
<textarea>: テキストエリアを定義します。</textarea>
<select>: ドロップダウンリストを定義します。</select>
<button>: ボタンを定義します。</button>
<label>: 入力フィールドにラベルを付けます。</label>
8) 利用例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Sample</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is a paragraph.</p>
<span>This is a span.</span>
<strong>This text is strong.</strong>
<em>This text is emphasized.</em>
<a href="https://example.com">This is a link</a>
<img src="image.jpg" alt="Example Image">
<ul>
<li>Unordered List Item 1</li>
<li>Unordered List Item 2</li>
<li>Unordered List Item 3</li>
</ul>
<ol>
<li>Ordered List Item 1</li>
<li>Ordered List Item 2</li>
<li>Ordered List Item 3</li>
</ol>
<table border="1">
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
<label for="gender">Gender:</label><br>
<select id="gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
