コンピュータ・ネットワーク利用セミナー第17回

ホームページの作り方

浅田 卓哉
情報基盤センター


WWWの仕組み

WWW: World Wide Web

蜘蛛の巣(Web)のように、世界中にはりめぐらされた情報の網


クライアントとサーバ

基本的なブラウザの動作:

  1. URLを入力、またはリンクをクリックする
  2. URLで指定されたサーバを探す
  3. URLで指定された方法で、指定された文書を送るようサーバにリクエストを出す
  4. サーバがページを返す
  5. 返ってきた文書に画像などが含まれている場合、さらに同様にしてサーバにリクエストを出す
  6. (…くりかえし‥)
  7. 表示する


URL

URL = Uniform Resource Locator

例:


    http://www.u-tokyo.ac.jp/index-j.html    

インターネット上の資源を一意に指し示すための書式


URL の構成

スキーム部
http
情報にアクセスするための方法、手続きなどをあらわす。もっとも一般的な HTTP (HyperText Transfer Protocol) はWeb用に開発されたプロトコル
ホスト名
www.u-tokyo.ac.jp
インターネット上のあるコンピュータを特定するための名前
パス名・ファイル名
index-j.html
そのコンピュータに置いてあるファイルなどを特定する

Webページ

Webページ:
ホームページ:

Webページの中身

文字
多くの場合HTMLで書かれる
リンク
他のページなどへのリンク
画像
GIF, JPEG, PNG など
その他
音声、動画、アプレットなど

HTML

HTML = HyperText Markup Language

→ さまざまなブラウザ、テレビ、携帯電話、音声合成など、多くの環境で利用することができる


タグ

開始タグと終了タグで文字を囲む

書式:

開始タグ:<名前>
終了タグ:</名前>

例:


    <title>ホームページの作り方</title>    

これがページのタイトルだということを表す。このタイトルはウインドウのタイトルとして表示されたり、ブックマークの名前に使われる


属性

開始タグに「名前="値"」という形式で書く

例:


    <img src="logo.png" alt="[LOGO]">    

HTML文書の基本構造

簡単なHTML文書の例


  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"  
	  "http://www.w3.org/TR/html4/strict.dtd">  
  <html>
    <head>
      <title>HTML Sample</title>
    </head>
    <body>
      <p>これはHTMLのサンプルです</p>
    </body>
  </html>

構成要素:

  1. DOCTYPE宣言
  2. head部
  3. body部

必ず必要な要素

DOCTYPE宣言
HTMLのバージョンを指定する
head
文書のタイトル、スタイルの指定、他の文書との関連などを指定する
title
head要素内で文書のタイトルを指定する
body
本文

本文(body)中の要素


見出し

hx (Hedding)

見出しを表す。hxxは1~6までの数字で、値の小さなものほどレベルの高い見出しを表す

例:


  <h1>見出し1</h1>  
  <h2>見出し2</h2>  
  <h3>見出し3</h3>  
  <h4>見出し4</h4>  

表示例:

見出し1

見出し2

見出し3

見出し4


段落・改行

p (Paragraph)
br (BRake)

P要素は段落を表す。内部の連続した空白文字、改行はひとつの空白文字とみなされる。 段落中で改行したい場合はbr要素を使う。br要素には閉じタグは必要ない

例:


  <p>これは段落の例です。</p>

  <p>このように連続した空白文字「      」や改行「  
  」は、1つの空白になります。</p>

  <p>途中で改行したい場合は<br>を使います。</p>  

表示例:

これは段落(p)の例です。

このように連続した空白文字「 」や改行「 」は、1つの空白になります。

途中で改行したい場合は
を使います。


か条書き

ul (Unorderd List)
li (List Item)

ul要素はか条書きを表し、各項目はli要素で表す。li要素の中に重ねてul要素を入れることもできる

例:


  <ul>
    <li>項目その1</li>
    <li>項目その2</li>
    <li>さらにか条書きを重ねることもできます  
    <ul>
      <li>項目3-1</li>
      <li>項目3-2</li>
    </ul>
    </li>
  </ul>

