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は，テキストファイルにタグを挿入することで作成する．タグとは，< と > で囲まれた命令（directive）であり，通常は開始タグと終了タグがペアとなる．タグの記述では大文字・小文字の区別はない．

現代的な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コーディングの基本ルール

1. ファイル設定：

2. 基本構造：

3. アクセシビリティへの配慮：

4. 保守性の確保：