Lecture/JouhouC2004/12th - KAWANO's PukiWiki Plus!

情報教育演習II 第12回

▲ ▼

前回の復習：HTMLファイルの作成（１）

HTML(Hyper Text Markup Language)
- Webページを作るためのコンピュータ言語
  - 文章の意味（役割）を指定「○○から××までを見出しにする」
  - 表示のしかたを指定「○○から××までを太字にする」
  - ハイパーリンクを設定「ほかのファイルへジャンプする」
タグ(tag)
- 文章に意味や表示の仕方を指定するために使うマークを使う
  - 「<」と「>」で囲まれた文字列（タグ名）
  - 開始タグ（<...>）と終了タグ（</...>）で囲んで指定する（一部終了タグのないものもある）
最低必要なタグ
- html -- HTMLファイルであること示す
- head -- HTMLファイルに関する情報
- title -- Webページのタイトル
- body -- Webページの中身（表示される部分）
文書の構造をあらわすタグ
- h1, h2, ..., h6 -- 見出し（6段階）
- p -- 段落
- br -- 改行
- address -- 署名や連絡先
文字の飾りをあらわすタグ
- b -- 太字
- i -- 斜体
- hr -- 水平線（区切り線）

▲ ▼

HTMLファイルの作成（２）

前回は、HTML(Hyper Text Markup Language)でWebページを作成しました。タグを使って、構造や意味を意識しながら、文書（Web）ページを作成しました。

今回は、構造以外に、配色やレイアウト、Webページとして必要な情報なども設定していきます。

▲ ▼

箇条書き

<ul>...</ul>、<ol>...</ol>
- 箇条書きを設定します。
- ulタグは番号なし、olタグは番号つきの箇条書きに使います。
<li>...</li>
- 箇条書きの中の項目を設定します。
- liタグは、次のようにul、olのタグの中の項目に使います。
```
 <ol>
   <li>ひとつめ</li>
   <li>ふたつめ</li>
 </ol>
```
<dl>...</dl>, <dt>...</dt>, <dd>...</dd>
- 説明つき箇条書きを設定します。
- dlタグの中に、項目名（dtタグ）とその説明（ddタグ）を書きます。
```
 <dl>
   <dt>項目1</dt>
   <dd>項目1の説明</dd>
   <dt>項目2</dt>
   <dd>項目2の説明</dd>
 </dl>
```

「〜ついて紹介します。</p>」のあとに、次のように入力しましょう。

 <ul>
   <li>「わたし」について</li>
   <li>「街」について</li>
   <li>「わたし」と「街」</li>
 </ul>

▲ ▼

リンク

<a href="...">...</a>
- 他のWebページにジャンプするリンクを設定します。
- 「href="」と「"」の間にリンク先のURLを指定し、「">」と「</a>」の間にリンクさせる文字を設定します。
- 次のようにすると、Yahoo! JAPANにジャンプします。
```
<a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a>
```
- 次のようにすると、メーラーが起動して、hoge@aaa.bbb.cc.jpへのメールを送るウィンドウが開きます。
```
<a href="mailto:hoge@aaa.bbb.cc.jp">メールはこちらへ</a>
```

「<hr>」の下の行に、次のように大学のサイトへのリンクを設定しましょう。

 <a href="http://www.hyogo-dai.ac.jp/">兵庫大学のページへ</a>

箇条書きの項目に、次のようなリンクを設定してください。

「わたし」について：prefile.htmlへのリンク
「街」について：town.htmlへのリンク
「わたし」と「街」：memory.htmlへのリンク

▲ ▼

画像の配置

画像データを配置するには、<img>要素を使います。

<img src="画像データの位置" alt="代替テキスト">
- src属性には、画像の位置（ファイルの場所やURL）を指定します
- alt属性には、画像が表示できない場合に表示させる説明文を設定します
  何も説明がない場合は「alt=""」とします

▲ ▼

表によるレイアウト

<table>...</table>
- テーブル（表）を設定します。
<table border="外枠の太さ">
- border属性で表の外枠の太さを指定します（0にすると枠線が見えなくなる）
<table width="幅">
- widht属性で表の幅を、ピクセル値かページの横幅に対するパーセント(%)で指定します
<tr>...</tr>
- テーブルのひとつの行を設定します。

テーブルのひとつのマス目（セル）を設定します。

 <table border="1">
   <tr><td>1</td><td>2</td><td>3</td></tr>
   <tr><td>4</td><td>5</td><td>6</td></tr>
 <table>