表示例:


か条書き(番号付き)

ol (Orderd List)
li

ol要素は番号付きのか条書きを表し、各項目はli要素で表す。li要素の中に重ねてol要素を入れることもできる

例:


  <ol>
    <li>項目その1</li>
    <li>項目その2</li>
    <li>さらにか条書きを重ねることもできます  
    <ol>
      <li>項目3-1</li>
      <li>項目3-2</li>
    </ol>
    </li>
  </ol>

表示例:

  1. 項目その1
  2. 項目その2
  3. こちらも同様に、か条書きを重ねることもできます
    1. 項目3-1
    2. 項目3-2

説明

dl (Description List)
rt, dd

dt要素で項目を、dd要素でその説明を表すような場合に用いる

例:


  <dl>
    <dt>ul要素</dt>
    <dd>順番のないリストをあらわす。</dd>
    <dt>ol要素</dt>
    <dd>順番のあるリストをあらわす。</dd>
    <dt>dl要素</dt>
    <dd>項目とその説明書きのようなリストをあらわす。</dd>    
  </dl>

表示例:

UL要素
順番のないリストをあらわす。
OL要素
順番のあるリストをあらわす。
DL要素
項目とその説明書きのようなリストをあらわす。

整形済みテキスト

pre (PRE-formated text)

あらかじめ整形されたテキストを表す。空白、改行などはそのまま出力される。プログラムリストや、簡単な表などをあらわす場合に利用する

例:


  <pre>
    メーカ  商品名                    価格
  ----------------------------------------  
    IBM   ThinkPad X20 US Model    302,000
    IBM   UltraBase X2 CD-ROM       30,000
  </pre>

表示例:

  メーカ 商品名                    価格
----------------------------------------
  IBM   ThinkPad X20 US Model    302,000
  IBM   UltraBase X2 CD-ROM       30,000

区切り

hr (Horizontal Rule)

hr要素は文書の区切りを表す。区切りは、通常は水平線として表示される。この要素には閉じタグは必要ない

例:


  <hr>
  <p>あさだ たくや / asada@nc.u-tokyo.ac.jp</p>  

表示例:


あさだ たくや / asada@nc.u-tokyo.ac.jp

          

画像

img (IMaGe)

属性:

img要素は、そこに画像を取り込むことを表す。画像の場所はsrc属性で表し、URLまたは文書からのパス名を指定する。また、画像が表示できない場合に使う文字列をalt属性で指定する必要がある。この要素には閉じタグは必要ない

例:


  <img src="http://validator.w3.org/images/vh40"  
       alt="Valid HTML 4.0!">  

表示例:

Valid HTML 4.0!

リンク

a (Anchor)

属性:

a要素はハイパーリンクを作る。リンク先はhref属性を使って、URLまたは文書からのパス名を指定する

文書内の途中へリンクしたい場合は、リンク先となる場所にa要素のname属性で名前をつける。この部分を指定したい場合はhref="URL#名前"とする。同じ文書内であれば、URLは省略できる

例:


  <p>
  <a href="http://www.u-tokyo.ac.jp/index-j.html">東京大学ホームページ</a>
  </p>

表示例:

東京大学ホームページ

例:


  <h1><a name="HAJIME">はじめに</a></h1>  
  <p>
  …
  </p>
  <p>
  「<a href="#HAJIME">はじめに</a>」に戻る。  
  </p>

表示例:

はじめに

はじめに」に戻る。


table
th, tr, td

属性:

table要素は表を表す。th要素で表の見出し、tr要素で行、td要素で項目を表す。tableタグにborder属性がある場合は表に枠を表示する

例:


<table border="1">
  <tr>
    <th>メーカ</th>
    <th>商品名</th>
    <th>価格</th>
  </tr>
  <tr>
    <td>IBM</td>
    <td>ThinkPad X20 US Model</td>
    <td>302,000</td>
  </tr>
  <tr>
    <td>IBM</td>
    <td>UltraBase X2 CD-ROM</td>
    <td>30,000</td>
  </tr>
