7.4 基本的なHTML要素
HTMLでの要素にはそれぞれ文書構造上での役割が決められており，その役割に応じて使っていくことで意図する内容が伝わりやすいページを作ることができます．みなさんもこれから要素を用いてページを加工していく際は，それぞれの要素が持つ役割を意識しながら使うようにしましょう．
段落や見出し，表組みなどHTMLで表現する上での基本的な要素を以下に紹介します．これらで一通りの表現ができるようになります．このオンライン教材も原則的にここで紹介した要素のみを使って本文を作成しています．
注意HTMLの要素にはこれ以外にも様々なものがありますが，中にはバージョンが古い時代のものであったり特定の環境でしか表示がうまくいかないものなどがあります．本科目ではHTMLを通して文章の構造化の学習を目標としています（詳しくは
改行と改段落 --- <p> <br> <hr>
文章の基本構造の一つとして，段落というものがあります．この段落に対応するのが p 要素です．
<p>最初の段落です．</p>
<p>2番目の段落です．
ここは，まだ2番目の段落です．</p>
<p>3番目の段落です．</p>
|
HTML では，改行は空白と同じものとして扱われます．また，空白も単語を区切る意味しか持ちません．ブラウザが表示するときには，元のファイルの改行とは無関係に，そのときのウィンドウの幅に合わせて適当な箇所で改行をします．
段落の中で強制的に改行したい場合には，br 要素を使用します．br 要素は開始タグだけで，内容も終了タグもありません．また，hr 要素で，区切りの横線を入れることができます． hr 要素も開始タグだけです．
例えば，以下のような HTML ファイルは，
<p>これは，HTMLの改行のテストです．<br> この行のように br がないと， HTMLファイルで改行をしていても無視されます．<br> また，このように区切り線を指定すると， <hr> 横方向の線ができます．</p> |
次のように表示されます．
|
これは，HTMLの改行のテストです． この行のように br がないと， HTMLファイルで改行をしていても無視されます． また，このように区切り線を指定すると， 横方向の線ができます． |
見出し --- <h1> 〜 <h6>
段落と並んで重要なものとして見出しがあります．適切な見出しを文章中につけると，情報を効率よく相手に伝えることができます．見出しには6段階あり，h1 から h6 の要素を使用します．最大の見出しが，h1 で，数が増えるに従って小さくなります．
例えば，以下のようなHTMLファイルは，
<h1>情報処理授業計画 </h1> <p>情報処理は以下の全13回の構成を予定している</p> <h2> 第0回 はじめに</h2> <h3>0.1 はじめに </h3> <h4>科目の目的 </h4> <p>履修者各自がCNSのUnix環境を利用して，他人の閲覧にたえるWebサイトを制作することを，本科目の目的とします</p> <h4>科目の内容 </h4> <p>本科目では，Webサイトの制作を通して，コンピュータを用いたデジタルコンテンツ制作の基礎を学びます．</p> <h3>0.2 CNS利用上のマナー </h3> <h3>0.3 演習で使うコンピュータ </h3> <h3>0.4 アカウント </h3> <h2> 第1回 CNSを使う</h2> <h3>1.1 今週の目標 </h3> <h3>1.2 コマンド </h3> <h3>1.3 ブラウザの使い方 </h3> <h3>1.4 タイピング </h3> <h3>1.5 テキストエディタ </h3> |
情報処理授業計画情報処理は以下の全13回の構成を予定している 第0回 はじめに0.1 はじめに科目の目的履修者各自がCNSのUnix環境を利用して，他人の閲覧にたえるWebサイトを制作することを，本科目の目的とします 科目の内容本科目では，Webサイトの制作を通して，コンピュータを用いたデジタルコンテンツ制作の基礎を学びます． 0.2 CNS利用上のマナー0.3 演習で使うコンピュータ0.4 アカウント第1回 CNSを使う1.1 今週の目標1.2 コマンド1.3 ブラウザの使い方1.4 タイピング1.5 テキストエディタ |
と表示されます．
注意フォントの設定によっては，違うレベルの見出しが同じ大きさで表示されることがあります．あまりいろいろな見出しを多用すると，そのような設定で見ている人には文書の構成が分かりにくくなります．
● 練習問題
- 自己紹介という見出しをつけ，見出しの後に横線の区切りを入れた後，自己紹介文を一段落書きなさい．
- 先ほど作成したHTML文書のタイトルは 「My Test Home Page」でした．このタイトルを自分が作成した内容に合ったものに変えなさい．
変更した結果をブラウザで確認するには，変更を保存した後，Mozilla の「Reload」ボタンを押すと新しい内容が反映されます．
箇条書き --- <ul> <ol> <li> <dl> <dd> <dt>
HTMLでは，番号無し，番号付き，説明付きの3つのスタイルで箇条書きを指定することができます．
- 番号無し
- ul 要素の中に各項目を li 要素で書いていきます．
<ul> <li>環境情報学部</li> <li>総合政策学部</li> <li>看護医療学部</li> </ul> |
と指定すると，以下のようになります．
|
- 番号付き
- ul 要素の代わりに ol 要素を使うと，各項目の前に番号が付きます．
<ol> <li>履修申告をする．</li> <li>講義に出席し課題をこなす．</li> <li>期末試験を受験する．</li> <li>成績が付き単位取得．</li> </ol> |
と指定すると，以下のようになります．
|
- 説明付き
- 説明付きの箇条書きとは， 辞書のように， 各項目が用語とその説明からなるようなリストのことです． dl 要素の中に dt 要素と dd 要素を交互 に書いていきます．例えば，
<dl> <dt>WWW</dt> <dd>World Wide Web の略</dd> <dt>URL</dt> <dd>Uniform Resource Locator の略</dd> </dl> |
と指定すると，以下のようになります．
|
また，箇条書きは入れ子にして階層構造を持たせることもできます．次のように書くと，どのような表示になるでしょうか．ブラウザで確認してみると同時に，どのタグがどこで始まってどこで終わっているのかも確認しましょう．
<ul>
<li>オーケストラ
<dl>
<dt>弦セクション</dt>
<dd>弦楽器により構成</dd>
<dt>パート</dt>
<dd>
<ol>
<li>第一ヴァイオリン</li>
<li>第二ヴァイオリン</li>
<li>ヴィオラ</li>
<li>チェロ</li>
<li>コントラバス</li>
</ol>
</dd>
</dl>
</li>
</ul>
|
表組み --- <table> <tr> <td> <th>
表を作るときは，table 要素を使います．表の中の各行は tr 要素で表わし，その中の各項目は td 要素で表します．td 要素を tr 要素の中にいくつも書くことで，項目を横にどんどん増やして行くことが出来ます．また，上端や左端に見出しを書きたい場合は，td 要素の代わりに th 要素を使います．
<table>
<tr>
<th>コマンド</th>
<th>機能</th>
</tr>
<tr>
<td> pwd </td>
<td> カレントディレクトリの表示 </td>
</tr>
<tr>
<td> cd </td>
<td> ディレクトリの移動 </td>
</tr>
<tr>
<td> ls </td>
<td> ディレクトリの内容表示 </td>
</tr>
</table>
|
|
- 枠線を付けるためには，table 要素の開始タグに border 属性を書きます．値は枠線の太さです．
<table border="1">
<tr>
<th>コマンド</th>
<th>機能</th>
</tr>
<tr>
<td> pwd </td>
<td> カレントディレクトリの表示 </td>
</tr>
<tr>
<td> cd </td>
<td> ディレクトリの移動 </td>
</tr>
<tr>
<td> ls </td>
<td> ディレクトリの内容表示 </td>
</tr>
</table>
|
|
- 縦に数段抜きのマスを作りたいときは th 又は td 要素の開始タグに rowspan 属性を書きます．値は何段抜きにするかを指定します．
- 横に数段抜きのマスを作るときも同様に， th 又は td 要素の開始タグに colspan 属性を書きます．
<table border="1">
<tr>
<th>旧省庁名</th>
<th>新省庁名</th>
</tr>
<tr>
<td>大蔵省</td>
<td>財務省</td>
</tr>
<tr>
<td>厚生省</td>
<td rowspan="2">厚生労働省</td>
</tr>
<tr>
<td>労働省</td>
</tr>
<tr>
<td colspan=2>外務省</td>
</tr>
<tr>
<td>通産省</td>
<td>経済産業省</td>
</tr>
</table>
|
| |||||||||||
● 練習問題
自分の時間割表をHTMLで作りなさい．
他の情報へリンクを張る --- <a>
HTMLはハイパーテキストの一種なので，文書中に他の情報へのリンクを持たせることができます．他の情報へのリンクは a 要素で表し，href属性の値として，リンク先の情報の位置を示す URL を指定します．例えば，SFCのホームページへのリンクを自分のページの中に作る場合は，以下のようにします．
<a href="http://www.sfc.keio.ac.jp/">SFCのホームページ</a> |
a 要素の内容をソースアンカー (source anchor)と言い，そこをクリックすると指定された情報に飛ぶ ようになります．
現在のページと同じウェブサーバ上にあるページの URL は，ホスト名などを省略することができます．
- Webサーバが起点とするディレクトリ（CNS では，SFC のホームページのあるディレクトリ）からの相対パス名を指定する方法：パス名の最初に「/」をつけます．
- 現在のページのあるディレクトリからの相対パス名を指定する方法：そのまま相対パス名を書きます．
<ul> <li><a href="next.html">同じディレクトリの別のファイル</a> <li><a href="/index.html">このサーバのトップへ</a> <li><a href="http://www.keio.ac.jp/index.html">慶應義塾のホームページ</a> </ul> |
画像の貼り付け特殊な文字 --- < > & "
HTMLでは「<」や「 >」は特別な意味を持っているのでそのまま書くことはできません．これらの文字を表示したい時は以下のように書きます．
| < | < |
| > | > |
| & | & |
| " | " |
| (半角スペース) | |
フォーマット済みテキストの指定 --- <pre>
空白や改行を入力した通りに表示してほしいことがあります． 例えば，以下のような HTML ファイルは，
明日，７時から飲み会やります．
│ ↑
│ 北
駅
│◎ここ
│
|
以下のように表示されます．
| 明日，７時から飲み会やります． │ ↑ │ 北 駅 │◎ここ │ |
これではどこに行けばいいのか分かりません．
このような時は pre を使います．pre 要素の内容は，文字幅が一定のフォントを使い，空白・改行もその通りに表示されます．
<pre> 明日，７時から飲み会やります． │ ↑ │ 北 駅 │◎ここ │ </pre> |
文章中の特定部分の指定 --- <div> <span>
文書の中のある部分をひとまとめにし，周りとは区別して扱いたいときに使うのがdiv要素とspan要素です．主に次ページ（→7.5 スタイルシート）で紹介するスタイルシートを使って色や文字の位置などを指定したい時に使います．
- span 要素：前後の文章とつながって同じ行に表示されます．
- div 要素：前後の文章とは独立した行に表示されます．
具体的な使用例などは次ページを参照してください．
コメント --- <!-- -->
プログラミングでは，プログラムの手順が書いたソースプログラムのファイルでの記述のうち，プログラムの実行に影響を与えない部分のことをコメントと呼んでいます．（詳しくはプログラミング入門などのプログラミング科目で学習します．）HTMLにも同じようにコメントというものが存在し，HTMLファイルには記述されているけれども，ブラウザでは表示させないということができます．
コメントは主に次のような時に使います．
- 自分がHTMLファイルを扱う上でのちょっとした注釈
- 自分が作成したWebページの表示の一部分をチェックしたい時，チェック対象外の部分をコメントで囲う（コメントアウトするといいます）
次の例のように<!-- -->で囲った部分がコメントになります．
<h3>第7回 HTML</h3> <!-- 授業タイトル --> <!-- ここから本文を書く --> <p> 今週はWebページを作成するために必要なHTMLについて学びます… ・ ・ ・ <h4>● 宿題</h4> <!-- 宿題 --> <p>提出は締め切りました．</p> <!-- 以下は古い情報 <p>提出期限は5月6日です．</p> --> |
この場合ブラウザでの表示は次のようになります．
第7回 HTML今週はWebページを作成するために必要なHTMLについて学びます… ・ ・ ・ ● 宿題提出は締め切りました． |
コメントの中に記述されたものはタグであっても無視されます．