1	2	3
4	5	6

<table cellspacing="セルの間隔">
- セルとセルの間隔を設定します（セルと外枠の間隔も設定されます）
<table cellpadding="セル枠と内容との間隔">
- セルの枠と内容の間隔を設定します
```
 <table border="2" cellspacing="1" cellpadding="5">
```

<table>要素は、本来、表を表示するためのものですが、この機能を使って、Webページの内容をブロック状にレイアウトすることができます。

メインメニュー
サブメニュー	コンテンツ（内容）
署名

▲ ▼

色の指定

HTMLでは、文字や線の色などを指定できます。指定するには、色の名前や色の値を使います。

色の名前

代表的な色（16色）には、名前がつけられています。

black	gray	silver	white
red	yellow	lime	aqua
blue	fuchsia	maroon	olive
green	teal	naby	purple

色の値

光の三原色である、赤(R)緑(G)青(B)の強さを値であらわします。 16進数(0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F)を使い、RGBそれぞれを00〜FFまでの256段階で設定することができます。
blackは#000000、redは#FF0000、whiteは#FFFFFFのように、「#」のあとにRGBの値を設定します。

参考：とほほの色入門：色見本
- http://tohoho.wakusei.ne.jp/wwwcolor.htm

▲ ▼

文字の色・大きさの設定

文字の色や大きさを設定するには、<font>要素にcolor属性やsize属性を追加します。

<font color="指定した文字色"> 〜 </font>
- 文字色を設定します。
<font size="指定した大きさ"> 〜 </size>
- 文字の大きさを設定します。
- 1〜7の数字を使って指定することができます
- big（大きく）やsmall（小さく）という指定もできます
  - 大きさの設定については、ブラウザによって実際に表示される大きさは異なります
```
<font color="blue" size="6">
<font color="#FFCC00" size="small">
```

▲ ▼

ページ全体の文字色・背景色の設定

ページ全体の文字色や背景色を設定するには、<body>要素にtext属性やbgcolor属性を追加します。

<body text="指定した文字色"> 〜 </body>
- ページ全体の文字色を設定します。
<body bgcolor="指定した背景色"> 〜 </body>
- ページ全体の文字色を設定します。
text属性とbgcolor属性を組み合わせて使うこともできます
```
<body text="#000000" bgcolor="#FFFF00">
```

▲ ▼

Webページに必要な情報

▲ ▼

HTMLのバージョンの指定

HTMLにはいくつかのバージョンがあります。現在は「4.01」とバージョンで、バージョンによって書き方が多少異なります。

HTMLファイルの最初に次の行を入れて、このファイルがHTMLファイルであることとバージョンを指定します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 "http://www.w3.org/TR/html4/loose.dtd">

▲ ▼

文字コードの指定

コンピュータは世界中の国々で使われています。さまざまな国の言葉を処理できるように、文字コードという文字の一覧表をコンピュータ内部に持っています。日本語の文字コードには、おもにシフトJIS、JIS、EUCの３つがあり、Windowsで利用されているのは、シフトJIS、電子メールで利用されているのは、JISコードです。*1

もし、ブラウザが表示しようとする文字コードと、HTMLファイルで使用された文字コードが合わない場合、文字が正しく表示されない現象（文字化け）が起こります。

したがって、ブラウザが文字コードを正しく判断できるように、 HTMLファイルにどの文字コードを使用しているか書いておきます。それには、<head>タグの中で、<meta>タグを使ってHTMLファイルの文字コードを指定します。

<head>
  <meta http-equiv="content-type" content="text/html; charset=shift_jis">

また、HTMLファイルがどこの国の言葉で書かれているかも、設定することができます。

<html lang="ja">

▲ ▼

著作権表示と署名の更新

<address>タグなどを使って、署名や連絡先、更新日などは、必要があれば変更しておきましょう。とくに更新日は、Webページの鮮度をあらわすものなので、少しでも更新したら、日付を変更しておきましょう。

 <address>
 Copyright (C) 2004 Minoru Kawano. All rights reserved.<br>
 制作年月日: 2004-06-23; 更新年月日: 2004-07-07<br>
 <a href="mailto:自分のメールアドレス">自分の名前</a>
 </address>

KAWANO's PukiWiki Plus! - Lecture/JouhouC2004/12th