7.4 HTMLの基礎(1)

先々週,皆さんはindex.htmlというテストページを作成しました.これはみなさんのホームページのトップページに当たるものになります.今週はこれを加工していく方法を学びます.

前々回の講義の中で,HTMLは文章の構造を要素によって指定していくことで表現するものだと述べました.(→5.3 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>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」でした.このタイトルを変えるにはどうしたらいいでしょうか.「5.3 HTML HTML文書の構造」を参照しながら別のものに変えて,Mozilla で表示を確認しなさい.
    変更した結果をブラウザで確認するには,変更を保存した後,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 ファイルは,

明日,7時から飲み会やります.

    │  ↑
    │  北
    駅
    │◎ここ
    │
      

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

明日,7時から飲み会やります.     │  ↑     │  北     駅     │◎ここ     │

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

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

<pre>
明日,7時から飲み会やります.

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

● 宿題

次週までに,制作するページの企画を考えてきてください.次週企画書としてWEBページ化します.項目としては,ページの目的(ウリ),対象者,ページに盛り込む内容,制作完了までのスケジュールを含んでください.画像などを用意して頂いても構いません.なお,制作したWEBページは全世界に公開されます.法律を侵す内容(特に,著作権等),公序良俗に反する内容,その他公開が適切でないと考えられる内容を含むページを企画しないようにして下さい.