Previous page Top page Next page
7.1 今週の目標 7.2 HTMLとは何か 7.3 HTMLファイルの作成 7.4 基本的なHTML要素 7.5 スタイルシート

7.4 基本的なHTML要素

HTMLでの要素にはそれぞれ文書構造上での役割が決められており，その役割に応じて使っていくことで意図する内容が伝わりやすいページを作ることができます．みなさんもこれから要素を用いてページを加工していく際は，それぞれの要素が持つ役割を意識しながら使うようにしましょう．

段落や見出し，表組みなどHTMLで表現する上での基本的な要素を以下に紹介します．これらで一通りの表現ができるようになります．このオンライン教材も原則的にここで紹介した要素のみを使って本文を作成しています．

注意注意
HTMLの要素にはこれ以外にも様々なものがありますが，中にはバージョンが古い時代のものであったり特定の環境でしか表示がうまくいかないものなどがあります．本科目ではHTMLを通して文章の構造化の学習を目標としています（詳しくは第9回でやります）ので，以後授業で作成するWebページは今週紹介した要素のみを用いるようにしてください．

改行と改段落 --- <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>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 SFC-CNSでの電子メール </h3>
<h3>1.5 SFC-CNSでの電子メール(2) </h3>

情報処理授業計画

情報処理は以下の全13回の構成を予定している

第0回 はじめに

0.1 はじめに

この科目の目的

WEBページ製作を題材とし，デジタルコンテンツ開発で必要とされる， 企画，設計，製作，評価能力の基礎を育成すること

背景

情報技術の発展に伴い，現在ではコンピュータやWEBを利用した様々な デジタルコンテンツが制作，提供されています．企業や大学等の大規模な組織の みならず，個人レベルにおいても様々…

0.2 CNS利用上のマナー

0.3 演習で使うコンピュータ

0.4 アカウント

第1回 CNSを使う

1.1 ログイン

1.2 コマンド

1.3 ブラウザ

1.4 SFC-CNSでの電子メール

1.5 SFC-CNSでの電子メール(2)

と表示されます．

注意注意
フォントの設定によっては，違うレベルの見出しが同じ大きさで表示されることがあります．あまりいろいろな見出しを多用すると，そのような設定で見ている人には文書の構成が分かりにくくなります．

● 練習問題

  1. 自己紹介という見出しをつけ，見出しの後に横線の区切りを入れた後，自己紹介文を一段落書きなさい．
  2. 先ほど作成した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>

と指定すると，以下のようになります．

  1. 履修申告をする．
  2. 講義に出席し課題をこなす．
  3. 期末試験を受験する．
  4. 成績が付き単位取得．
説明付き
説明付きの箇条書きとは， 辞書のように， 各項目が用語とその説明からなるようなリストのことです． dl 要素の中に dt 要素と dd 要素を交互 に書いていきます．例えば，
<dl>
<dt>WWW</dt>
<dd>World Wide Web の略</dd>
<dt>URI</dt>
<dd>Uniform Resource Identifier の略</dd>
</dl>

と指定すると，以下のようになります．

WWW
World Wide Web の略
URI
Uniform Resource Identifier の略

また，箇条書きは入れ子にして階層構造を持たせることもできます．次のように書くと，どのような表示になるでしょうか．ブラウザで確認してみると同時に，どのタグがどこで始まってどこで終わっているのかも確認しましょう．

<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>
コマンド機能
pwdカレントディレクトリの表示
cdディレクトリの移動
lsディレクトリの内容表示
<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>
    
	

	  
コマンド機能

	  
pwdカレントディレクトリの表示

	  
cdディレクトリの移動

	  
lsディレクトリの内容表示

	
  
	<table border="1">
	  <tr><th>旧省庁名</th><th>新省庁名</th></tr>
	  <tr><td>大蔵省</td><td>財務省</td></tr>
	  <tr><td>厚生省</td><td rowspan="2">厚生労働省</tr>
	  <tr><td>労働省</td></tr>
	  <tr><td colspan=2>外務省</td></tr>
	</table>
      	  <tr><td>通産省</td><td>経済産業省</td></tr>
旧省庁名新省庁名
大蔵省財務省
厚生省厚生労働省
労働省
外務省
通産省経済産業省

● 練習問題

自分の時間割表をHTMLで作りなさい．

他の情報へリンクを張る --- <a>

HTMLはハイパーテキストの一種なので，文書中に他の情報へのリンクを持たせることができます．他の情報へのリンクは a 要素で表し，href属性の値として，リンク先の情報の位置を示す URI を指定します．例えば，SFCのホームページへのリンクを自分のページの中に作る場合は，以下のようにします．

<a href="http://www.sfc.keio.ac.jp/">SFCのホームページ</a>

a 要素の内容をソースアンカー (source anchor)と言い，そこをクリックすると指定された情報に飛ぶ ようになります．

現在のページと同じウェブサーバ上にあるページの URI は，ホスト名などを省略することができます．

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

特殊な文字 --- &lt; &gt; &amp; &quot; &nbsp;

HTMLでは「<」や「 >」は特別な意味を持っているのでそのまま書くことはできません．これらの文字を表示したい時は以下のように書きます．

< &lt;
> &gt;
& &amp;
" &quot;
  (半角スペース) &nbsp;

フォーマット済みテキストの指定 --- <pre>

空白や改行を入力した通りに表示してほしいことがあります． 例えば，以下のような HTML ファイルは，

明日，７時から飲み会やります．

　　　　│　　↑
　　　　│　　北
　　　　駅
　　　　│◎ここ
　　　　│

以下のように表示されます．

明日，７時から飲み会やります． 　　　　│　　↑ 　　　　│　　北 　　　　駅 　　　　│◎ここ 　　　　│

これではどこに行けばいいのか分かりません．

このような時は pre を使います．pre 要素の内容は，文字幅が一定のフォントを使い，空白・改行もその通りに表示されます．

<pre>
明日，７時から飲み会やります．

　　　　│　　↑
　　　　│　　北
　　　　駅
　　　　│◎ここ
　　　　│
</pre>

文章中の特定部分の指定 --- <div> <span>

文書の中のある部分をひとまとめにし，周りとは区別して扱いたいときに使うのがdiv要素とspan要素です．主に次ページ（→7.5 スタイルシート）で紹介するスタイルシートを使って色や文字の位置などを指定したい時に使います．

具体的な使用例などは次ページを参照してください．

Previous page   Next page