HTML の基本構文
１．Web ページの作り方
Web ページは HTML(Hyper-Text Markup Language)という決められた書式にしたがっ て記述されています．コンピュータ・ソフトウエアがプログラミング言語で書かれている ように，Web ページも HTML という一種の言語を使用しています．といっても難しいも のではなく，「タグ」という記号を用いて，文字や画像などの形式を指定するだけという 簡単なものです
1.1 Web ページのファイルと作成の流れ
● HTML ファイル HTML ファイルはテキスト（文字）形式のファイルですので，テキスト・エディタ（秀丸 やメモ帳など）で簡単に作成できます．また，最近ではタグなどの HTML の命令を直接使用 しないで，Web ページを作ることができるアプリケーションも発売されています．Word な どでは，作成した文書を HTML 形式で保存することによって，HTML ファイルを作成するこ とができます．授業ではタグを用いて直接編集する方法を学習します． HTML ファイルには，「○○○○○.html」または「○○○○○.htm」といったファイル名 に拡張子がつきます．「○○○○○」の部分は自由ですが，半角英数文字(直接入力)を使 用します．また，拡張子「.html」の部分も 半角文字(直接入力)です． ● Web ページの中身を見よう インターネット・エクスプローラに表示されている Web ページの中身を見ましょう． < >のような記号が含まれているものが，HTML ファイルです． ① インターネット・エクスプローラで Web ページを表示しておく． ② メニューバーにある「表示」をクリックし，「ソース」を選択する． ● Web ページ作成の流れ 図 1-1：Web ページ作成の流れ エディタ(メモ帳) Web ページを作成/修正して 保存 する インターネットエクスプローラ 更新 して確認する1.2 使用するファイルとフォルダ
HTML ファイルはマイドキュメントに public_html という名前のフォルダを作成して，そ の中に保存します．雛型が情報基礎クラスごとの Ring に準備されているのでそちらからダ ウンロードします。 ● フォルダの準備 マイドキュメントを開いて，メニューバーの ファイル，新規作成，フォルダを順に選択すると，新しいフォルダができるので，さ らに，メニューバーから，ファイル，名前の変更を選択し，名前を public_html に書き換 えます． このフォルダの中に，授業用 Ring から必要なファイルを準備します．主なファ イルの構成を示しておきます． マイドキュメントの中の−public_html フォルダ index-j.html：自分の Web ページの雛形です． link.html：興味ページのリンク集などの雛形です．1.3 エディタ（メモ帳）を使った Web ページの作成と修正
● メモ帳を起動する メモ帳は HTML ファイルなどのテキストを作成するために Windows 標準に準備されてい るエディタ（テキスト編集用のアプリケーション）です． スタート，すべてのプログラム，アクセサリの中に「メモ帳」があります．これを「ク リック」して起動します． ● 基本操作 新しく作る 「ファイル」の「新規」を選びます．はじめは，すでに新規作成モードになっていま す．新規作成では，無からすべてタグを作成することになります． 既に作ってあるファイルを直す 「ファイル」の「開く」を選びます． ファイルのあるフォルダは，マイドキュメント，public_html です．「ファイルの場 所」の右にある下三角ボタン▼を「クリック」して，フォルダを「ダブルクリック」 （または「クリック」して開く）で選択し，開きたいファイル名をダブルクリック」 （または「クリック」して開く）で選択して，開きます． 作成／修正して保存 ・ 新しく作ったとき：「ファイル」の「上書き保存」（開いたときと同名）または， 「名前を付けて保存」（開いたときと別名）を選びます．保存するフォルダは， マイドキュメント，public_html です．「保存する場所」の右にある下三角ボタン ▼を「クリック」して，保存するフォルダを「ダブルクリック」（または「クリック」 して開く）で選択し，「○○○○○○.html」などと名前を付けて保存ボタンを「クリ ック」します． ・ 同名で保存するときは，「ファイル」の「上書き保存」を選び保存します． ファイル表示の切り替え 複数のファイルを開いている場合には，これらのうちの１つのファイルしか表示され ません．メニューバーにある「ウィンドウ」をクリックすると，現在開いているファ イルが表示されますので，表示するファイルを選択してください． 日本語入力，全角文字と半角文字の切り替え 日本語入力ツールバー の「A」の部分をクリックします．日本 語や全角文字は「ひらがな」を選び，あにします．半角文字やアルファベットは「半 角英数（直接入力）」を選び，A(細い A)にします．また，「ALT キー」を押しながら 「半角/全角キー」を押しても，全角文字と半角文字が切り替わります． 文字の削除 マウスの左ボタンをクリックあるいは，カーソルキー（矢印のキー）を使って，消し たい文字にカーソル（点滅する｜）を合わせます．「Back Space キー」を押すとカー ソルの 1 つ前の文字が削除されます．「Delete キー」を押すとカーソルの 1 つ後の文 字が削除されます． 文字の挿入 文字を入力するとカーソルキーの後に文字が入力されます． 文字列の削除 マウスの左ボタンを押したまま右（上下左右）にマウスを移動すると，その部分の色 が反転します．これを文字列の「選択」と呼びます．「Delete キー」を押すと文字列 が削除されます． 文字列の移動 上の要領で文字列を選択して，色を反転させます．「編集−＞切り取り」をクリック すると，その部分が削除されます．次に，「編集−＞貼り付け」をクリックすると切 り取った部分が貼り付けられ，文字列が移動できます．
文字列のコピー 上の要領で文字列を選択します．「編集−＞コピー」 をクリックすると，その部 分が記憶されます．次に，「編集―＞貼り付け」 をクリックすると記憶した部分 が貼り付けられ，文字列をコピーできます． やり直し 操作を間違えたときには，「元に戻すボタン」 をクリックすると，前の状態に戻 すことができます．
2.4 作成したファイルをインターネット・エクスプローラで表示する
● 作成した Web ページを新たにインターネット・エクスプローラで見るとき 「ファイル」，「開く」を選びます．参照のボタンをクリックして，作成した HTML フ ァイルを探してクリックし，開くをクリックします．OK をクリックします． 参照の後に，「ファイルの場所」の右横にある下三角ボタン▼をクリックして，保存 してあるファイルのフォルダを「ダブルクリック」して指定してください． 使用するフォルダは，マイドキュメント， public_html です．「ファイルの場所」の 右にある下三角ボタン▼を「クリック」して，「ダブルクリック」で選択してください． ● 既にインターネット・エクスプローラでファイルを見ているとき タスクバー上にすでにインターネット・エクスプローラが起動されているときは クリックしてこのウィンドウを前面に出します．そして， インターネット・エクスプローラの (更新ボタン)をクリックします．2. Web ページの基本的なタグ
2.1 Web ページの基本型
Web ページでは，<命令>という形をした「タグ」を使います．はじめに，簡単な HTML フ ァイル index-j.html を示します．エディタで index-j.html を開いてください． <HTML> HTML の始まりです． <HEAD> <TITLE>MyHomepage</TITLE> Web ページのタイトルです． </HEAD> <BODY> 本文の始まりです． ○○○○○のWeb ページ はじめての Web ページです． </BODY> 本文の終わりです． </HTML> HTML の終わりです． <命令>は，半角（全角ではなく）で書きます． 正<H1> 誤＜H１＞ <命令>は，大文字でも小文字でも OK です． 正<H1> 正<h1> 「Enter キー」を押すとエディタ上では次の行に（改行）移動します．また，「space キー」を押すと空白が挿入されますが，Web ページ上では無視されてしまいます． <命令>∼</命令>の形が数多くあります．この∼のところが命令に従います．3.2 Web ページでできること
インターネット・エクスプローラで「ファイル」，「開く」から index-j.html を開いてお いてください．エディタ「メモ帳」上で，index-j.html を修正していきましょう． ● 文字の大きさや字体，色を変えることができます． <H1>ここが見出しになります</H1> 数字は１(大きな見出し)∼６(小さな見出し) この間に本文を書きます 全角は横に長い文字で す．タグには使えません<FONT SIZE=6>この文字の大きさが変わります</FONT>
数字は１(小さな字)∼7(大きな字) <FONT COLOR=”Blue”>この文字の色が変わります</FONT>
文字の色は下の表から選んでください． 表 2-1：色の対応表
White 白 Black 黒 Red 赤 Green 緑 Blue 青 Yellow 黄 Purple 紫 Aqua 藍緑 Maroon 栗 Navy 濃紺 Olive 緑 Teal 青緑 Gray 灰 Silver 銀 Lime ライム Fuchsia 赤紫
表 2-2：その他の色
Snow Linen Bisque Seashell Ivory Azure LightGrey RoyalBlue SkyBlue Cyan DarkGreen Aquamarine Beige Wheat Tan Gold Orange Peru Senna Salmon Tomato Coral Pink Violet Plum Indigo
<FONT COLOR=”Indigo”>この文字の色が変わります</FONT>
文字の色がインディゴ・ブルーになります． 色は，赤，緑，青の３原色で表わすことができます．「#○○○○○」の形で，２桁ずつ <HTML> <HEAD> <TITLE>MyHomepage</TITLE> </HEAD> <BODY> <H1>○○○○○の Web ページ</H1> はじめての Web ページです． </BODY> </HTML> この部分が１番大きな見出 し文字になります．
画像ファイルが必要です． で赤，緑，青に対応します．数値は２桁の 00 から FF までの 16 進数を使います．数字が小 さい（00）と色が薄く，数字が大きい（FF）と色が濃くなります． 例：#FF0000 赤が FF，緑が 00，青が 00→まっ赤（Red） #0000FF 赤が 00，緑が 00，青が FF→まっ青（Blue） #FF00FF 赤が FF，緑が 00，青が FF→ま紫
#A52A2A 赤が A5，緑が 2A，青が 2A→茶
#808000 赤が 80，緑が 80，青が 00→オリーブ
<FONT COLOR=”#0000FF”>この文字の色が変わります</FONT>
文字の色が青くなります．
● 背景に色をつけるあるいは，画像を背景にすることができます． <BODY>の部分を次のように置き換えます．
<BODY BGCOLOR=”Yellow”> 背景が黄色に変わります．色は表から選びます． <BODY BACKGROUND=”back1.gif”> 背景が”back1.gif”という画像が背景になります． index-j.html を修正しましょう．
<BODY BGCOLOR=”Yellow”>
<H1>○○○○のホームページ</H1> <H1>○○○○○のホームページ</H1> <FONT COLOR=”Blue”>はじめてのホームページです．</FONT> <H1>○○○○○のホームページ</H1> <FONT SIZE=5>はじめてのホームページです.</FONT> この部分の文字の 色が青に変わりま す． 背景の色が黄色に なります． この部分の文字の大き さが変わります．
● 表組や枠をつけることができます． <TABLE> <TR><TD>A</TD><TD>B</TD></TR> <TR><TD>C</TD><TD>D</TD></TR> </TABLE> <TABLE>∼</TABLE> 表の始まりと終わりです． BORDER 枠です． <TR>∼</TR> １行の始まりと終わりです． <TD>∼</TD> １枠の始まりと終わりです． <TABLE BORDER=5> <TR><TD>○○○○のページ</TD></TR> </TABLE> index-j.html を修正しましょう． 表になります． ○○○○のページの周囲に 太さ ５ の枠を作ります．
<BODY BACKGROUND=”pic/back1.gif”> <TABLE BORDER=10> <TR><TD> <H1>○○○○のホームページ</H1> </TD></TR> </TABLE> 周囲に太さ 10 の枠を 作ります.
<BODY BACKGROUND=”back1.gif”> <H1>○○○○のホームページ</H1>
授 業 用 サ ン プ ル 画 像 か ら back1.gif をダウンロー ドして使います.
● 写真や絵などの画像を表示できます．
<IMG SRC=”welcome1.gif”> 画像”welcome1.gif”が表示されます． <IMG SRC=”photo.jpg”> 画像” photo.jpg”が表示されます． index-j.html を修正しましょう． ● 他のページをリンクすることができます． <A HREF=”sample2.html”>sample2</A> クリックすると sample2.html を表示します． <A HREF=”http://www.rku.ac.jp/”>流通経済大学大学</A> クリックすると http://www.rku.ac.jp/に切り替わります． 画像ファイルが必要です． この部分が青くなり， 下線が付きます この部分が青くなり，下線が付きます 画像ファイルが必要です． welcome1.gif を 表示します. “anime1.gif を表示します. <IMG SRC=welcome1.gif”> <H1>○○○○のホームページ</H1> <IMG SRC="anime1.gif"> 授業用サンプル画像からダウンロード した welcome1.gif を表示します. “anime1.gif を表示します. <HTML> <HEAD> <TITLE>MyHomepage</TITLE> </HEAD> <BODY> <H1>○○○○○のホームページ</H1> はじめてのホームページです．
<A HREF=”./link.html”>リンクへ行く</A> </BODY>
</HTML>
“link へ行く”に下線が表示 され，クリックするとファイル ”link.html”にリンクします．
リンク先のファイル link.html をエディタで開いて，作成しましょう． ● 箇条書の作成 Ring からコピーした index-j.html では，前述のリンクが箇条書リスト内に入ってい ます． <OL>∼</OL> 番号つきリスト <UL>∼</UL> 番号なし（記号）リスト ∼のなかに<li>ではじめてリスト項目を記入します． ● その他の主なタグ <P> 段落を変えます．幅の広い改行です． <BR> 改行します． <HR> 区切りの水平線を引きます． <CENTER>∼</CENTER> ∼の部分を真ん中によせます． <!-- ∼ --> ∼の部分はコメント／説明文となり，Web ページに表示されません． ● フリー画像を利用しよう インターネット上で，自由に使える画像が数多く公開されていますので，利用しよう． 取り込みたい画像にマウスを合わせ，「マウスの右ボタン」をクリック，「名前を付 けて画像を保存」で画像を取り込むことができます．マイドキュメント， public_html フォルダの中に保存します．この場合，public_html フォルダにある HTML ファイルのタグには，相対パス指定で， <IMG SRC=” welcome1.gif”> <HTML> <HEAD> <TITLE>私のリンク集</TITLE> </HEAD> <BODY> <H1>私のリンク集</H1> オリジナルリンク集を作ろう！！！
<A HREF=”./index-j.html”>目次へ戻る</A> </BODY>
</HTML>
“目次へ戻る”に下線が表示され，クリッ クするとファイル
<BODY BACKGROUND=”back1.gif”> のように記入します．ファイル拡張子”.gif”と”.jpg”の部分を間違えないようにしまし ょう． 取り込んだ画像のファイル名をメモしておきましょう． 著作権の問題がありますので，作者の注意・指示にしたがって利用してください． index-j.html を修正しましょう． (演習)ブラウザ IE で表示して，どのような目次ページができたか確認しよう． <HTML> <HEAD> <TITLE>MyHomepage</TITLE> </HEAD> <BODY> <H1>○○○○○の Web ページ</H1> はじめての Web ページです． <BR> <A HREF=”./link.html”>私のリンクへ行く</A> <BR> <A HREF=”http://www.rku.ac.jp/index-j.html”> 大学のトップページへ</A> </BODY> </HTML> <BR>は改行です． “大学のトップページへ”に下線が表 示され，クリックするとファイル ”www.rku.ac.jp/index-j.html” に リ ンクします． “私のリンクへ行く”に下線が表示 され，クリックするとファイル ”link.html”にリンクします．
3. 少し複雑な Web ページ
3.1 もろもろのタグ
● 全体の文字の色を変更します．
<BODY BGCOLOR=”Black” TEXT=”White” LINK=”Red” VLINK=”Yellow”>
背景を黒，文字を白，リンクの文字を赤，既に利用したリンク の文字を黄
色にします．
● 画像をクリックすると，リンク先に飛ぶようにします． <A HREF=”ongaku.html”><IMG SRC=”anime1.gif></A>
画像”anime1.gif”がリンクボタンになります．
● メールアドレスをクリックするとメールソフトが起動する．
<A HREF=”mailto:[email protected]”>[email protected]</A> ● 文字を横にスクロールする．
<MARQUEE>ようこそ○○○○の Web ページへ</MARQUEE>
「ようこそ○○○○の Web ページへ」の部分が横に移動します． ● ページ内でリンク（ジャンプ）する 一つのWeb ページが長い場合などに使います．リンク（青い下線部分）をクリックす ると，指定した場所に移動することができます． ・リンク元の記述 <AHREF=”#ongaku”>音楽</A> 音楽 に下線が引かれます． ・リンク先（飛び先）の記述 <ANAME=”ongaku”>音楽の話題</A> リンク元の 音楽 の部分をクリックすると， 音楽の話題 の場所に移動します． メールアドレスが必要です． #ongaku と ongaku が対応します
4. 自分の Web ページを作ろう
index-j.html に目次用の Web ページの雛形を用意しました．必要な場所に記入し，変 更するとオリジナルの Web ページが完成します． もちろん，雛形にこだわらず Web ページを作成して構いません． 背景，Welcome ロゴ，動物などのアニメ，区切り線やボタンなどの画像を選択できま す．好みのものを選んでください．授業計画ページから，利用できる画像データが確 認できます．これらは，インターネットで見つけたフリーの画像です． お気に入りのリンクを探しておいて，そのWeb ページのアドレスを記録してくださ い．リンクを張るとクリックするだけでお気に入りのページに飛ぶことができます．● 基本的な Web ページ index-j.html の内容
<HTML>
<HEAD><TITLE>My Home page</TITLE></HEAD>
<BODY BACKGROUND="back1.gif">
<CENTER>
<IMG SRC="welcome1.gif">
<MARQUEE>○○○○の Web ページへ ようこそ</MARQUEE>
<P> <P>
<TABLE BORDER=6>
<TR><TD><H2>○○○○の Web ページ</H2></TD></TR> </TABLE>
<IMG SRC=" photo00.jpg " height=20% width=20%> <P> <IMG SRC="line1.gif"> <P> <IMG SRC="animal1.gif"> <IMG SRC="animal1.gif"> <P> <IMG SRC=" button1.gif">ニックネーム：○○○○<P> <IMG SRC=" button1.gif"> 活動：○○○○<P> <IMG SRC=" button1.gif"> 趣味：○○○○<P> <IMG SRC=" anime1.gif"> <HR> 背景です． back1∼30 から選びます ようこその画像です． welcome1∼20 から選びます． ようこその文字がスクロール します． 改行です． 表の枠を使って，強調します． （オプション）絵または写真を入れま す．数字を変えると大きさが変わりま す． 区切り線です． line1∼15 から選びます． 動物の画像です． animal1∼30 から選びます． ボタンの画像です． button1∼15 から選びます． アニメの画像です． anime1∼30 から選びます． 中央揃えの始まりです．
ここに，近況の報告，趣味の話や，主張したいことがらを書いてください． <P> <IMG SRC=" button2.gif"> <A HREF="link.html">最近興味のあることなど</A> <P> <IMG SRC="button2.gif"> <A HREF="ongaku.html">好きな音楽</A> <P> <HR> お気に入りのリンク <P> <IMG SRC="button2.gif"> <A HREF="http://www.rku.ac.jp/index-j.html">大学のページへ</A> <P> <IMG SRC="button2.gif"> <A HREF="http://www.isize.com/">リクナビ</A><BR> <P> </CENTER> <HR> </BODY> </HTML> 自分で作成したファイルを リンクします． 外部のWeb ページへのリンクで す． 中央揃えの終わりです．
【参考資料】 フリーソフトと入手方法 フリーソフトは、free(無料)で使用できるソフトの総称です。これらのソフトの入手する 方法は、パソコン雑誌の付録などにもついていたりしますが、一番確実で、新しいもの を入手するには、インターネットを通じて手に入れる方法（ダウンロード：down load） です。 フリーソフトの使用上の注意 ・フリーソフトは、無料だけあって、多少の不具合やバグが見られる場合があります。 ・ フリーソフトとは別に、シェアウェア(shareware)という有料なソフトもありますの でご注意ください。 ・ フリーソフトには、ソフトにより利用規定がありますので、それぞれの利用規定を遵 守.して、自己責任のもとでご利用ください。 以下にダウンロード可能なWeb ページのアドレスを記載します。 -秀丸エディタ（シェアウェア）- http://computers.yahoo.co.jp/download/vector/win/writing/edit/hm/ トップ > フリーソフト＆シェアウェア > Windows http://download.yahoo.co.jp/vector/win/ ダウンロードしたソフトは、通常、ファイルの容量を小さくするために”圧縮”ということ がなされており、そのままでは使用できません。”解凍”をしてご使用ください。解凍方法 は、それぞれのソフトに readme.txt として、ヘルプ(HELP)ファイルに記載されてい ますのでそちらをご参照ください。