</table>

表示例:

メーカ 商品名 価格
IBM ThinkPad X20 US Model 302,000
IBM UltraBase X2 CD-ROM 30,000

レイアウト

tableを使って表示の配置を行うことも可能。ただしその利用には注意が必要

例:

メニュー   
[入門編] 
[中級編] 
[上級編] 

例えばこのように、tableの機能を利用して多段組のような表示を実現することも可能です。ただし、中にはtableが表示できない環境もあります。

tableをレイアウトのために使う場合は、そのような環境でもきちんと内容が読みとれるよう、工夫する必要があるでしょう。


フォント

font

属性:

表示する文字のサイズ、色、書体などを指定する

サイズは1~6の整数。値が大きいものが大きく表示される。値に「+」「-」を付けた場合は、現在の標準よりも値分だけ大きい、または小さいサイズで表示される

色は名前、または「#RRGGBB」という形式の16進数

書体は「bold」「italic」などのキーワードか、またはフォント名。ただしフォント名は機種依存なので、注意が必要

注意)HTMLの基本的な概念に反する!


フォント・サイズ

例:


  <p>
  <font size="1">1</font>  
  <font size="2">2</font>  
  <font size="3">3</font>  
  <font size="4">4</font>  
  <font size="5">5</font>  
  <font size="6">6</font>  
  </p>

表示例:

1 2 3 4 5 6


フォント・色

例:


  <p>
  <font color="red">赤</font>  
  <font color="green">緑</font>  
  <font color="blue">青</font>  
  <font color="#888888">灰色 (#888888)</font>  
  </p>

表示例:

灰色


フォント・書体

例:


  <p>
  <font face="bold">ボールド</font>、  
  <font face="MS明朝">MS明朝</font>、  
  <font face="OSAKA">大阪</font>  
  </p>

表示例:

ボールドMS明朝大阪


色・背景・背景色

属性:

文字の色、背景の色、背景画像を指定する。body要素およびtable内の各要素で利用可能。色の指定はfont要素のcolorと同様に、名前または「#RRGGBB」の16進数を用いる

例:


  <body text="white" bgcolor="black">
  <p>黒地に白く…</p>、  

表示例:

黒地に白く…


スタイルシート


CSS: Cascading Style Sheets

例:


  body {
    text-color: white;
    background-color: black;
  }

画像

基本的にはすべて点の集まり:

画像例 拡大図

GIF


PNG


JPEG


他の画像形式


その他よく使われるもの

音声
WAV, AIFF, Real Audio など
動画
MPEG, AVI, QuickTime, Real Video など
アプレット・プラグイン
JavaやShockwaveなどのプログラム
PDF
Adobe社が提唱する形式。印刷物とほぼ同じような表現が可能

ページを作るには?


自分でHTMLを書く

長所
  • メモ帳など普通のテキストエディタで作ることができる
  • 細かい部分も自分で設定できる
短所
  • HTMLの文法を覚えなければならない
  • 入力間違いなどに注意しなければならない
改善策
  • 文法チェッカなどを使う
  • 入力支援をしてくれるエディタを使う

オーサリングツーツを使う

WYSIWYG - What You See Is What You Get

ワードプロセッサなどの出力
  • 長所:使い慣れたツールがそのまま使える
  • 短所:出力するHTMLが正しくない場合が多い
専用ソフトウェア
  • 長所:レイアウト、画像の編集などの機能が充実している
  • 短所:出力するHTMLが正しくない場合もある

画像を作る

後者の場合も加工が必要な場合も多い


ページを公開する

作ったファイルをサーバ上に置くこと


注意すること


文法


文字コード


ブラウザの仕様・バグ


プラットフォームによる違い


内容

原則:Webページは世界中に公開されている


あさだ たくや