HTML入門

(1)

福岡工業大学

情報工学部

情報工学科

柴田望洋

BohYoh Shibata

Fukuoka Institute of Technology

HTML

_入門

ABC of Hyper Text Markup Language

(2)

本資料について

▪本資料、2009年度・福岡工業大学情報工学部情報工学科１年生講義『コンピュータリテラシー』補助、福岡工業大学情報工学部情報工学科柴田望洋編。自分作兼活用。 ▪参考文献・引用文献等、資料最後示。 ▪諸君本資料綴、研究室学生達時間割、穴開作業行（一度開枚数限、気遠時間）。必Ｂ５用意、綴。 ▪本資料含内容、著作権法上保護受、著作権者柴田望洋許諾得、無断複写・複製禁。 ▪本講義、以下示上、各参照。柴田望洋後援会 http://www.BohYoh.com/ ▪本資料、Adobe社 DTP InDesign CS4 用作成。

(3)

WWW と HTML

インターネットとWWW 数年間、急激勢普及。本来、、学術機関研究機関、悪閉世界利用。、（接続業者）出現、一般人手軽家庭楽、普及拍車。 ▼ プロバイダ経由でインターネットに接続するには、一般に、契約料、利用料（接続形態によっては電話代）が必要です。利用料は、月額固定制（一定金額）や、従量制（利用時間によって変動）や、固定＋従量制などがあります。、電子（手紙）、（）

利用、現在最人気高 WWW（world wide web）。

上資源、URL 形式指示、http HTML言語、有機的連結、情報検索有効便利利用可能。自分好映画・音楽・情報、求人情報、会社紹介、新製品紹介、最新研究成果、 分野情報、ハイパーテキスト（hyper text）形式 見。ハイパーテキスト直訳、超文書。『従来文書超』。関連読。、｢｣単語書。単語意味分、索引「」見、解説書開直。、『関連付』、画面上「」箇所、解説、一気。自分好絵掲載。絵拡大、鮮明画像用意、関連付。、、拡大画像呼出。、文書、静止画像、動画、音楽 情報＝資源（resource）、 関連付状態用意、利用者簡単操作、次々自分欲情報見。醍醐味。 WWW以前、関連付範囲、同一上資源限。 WWW 、関連付（

(4)

呼）、上公開全、範囲広。、利用者、世界中情報、資源物理的設置場所関係、手元本、取出。ブラウザ（閲覧ソフトウェア） WWW 、形式情報入手分。、表示･再生閲覧必要。

Internet Explorer, Firefox, Safari, Opera WWW 、取込資源

閲覧。

▼ いずれも、無償ソフトウェアとして配布されています。

http … WWWのためのプロトコル

WWW 情報取、プロトコル＝通信規約（会話

言語考）決。 http（hyper text transfer protocol）。詳、名前必覚。

HTML … ハイパーテキストを実現するための言語

WWW上実現使言語、HTML（hyper text markup

language）。（文書）中、（命令）埋込、属性表現。 HTML 使、（通常文章）、文章構造（章立箇条書）、画像配置、URL 、記述。、HTML文書、文字並作成。 URL … 資源の『場所』上資源（文書、画像）場所統一的示使、

URL（uniform resource locator）。WWW 使、HTML

中利用。WWW 、Gopher ftp 含上所在、同一形式表。、異資源、同一名前持。同姓同名。URL 、以下形式表現。 :// 名. 名/ 名/ 名、福岡工業大学 URL 、http://www.fit.ac.jp/index.html 。

(5)

【演習】大学開、見。、左上 FIT 見。準備、下、作成。作成場所、 H内 WWW 。、用 HTML 格納。多数場合、下作成。 ▼ Linuxの場合は、以下のように行います。以下の作業を、準備として１回だけ行います。 % cd ワ―キングディレクトリをホームディレクトリに移す。 % mkdir WWW ホームディレクトリの下に WWW を作成。ホームページ関連の作業をする際は、ワーキングディレクトリを ~/WWW に移しておくと便利です。 % cd ~/WWW ワ―キングディレクトリを WWW に移す。 URL 指定閲覧。 URL 、以下。 http://www.ipc.fit.ac.jp/ s09a****/index.html ▼ 上記のうち s9a**** の部分は、自分のユーザ ID です。なお index.html は省略可です。ページのプロパティ FITアイコンのプロパティ

