トップへ
田村研究室

インターネット利用技術演習

2009年度

メニュー

目次

2009
4/27

Webページの記述方法

Webページに記述できるもの

Webページ文書はHTML形式と呼ぶ文法に従って記述し，図やハイパーリンクをページに含めることができる

  • HTMLとは: Hyper Text Markup Languageの略でWebページ作成用の記述言語

ただし，前回説明したとおり，HTMLはIEなどのブラウザ側が解釈して表示するため，同じHTML記述であってもWebブラウザ次第で見た目が微妙に変化する．Webページが表示される際のフォントや字の大きさなどの見た目はブラウザ側で決定され，すべての人に対して必ず自分と同じように表示されているわけではない点に注意して，Webページ作成を行うこと．

HTMLファイルのファイル名

HTMLで記述した内容を保存するファイル名は，URLの一部として使用されることになる．このため他国からもアクセス可能なようにファイル名に日本語の文字は使用できない．ファイル名には，アルファベット・数字・記号「_」か「-」だけを使用すること．

◎　abc_123.html 123-xyz.html
×　なんとか123.html 123カントカ.html

HTMLタグの書き方

HTMLでは < と > の間に書かれたものを，HTMLタグと呼び，書式を指定するための特別な記号として扱う．タグは普通2つが対になっており，<tagname>と</tagname>の2つで囲まれた部分が，tagnameで指定された意味を持つ．ただし例外もあり，<br/>，<hr/>はそれ1つだけで改行，区切り線を意味する。このため>の前に/を書く点に注意．なお，タグでは大文字と子文字を区別しないため，どちらを使って書いても構わないが，最近の記法では小文字を推奨する．

HTMLファイルの基本構成

もっとも単純なWebページを次に示す．

<html>
　<head>
　　<title> タイトル </title>
　</head>
　<body>
　　本文
　</body>
</html>

HTMLの基本構成として，文書全体を<html>タグと</html>を囲っておく．文書全体がHTML形式で記述されていることを表す．そのHTML記述は，大きく二つの部分から構成される．ひとつは<head>と</head>からなるヘッダー部分と，<body>と</body>からなる本体部分である．

ちなみに，対応するタグの対応をとりやすいように，インデントを工夫することを強くすすめる．例えば，<title>タグは，<head>タグよりも一段下げて記述してあり，この部分がヘッダー部分に含まれていることをわかりやすく表示している．

<head>:文書のヘッダ(文書情報)には，その文書に関する情報を記入しておく．この例では，<title>:文書のタイトルとして，ブラウザ上部のタイトル・バーに表示する項目文が指定されている． 

<title>ページのタイトル</title>

<body>:ページ本体の基本設定には，その文書の本体を記述する．次のようなオプションの記述を追加すれば，ページ全体の文字色や背景色を変更できる．

<body text="#rrggbb" link="#rrggbb" vlink="#rrggbb"  alink="#rrggbb" bgcolor="#rrggbb" background="画像ファイル名">

<body>の各オプション項目の意味を次に示す．

  • text 文字色の指定
  • link リンク色の指定
  • vlink 行ったことのあるリンク色の指定
  • alink リンクをマウスでクリックしたときの色の指定
  • bgcolor 背景色の指定
  • background 背景に貼る画像ファイルの指定

色の指定方法

HTMLにおいて，色の指定方法は赤(Red)，緑(Green)，青(Blue)の光の3原色を2桁の16進数で指定するか，色のキーワードを指定する．

#000000 ■黒 #0000ff ■青
#ffffff ■白 #ffff00 ■黄
#ff0000 ■赤 #ff00ff ■紫
#00ff00 ■緑 #00ffff ■青緑

00〜FFまで256段階あるので256×256×256で約1677万色を指定可能．ただし実際にはクライアント側のディスプレイの色数に制限される．Webページ作成時には、代表的な色だけを使った方が安全．

代表的な色は16進数指定ではなく、例えば，"black"，"blue"，"white"，"yellow"，"red"などと指定可能

<body>タグのオプションではページ全体の色を指定できるが，そうでなく特定の文字だけに着色したい場合もある．それは次回のCSSで意味を説明するが，次のように色をつけたい部分だけを<span></span>で囲って，指定する．

HTML記述「次の文字<span style="color: #4444ff">ここ</span>だけ色を変える」
実際の表示「次の文字ここだけ色を変える」

色のサンプル

