演習1 - HTMLファイル作成の基礎

1.1 ファイルの作成手順

 まずは、以下の順序に従って、 最低限の体裁を成すHTMLファイルを作成してみましょう。

  1. エディタを開いて、以下の文章を入力してみてください。

    - - - - - sample1A.html - - - - - - - - - - - - - - - - - - - - -

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  2. これを、"sample1A.html"という名前で作業フォルダに保存します。
  3. 保存したファイルをダブルクリックしてください。
  4. 標準ブラウザに以下のような外観が表示されれば正解です

    - - - - - 実行結果 - - - - - - - - - - - - - - - - - - - -

    タイトル

    見出し

    本文

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    (注)上では、実行結果を便宜的に、単独のページとしてではなくページの途中に出力しています。 そのため、単独のページとして開いた場合と外観が異なる部分があります。 例えば、上の実行結果の中ではタイトル要素の出力が無視されていますし、 見出しの外観装飾もwikiの特殊な仕様の影響を受けています。 単独で開いた場合の表示を確認したい場合、 サンプルページの中の、該当するファイルをクリックしてください。 なお、サンプルの文字コードは全てUTF-8としていますので、文字化けする場合は、お使いのブラウザの文字コードを設定してください(本ドキュメント自体はEUCで書かれていますので注意してください)。

    • safari使用時、[表示>テキストエンコーディング>UTF-8 or EUC])
    • chrome使用時、[表示>エンコード>Unicode or EUC])

1.2 タグと要素

 プログラムを全体的に眺めると一目瞭然と思いますが、HTMLのプログラムでは、

<名前>

あるいは

<名前> ... </名前>

という書式を持ったまとまりを一つの単位として、 マークアップがなされていることがわかります。 まずは、この<名前>がタグと呼ばれることを覚えてください。

以降で、sample1A.htmlの中で使われている一つ一つのタグの詳細を説明します。

ドキュメントタイプ宣言

まず一行目から。

 以下のテキストが、HTML文書であることを宣言するものです。 HTMLファイルにおいては、常に最初の行に記述される必要があります。

文書全体の骨組み(html要素、head要素、body要素)

 ドキュメントタイプ宣言以降の骨組みは、以下のようになっています。

<html> 
<head>...</head>
<body>...</body>
</html>

<html>と</html>のタグで挟まれた部分は、HTMLの実際のプログラムが書かれている領域を指定します。 この領域全体をhtml要素と呼びます。html要素はその内部に、以下に示すhead要素body要素を1つずつ含む必要があります。

  • head要素

    は<head>と</head>によって囲まれた全体を指し、その文書の「タイトル」「キーワード」「文字コード」「スタイルシート」などを記述する部分です。これらの情報の多くは、通常、ブラウザ上では表示されないため、メタデータと呼ばれます

  • body要素

    は<body>と</body>によって囲まれた全体を指し、その文章の本文が具体的に記述される領域となります。