(6)

はじめての HTML

HTMLについて

HTML言語、元来、DTP（desk top publishing）実現言語、文章

構造記述言語。、、環境設定条件、具体的表示異注意。 ▼ HTML言語の仕様には Level 1 ∼ 4..1 があります。 HTMLドキュメントの構成 HTML 、<HTML> 始、</HTML> 終。、大部部構成、、<HEAD> </

HEAD> 、<BODY> </BODY> （命令）囲記述。

▼ 各行は行頭から書いても構いませんが、文書の構造を明確にするためにインデント（段付け）を与えてもよいでしょう。、HTML 、以下三命令用、全体大構造指定。 <HTML> … </HTML> HTML 宣言。 <HEAD> … </HEAD> 部宣言。 <BODY> … </BODY> 部宣言。部、、関属性与部分、部、本体与部分。 <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> ヘッダボディ

(7)

『柴田望洋 !!』表示 HTML 例 List 1 示 。

List 1 index.html

<HTML> <HEAD> <TITLE>

Welcome to BohYoh Shibata's Home Page. </TITLE> </HEAD> <BODY> 柴田望洋のホームページへようこそ!! </BODY> </HTML> 【演習】 List 1 以下要領打込作成、表示確認行。・『柴田望洋』 BohYoh Shibata 部分、自分名前。・ WWW 下 index.html 名前保存。 ▼ index.html.txtとならないように注意しましょう。以下確認。・URL H:¥WWW¥index.html 表示。

・URL http://www.ipc.fit.ac.jp/ s09a****/index.html 表示。

(8)

リンクを張ろう既説明、WWW 醍醐味。、自分欲情報見、WWW 楽。 HTML 行、呼 <A> 利用。形式概略示。

、囲 …文字画像 … 部分強調表示（色付、下線枠付。、見方、異）。 ▼ HTMLの <BODY> タグや CSS によって、色などの属性を変更することもできます。、福岡工業大学張。 URL 、http://www.fit.ac.jp/ 。

私は、<A HREF = "http://www.fit.ac.jp/index.html">_{福岡工業大学}</A>の_{学生です。}

<A HREF = "http://www.fit.ac.jp/index.html">ここを</A>クリックすると_{福岡工業大} 学のホームページへ飛びます。

福岡工業大学のホームページは<A HREF = "http://www.fit.ac.jp/index.html">こちら

</A>です_。【演習】 index.html 、以下要領書（<BR> 改行行）。柴田のホームページへようこそ ↓ 柴田のホームページへようこそ<BR> 【例１】【例２】【例３】本文示三例参考、福岡工業大学張。構。、文書表現変自由。

(9)

HTML 、タグ（tag）呼 命令、各種設定・指示行。関、規則簡単示。タグは_不等号< >で_囲まれる【例】 <HTML> 不等号文字< > 表示、 < > 書必要。、文字& 、& 記述。 #include <stdio.h> if (a & 2 == ) a = c; 表示、以下。 #include <stdio.h> if (a & 2 == ) a = c; タグの大文字・小文字の区別はされない【例】 <HTML> <html> 同。終了タグには/を付ける、有効範囲終了表、名前前 / 付対利用。【例】 <HTML> ∼ </HTML> 、範囲指定必要 <BR> 命令、終了。、 </BR> 命令存在。命令はネスト（入れ子に）できる【例】<HTML>∼</HTML> 中 <HEAD>∼</HEAD>命令与。

<HEAD>∼</HEAD> 中 <TITLE>∼</TITLE>命令与。

ブラウザは知らないタグを無視する

(10)

コメント HTML 、、、作成者自身含読手伝書込。注釈画面上表示。技術的情報、重要情報書込。 ▼ コメントを入れ子にすること、すなわち、コメントの中にコメントを書くことはできません。注釈、 囲書込。、以下形式。