ffffff ■ 000000 ■
ff0000 ■ 880000 ■ 440000 ■
00ff00 ■ 008800 ■ 004400 ■
0000ff ■ 000088 ■ 000044 ■
ffff00 ■ ff8800 ■ ff4400 ■ ff00ff ■ ff0088 ■ ff0044 ■
88ff00 ■ 888800 ■ 884400 ■ 8800ff ■ 880088 ■ 880044 ■
44ff00 ■ 448800 ■ 444400 ■ 4400ff ■ 440088 ■ 440044 ■
00ffff ■ 00ff88 ■ 00ff44 ■ 0088ff ■ 008888 ■ 008844 ■
0044ff ■ 004488 ■ 004444 ■
ffff88 ■ ffff44 ■ ff88ff ■ ff8888 ■ ff8844 ■ ff44ff ■ ff4488 ■ ff4444 ■
88ff88 ■ 88ff44 ■ 8888ff ■ 888888 ■ 888844 ■ 8844ff ■ 884488 ■ 884444 ■
44ff88 ■ 44ff44 ■ 4488ff ■ 448888 ■ 448844 ■ 4444ff ■ 444488 ■ 444444 ■

様々なHTMLタグ

書式指定するための様々なタグが存在する．代表的なものをいくつか紹介する．

改行・段落・区切り線

HTMLではエディタ内での改行しても無視される．改行を指示するには 

何か文章<br/>

段落を指定すれば、段落前に少し空白が入り改行される

<p>なにかながーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーい文章</p>

段落が変わったところなどで，区切りの横線を入れたい場合，<hr/>を使用する．

            <p>段落1</p>
            <hr/>
            <p>段落2</p>

段落1

段落2

見出し

文書中の見出し作成には，<h1> hの次の数字が文字の大きさを表し，<h1>から<h6>まで数が大きくなるにしたがって文字は小さくなる．見出しは本文より太いフォントで表示するが、日本語フォントが少ないマシンでは差が出ないこともある．

<h1>大見出し</H1>

大見出し
<h2>中見出し</H2>

中見出し
<h3>小見出し</H3>

小見出し
<h4>見出し</H4>

見出し

ハイパーリンク

これはHTMLの最大の特徴として文書中に他の情報へのリンクを持たせる機能である．アンカー(anchor)を意味する<a>タグを用いて，以下のどちらかのように記述する．

(1) <a href="URLの指定">リンク部分の文字</a>
(2) <a href="ファイルの名前">リンク部分の文字 </a>
表示例: リンク部分の文字

(1)はリンク先の情報のURLを指定する．例えば，googleへのリンクを作成する場合には

<a href="http://www.google.com/">Googleへ</a>

(2)はリンク先の情報が，ページデータと同じWWWサーバ上にある場合の省略記法．ただしWebページとして公開できるディレクトリ(フォルダ)の中のファイル以外は参照できないので注意

例として，リンクしたい先のページのファイル名がexplain.htmlで，それが今記述しているHTMLファイルと同じディレクトリに保存されているとすれば，以下のように指定できる．

説明は<a href="explain.html">ここ</a>を読んでください。

<a>によって指定するリンク先の情報は，HTMLのファイルに限らず，画像，音声などのファイルでもよい．リンク先としてテキストファイルと同じようにそれらのファイルを指定することができる．

例えば，JPEGの画像ファイルgraph.jpgへのリンクを持たせるには以下のように書く．

                  <a href="graph.jpg">画像を見たい人はここをクリック</a>
表示例: 画像を見たい人はここをクリック

これで，リンクをクリックすると，リンク先の画像だけが表示される．

表示，再生できるファイル形式の種類は，WWWシステムとして規定されているわけではない．各コンピュータの環境によって異なる．一般的には以下のような形式が使われるので，これらのファイル形式で提供するように心がけること．

  • 画像 GIF，TIFF，JPEG，PNG形式
  • 音声 MPEGaudio, MP3, Wave形式
  • 動画 MPEG，QuickTime, WindowsMedia,Flash形式

特に，画像形式では次のような特徴がある．

  • GIF形式…256色限定だが，可逆圧縮のため綺麗な画像，漫画・イラスト向き
  • JPG形式…高圧縮でファイル容量が少なくてすみ，通信負荷が軽い．色数制限なしで写真向き．ただし非可逆圧縮なため画像がやや荒れることがある．特に漫画・イラストに使用するとすごく汚くなる
  • PNG形式…色数制限なしで，可逆圧縮なため，画像も綺麗．漫画・イラストから写真までなんでもOK．ただしファイル容量が大きくなるため，通信に負荷がかかり，転送時間が長くなる．

これら画像形式は，「画像変換ソフト」を用いて保存する画像形式を変更することができる

インライン・イメージ

ページ内に直接組み込んで表示させる画像をインライン・イメージと呼ぶ．

 <img src="inline.gif"/>

この例はinline.gifという画像ファイルを文書中に張り込んでいる．このタグは<br/>や<hr/>と同様に <img/>1つだけの単独で使われる．

画像ファイルの作成方法は様々なものがある．写真のデータはスキャナーから取り込まれたり，最近ではデジタルカメラから取り込まれたりする．絵やロゴのようなものは各種専用ソフトウェアから作成する


<img src="inline.gif">

とすると画像の下側に文章が揃えられる． 

 <img align="TOP" src="inline.gif">

