LESSON2:HTMLスタイルその1
1.タグの基本的な書き込み方法
上の「LESSON2:HTMLスタイルその1」をクリックして表示するとここで作るページが表示されます。その表示画面を右クリックして「ソース表示(V)」を指して 開くとソースが見られます。自分で入力して確かめていって下さい。メモ帳に(1)から (5)以下の書込みをします。終えたならば適当なホルダーに名前をindex.htmlで”保存”します。出来たならば”ファイル(F)”_”開く(O)"で 表示させます。同じページができれば、初ホームページ作成となります。

(1)テキストの初めに<!DOCTYPE html>と<HTML></HTML>を書き入れます。

<HTML>
</HTML>

(2)<HTML>のあとに<HEAD></HEAD>を書き込みます。

<HTML>
<HEAD>
</HEAD>
</HTML>

(3)<HEAD></HEAD>の間に<TITLE></TITLE>と書込みます。

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>

(4)<TITLE></TITLE>の間に”わたしのホームページ”などど適当に名前を付けます。


<HTML>
<HEAD>
<TITLE>わたしのホームページ</TITLE>
</HEAD>
</HTML>

(5)ここまでがlesson1のフォルダーにあったindex.htmlの内容です。タイトルだけでページの中身はありません。 エクスプローラの枠のタイトルにタイトルが表示されましたか?中身は<BODY></BODY>の間に記述します。

<HTML>
<HEAD>
<TITLE>わたしのホームページ</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

(6)<BODY></BODY>の間に以下のようにto English Home Pageと<H1>ようこそ わたしのホームページへ</H1>と書込みます。

<HTML>
<HEAD>
<TITLE>わたしのホームページ</TITLE>
</HEAD>
<BODY>
to English Home Page
<H1>ようこそ わたしのホームページへ</H1>
</BODY>
</HTML>

(7)さらに以下のようにリストになる4行の前に<UL></UL>を書き込み

<BODY>
to English Home Page
<H1>ようこそ わたしのホームページへ</H1>
<UL>
<LI>アートギャラリー
<LI>豆腐の作り方
<LI>坂本竜馬の部屋
<LI>朝の散歩道
</UL>
</BODY>

(8)<ADDRESS></ADDRESS>タグの間に"最終更新日:1997.11.20 ウェブマスター:大谷北太郎"を書込みます。

<ADDRESS>
最終更新日:1997.11.20 ウェブマスター:大谷北太郎
</ADDRESS>

(9)全体は以下のようになります。

<HTML>
<HEAD>
<TITLE>わたしのホームページ</TITLE>
</HEAD>
<BODY>
to English Home Page
<H1>ようこそ わたしのホームページへ</H1>
<UL>
<LI>アートギャラリー
<LI>豆腐の作り方
<LI>坂本竜馬の部屋
<LI>朝の散歩道
</UL>
<ADDRESS>
最終更新日:1997.11.20 ウェブマスター:大谷北太郎
</ADDRESS>
</BODY>
</HTML>
(10) これでご自分のパソコン上ではきちんと表示されるのですが実際にネット上に公開するには 先頭に<!DOCTYPE html>はHTML-5に準拠した宣言文を付けます。また、日本語のコードで 書かれていることの宣言も必要です。TITELの下に<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> と書き込みます。それと表示は扠せたくないけどファイルにメモを残したいときは <!--これはコメントで、間に挟まれた文字は表示されません。-->のようにします。 複数行に渡っても使えます。すると全体は下のようになります。
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>わたしのホームページ</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>
<BODY>
to English Home Page
<H1>ようこそ わたしのホームページへ</H1>
<!--以下は私のホームページの内容にする予定のリストです。-->
<UL>
<LI>アートギャラリー
<LI>豆腐の作り方
<LI>坂本竜馬の部屋
<LI>朝の散歩道
</UL>
<ADDRESS>
最終更新日:1997.11.20 ウェブマスター:大谷北太郎
</ADDRESS>
</BODY>
</HTML>
これでインターネットで公開する雛形は完成です。index.htmlというファイル名で保存しましょう。 メモ帳で作っている方はちょっとした注意が必要です。index.htmlのつもりでindex.html.txtとならないようにメモ帳で保存するときには すべてのファイルの種類(T)を表示(*.*)にしてから保存するようにしてください。 出来ましたか。to English Home Pageと書いてあるのは何故かなと気になりますか。ここをクリックしたら英語のページに行けるように 同じ要領でindexE.htmlという英語のページを作ってみましょう。作ったらindex.html同じフォルダー置くようにしてください。 <A HREF="indexE.html">to English Home Page</A>と書き込むとクリックすると英語のホームページが表示されるようになります。 index.htmlには<A HREF="index.html">to Japanese Home Page</A>とすれば行き来ができるようになります。
<!DOCTYPE html>
<HTML>
<!--このファイルindex.htmlは,
                                 LESSON2の内容をすべて使っています。-->