The characters /* start a comment, which terminates with the

characters */. ボディ部に記述されたテキストは_{、クライアントの画面の幅} で表示できるように、追い込まれて表示されるため、改行の位置を気にして作成する必要がない。昔々、あるところに  お_{爺さんとお婆さんが住んでいました。} テキスト中の空白文字と改行文字の取り扱い部記述、原則、画面上表示。際、領域内表示、追込表示、単語間空白、改行位置気作成必要。換言、HTML 内空白文字改行文字、無視。例示（空白文字半角文字打込）。本日の予想気温は、最低気温：16℃ _{最高気温：}25_℃ です_。

(11)

<BR> … 強制的な改行行区切強制的改行指示、 <BR> 。 <BR> 強制的改行行。先例書直。本日の予想気温は、<BR> _{最低気温：}16_℃<BR> 最高気温：25℃<BR> です。<BR> 相変空白文字無視注意。 <PRE> … 空白文字と改行文字に意味を持たせる中空白文字改行文字意味持、 <PRE> 利用。 <PRE> … </PRE> 囲部分、整形済指定。 PRE 名前、preformatted 由来。、予あらかじ整形済意味。前述、表示際行回込、本来一任、提供者、整形方法指定場合。利用、。先例、以下書。 <PRE> 本日の予想気温は、 _{最低気温：}16_℃ _{最高気温：}25_℃ です。 </PRE> ▼ 多くのブラウザは、<PRE> … </PRE> 部を、それ以外の箇所よりも一回り小さな文字で表示するように設定されています。

(12)

<P> … 段落構造を指定する <P> … </P> 囲部分、段落指定。 <P>_{メロスは口惜しく、地団駄踏んだ。ものも言いたくなくなった。}</P> <P>_{竹馬の友、セリヌンティウスは、深夜、王城に召された。暴君ディオニスの面前} で、よき友とよき友は、二年ぶりで相逢うた。メロスは、友に一切の事情を語った。セリヌンティウスは_{無言でうなずき、メロスをひしと抱きしめた。友と友の間は、それで} よかった。セリヌンティウスは、縄打たれた。メロスは、すぐに出発した。初夏、満天の_{星である。}</P> <P>_{メロスはその夜、一睡もせず十里の路を急ぎに急いで、村へ到着したのは、翌（} あく）る日の午前、陽は既に高く昇って、村人たちは野に出て仕事をはじめていた。メロスの_{十六の妹も、きょうは兄の代りに羊群の番をしていた。よろめいて歩いて来る兄} の、疲労困憊の姿を見つけて驚いた。そうして、うるさく兄に質問を浴びせた。</P> 通常、段落段落間、余白入。、以下示 <BR> 強制改行、異注意。メロスは口惜しく、地団駄踏んだ。ものも言いたくなくなった。<BR> 竹馬の友、セリヌンティウスは、深夜、王城に召された。暴君ディオニスの面前で、よき_{友とよき友は、二年ぶりで相逢うた。メロスは、友に一切の事情を語った。セリヌ} ンティウスは_{無言でうなずき、メロスをひしと抱きしめた。友と友の間は、それでよか} った。セリヌンティウスは、縄打たれた。メロスは、すぐに出発した。初夏、満天の星である_。<BR> メロスはその夜、一睡もせず十里の路を急ぎに急いで、村へ到着したのは、翌（あく）る日の午前、陽は既に高く昇って、村人たちは野に出て仕事をはじめていた。メロスの_{十六の妹も、きょうは兄の代りに羊群の番をしていた。よろめいて歩いて来る兄の、} 疲労困憊の姿を見つけて驚いた。そうして、うるさく兄に質問を浴びせた。<BR>

(13)

