HTML の 基 礎 2015.12.15 1. HTML ファイルの 構 成 1.1. HTML とは? Web ブラウザでホームページを 表 示 するためには,HTML(Hyper Text Markup Language)と 呼 ぶ 言 語 で 記 述 す る 必 要 が あ り ま す.HTML 形 式 のファイルは < と > で 囲 んだ 予 約 語 (タグ)を 含 むテキストファイルで,Web ブラウザがこのタグの 意 味 を 解 釈 して, 画 面 に 必 要 な 情 報 を 表 示 します.このタグの 中 には, 画 像 ファイルを 読 み 込 み 表 示 する, このテキスト(または 画 像 )がクリックされたら,どのサーバ ーのどのファイルを 読 み 出 す という 意 味 を 持 つものが 含 まれます. 各 自 の Windows または Mac 端 末 から 例 題 ホームページ( 別 途 リンクを 提 示 )にアクセ スして 各 端 末 のローカルフォルダ(Windows や OSX)にダウンロードしてください 例 題 ホームページのソースを1 行 ずつ 見 ながら その 役 割 と かんたんな 使 い 方 ( 変 更 した 場 合 の 効 果 )を 確 認 しましょう 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>までがドキュメントについての 情 報 で,ドキュメント 全 体 に 対 す る 命 令 を 記 述 します. 1 / 6
<script>から</script>までがプログラム 動 作 を 実 施 させるスクリプトの 定 義 を 行 う 部 分 です 本 部 分 については 説 明 は 省 略 します <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 行 分 のスペースが 空 きます.これは 単 独 で 使 われます. 2 / 6
<BR> 強 制 的 に 改 行 します. 単 独 で 使 われます. <OL><LI> </OL> 番 号 付 きリスト. 各 項 目 の 先 頭 に<LI>をつけます( 表 1). <OL> <LI> 映 画 鑑 賞 <LI> 史 跡 散 策 <LI> 聖 地 巡 礼 </OL> 表 1 番 号 付 きリストの 場 合 <UL><LI> </UL> 番 号 なしリスト. 各 項 目 の 先 頭 に<LI>をつけます( 表 2). <UL> <LI> 映 画 鑑 賞 <LI> 史 跡 散 策 <LI> 聖 地 巡 礼 </UL> 表 2 番 号 なしリストの 場 合 3.3. フォント 関 係 <H1> </H1>,,<H6> </H6> フォントの 大 きさを 変 えるには,<H?> </H?>を 使 います( 表 3).?には,1 か ら 6 までの 数 字 が 入 ります.<H1>が 一 番 大 きく,<H6>が 一 番 小 さくなります.もとも と, 見 出 しの 文 字 サイズを 表 すタグであり,</H?>のあとは 改 行 されます. <font size="6"> </font> という 書 式 も 可 能 <H1> 大 きいフォント</H1> <H3> 標 準 的 なフォント</H3> <H6> 小 さいフォント</H6> 表 3 フォントの 指 定 3 / 6
<B> </B> <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). <TR> </TR> <TH> </TH> <TD> </TD> 表 4 表 の 作 成 に 用 いるタグ 行 を 定 義 します. 横 1 行 ごとにこのタグを 使 います. 属 性 を 見 出 しとして 指 定 します. 属 性 をデータとして 指 定 します. <TABLE BORDER= 1 >とすると, 例 題 ファイルのように 表 示 されます. 1 は 罫 線 の 太 さで, 数 字 が 小 さいほど 細 い 線 になります.この 例 では,データが 左 寄 りになっ ています.これを 中 央 揃 えにするには,<TD ALIGN= center >210 本 </TD>のように し, 右 寄 せにするには center を right にします.その 行 全 体 を 右 寄 せにする には 次 のようにします.<TR ALIGN= right > </TR> 4 / 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 にアクセスし, 自 分 のホームページを 見 る. 5 / 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>と 書 くこと ができます. 5. 演 習 html を 用 いて 各 自 のホームページを 作 って メインページをキャプチャして 提 出 し て 下 さい 6 / 6