1 / 6
HTML の基礎
2015.12.15
1. HTML ファイルの構成
1.1. HTML とは？ Web ブ ラ ウ ザ で ホ ー ム ペ ー ジ を 表 示 す る た め に は ， HTML（ Hyper Text Markup Language）と呼ぶ言語で記述する必要があります．HTML 形式のファイルは「＜」と「＞」 で囲んだ予約語（タグ）を含むテキストファイルで，Web ブラウザがこのタグの意味 を解釈して，画面に必要な情報を表示します．このタグの中には，「画像ファイルを 読み込み表示する」，「このテキスト（または画像）がクリックされたら，どのサーバ ーのどのファイルを読み出す」という意味を持つものが含まれます． 各自の Windows または Mac 端末から、例題ホームページ(別途リンクを提示)にアクセ スして、各端末のローカルフォルダ(Windows や OSX)にダウンロードしてください。 例題ホームページのソースを１行ずつ見ながら、その役割と、かんたんな使い方(変 更した場合の、効果)を確認しましょう。 1.2. タグ タグの基本は， <TAG> 〜 </TAG> という形をしています．“TAG”の部分には様々な命令をするコマンド名が入り，<TAG> と</TAG>で挟まれた部分だけにそのタグの影響が生じます． 1.3. ドキュメントの構成法 HTML 文章は通常，エディタを用いて作成します．ファイル名は，自分のメインのペ ージであれば通常 index.html としますが、任意のファイル名(********.html)で構い ません(********は適当な名前です). ファイルの先頭では、通常、html のバージョン、および、ファイルの言語などを示し ます。 例：html のバージョンが HTML5 で、日本語の場合 <!DOCTYPE html><html lang="ja"> 引き続く<HTML>と、ファイル末尾の</HTML>はこれが HTML 文章であることを示すため のタグです． <HEAD>から</HEAD>までがドキュメントについての情報で，ドキュメント全体に対す る命令を記述します．2 / 6 部分です。本部分については、説明は省略します。 <BODY>から</BODY>までがドキュメント本体です．
2. <HEAD>〜</HEAD>で使うもの
2.1. <META charset=“utf-8”> 文字コードを指定するときに使用します．正しく表示するためのおまじない． 2.2. <TITLE>〜</TITLE> ドキュメントのタイトル(ブラウザのタブなどで見える名前)を指定するために使用 します．3. <BODY>〜</BODY>で使うもの
3.1. 表示エリア関係<body bgcolor="#ffffee" text="#000099" link="#0000ff" vlink="#ff00ff" alink="#ff0000"> それぞれ、背景、テキスト、リンクなどの色を指定します。 <div>, </div> パラメータを指定することで囲んでいるエリアの属性を一括して指定できます。 例 <div align="center"> 〜</div> 範囲内を全てセンター寄せにします。 3.2. テキスト関係 <HR> ブラウザの左右いっぱいに横線を引きます．このタグは単独で使われます． <b>〜</b> フォントをボールド(太字にします) <P> 段落の変更，テキストが改行され，1 行分のスペースが空きます．これは単独で使 われます．
3 / 6 <BR> 強制的に改行します．単独で使われます． <OL><LI>〜</OL> 番号付きリスト．各項目の先頭に<LI>をつけます（表 1）． 表 1 番号付きリストの場合 <OL> <LI>映画鑑賞 <LI>史跡散策 <LI>聖地巡礼 </OL> <UL><LI>〜</UL> 番号なしリスト．各項目の先頭に<LI>をつけます（表 2）． 表 2 番号なしリストの場合 <UL> <LI>映画鑑賞 <LI>史跡散策 <LI>聖地巡礼 </UL> 3.3. フォント関係 <H1>〜</H1>，…，<H6>〜</H6> フォントの大きさを変えるには，<H？>〜</H？>を使います（表 3）．？には，1 か ら 6 までの数字が入ります．<H1>が一番大きく，<H6>が一番小さくなります．もとも と，見出しの文字サイズを表すタグであり，</H？>のあとは改行されます． <font size="6">〜</font> という書式も可能。 表 3 フォントの指定 <H1>大きいフォント</H1> <H3>標準的なフォント</H3> <H6>小さいフォント</H6>
4 / 6 <I>〜</I> これら二つは物理タグと呼ばれ，フォントの種類を直接指定します．<B>〜</B>は 太文字，<I>〜</I>はイタリック（斜体）にします． 3.4. イメージ関係 <IMG SRC=“url”> HTML 文章中に画像を貼付けるために使います．url には画像の所存を表す URL を書 きます．画像ファイルのフォーマットは，GIF 形式が標準となっています．
<IMG SRC=“url” ALT=“text”>
テキストブラウザでアクセスしてくる人のために，画像の代わりに表示する文字を 指定するには ALT オプションを使います．
例：<IMG SRC=“face.gif” ALT=“(^_^)”>
3.5. 表の作成 表組みをするための基本的なタグは，<TABLE>〜</TABLE>ですが，このままでは罫 線が入りません．そのために BORDAR オプションを指定します． <TABLE BORDAR>〜</TABLE>で囲んだ部分を表環境と呼びます．表環境は入れ子にし て使うことができます．次に，行の定義，見出しの定義，データの定義に使うタグを 示します（表 4）． 表 4 表の作成に用いるタグ <TR>〜</TR> 行を定義します．横１行ごとにこのタグを使います． <TH>〜</TH> 属性を見出しとして指定します． <TD>〜</TD> 属性をデータとして指定します． <TABLE BORDER=“1”>とすると，例題ファイルのように表示されます．“1”は罫線 の太さで，数字が小さいほど細い線になります．この例では，データが左寄りになっ ています．これを中央揃えにするには，<TD ALIGN=“center”>210 本</TD>のように し，右寄せにするには“center”を”right”にします．その行全体を右寄せにする には次のようにします．<TR ALIGN=“right”>〜</TR>
5 / 6 3.6. リンク関係 任意のテキストやインラインイメージをリンクの「ボタン」として，そこから他の HTML 文章や画像等にリンクを張ることができます． <A HREF=“url”>〜</A> url の部分には HTML 文章や画像ファイル等の URL を記述します．〜の部分にはボタ ンとなるテキストやインラインイメージを書きます（表 5）． 表 6 リンクの設定
<A HREF=“（ここに URL を記述）”>（ここに表示するテキストを記述）</A> <A HREF=“（ここに URL を記述）”><IMG SRC=“image.gif”></A>
4. 実際に作ってみる
学内においてホームページを公開するときは次のマナーを必ず守ってください．特 に 2 や 4 に反すると訴えられることがあります． 4.1. ホームページをもつ上での注意事項 1. ホームページを通じて商売をしない． 2. 他人や団体を傷つける内容は載せない． 3. 公序良俗に反する内容は掲載しない．またリンクしない． 4. 他人（他の団体）の著作権を侵害しない．すなわち，他人の作った画像，文章， ソフトウエアは許可がない限り勝手に載せない． [その他の注意事項] 5. 自分の家の電話番号や自宅住所を載せない．メールアドレス程度にしておく． 4.2. ホームページ作成手順 1. 例題ホームページを修正して自分のホームページを作成。2. Apache を起動している仮想マシンに、ホストマシン(Windows や OSX)から FTP で 接続 3. ローカルフォルダのホームページを、仮想マシンにアップロード。root 内の public_html ディレクトリに，作成したファイルを配置する． 4. ブラウザから http://ホスト名/****.html にアクセスし，自分のホームページを 見る．
6 / 6 4.3. 補足事項 通常，file.html という名前でファイルを作った（配置した）とすると，そのファ イルの URL は，http://ホスト名/file.html となります．ただし，index.html という ファイル名の場合のみ，http://ホスト名 のように省略できます． サブページを作る場合，やはり同じ html 形式で作ります．そのページをリンクす る場合は index.html と同じディレクトリにある場合は，<A HREF=”sub1.html”> </A>のように書けばいいのですが，同じ並びのディテクトリ dir1 の下にある場合に は，<A HREF=”dir1/sub.html”> </A>のように書くことができます．Index.html の上のディレクトリにある場合には，<A HREF=”../sub1.html”> </A>と書くこと ができます．