<Hn> … 見出しとその階層を指定する部本文構造化必要、章立。各章対見出与、<H1>, <H2>, …, <H6> 各。 <H1> … </H1> 見出大浅 <H2> … </H2> 見出 <H3> … </H3> 見出文字大章深 <H4> … </H4> 見出 <H5> … </H5> 見出 <H6> … </H6> 見出小深一般、<H1> 大見出文字大。 <H1>第１章Ｃ言語の基本</H1> <H2>_{第１節Ｃ言語の歴史について}</H2> <P>_{Ｃ言語は、}D.M.Ritchie_{氏が作ったプログラミング言語である。}</P> <P>もともとUNIXで使われていたが、現在ではパソコンでも使われている。</P> <H2>_{第２節Ｃ言語の将来について}</H2> <P>最近、B.Strourstrup氏が作ったＣ++という言語が流行りつつある。</P> 、<H1>∼<H6> 文字大区別限。、文字大関係、以下。 H1 ≧ H2 ≧ H3 ≧ H4 ≧ H5 ≧ H6 以下関係保証限注意。 H1 ＞ H2 ＞ H3 ＞ H4 ＞ H5 ＞ H6 見出番号自動的割振、章番号必要、自分与。 ▼ <Hn>タグは、文書の構造を指示するものであり、文字の大きさを変えるためのものではありません。文字の大きさを変更するには、<BIG>, <SMALL> の各タグや CSS を用います。

(14)

<UL> … 箇条書きを行う複数項目、縦方向並表示利用。<LI> 一緒利用。 <UL> … </UL> 箇条書行。 <LI> 箇条書与。 ▼ 箇条書きの入れ子のレベルによって与えられる記号（上の例での●や○）は、ブラウザによって異なります。 <OL> … 番号付き箇条書きを行う <UL> 同箇条書行利用。各項目対、連番割振。 <OL> … </OL> 番号付箇条書行。 <LI> 箇条書与。本日の課題 <UL> <LI>_Ｃ言語 <LI>Pascal言語 <LI>HTML_言語 <UL> <LI>_ＷＷＷ <LI>ハイパーテキスト </UL> <LI>_日本語 </UL> 本日の課題 <OL> <LI>_Ｃ言語 <LI>Pascal言語 <LI>HTML_言語 <OL> <LI>_ＷＷＷ <LI>ハイパーテキスト </OL> <LI>_日本語 </OL>

(15)

<DL> … 見出し付き箇条書きを行う用語（見出）与、対説明与並実現際利用。<DT> <DL> 一緒利用。 <DL> … </DL> 見出付箇条書行。 <DT> 見出与。 <DD> 見出対定義行。 <DL> <DT>Ｃ言語 <DD>D.M.Ritchie_{氏開発のプログラミング言語で、世界中で利用されている。} <DT>Pascal_言語 <DD>N.Wirth_{氏開発の言語。最近はほとんど使われていない。} <DT>_Ｃ++_言語 <DD>_{Ｃ言語をベースにして、}B.Stroustrup_{氏が開発したオブジェクト指向プログラミ} ングをサポートする言語 </DL>

(16)

<DIV> … テキストのブロックレベルの構造を与える一部分割、他部分区別。分割領域、左端、中央、右端寄表示。 <DIV> … </DIV> 一部分割・独立。 ALIGN=LEFT 分割部分左揃 ALIGN=CENTER 分割部分中央揃 ALIGN=RIGHT 分割部分右揃

<B>, <I>, <TT>, <BIG>, <SMALL>, <STRIKE>, <U> … 物理的な書体の指定

中文字強調、各種書体指定行。 <B> … </B> （太字） <I> … </I> （斜体） <TT> … </TT> 等幅 ※ <BIG> … </BIG> 大 <SMALL> … </SMALL> 小 <STRIKE> … </STRIKE> 打消線 <U> … </U> （下線）一般的欧文、文字幅異、プロポーショナルフォント （propotional font）呼 。特指定限、表示、 。等幅フォント（monospaced font）、 文字横幅均一。

Operating System width

Operating System width 等幅

<DIV ALIGN=LEFT>_{本日は、ここまで。}</DIV> <DIV ALIGN=CENTER>_{続きは来週。}</DIV> <DIV ALIGN=RIGHT>柴田望洋</DIV>

(17)

<EM>, <STRONG>, etc... … 論理的な書体の指定中文字強調、書体指定行。 <EM> … </EM> 強調 <STRONG> … </STRONG> 強強調 <CITE> … </CITE> 引用 <DFN> … </DFN> 定義 <CODE> … </CODE> ・ <KBD> … </KBD> 入力 <VAR> … </VAR> 変数、解釈異。表示違、注意。 <P>HTMLでの物理的な書体の指定には、<B>ホールド（太字）</B>_、<I>イタリック（斜体）</I>_、<TT>テレタイプ_{（等幅フォント）}</TT>_、<BIG>_{大きなフォント}</ BIG>_、<SMALL>_{小さなフォント}</SMALL>_、<STRIKE>_{打ち消し線}</STRIKE>_、<U>アンダーライン</U>があります。</P>