<HEAD>
<TITLE>わたしのホームページ</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>
<BODY>
<A HREF="indexE.html">to English Home Page</A>
<H1>ようこそ わたしのホームページへ</H1>
<!--以下は私のホームページの内容にする予定のリストです。-->
<UL>
<LI>アートギャラリー
<LI>豆腐の作り方
<LI>坂本竜馬の部屋
<LI>朝の散歩道
</UL>
<ADDRESS>
最終更新日:1997.11.20
ウェブマスター:朝飯 太郎
</ADDRESS>
</BODY>
</HTML>
<!DOCTYPE html>
<HTML>
<!--このファイルindexE.htmlは,
                                 LESSON2の内容をすべて使っています。-->
<HEAD>
<TITLE>My HomePage</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>
<BODY>
<A HREF="index.html">to Japanese Home Page</A>
<H1>Welcom My Home Page</H1>
<!--以下は私のホームページの内容にする予定のリストです。-->
<UL>
<LI>Art Garaly
<LI>Tohu Makeing
<LI>Room of Ryouma
<LI>Moning Small Path
</UL>
<ADDRESS>
UpDate:1997.11.20
Webmaster:Trou Asameshi
</ADDRESS>
</BODY>
</HTML>
上記タイトルの「LESSON2:HTMLスタイルその1」をクリックするとindex.htmlが表示されますので確かめてみてください。

2.lesson2で使用したタグの意味
(1)構造タグ;<HTML></HTML>,<HEAD></HEAD>,<BODY></BODY>
○<HTML></HTML>;HTMLファイルであることを明示するタグ
○<HEAD></HEAD>;ドキュメント情報記載部分
○<BODY></BODY>;ファイルの内容

(2)タイトルタグ;<TITLE></TITLE>
この部分に挟まれた内容がウインドウのタイトル部に表示されます。
必ず<HEAD></HEAD>の間に記述しなければなりません。

(3)ヘッダタグ;<H1></H1>
 このタグが付けられた文の上下にリターンを2回下だけのスペースが出来て 書体は太字になります。ヘッダタグには6段階の大きさ指定があります。 <H1>が最大で<H6>が最小です。試しに大きさを変えてみてください。

(4)リストタグ;<UL></UL>、<UL>
○<UL></UL>はUnnumberd Listの略で、番号の付かないリストを作るタグです。
○<UL>はList Itemのことでリストの内容を表示するためのエンプティタグです。
 行間は空きません。

(5)アドレスタグ;<ADDRESS></ADDRESS>
 文責表示のタグです。メールアドレスや作成日などクレジット部分を表すのに 使われます。イタリタック体(斜体)を作ります。

(6)コメントタグ;<!-- -->
表示されないコメントを記述するために使われます。

(7)ファイルがHTML-5準拠であるという宣言文<!DOCTYPE html>

(8)文字の種類がSift-JISである旨の表示<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

(9)リン先を表示する方法<A HREF="ファイルの場所とファイル名.html>クルックする文や絵</A> フィルの場所を示すには現在表示されているファイルとの相対位置で示す方法と絶対位置で示す方法があることは LESSON1での通りです。

インターネット・エクスプローラ(IE)で表示されている画面を右クリックして「ソースを表示(V)」でいろいろなページがどのような HTMLで書かれているか見ることができます。どんなタグを使っているかご自分で勉強すると良いです。以上でLESSON2を終わります。


LESSON1| LESSON3