Webページ１

Webページはさまざまな用途で使われています。
今日では、WebページはWebデザイナーに依頼して作ってもらうのが普通なので、自分でWebページを作れるようになる必要はありません。
しかし、Webページがどのように作られているのかまったくわからないと、仕事を依頼するときにうまくいかないことがあります。
少なくとも、Webデザイナーとコミュニケーションが取れる程度にはWebページがどのように作られているのかを知っておく必要があります。
そこで、Webページがどのように作られているのか、初歩的な部分ですが、実習をながら学んでいきたいと思います。

HTMLとは

HTMLは、文書をタグと呼ばれる装飾子で囲んだ表現法です。

例

彼はそれゆえに<font color="red">赤い彗星</font>として恐れられた。

と書くと、

彼はそれゆえに赤い彗星として恐れられた。

と表示ます。
”<font color="red">、</font>がタグです。
これは、”<font color="red">、</font>で囲まれた部分を赤で表示しろ”ということを指定しています。

HTMLで書いた文章を、Webサーバに置くと一般に公開されますが、自分のコンピュータで見るだけなら、サーバに置く必要はありません
。これについては、あとで実習します。

基本構造

HTMLの最も基本となる書き方です。

<html>←お約束
<head>←ヘッド部（ヘッダー）開始

ここは、このページ全体に関する情報が入ります。
内容は表示されません

</head>←ヘッド部終了
<body>←本文開始

ここは、本文です。
この領域に書かれたものが表示されます。

</body>←本文終了
</html>←お約束

注意

HTMLは、年々使える機能が増えてきました。
そういった中で、一つ問題になったのが、タグが、文章の内容表現なのか、レイアウト表現なのか、という混乱です。
たとえば<head></head>は、これにはさまれた部分がヘッド部であることを示す”内容表現"のタグです。
一方、<center></center>などは、これにはさまれた部分を、画面中央に配置せよという"レイアウト”のタグです。
しかし、たとえば<p></p>などは、本来は、これにはさまれた部分が段落であることを示す”内容表現"のタグだったにもかかわらず、実際は”一行あけた改行”と、レイアウト表現のために使われることがありました。
また、<blockquote></blockquote>は、本来は、これにはさまれた部分が、他からの引用分であることを示す”内容表現"のタグだったにもかかわらず、実際は”この部分を少し下げる”という機能のレイアウト表現のために使われることもありました。
blockquateを使うと、下↓のように左が少し空きます。

最近では、タグは内容表現に用いて、レイアウトはcss（カスケーディング・スタイル・シート）という技で表現するのが主流です。
しかしタグとCSSの使い方厳密にわけて現代流の正しいやりかたを説明すると、複雑になりすぎて本質的なところがわかりにくくなってしまう可能性があります。
そこで、ここでは簡単のため、少し前の古いやりかたを説明しています

ヘッド部の書き方

ヘッド部の標準的な書き方です。

<head>←ヘッド部（ヘッダー）開始

<meta	ここは文章全体の設定です。漢字コードの種類や、cssなどの拡張機能を使うかなど、いろいろなことを宣言します。なくても問題ありませんがなるべくつけましょう。	>←metaは</meta>なし

<title>	ここは文章全体の表題です。ブラウザーの上部に表示されたり、お気に入り登録に使います。なくても問題ありませんがなるべくつけましょう。	</title>←タイトル終了

<style>	もし、cssを使うなら、ここにレイアウト設定をします。	</style>←スタイル終了

<script>	もし、スクリプトを使うなら、ここにスクリプトを書きます。	</script>←スクリプト終了

</head>←ヘッド部終了

例１（最小限。これでも動くが、もう少し書きましょう）

<head>
</head>

例２（これぐらい書いてあると、かっこいい）

<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>情報処理入門</title>
</head>

例３（cssを使うときは、こんなふうに書く）

<head>
<meta http-equiv="Content-Type" content="text/css; charset=shift_jis">
<title>情報処理入門</title>
<style type="text/css">