<P>HTMLでの論理的な書体の指定には、<EM>_強調</EM>_、<STRONG>さらに強い強調

</STRONG>_、<CITE>_引用</CITE>_、<DFN>_定義</DFN>_、<CODE>コード</CODE>などがあります_。</P>

(18)

<FONT> … フォントのサイズ・色を指定する表示文字・色指定。 ▼ このタグの利用は推奨されません。 <FONT> … </FONT> ・色指定。 SIZE=n n （1 n 7）。既定値 3。 SIZE=+n n 大。 SIZE=-n n 小。 COLOR=color 色指定。 <HR> … 水平線を引きます。文書区切入横向線表示。 <HR> 水平線表示。 NOSHADE 立体的。 WIDTH = n 長 n 。 WIDTH = n% 長表示幅 n% 。 SIZE = n 太 n 。 ALIGN = LEFT 左側揃 ALIGN = CENTER 中央揃 ALIGN = RIGHT 右側揃 COLOR = color 色フォントのいろいろ。

<FONT SIZE=7>サイズ_＝７</FONT> <FONT COLOR=RED>赤だよ。</FONT>

(19)

コンピュータ_（computer_{）は、電子計算機のことです。} <HR> リテラシー_（literacy_{）は、読み書きの能力のことです。ある分野に関する知識･能力} のことを_{指すこともあります｡} <IMG> … 画像を表示する画像表示。

<IMG SRC=URL> URL 指定画像表示。

ALIGN=TOP 上端文字一致配置 ALIGN=MIDDLE 中央文字一致配置 ALIGN=BOTTOM 下端文字一致配置 ALIGN=LEFT 左端配置、文字回込 ALIGN=RIGHT 右端配置、文字回込 ALT=string 表示環境・状態、画像代文字string 表示同一、画像 MonaLisa.jpg 保存仮定。画像表示表示際、画像表示画像読込中出際、画像代 ALT部指定文字列表示。

<IMG SRC="MonaLisa.jpg" ALIGN=RIGHT ALT="モナリザ">右に示すのは、有名なモナリ

(20)

代表的な色

代表的色示。色名英語識別子指定方法、16進数（RGB 各値、 0∼FF 256階調並）指定方法。 ▼ RGBは、Red/Green/Blue の光三原色です。色色を表す識別子 RGB値黒 black # ネイビー navy #8 深青 darkblue #8B 青 blue #FF 深緑 darkgreen #64 緑 green #8 深水色 darkcyan #8B8B ライム lime #FF アクア aqua #FFFF 水色 cyan #FFFF 薄い水色 lightcyan #EFFFF 紫 purple #88 オリーブ olive #88 灰色 gray #888 薄い灰色 lightgrey #D3D3D3 黄緑 yellowgreen #9ACD32 茶色 brown #A52A2A 緑黄 greenyellow #ADFF2F 銀 silver #CCC チョコレート chocolate #D2691E 赤 red #FF マジェンタ magenta #FFFF 濃いピンク darkpink #FF1493 オレンジ orange #FFA5 ピンク pink #FFCCB トマト tomato #FF6347 金色 gold #FFD7 雪 snow #FFFAFA 黄色 yellow #FFFF 薄い黄色 lightyellow #FFFFE 白 white #FFFFFF ▼HTMLのトリビア：

灰色は grey と gray のどちらでもいいのですが、薄い灰色は lightgrey でなければなりません（Internet Explorer の場合）。

(21)

同一ディレクトリ上のHTML間のリンク、１構成面白。複数用意。同上置、名指定、簡単。二間行来例以下示。これは_{第１ページです。}<BR> 第２ページは<A HREF="second.html">こちら </A>です。<BR> これは_{第１ページです。}<BR> 第２ページは<A HREF="top.html">こちら</ A>です_。<BR> 本文に対する属性の指定 <BODY> 以下指定、部対、種々指定。 ▼ ただし、これらのオプションの利用は推奨されません。次ページ以降で学習する CSS を用いて設定します。

