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

【概要】HTMLは、Webページを作成するためのマークアップ言語（テキストにタグを付けて構造や意味を定義する言語）である。タグによって文書構造や内容を定義する。基本構造はhtml要素、head要素、body要素で構成される。HTMLには、文字のスタイル指定、画像挿入、ハイパーリンク作成、表作成などの機能がある。また、CSSやJavaScriptと組み合わせることで、デザインの適用や動的な機能の実現が可能となる。

【目次】

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

1. WWWの概要

WWW（World Wide Web）は、インターネット上に構築されたハイパーテキストシステムである。ハイパーテキストとは、文書間をリンクで結び、相互に参照できるようにした仕組みである。WWWを構成する文書は、HTML（Hypertext Markup Language）によって記述されたマルチメディア文書である。

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

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

schemeは資源の種類を示し、通信手順（プロトコル）を指定する。HTML文書の要求と応答にはHTTP（Hypertext Transfer Protocol）またはHTTPSが使用される。

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">

img要素の属性を以下に示す。

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

<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>

メタ情報は、文書に関する情報を定義するものであり、head要素内に記述する。検索エンジンやブラウザが文書を適切に処理するために使用される。

<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. スタイルとスクリプト

スタイルシート（CSS）を使用することで、HTMLの内容と見た目を分離できる。これにより、デザインの一括変更や保守が容易になる。

<!-- 外部スタイルシート -->
<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コーディングの基本ルール

ファイル設定

基本構造

アクセシビリティ

アクセシビリティとは、障害の有無や使用環境に関わらず、誰もがWebコンテンツを利用できるようにすることである。以下の点に留意する。

保守性

コードの保守性を高めることで、将来の修正や機能追加が容易になる。以下の点に留意する。