HTMLによるWebページ作成の基礎

【概要】HTMLは、Webページを作成するためのマークアップ言語であり、タグによって文書構造や内容を定義する。基本構造は、HTML、HEAD、BODYタグで構成され、文字のスタイル指定、画像挿入、ハイパーリンク作成、表作成などの機能を持つ。また、CSSやJavaScriptと組み合わせることで、デザインや動的な機能を実現できる。

【目次】

  1. WWWの概要
  2. HTML文書の基本構造
  3. 主要なHTMLタグ
  4. 高度な機能
  5. スタイルとスクリプト
  6. HTMLコーディングの基本ルール

1. WWWの概要

WWW（World Wide Web）は、インターネット上に構築されたハイパーテキスト環境である。その構成要素は、HTML（Hypertext Markup Language）文書と呼ばれるマルチメディア文書である。

WWWでは、URL（Uniform Resource Locator）によってインターネット上の資源の種類と場所を指定する。URLの基本構成は以下の通りである。

scheme://server[:port][/path]

schemeは資源の種類（接続プロトコル名）を示し、HTML文書の要求と応答にはHTTP（Hypertext Transfer Protocol）が使用される。

2. HTML文書の基本構造

HTMLは、テキストファイルにタグを挿入することで作成する。タグとは、<と>で囲まれた命令であり、通常は開始タグと終了タグがペアとなる。

HTML文書の基本構造は以下の通りである。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Basic of HTML</title>
  <meta name="description" content="HTMLの基礎を解説するページ">
  <meta name="keywords" content="HTML,Web,プログラミング">
 </head>
 <body>
  <h1>HTMLの基礎</h1>
  HTMLの基本的な作り方<br>
  <ul>
   <li><a href="www.html">WWW</a></li>
   <li><a href="tags.html">タグについて</a></li>
  </ul>
 </body>
</html>

3. 主要なHTMLタグ

構造タグには以下のものがある。

文書構成タグには以下のものがある。

4. 高度な機能

画像の挿入は以下の形式で記述する。

<img src="image.jpg"
     alt="説明文"
     width="100"
     height="100">

画像の属性は以下の通りである。

テーブルの作成は以下の形式で記述する。

<table border="1">
<caption>表のタイトル</caption>
<tr>
  <th>見出し1</th>
  <th colspan="2">見出し2</th>
</tr>
<tr>
  <td rowspan="2">データ1</td>
  <td>データ2</td>
  <td>データ3</td>
</tr>
</table>

テーブル関連の属性は以下の通りである。

リンクとメタ情報は以下の形式で記述する。

<!-- 通常のリンク -->
<a href="URL">リンクテキスト</a>

<!-- メール用リンク -->
<a href="mailto:address@example.com">メール送信</a>

<!-- メタ情報 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="ページの説明">
<meta name="keywords" content="キーワード1,キーワード2">

5. スタイルとスクリプト

スタイルシートの適用は以下の形式で記述する。

<!-- 外部スタイルシート -->
<link rel="stylesheet" href="styles.css">

<!-- 内部スタイル定義 -->
<style>
  body { font-family: sans-serif; }
  h1 { color: navy; }
</style>

JavaScriptの導入は以下の形式で記述する。

<!-- 外部スクリプト -->
<script src="script.js"></script>

<!-- 内部スクリプト -->
<script>
  function showMessage() {
    alert('Hello, World!');
  }
</script>

6. HTMLコーディングの基本ルール

ファイル設定に関する基本ルールは以下の通りである。

基本構造に関する基本ルールは以下の通りである。

アクセシビリティへの配慮として、以下の点に留意する。

保守性の確保として、以下の点に留意する。