BGCOLOR = color 背景色 color 。

TEXT = color 本文色 color 。

LINK = color 色 color 。

VLINK = color 済色 color 。

WIDTH = n 長 n 。

VLINK = color 済色 color 。

ALINK = color 中色 color 。

BACKGROUND = url 背景画像指定。

first.html

(22)

カスケーディングスタイルシート

_（CSS）

本来、HTML 文書《構造》定義言語、色見栄定義言語。、文書《見栄》、HTML 手段用定義。使、カスケーディングスタイルシート（CSS_{）（以降、単} 呼）。 ■スタイルシート定義定義、以下形式行。

<STYLE TYPE = text/css >

… 定義 …

</STYLE>

、対応考慮、以下宣言

一般的。

<STYLE TYPE = text/css >  </STYLE>

<!--

-->

囲部分、HTML （注釈）。、定義内容、対応、実質的無視。定義箇所、以下書式記述。セレクタ { プロパティ : 値 }

(23)

文字の表示属性定義

用、文書中文字色設定方法学習。

<STYLE TYPE = "text/css">

body { color : white;

background-color : black

background-image:url("_{画像ファイル名}"); }

A {text-decoration: none;}

A:link {color: blue; text-decoration: none;} A:visited {color: blue; text-decoration: none;} A:active {color: red; text-decoration: none;} A:hover {color: red; text-decoration: none;} --> </STYLE> 各概要、次。セレクタ解説 body 本文の色、背景色などを定義します。 A 本文中のリンク文字属性を定義します。 A:link リンク文字の属性を定義します。 A:visited 既に訪れたリンク文字の属性を定義します。 A:active アクティブなリンク文字の属性を定義します。 A:hover マウスがのせられているリンク文字の属性を定義します。

body

指定概要、次。プロパティ _解説 color 本文の文字の色を定義します。 background-color 本文の背景色を定義します。 background-image 背景の画像を指定します。

text-decoration

指定値、以下。セレクタ _解説 none テキストに線が付かず、点滅もしません。 underline テキストに下線が付きます。 overline-color テキストに上線が付きます。 line-through テキストに打ち消し線が付きます。 blink テキストが点滅します。

(24)

<MARQUEE> 用、電光掲示板流文字表示行。 ▼ HTMLの標準的なタグではありませんが、効果的ですので、知っておいて損はしないでしょう。 <MARQUEE> … </MARQUEE> 電光掲示板流文字表示。

WIDTH = n

領域長 n 。

WIDTH = n%

領域長表示幅 n% 。

HEIGHT = n

領域高 n 。

HEIGHT = n%

領域高表示幅 n% 。

HSPACE = n

横方向 n 。

VSPACE = n

縦方向 n 。

BGCOLOR = color

色。

ALIGN = TOP

続上部表示。

ALIGN = MIDDLE

続中央表示。

ALIGN = RIGHT

続下部表示。

DIRECTION = LEFT

右左流。

DIRECTION = RIGHT

左右流。

LOOP = n

表示 n回限定。

LOOP = INFINITE

無限表示。

BEHAVIOR = SCROLL

端出端消。

BEHAVIOR = SLIDE

端到達停止。

BEHAVIOR = ALTERNATE

往復。

SCROLLDELAY = n

移動時間間隔 n 秒。

SCROLLAMOUNT = n

移動距離間隔 n 。

(25)

<HTML> <HEAD> <TITLE>

Welcome to BohYoh Shibata's Home Page. </TITLE>

<STYLE TYPE = "text/css"> A {text-decoration: none;}

A:link {color: blue; text-decoration: none;} A:visited {color: blue; text-decoration: none;} A:active {color: red; text-decoration: none;}

A:hover {color: red; background-color: lightgreen; } BODY { background-color: black; color: yellow; } </STYLE> </HEAD> <BODY> <MARQUEE><H1> ようこそ_{柴田望洋のホームページへ}!! </H1></MARQUEE> <HR>

<P><BIG>_僕は<A HREF="http://www.fit.ac.jp/index.html">_{福岡工業大学}</A>の_学生だよ。</BIG></P>