このようにHTML文書では、通常開始タグ(<*>)と終了タグ(</*>)の間に、 テキストを挿み込む形で、全体として1つの要素を表現します。 中に挟まれたテキストは、他の要素等も含むことができます (例えば、html要素head要素body要素を含みます)。 このタグに囲まれたテキストを(要素)内容と呼びます。 以上を整理すると、 『要素内容開始タグ終了タグで囲むこと』によって要素が表現されます。

tag_structure.png

 なお、要素内容を含まないタイプのタグについては、終了タグは必要ありません。 先のドキュメントタイプ宣言や、改行(<br>)などが、代表的な例となります。

title要素、h*要素、p要素

以下では、head要素とbody要素の中で使われている要素を簡単に解説します。

  • タイトル

    「title要素」によって、この文書のタイトルを指定しています。 タイトルは、本文の内容を間接的に表現する情報であるため、 「head要素」の内部に書かれる必要があります。 Safariでは、タイトルバーやタブの部分に表示されます。

  • 見出し

    <h*>のタグは、見出し的な意味付けを与える場合に使います。*には 1から6の数字が入り、数字が低い程、 より高位で包括的な見出しであることを意味します。 以下に、h1からh6の全てを用いた例を示します。

    - - - - - ソース - - - - - - - - - - - - - - - - - - - - -

    - - - - - 実行結果 - - - - - - - - - - - - - - - - - - - -

    見出し1

    見出し2

    見出し3

    見出し4

    見出し5
    見出し6

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  • p要素

    「p要素」のpはparagraph(段落)の略です。すなわち、pタグで挟まれた部分は、1つの段落を形成します。

1.3 タグの属性

以下で、タグの属性について学んでいきましょう。

サンプル

まずは、サンプルを作ります。 先のsample1A.htmlの骨組みを基本にして、新たな要素を加えるなどしつつ、 中身を少し発展させてみます。

- - - - - sample1B.html - - - - - - - - - - - - - - - - - - - - -

- - - - - 実行結果 - - - - - - - - - - - - - - - - - - - -

beatles, lyrics

A day in the life

デフォルト

I read the news today oh, boy. About a lucky man who made the grade. And though the news was rather sad. Well, I just had to laugh. I saw the photograph. He blew his mind out in a car. He didn't notice that the lights had changed. A crowd of people stood and stared. They'd seen his face before. Nobody was really sure if he was from the house of lords.

中央寄せ

I saw a film today oh, boy. The english army had just won the war. A crowd of people turned away. But I just had to look. Having read the book. I'd love to turn you on.

右寄せ

Woke up, fell out of bed. Dragged a comb across my head. Found my way downstairs and drank a cup. And looking up, I noticed I was late. Found my coat and grabbed my hat. Made the bus in seconds flat. Found my way upstairs and had a smoke. And somebody spoke and I went into a dream. Ah

改行

I read the news today oh, boy.
Four thousand holes in blackburn, lancashire.
And though the holes were rather small.
They had to count them all
Now they know how many holes it takes to fill the albert hall.
I'd love to turn you on.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 このページでは、beatlesのある曲の歌詞が4段落に分かれて書かれていますが、 それぞれの段落のレイアウトが微妙に異なっていることがわかります。 この差異は当然、各段落に対するマークアップの違いに起因したものです。

改行の扱い(br要素)

 レイアウトの差異を吟味する前に、まずは、改行の扱いについて確認していきましょう。 注目すべき点として、第四段落を除いて、 ソースのうえでの改行がブラウザのテキストに正確に反映されていません。 実は、 HTML文書の中の改行は、ブラウザの表示にあたって実際の改行とは見なされません。 改行が必要な箇所では、ソースの第四段落のように、 HTML文書の中で<br>br要素)を挿入して明示的に改行を指示する必要があります。

先にも述べましたが、改行のような、内部情報として文字を含まない機能要素に対しては、 終了タグを付加する必要ありません(仕様上も文法違反となるようです)。 後述するimg要素(画像の挿入)についても同様です。

整列属性(align)

 次に、整列のレイアウトに着目して、あらためて実行結果を確認してみましょう。 実行結果から、 第1段落と第4段落が左寄せ、第2段落が中央寄せ(センタリング)、 第3段落が右寄せされていることがわかります。 また、これに対応するように、第1段落と第4段落ではp要素が通常通り、

<p>...</p>

と記述されている一方、第2段落では、

<p align="center">...</p>

第3段落では、

<p align="right">...</p>

というように、 p要素の開始タグの中で(タグが閉じられる前に)付加的な情報が与えられていることがわかります。 ここでは、alignがp要素の要素内容をどのような整列レイアウトで表示するかを決めています。

具体的には、

<p align="XXX">...</p>

という形式を使い、XXXの部分に、left、center、rightの文字を挿入することによって、 p要素で指定された段落を左寄せ、中央寄せ、右寄せすることができます。

  • align属性の指定方法

    align="left"段落を左寄せ
    align="center"段落を中央寄せ
    align="right"段落を右寄せ

 以上の例に見られるように、HTMLには、要素に対して付加的な情報を与える仕組みを持っています。 一般的には、開始タグに対して、下図のようなパターンで属性に関する記述を与えることで、 要素の内容を拡張することが可能です。

property_structure.png

先ほどの例と対応させると、alignは整列という概念を名指す属性名、"center"や"right"がどのように整列するかを具体的に決定する属性値、align="center"やalign="right"全体に対して、属性という言葉があてがわれます。

ところで、第1段落と第4段落の文章では、特に何も指定していないにも関わらず、段落が左寄せされています。これはなぜでしょうか。 実は、あらゆる要素は、明示的に属性を指定せずとも、デフォルトの属性値を有しています。 そのため、<p>と書いただけで、内部的には <p align="left"> を記述したのと同等の機能を与えることができます。

 なお、align属性はHTML5より、このような形でHTMLのタグの中で利用することは推奨されなくなりました。 理由は、alignが装飾的な効果を与えるものであり、HTMLタグの本来の役割(意味付け)から外れるためです。alignと同じ効果は、CSSを用いて表現することが推奨されています。

1.4 その他の代表的な要素

リンクの設定(a要素)

<a href = "XXX", target = "YYY"> - </a>
XXX
リンク先のURL
YYY
ウィンドウの指定方法
YYY
_blank新しいウィンドウを開いて表示
_selfリンク元と同じウィンドウに表示
_parent親ウィンドウに表示
_top最上位のウィンドウに表示

- - - - - ソース - - - - - - - - - - - - - - - - - - - - -

- - - - - 実行結果 - - - - - - - - - - - - - - - - - - - -

新しいページで google を開きます。

現在のページで google を開きます。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

リスト表記(ul要素)

「ul要素」は順序関係のない要素を羅列します。 リストを構成する各要素は「li要素」として表現します。

<ul><li> - </li></ul>

- - - - - ソース - - - - - - - - - - - - - - - - - - - - -

- - - - - 実行結果 - - - - - - - - - - - - - - - - - - - -

私が行ったことのある外国の都市を思い出してみます。

  • シンガポール
  • ソウル
  • ニース(フランス)
  • ル・グラン=ボルナン(フランス)
  • クアラルンプール(マレーシア)
  • 長春(中国)
  • セントポール(アメリカ)
  • ハワイ
  • シドニー
  • 台湾

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

似た要素として、リストに番号を与える「ol要素」があります。 使い方は、「ul要素」と同じです。試してみてください。

画像の表示(img要素)

「img要素」は、ブラウザ上の狙ったポイントで画像を貼り付けるために用いられます。 「img要素」は「br要素」と同様、終了タグを与える必要がありません。 画像ファイルは、通常、同じ階層に置いたimageフォルダ等にまとめておきます。

<img src="XXX" alt="YYY" width="PPP" height="QQQ">
XXX
画像ファイル名(URL)
YYY
画像を表すテキスト
PPP
画像の幅(ピクセル)
QQQ
画像の高さ(ピクセル)

XXXには画像ファイル名をURLとして記述します。 imageフォルダに置かれたjpgの画像ファイルを指定するときには、src="image/***.jpg"となります。

- - - - - ソース - - - - - - - - - - - - - - - - - - - - -

- - - - - 実行結果 - - - - - - - - - - - - - - - - - - - -

画像表示の例1

画像表示の例2

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

1.5 その他の基本事項

コメントアウト

 プログラムの中で、補足的な情報を書き込みたいことがよくあります。よくあるのが、次のような情報です。

  • 作者、修正者、修正日、、
  • プログラムに対する説明文(「縦長にして画像を表示」「全ての段落を右寄せで統一」、、など、)
  • 実行はしないが保留として残しておきたいプログラム文
  • 複数人で共有する場合の指示文(「この関数部分を修正してください」「適当な数字を入れてください」)

    HTMLに限らずあらゆるプログラム言語に言えることですが、 このような実際には実行されない文はコメント文と呼ばれ、プログラムの中で、実行文と明示的に区別される必要があります。 このような、ある文がコメント文であることをマークする操作のことをコメントアウトと呼びます。 コメントアウトの構文は、プログラム言語によって異なります。HTMLの場合、非実行文は、次のような記号で囲まれる必要があります。

    <!-- この文章は実行されません -->

     使用例を簡単に示します。

    - - - - - ソース - - - - - - - - - - - - - - - - - - - - -

    - - - - - 実行結果 - - - - - - - - - - - - - - - - - - - -

    画像表示の例1

    画像表示の例2

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

大文字と小文字の区別

 HTML5では、要素の記述にあたって大文字と小文字の区別がありません。

例えば、sample1A.htmlは、以下のように書き換えても全く同じ出力となります。

- - - - - -;

1.6 演習課題

課題詳細

 簡単な自己紹介のホームページを作ってください。

  • html要素 head要素 body要素 title要素は必須とします。
  • body要素の内部では、今回学んだ、h*要素 p要素 a要素 ul要素 img要素の全てを使用してください。
  • ファイル名は、sample1X.htmlとします。課題用のフォルダの中に、学籍番号のフォルダを作って、その中に画像と共にコピーしてください。

    必ず、以下のコンテンツを含めてください。

  1. 使用しているPCで自分の写真を撮影し、img要素で表示。
  2. お気に入りのサイトを、a要素でリンク。
  3. 『私の好きな(嫌いな)****』(****は任意)というコンテンツを作って、「ul要素」でリストを作成。
  • 余裕のある人は、次の使用例を参考に、別のタグを使ってコンテンツをより充実させてよい。

余裕のある人向け、他の要素の使用例

  • テーブル(表)

    - - - - - ソース - - - - - - - - - - - - - - - - - - - - -

    - - - - - 実行結果 - - - - - - - - - - - - - - - - - - - -

    テーブル作成に関連する要素
    要素名内容
    table表全体を指定
    tr行を指定
    tdセルを指定
    th行や列の見出しを指定
    captionキャプションを指定

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  • 画像のキャプション

    - - - - - ソース - - - - - - - - - - - - - - - - - - - - -

    - - - - - 実行結果 - - - - - - - - - - - - - - - - - - - -

    以下のイメージは、もともとは論文の図の一部を切り抜いたものです。 はじめは、あるSNSのサイトのアカウントのアイコンとして使っていただけでしたが、 何となく愛着が出てきて、色々なサービスで使うようになりました。

    アイコンイメージ

    ところで、、、

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  • ルビをふる

    - - - - - ソース - - - - - - - - - - - - - - - - - - - - -

    - - - - - 実行結果 - - - - - - - - - - - - - - - - - - - -

    私の名前は、 小鷹こだか 研理けんり と申します。

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  • ハイライト表示(mark要素

    - - - - - ソース - - - - - - - - - - - - - - - - - - - - -

    - - - - - 実行結果 - - - - - - - - - - - - - - - - - - - -

    ハイライト表示は、 ユーザに対して、とりわけ注意を促したい部分 に対して、使用するものです。

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  • 正確で無くなった内容(s要素

    - - - - - ソース - - - - - - - - - - - - - - - - - - - - -

    - - - - - 実行結果 - - - - - - - - - - - - - - - - - - - -

    ABC予想は、まだ証明されていない難題です。 京都大学の望月教授による関連の論文が公開されており、近いうちに公に証明が認められる可能性があります。

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  • 映像再生(video要素

    - - - - - ソース - - - - - - - - - - - - - - - - - - - - -

    - - - - - 実行結果 - - - - - - - - - - - - - - - - - - - -

     

参考資料

 HTML5の全要素のリファレンス

 HTML5とCSS3の参考書としては、以下がオススメ(ただし、本講義のメインとなるjavascriptに関しては対象外です。)


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2012-10-10 (水) 12:12:11 (2351d)