とすると上部で揃えられる．

      <img align="MIDDLE" src="inline.gif">

とすると真中で揃えられる．

画像ファイルはテキストの情報と比べ，データ量が大きいため，大きな画像ファイルや多数の画像ファイルをインライン・イメージとして使用すると，そのページにアクセスするまでに時間がかかったり，不必要にネットワークを混雑させたりする．インライン・イメージは要所要所で使うようにしてむやみに大きな画像を使うことは避けるべきである．

インライン・イメージにリンクを設定する

<a href="another.html"><img src="anchor.gif"></A>

この場合，インライン・イメージとして表示されている anchor.gifという画像がanotherinfo.htmlというファイルへ のリンクとして設定されている．

箇条書

             <ul>
              <li> Item1 </li>
              <li> Item2 </li>
             </ul>

画面上の表示

  • Item1
  • Item2

HTMLでは番号なし，番号つき，説明つきの3形式の箇条書きが指定できる．上の例は番号なしの箇条書の例である．番号つきの箇条書にするには，<UL>の代わりに<OL>を利用すると，各要素の前に自動的に番号が割り振られるようになる．

説明付の箇条書とは辞書のように1つの要素が用語とその説明からなるようなリストである．以下のように使う．

            <DL>
             <DT> HTML </DT>
              <DD> Hyper Text Markup Languageの略。</DD>
             <DT> URL </DT>
              <DD> Uniform Resource Locatorの略。 </DD>
            </DL>

画面上の表示

HTML
Hyper Text Markup Languageの略。
URL
Uniform Resource Locatorの略。

なお，箇条書は<ul>，<ol>，<dl>を組み合わせて入れ子の階層構造を持たせることもできる．

アドレス

            <ADDRESS>
            <a href="mailto:tamura@nit.ac.jp">tamura@nit.ac.jp</a>
            </ADDRESS>

画面上の表示

tamura@nit.ac.jp

<ADDRESS>はHTMLの文書内に，その文書の作者や連絡先などを示すのに使用される．昔はページの最後に管理者のメールアドレスを記述するのに利用されることが多かったが，悪意あるものが，この情報をプログラムによって自動的に収集し，SPAMメールのターゲットとするようになり，その対策のためあまり使用されなくなった．例えば，メールアドレスを書き込んだ画像データを作成して，インライン画像データとして表示するような対策がとられている．

フォーマット済みテキスト

各文字の幅が等しいフォントを使って，空白やタブ，改行，空行などを正確に表示したい場合，<PRE>マークを使用する．プログラムのリストを表示させる場合などに利用できる．

            <PRE>
             #include <stdio.h>
            
             void main() {
                  printf(``Welcome!!'');
                  exit(0);
             }
            </PRE>

書体の設定

以下のような書体の指定ができる．

  • イタリック(斜体)
    • <I>text</I>はtextを イタリック体にする．
    • <EM>text</EM>は重要範囲を示すときに使う．
    • <CITE>text</CITE>は引用文に対して使う．
    • <DFN>text</DFN>は定義を示すときになどに用いる．
  • ボールド(太字)
    • <B>text</B>はtextを ボールド体にする．
    • <STRONG>text</STRONG>は強調するときに使う．
  • 等幅フォント
    • <TT>text</TT>は表示を等幅フォントにする．
    • <CODE>text</CODE>はプログラムを載せるときなどに使う．
    • <SAMP>text</SAMP>は例を示すときなどに使う．
    • <KBD>text</KBD>はキーボード上のキーを示すときに用いる．
  • その他
    • <SUP>text</SUP> 上付き添字
    • <SUB>text</SUB> 下付き添字

●その他詳細な書式設定について●

以上の説明以外に，特定の一部分の文字だけに色を付けることや，段落のセンタリングなど一般のワープロで可能な書式が他にも考えられる．細かい書式はすべてCSSという仕組を利用して行われる．CSSについては後で説明する．

特殊文字

ASCII文字のうち，< と > と & の3つの文字はHTMLでは特別な意味を持つので，文書中にそのまま使用できない．この3つの文字をHTMLによる文書で利用したいときには，それぞれ，代わりに以下のように記述する．

  • < : &lt;
  • > : &gt;
  • & : &amp;

この他にも次のような特殊文字を利用することができる．

  • © : &copy; (著作権)
  • ® : &reg; (登録商標)
  • ¢ : &cent; (セント)
  • ° : &deg; (度)
  • « : &laquo; (不等号)
  • µ : &micro; (ミクロン)
  • · : &middot;(中点)
  • ¬ : &not; (否定・継続行)
  • ¶ : &para; (パラグラフ(節・段落))
  • ± : &plusmn;(プラス・マイナス)
  • &pond; : &pound; (ポンド)
  • »; : &raquo; (不等号)
  • § : &sect; (章)
  • ¥ : &yen; (円)

さらに他にも，ここなどで紹介されている．