06年度秋学期情報基礎演習第十回
XHTMLその1・Web構築実習
XHTMLを利用した情報発信
自分で調べたり、まとめたりした情報をWWWを通じて発信するという機会が多くなってきました。そのためにはウェブページを構築して、情報を書き記す必要があります。ウェブページを作成するには、HTMLというマークアップ言語を利用する必要があります。HTMLにはいくつかの規格があります。
この講義では、比較的最近の規格であるXHTML1.0を用いて、ウェブページを作成することとします。XHTML1.0は文書の構造を示すための規格です。また、見栄えに関する情報を取り扱うカスケーディングスタイルシート(CSS)という仕組みを併用することによって、より見やすく、扱いやすいウェブページの構築を目指します。
雛形の活用
最初からすべてのルールを説明して、「さぁやってみましょう」というのは簡単なのですが、それでは途方に暮れてしまうことでしょう。そこで、授業用に簡単な雛形を作成してみました。この雛形を活用することで、自分の発表するべき内容に集中することができます。
雛形をダウンロードするためには、雛形を右クリックで「対象をファイルに保存」として、自分のUSBメモリなどに保存してください。
今ダウンロードしたファイルは、圧縮されていますので、解凍する必要があります。sample.lzhをダブルクリックすると、フォルダの中にsample.htmlというファイルがあります。このファイルが雛形の本体です。自分のUSBメモリなどの課題作業用フォルダに保存しておいてください。
雛形の複製
無事、sample.htmlファイルを利用できるようになりましたか?
この雛形のファイルを、必要となるページ数だけ複製する必要があります。ファイルの上で右クリックし、「コピー」を選びます。続いて、「貼り付け」を繰り返し、必要なだけファイルの複製を行ってください。
ファイル名の変更
複製された雛形は、「コピー〜sample.html」という名前になっていると思います。これではウェブページとして利用できませんので、ファイル名を変更しましょう。名前を変更したいファイルの上で右クリックし、「名前の変更」を選びます。新しいファイル名を入力し、リターンキーを押して確定しましょう。ただし、利用できるファイル名は、半角英数で、拡張子が「.html」となっているものです。たとえば自己紹介であれば、「me.html」であるとか、歴史に関するファイルであれば「history.html」というように、簡潔に内容がよくわかる名前にしてください。
すべてのファイルに適切な名前がつけられましたか?
では最後にもうひとつ雛形からファイルを複製し、index.htmlと改名してください。このファイルが目次兼表紙のような役割になります。
準備はできましたね? それではそれぞれのページを編集していきましょう。それにはXHTML1.0というルールを用いて文章を記す必要があります。まずは以下の説明を読んでください。
XHTML1.0の基本ルール
XHTML1.0を用いてウェブページを構築する訳ですが、まずは基本的なルールを確認します。XHTML1.0では、以下のようなルールがあります。
- タグと呼ばれる仕組みによって文書構造を示す
- 要素が書かれたで内容を必ず開始タグと終了タグで挟む(ただし、省略形があるものも存在する)
- 具体的には<要素>内容</要素>という形になる
- 全ての要素は英数小文字で書き表す
- 細かい属性については開始タグの中に書き入れる
これらは実際に実習で取り扱いながら習得してもらいます。
HTML文書の基本構造
基本的なHTML文書の構造は、以下のように全体を<html> </html> で囲い、その内側に<head></head>部分と、<body></body>部分を持つという形になります。
<html>
<head>
そのページの基本情報
</head>
<body>
そのページの本文
</body>
</html>
しかし実際にはこれほど単純ではなく、もっと多くの要素を記す必要があります。
HTML文書に必要な情報
この講義ではXHTML1.0という規格でHTMLの基礎を習得することを目的とします。この規格では、前述の情報のほかに、以下のような情報が必須となります。
文書型宣言
文書型宣言は、どんな枠組みでHTML文書を作成するかという宣言です。XHTML1.0では以下のように記します。
<DOCTYPE htmk PUBLIC “-//W3C/DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
名前空間の宣言
利用するタグがどのような種類のものであるかを示すために、名前空間の宣言を行います。これはhtmlタグの中に書き込みます。
<html xmlns="http://www.w3.org/1999/xhtml">
ここまではXHTMLでHTML文書を作成するために必須の情報となります。本講義ではひな形のファイルにすでにこれらの情報が記されていますので、いじる必要はありません。
<head> </head>内にページの基本情報を記述する
<head> </head>で囲われた部分は、そのページの基本情報が記される部分です。ここにはさまざまな情報を書き記すことができますが、ここでは簡易的に必須となるいくつかの要素について解説を行います。
外部スタイルシートの指定
<link rel=“stylesheet” type=“text/css” media=“screen” href=“./style.css” />
ここでは公開用フォルダに外部スタイルシートが直接配置されることを想定しています。
タイトルの指定
ユーザが<head> </head>内で、もっとも意識する要素は、ページのタイトルでしょう。
タイトルはそのページを代表する文字列にするようにします。
<title>タイトルとなる文字列</title>
<head> </head>部分で皆さんが変更しなくてはならない部分はここだけです。必ずファイルごとに適切なタイトルをつけてください。
本文を書く
<body>タグで囲われた中に本文が入ります。本文は一つまたは複数のブロックレベル要素からなります。文書においてブロックレベル要素は、その名の通り、積み重ねられたブロックをイメージすると理解しやすいでしょう。
ブロックレベル要素は文書を構成する基本的な要素を宣言するものだと思ってください。見出しや段落、箇条書き部分、表組み部分などは、どれもブロックレベル要素です。これらのブロックが積み重ねられたものが、ひとつの文書になる訳です。
例としては以下のようになります。
[****ブロックベル要素1****](大見出し)
[****ブロックベル要素2****](段落)
[****ブロックベル要素3****](段落)
[****ブロックベル要素4****](中見出し)
[****ブロックベル要素5****](段落)
文書はこのように複数のブロックレベル要素からなり、その要素要素間には改行が入ります。
雛形にはいくつかのブロック要素を構成するタグが記入されています。自由に改変して表示を確認しましょう。
ブロックレベル要素を構成するタグ
見出しを構成するタグ
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
見出しの大きさによって使い分ける。<h1>大見出し</h1>は一つの文書に一回だけしか使ってはいけません。
段落を構成するタグ
<p>
もっとも多く使われるタグでしょう。本文にあたる文章は、多くの場合複数の段落からできています。それぞれの段落の前後には<p>と</p>を入れましょう。
引用段落を構成するタグ
<blockquote>
本文の中に、書籍やウェブページからの引用をおこなう場合には、ほかの文章と違うことを明確にし、引用であることをはっきりとさせなくてはなりません。そのためにはこのタグを用います。
箇条書き部分を構成するタグ
<ol>
<ul>
箇条書きの要素を構成するタグ
<li>
セパレータを構成するタグ
<hr>
連絡先部分を構成するタグ
<address>
表組み部分を構成するタグ
<table>
<dr>
<td>
どんどん文章を書こう
ここまでが大まかな文書の構成要素です。文章をどんどん書いて、必要な説明をすべて終えてください。次に、リンクを設定したり、画像を挿入したりという作業がありますが、それらは「インライン要素」といって、文章の一部に属性を付け加えるというタイプのタグです。したがって、まずは文章が全体的に完成されていない限り、設定をすることができません。
この時点でそれぞれのファイルに、すべての文章が完成していることが前提になります。
インライン要素
強調
<em>
<strong>
ハイパーリンク
ハイパーリンクはWebの構成上、重要な要素です。リンクなしにはWebページは成立しないといってもよいほどです。ハイパーリンクは、下のようなタグを使って作成します。
URIの部分には、完全なURIを用いた「絶対リンク」と、そのファイルから相対的なファイルの位置を記す「相対リンク」があります。
- 絶対リンク
絶対リンクでは、URIの部分に、http:// で始まる完全なURIを入力します。たとえば、Yahoo! Japanにリンクをおこないたい場合には、http://www.yahoo.co.jp/ と入れます。
- 相対リンク
相対リンクは、そのファイルから見て、リンク先が同一サーバ上のどの位置にあるかを記述したものです。この場合、「ファイルから見てどのような相対的な位置にあるか」ということが重要になります。
具体的には、同一フォルダにある場合には、「./」という記号を用いて表現します。たとえば、
<a href=“./A.html”>同じフォルダにあるAというHTMLファイル</a>
という具合です。
参考文献
- 作者: 神崎正英
- 出版社/メーカー: 毎日コミュニケーションズ
- 発売日: 2000/11
- メディア: 単行本
- 購入: 5人 クリック: 50回
- この商品を含むブログ (46件) を見る
- 作者: 益子貴寛
- 出版社/メーカー: 秀和システム
- 発売日: 2005/07/07
- メディア: 単行本
- 購入: 17人 クリック: 532回
- この商品を含むブログ (102件) を見る
課題
index.htmlを設置し、最低限必要なhtmlファイルを配備。編集。余力があればindex.htmlは英語版も作ること。