■ メニュー ■<BR> <UL>

<LI><A HREF="intro.html">_自己紹介</A>

<LI><A HREF="history.html">これまでの略歴</A> <LI><A HREF="links.html">リンク</A>

<LI><A HREF="test.html">HTMLのタグテストページ</A> </UL>

<HR>

<DIV ALIGN=RIGHT>

<A HREF="http://www.fit.ac.jp/index.html">

<IMG SRC="http://www.fit.ac.jp/img/title.gif" border = ></A> </DIV>

</BODY> </HTML>

List 2 index.html

(26)

<HTML> <HEAD> <TITLE>

BohYoh Shibata's Self-Introduction. </TITLE>

A:hover {color: red; background-color: lightgreen; } BODY { background-color: black; color: yellow; } </STYLE> </HEAD> <BODY> <MARQUEE><H1> 柴田望洋の自己紹介ページ </H1></MARQUEE> <HR> <P>_{自分のことを説明するように。}<BR> たとえば、趣味のこと、大学のこと。<BR> アルバイトのこと_。<BR> 自分の持っているパソコン・車・バイクのこと。 </P> <HR> <DIV ALIGN=RIGHT> <A HREF="http://www.fit.ac.jp/index.html">

</BODY> </HTML>

List 3 intro.html

(27)

<HTML> <HEAD> <TITLE>

BohYoh Shibata's Brief History. </TITLE>

A:hover {color: red; background-color: lightgreen; } BODY { background-color: black; color: yellow; } </STYLE> </HEAD> <BODY> <MARQUEE><H1> 柴田望洋の略歴ページ </H1></MARQUEE> <HR> <UL> <LI>1963_年11_{月福岡県に生まれる} <LI>1984_{年３月九州大学卒業} <LI>1988年３月九州大学大学院修士課程修了 <LI>1991_{年３月九州大学大学院博士後期課程修了} <LI>1991_{年４月九州大学工学部助手} <LI>1993_年1_{月国立特殊教育総合研究所研究員} <LI>1994_{年５月福岡工業大学助教授} </UL> <HR> <DIV ALIGN=RIGHT> <A HREF="http://www.fit.ac.jp/index.html">

</BODY> </HTML>

List 4 history.html

(28)

<HTML> <HEAD> <TITLE>

BohYoh Shibata's Favorite. </TITLE>

A:hover {color: red; background-color: lightgreen; } BODY { background-color: black; color: yellow; } </STYLE> </HEAD> <BODY> <MARQUEE><H1> 柴田望洋のリンク集 </H1></MARQUEE> <HR> <DL>

<DT><A HREF="http://www.fit.ac.jp/index.html">_{福岡工業大学}</A> <DD>_{僕が通っている大学です。}

<DT><A HREF="http://www.ipc.fit.ac.jp/~s********/">_○○君</A> <DD>_{友達の○○君です。}

</DL> <HR>

<DIV ALIGN=RIGHT>

<A HREF="http://www.fit.ac.jp/index.html">

</BODY> </HTML>

List 5 links.html

(29)

著作権について

上公開画像、著作者、著作権有。、他上画像、了承得、自分上流用。、「著作権」公開・販売注意必要。紛、取扱、著作者意向大幅異。、「著作権」素材集書籍 CD-ROM 購入人利用（再配布禁止）、自由再配布、自由利用代著作権関表示義務、千差万別。「著作権」謳、必、誰了承得自由使限。何勘違、再配布禁止自分上公開「著作権自由使。」。勝手利用場合、最悪場合裁判沙汰可能性。本当意味「著作権」確認、流用無難。 ■演習画像、各貼。 ※Web検索を行って、ドライブHのWWWディレクトリに保存します。 ※日本語のファイル名は利用できません。もしファイル名が日本語であれば、適当な名前に変更します。 ※単一の画像の表示は、p.19で解説しています。 ※ページの背景（壁紙）の表示は、p.23で解説しています。

(30)

参考文献

1) 大藤幹『詳解HTML&XHTML&CSS辞典』，秀和，2002

2) W3C／内田明（翻訳）HTML 4.01仕様書，