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

ホームページの作り方

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

WWWの仕組み

WWW: World Wide Web

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

クライアントとサーバ

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

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

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ページ
あるまとまったページの先頭や入口にあたるページ

Webページの中身

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

HTML

HTML = HyperText Markup Language

Webページを書くための書式
タグを使って文書の要素を指定する
「どう表示するか」ではなく「これは何なのか」を指定する

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

属性

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

例：


    <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>

構成要素：

DOCTYPE宣言
head部
body部

必ず必要な要素

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

本文（body）中の要素

見出し

hx (Hedding)

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

例：


  <h1>見出し１</h1>  
  <h2>見出し２</h2>  
  <h3>見出し３</h3>  
  <h4>見出し４</h4>

表示例：

見出し１

見出し２

見出し３

見出し４

段落・改行

p (Paragraph)
br (BRake)

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

例：


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

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

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

表示例：

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

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

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

か条書き

ul (Unorderd List)
li (List Item)

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

例：


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

表示例：

項目その１

項目その２

さらにか条書きを重ねることもできます

項目3-1

項目3-2

か条書き（番号付き）

ol (Orderd List)
li

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

例：


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

表示例：

項目その１

項目その２

こちらも同様に、か条書きを重ねることもできます

項目3-1

項目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)

属性：

src = 画像のある場所

alt = 画像が表示できない場合に使う文字列

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

例：


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

表示例：

リンク

a (Anchor)

属性：

href = リンク先

name = 名前

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

属性：

border = 表の枠を表示する

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

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

レイアウト

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

例：

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

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

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

フォント

font

属性：

size = サイズ

color = 色

face = 書体

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

サイズは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明朝、大阪

色・背景・背景色

属性：

text = 色

bgcolor = 色

background = URL

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

例：


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

表示例：

黒地に白く…

スタイルシート

HTML: 文書構造を指定する
スタイルシート: その表示方法を指定する

CSS: Cascading Style Sheets

各要素の表示方法を指定する
複数のページのスタイル統一にも有効
字下げ、表示幅、行間、表示位置…など、HTMLだけでは指定できない細かいスタイル指定が可能
出力するメディアごとに表示方法を指定することができる

例：


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

画像

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

→

そのままではサイズが大きくなるので圧縮を行う
圧縮方法によってさまざまな形式がある

GIF

米 Compserv が開発した画像形式
Webで広く使われている
256色まで
透明化
インターレース
アニメーション
現在Unisys社が権利を持つ

PNG

W3C (World Wide Web Consortium)が制定した画像形式
フルカラーに対応
αチャネルによる柔軟な透明化
古いブラウザでは対応していないものもある

JPEG

国際規格の画像形式
非可逆圧縮
写真などの自然画像に向く

他の画像形式

BMP - Windowsでよく使われる形式
TIFF - Macintoshなどで使われる形式
その他各種ソフトウェアの形式

その他よく使われるもの

音声: 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が正しくない場合もある

画像を作る

画像エディタ
スキャナ・デジタルカメラなど

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

ページを公開する

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

管理者に置いてもらう
FTPなどのツールを使う
指定されたフォルダにコピーする
etc…

注意すること

文法
文字コード
ブラウザの仕様・バグ
プラットフォームによる違い
内容

文法

自分で書く場合はチェックを怠らないこと
ツールを使う場合は定評を聞いておくこと

文字コード

日本語の文字コードにはJIS (iso-2022-jp), Shift_JIS, EUC-JP, UTF-8 などさまざまな形式がある
文字コード指定と実際の文字コードが違っている場合「文字化け」する

ブラウザの仕様・バグ

自分の使っているブラウザで上手く表示できたからといって、他のブラウザでもそうなるとは限らない
規格として正しくても、ブラウザが対応しているとは限らない

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

日本語ファイル名
大文字・小文字の区別
空白文字などの扱い

内容

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

あさだたくや