HTML と電子情報

HTML によるコンテンツの作成
図 1 実習で作成するホームページ
今回の実習であなたは次のことができるようになります（図 1）．
イ) HTML 言語を用いたホームページの作り方が習得できます
ロ) 自分のホームページがもてます
ハ) 他の学生にホームページを通じて，自分をアピールすることができます
1.
イントロダクション
1.1. コンテンツ（HTML と電子情報）
HTML は，公開する情報に構造やデザインを与え，電子情報を取り込み，他の HTML へ参
照を可能とする言語，または，その言語で書かれたファイルのことを指します．電子情報の例とし
て，画像や音声，動画，Flash などがあります．これらのファイルは自分で作らないといけません．
特に，HTML が無いと，Web サーバに画像や音声，動画をおいても，公開とは言い難い状況
のままです．
1 / 10
HTML の作成はテキストエディタ（Emacs やメモ帳）でも出来ますが，大抵の場合はホーム
ページ作成ソフトや HTML エディタを使います．電子情報は適宜作成することになります．
1.2. HTML 言語について
Web ブラウザでホームページを表示するためには， HTML （ Hyper Text Markup
Language）と呼ぶ言語で記述する必要があります．HTML 形式のファイルは「＜」と「＞」で囲
んだ予約語（タグ）を含むテキストファイルで，Web ブラウザがこのタグの意味を解釈して，画面
に必要な情報を表示します．このタグの中には，「画像ファイルを読み込み表示する」，「このテキ
スト（または画像）がクリックされたら，どのサーバのどのファイルを読み出す」という意味を持つもの
が含まれます．具体的に見ていきましょう．
2.
使用方法
2.1. タグ
タグの基本は，
<TAG> 〜 </TAG>
という形をしています．“TAG”の部分には様々な命令をするコマンド名が入り，<TAG>と
</TAG>で挟まれた部分だけにそのタグの影響が生じます．
2.2. ドキュメントの構成法
HTML 文章をテキストエディタを用いて作成しましょう．ファイル名は，自分のメインのページであ
れば index.html とします．複数のホームページを作る場合は********.html とします．
********は適当な名前です．HTML ドキュメントの基本的な構成は以下のようになっています．
表 1 は，HTML 文章の簡単な作成例です．
表 1 index.html の基本構成
<HTML>
<HEAD>
<META charset=“utf-8”>
<TITLE>My Homepage</TITLE>
</HEAD>
<BODY>
<H1>ホームページ</H1>
ここは，私のホームページです．私の趣味は，
<UL>
<LI>映画鑑賞
2 / 10
実習
<LI>史跡散策
<LI>聖地巡礼
</UL>
私のメールアドレスは sima@t47.iep.sie.dendai.ac.jp です．メールを待っています．
<BR>
</BODY>
</HTML>
<HTML>と</HTML>はこれが HTML 文章であることを示すためのタグです．<HEAD>か
ら</HEAD>までがドキュメントについての情報で，ドキュメント全体に対する命令を記述します．
また，<BODY>から</BODY>までがドキュメント本体です．
3.
<HEAD>〜</HEAD>で使うもの
3.1. <TITLE>〜</TITLE>
ドキュメントのタイトルを指定するために使用します．
3.2. <META charset=“utf-8”>
文字コードを指定するときに使用します．正しく表示するためのおまじない．
4.
<BODY>〜</BODY>で使うもの
4.1. テキスト関係
サブページで実習
<HR>
HR は Horizontal Rule(水平方向の罫線)の意味です．ブラウザの左右いっぱいに横線を引
きます．このタグは単独で使われます．
<P>
段落(Paragraph)の変更，テキストが改行され，1 行分のスペースが空きます．これは単独
で使われます．
<BR>
BR は Break(改行)の略です．強制的に改行します．単独で使われます．
3 / 10
<OL><LI>〜</OL>
番号付きリスト(Ordered List)．各項目の先頭に<LI>をつけます（表 2）．
表 2 番号付きリストの場合
<OL>
<LI>映画鑑賞
<LI>史跡散策
<LI>聖地巡礼
</OL>
<UL><LI>〜</UL>
番号なしリスト(Unordered List)．各項目の先頭に<LI>をつけます（表 3）．
表 3 番号なしリストの場合
<UL>
<LI>映画鑑賞
<LI>史跡散策
<LI>聖地巡礼
</UL>
<DL><DT><DD>〜</DL>
定義型リスト(Definition List)．見出しの先頭(Definition Term)に<DT>をつけ，その説
明(Definition Description)を<DD>の後に書きます（表 4）．
表 4 定義型リストの場合
<DL>
<DT>富士山
<DD>日本で一番高い山
<DT>鷹
<DD>とっても強い鳥
<DT>なす
<DD>嫁にくわすな
</DL>
<PRE>〜</PRE>
整形済みテキスト(Preformatted text)．<PRE>〜</PRE>で挟まれたテキストは等幅フ
4 / 10
ォントで表示され，HTML ソースのスペースやタブ，改行がそのままブラウザ上に反映されます．ソ
ースコードなどを表示する際に便利です．
<BLOCKQUOTE>〜</BLOCKQUOTE>
本からの抜粋や引用を載せるときに使用します（表 5）．
表 5 番号付きリストの場合
某小説の冒頭部分です．
<BLOCKQUOTE>
吾輩は猫である．名前はまだない．
</BLOCKQUOTE>
4.2. フォント関係
<H1>〜</H1>，…，<H6>〜</H6>
フォントの大きさを変えるには，<H○>〜</H○>を使います（表 6）．○には，1 から 6 ま
での数字が入ります．<H1>が一番大きく，<H6>が一番小さくなります．もともと，見出し
(Heading)の文字サイズを表すタグであり，</H○>のあとは改行されます．
表 6 フォントの指定
<H1>大きいフォント</H1>
<H3>標準的なフォント</H3>
<H6>小さいフォント</H6>
<B>〜</B>
<I>〜</I>
これら二つは物理タグと呼ばれ，フォントの種類を直接指定します．<B>〜</B>は太文字，
<I>〜</I>はイタリック（斜体）にします．
<ADDRESS>〜</ADDRESS>
<EM>〜</EM>
これら二つは論理タグと呼ばれ，タグで挟まれたテキストを表示するためのフォントはブラウザ側で
決まります．<ADDRESS>〜</ADDRESS>は HTML 文章の著者を特定して，その著者と
連絡を取る一般的な方法を示すために使われます（例えば e-mail アドレス）．<EM>〜
</EM>は強調(Emphasis)を示したい場合に使われます．
5 / 10
4.3. イメージ関係
<IMG SRC=“url”>
HTML 文章中に画像を貼付けるために使います．url には画像の所存を表す URL を書きます．
画像ファイルのフォーマットは，GIF 形式が標準となっています．
<IMG SRC=“url” ALT=“text”>
テキストブラウザでアクセスしてくる人のために，画像の代わりに表示する文字(Alternate
Text)を指定するには ALT オプションを使います．
4.4. リンク関係
任意のテキストやインラインイメージをリンクの「ボタン」として，そこから他の HTML 文章や画像等
にリンクを張ることができます．
<A HREF=“url”>〜</A>
A はアンカー(Anchor)の略です．HREF(Hypertext Reference)の url の部分には HTML
文章や画像ファイル等の URL を記述します．〜の部分にはボタンとなるテキストやインラインイメー
ジを書きます（表 7）．
表 7 リンクの設定
サプページにリンク
<A HREF=“（ここに URL を記述）”>（ここに表示するテキストを記述）</A>
<A HREF=“（ここに URL を記述）”><IMG SRC=“image.gif”></A>
<A HREF=“#〜”>〜</A>，<A NAME=“〜”>〜</A>
長いドキュメントで，例えば，ページの一番はじめからページの途中にリンクを張りたい場合に使
います（表 8）．
表 8 リンクの設定その２
<BODY>
<A HREF=“#chapter1”>Chapter 1</A>
<A HREF=“#chapter2”>Chapter 2</A>
…
<A NAME=“chapter1”><H1>第一章</H1></A>
…
<A NAME=“chapter2”><H1>第二章</H1></A>
…
</BODY>
6 / 10
4.5. 表の作成
表組みをするための基本的なタグは，<TABLE>〜</TABLE>ですが，このままでは罫線が
入りません．そのために BORDER オプションを指定します．
<TABLE BORDER>〜</TABLE>で囲んだ部分を表環境と呼びます．表環境は入れ子
にして使うことができます．次に，行の定義，見出しの定義，データの定義に使うタグを示します
（表 9）．
表 9 表の作成に用いるタグ
<TR>〜</TR>
行(Table Row)を定義します．横１行ごとにこのタグを使います．
<TH>〜</TH>
属性を見出し(Table Header)として指定します．
<TD>〜</TD>
属性をデータ(Table Data)として指定します．
では，例を示します．表 10 のように BODY の部分に書くと，図 2（左）のようになります．
図 2 表の調整例
表 10 表の作成例
<TABLE>
<TR>
<TH>ヒット数</TH><TH>打率</TH><TH>背番号</TH>
</TR>
<TR>
<TD>210 本</TD><TD>403</TD><TD>51</TD>
</TR>
</TABLE>
7 / 10
ここで，<TABLE BORDER=“10”>とすると，図 2（右）のようになります．“10”は罫線の
太さで，数字が小さいほど細い線になります．この場合，図のように格好よく表示されます．この
例では，データが左寄りになっています．これを中央揃えにするには， <TD ALIGN=
“center”>210 本</TD>のようにし，右寄せにするには“center”を”right”にします．その行
全体を右寄せにするには次のようにします．<TR ALIGN=“right”>〜</TR>
5.
実際に作ってみる
学内においてホームページを公開するときは次のマナーを必ず守ってください．特に 2 や 4 に反す
ると訴えられることがあります．
5.1. ホームページをもつ上での注意事項
1.
ホームページを通じて商売をしない．
2.
他人や団体を傷つける内容は載せない．
3.
公序良俗に反する内容は掲載しない．またリンクしない．
4.
他人（他の団体）の著作権を侵害しない．すなわち，他人の作った画像，文章，ソフト
ウエアは許可がない限り勝手に載せない．
[その他の注意事項]
5.
自分の家の電話番号や自宅住所を載せない．メールアドレス程度にしておく．
5.2. ホームページ作成手順
1.
xinit で GNOME を立ち上げる（ユーザーで実施，root ではない）
2.
Emacs などのエディタで HTML 文章（ファイル名：index.html）を作成/修正する
3.
ホームディレクトリ内の public_html ディレクトリに，2 で作成した index.html 等を配置す
る
4.
ブラウザから http://ホスト名/~ユーザー名にアクセスし，自分のホームページを見る．必
要に応じて，2 の作業に戻る
5.3. ホームページ外部公開手順
実習
１． root でログイン
２．ドキュメントルートに index.html を配置
３． index.html 内に各自のホームページヘのリンクを作成
４．ブラウザから http://ホスト名/ にアクセスしドキュメントルートのページ→ホームページと移動
8 / 10
5.4. 補足事項
通常，file.html という名前でファイルを作った（配置した）とすると，そのファイルの URL は，
http://ホスト名/~ユーザー名/file.html となります．ただし，index.html というファイル名の
場合のみ，http://ホスト名/~ユーザー名あるいは http://ホスト名/ のように省略できま
す．
たとえば，表 11 のような例を作って下さい．タグは大文字でも小文字でも構いません．
表 11 ホームページの作成例
<HTML>
<HEAD>
<META charset=“utf-8”>
<TITLE>＊＊＊＊＊のホームページ</TITLE>
</HEAD>
<BODY>
<H1>ようこそ＊＊＊＊＊のホームページへ</H1>
<H3>私を紹介します</H3>
<UL>
<LI>所属：東京電機大学情報環境学部情報環境学科
<LI>部活：少林寺拳法
<LI>趣味：天体観測
<LI>お友達の＊＊君のホームページは
<A HREF=“http://www.s??.iep.sie.dendai.ac.jp/”>こちら</A>
</UL><BR>
<HR>
天体に興味のある方は是非，<A HREF=
“mailto:??JK???@s??.iep.sie.dendai.ac.jp”>こちらへ</A>メールを下さい．
</BODY>
</HTML>
サブページを作る場合，やはり同じ html 形式で作ります．そのページをリンクする場合は
index.html と同じディレクトリにある場合は，<A HREF=”sub1.html”>
</A>のように
書けばいいのですが，他のディレクトリにある場合には， <A HREF=”~( ユーザー
名)/dir1/dir2/sub1.html”> </A>のように自分のホームディレクトリから指定することができ
ます．また， index.html と同じ並びのディテクトリ dir1 の下にある場合には， <A
HREF=”dir1/sub.html”> </A>のように書くことができます．index.html の上のディレクト
リにある場合には，<A HREF=”../sub1.html”> </A>と書くことができます．
9 / 10
6.
演習
html を用いて（1）ドキュメントルートのページと（2）各自のユーザのホームページ，および
（3）サブページを作りなさい．ユーザのホームページには，自己紹介，所属，趣味等，各自メ
ールへのリンクと友人紹介を含めること．友人紹介コーナーを設け，友人の名前をクリックすると友
人のホームページにリンクするようにしなさい．完成した（1）ドキュメントルートのページ（2）各自
のホームページ（3）サブページをブラウザで表示確認し，その画面をスクリーンショットして画像ファ
イルとして保存してください（レポート課題として後日提出）．
7.
参考文献
[1] 富山大学情報処理教育研究会：『大学生の情報リテラシー入門（第 4 版）』，学術図
書出版社（2002）．
[2] 日経バイト：『最新パソコン技術大系 2001』，日経 BP 社（2000）．
[3] 東京電機大学情報環境学部（上野洋一郎先生），第 12 回コンピュータリテラシー講義
資料（2010 年 7 月 7 日の講義）．
[4] 杜甫々：とほほの WWW 入門， http://www.tohoho-web.com/www.htm
（2015 年 7 月 14 日にアクセス）．
10 / 10

Download Report