</style>
</head>

本文

画面全体やレイアウト関連

画面の背景色を変える	<body bgcolor="色">

例	<body bgcolor="yellow">

表示	<body bgcolor="yellow">

背景色を画像にする	<body background="画像ファイル名">

例	<body background="back-a.jpg">

表示	<body background="back.jpg">

改行する。

<br>

一行あけて改行する（古い方法)	<p>

	（本当は、<p>は<p></p>ではさんで、段落を表すものです。だから現代では間違った使い方とされています。)

一行あけて改行する。
(現代的な方法)

画面の中央に配置 (古い方法)	<center>

例	<center> この部分を中央に配置 </center>

	この使い方は、最近ではあまり推奨されない

画面の中央に配置現代的な方法	<p align="center">

例	<p align="center"> この部分を中央に配置 </p>

	まず段落を表すpを使い、「この段落を中央揃えで表示」というようにする。

文頭を下げて配置 (古い方法)	<blockquote>

例	<blockquote> この部分を下げて配置 </blockquote>

	blockquoteは、本来は引用部分を表すタグである。

文頭を下げて配置 (現代的な方法)	<p style="margin-left:下げる量">

例	<p style="margin-left:40pt"> この部分を下げて配置 </p>

複雑なレイアウト	<table>の項を参照

	表の枠線をかかないで、そこにはめ込む。

仕切り線	<hr>

仕切り線（細かい設定つき）	<hr size="線の太さ" color="線の色" width="線の長さ align="線の位置"">

例1	<hr size="5" color="blue" width="80%">
例2	<hr size="3" color="#aa8855" width="300" align="right">

文字の装飾

見出し	<h 文字の大きさ（１～６を指定）>

例	<h1>これがh1の文字です</h1>

表示	これがh1の文字です

	これで見出しに限らず、文字の大きさを変えられるが、本来の意味は「見出し」である。本文中では次の<font>タグを使う

凝った見出し	<h 文字の大きさ（１～６を指定）　align="文字の位置" style="color:文字色;background-color:背景色>

例	<h1 align="right" style="color:white;background-color:black">これがh3の文字です</h1>

表示	これがh3の文字です

	これで見出しに限らず、文字の大きさを変えられるが、本来の意味は「見出し」である。本文中では次の<font>タグを使う

文字装飾	<font size="文字の大きさ（１～７）" color="文字の色" face="フォントの種類">

	size=、color=、face=などはすべて書く必要はありません。必要なものだけ選んで書くことが出来ます。

例1	<font size="5" color="blue" face="ＭＳ明朝">明朝体の文字</font>

表示1	明朝体の文字

例2	<font size="7" color="green" face="HGP行書体">行書体の文字</font>

表示2	行書体の文字

太字	<b>

例	<b>太字</b>

表示	太字

斜体	<i>

例	<i>斜体</i>

表示	斜体

下線	<u>

例	<u>下線</u>

表示	下線

上付き文字	<sup>

例	m<sup>2</sup>

表示	m²

下付き文字	<sub>

例	H<sub>2</sub>O

表示	H₂O

表

表開始、表終了	<table border="線の幅> </table>

	線の幅は、省略した場合は０。（表示しない）

段開始、段終了

箱開始、箱終了

書き方

<table border=1>

<tr>	<td>箱１</td>	<td>箱２</td>	<td>箱３</td>	</tr>
<tr>	<td>箱４</td>	<td>箱５</td>	<td>箱６</td>	</tr>

</table>

表示

箱１	箱２	箱３
箱４	箱５	箱６

凝った表

箱開始、箱終了

書き方

<table border=1>

<tr>	<td width=200 align="center">箱１</td>	<td width=100 align="right">箱２</td>	<td bgcolor="yellow">箱３</td>	</tr>
<tr>	<td height=100>箱４</td>	<td align="right" valign="bottom">箱５</td>	<td valign="top">箱６</td>	</tr>

</table>

箱１	箱２	箱３
箱４	箱５	箱６

表を使ったレイアウト

例えば、こんなレイアウトは

第一期入会		中澤裕子、石黒彩、飯田圭織、安倍なつみ、福田明日香
第二期入会		保田圭、市井紗耶香、矢口真里
脱退		福田明日香
第三期入会		後藤真希
卒業		石黒彩
第四期入会		吉澤ひとみ、石川梨華、加護亜依、辻希美
脱退		市井紗耶香
卒業		中澤裕子
第五期入会		高橋愛、紺野あさ美、小川麻琴、新垣里沙
卒業		後藤真希
第六期入会		藤本美貴、亀井絵里、田中麗奈、道重さゆみ
卒業		保田圭
卒業		安倍なつみ
卒業		辻希美
卒業		加護亜依
卒業		飯田圭織
脱退		矢口真里
第七期入会		久住小春
卒業		石川梨華
卒業		紺野あさ美
卒業		小川麻琴
第八期入会		光井愛佳、ジュンジュン、リンリン
卒業		吉澤ひとみ
脱退		藤本美貴
卒業		久住小春

こんなふうに、表を使って、枠線を消すことで表現できる。

第一期入会		中澤裕子、石黒彩、飯田圭織、安倍なつみ、福田明日香
第二期入会		保田圭、市井紗耶香、矢口真里
卒業		福田明日香
第三期入会		後藤真希
卒業		石黒彩
第四期入会		吉澤ひとみ、石川梨華、加護亜依、辻希美
卒業		市井紗耶香
卒業		中澤裕子
第五期入会		高橋愛、紺野あさ美、小川麻琴、新垣里沙
卒業		後藤真希
第六期入会		藤本美貴、亀井絵里、田中麗奈、道重さゆみ
卒業		保田圭
卒業		安倍なつみ
卒業		辻希美
卒業		加護亜依
卒業		飯田圭織
卒業		矢口真里
第七期入会		久住小春
卒業		石川梨華
卒業		紺野あさ美
卒業		小川麻琴
第八期入会		光井愛佳、ジュンジュン、リンリン
卒業		吉澤ひとみ
脱退		藤本美貴
卒業		久住小春

画像の挿入

画像を挿入する	<img src="画像ファイル名">

例	<img src="girl.gif">

表示結果

凝った画像の挿入	<img src="画像ファイル名" width="画像の幅 height="画像の高さ">

例	<img src="girl.jpg" height=80 width=70 >
表示結果

（注）ブラウザーで表示する画像ファイルは、原則、jpeg(jpg)、gif、png形式だけである。
実際はbmp（ビットマップ）、tiff、pictなども表示されてしまうことがあるが、これらがうまく表示されるか否かはWindows、 Macintosh、UNIX、LinuxなどのOS、あるいはIE、Firefox、GoogleChromeなどのブラウザーに依存するので、好ましくない。

リンク

リスト

リスト開始、終了	<ul> </ul>

項目開始、終了	<li> </li>

書き方	<ul> <li>項目１</li> <li>項目２</li> <li>項目３</li> </ul>

表示	項目１項目２項目３

番号付きリスト開始、終了	<ol> </ol>

項目開始、終了	<li> </li>

書き方	<ol> <li>項目１</li> <li>項目２</li> <li>項目３</li> </ol>

表示	項目１項目２項目３

凝った書き方
<ol start="開始番号" type="表示タイプ">

type="1"	アラビア数字
type="a"	小文字アルファベット
type="A"	大文字アルファベット
type="ｉ"	小文字ローマ数字
type="I"	大文字ローマ数字

HTMLの作成

リンクを張る	<a href="リンク先">クリックする場所</a>

例（同じサーバにあるばあい）	<a href="header.html">ヘッダー情報</a>
例（違うサーバにあるばあい）	<a href="http://www.chubu.ac.jp/">中部大学</a>
例（文字ではなく、画像をクリックするばあい）	<a href="http://www.chubu.ac.jp/"><img src="logo.gif"></a>

WWW