簡単なホームページの作り方 第3回        

3、HTMLファイルの基本構造(一番簡単なホームページの作成) さて、今回からワープロソフトやエディターなどを使って、実際にホームページ用の  HTMLファイルを作ってみましょう。 まず、HTMLファイルは基本的に3つの部分で構成されています。(構造タグ) ====================================== <HTML> ・・・・・・・・・・・・・・(1)   ファイルのはじめ<HTML> <HEAD> ・・・・・・・・・・・・・・(2)   ヘッダ<HEAD>     ヘッダ情報 </HEAD> ・・・・・・・・・・・・・・(2)’ <BODY> ・・・・・・・・・・・・・・(3)   本文の始まり<BODY>     本文 </BODY> ・・・・・・・・・・・・・・(3)’  本文の終わり</BODY> </HTML> ・・・・・・・・・・・・・・(1)’  ファイルの終わり</HTML> ====================================== (1)と(1)’つまり<HTML> と </HTML>がHTMLファイルである事を示す<HTML>タグ といい、HTMLファイルの最初と最後に必ずつけます。 また (2)と(2)’つまり<HEAD>と </HEAD>がタイトルや特徴などのヘッダ情報を入力 する <HEAD>タグです そして(3)と(3)’つまり<BODY>と</BODY>がページの本文を入力する<BODY>タグと呼 ばれています。ブラウザが表示するのは、このボディタグで囲まれた部分です。 これら3つのタグは構造タグと呼ばれています。 また、それぞれのタグの終わりには必ず/を付けます。(</HTML></HEAD></BODY>) 例題として、以下に一番簡単なホームページを作ってみます。 ======================================= <HTML> <HEAD></HEAD> <BODY> これは、一番簡単なホームページです。 </BODY> </HTML> ======================================== この例では、「これは、一番簡単なホームページです。」という文字が表示されます。 それでは、実際に試して見ましょう。  (上の例をコピーしてエディタに張り付け、ファイル名をhazime.htmlとして保存し、   ネットスケープナビゲータなどで読み込んでみる)(b:\kmham211/hazime.html)@ 如何でしょうか? それでは、ここで第2回で学んだディレクトリ構造について見てみましょう。 画像データーは、\kmham211/datagazou/ に画像ファイルが転送されていました。 himawari3.jpgがこのディレクトリにあるので、それを呼び出してみます。 呼び出し方は、ファイルの格納場所までのパスを指定して(下記の仕方です)データの ファイル名を書くだけでokです。 B:\kmham211/datagazou/himawari3.jpg (←ここをクリックしてください。) どうですか?「ひまわり」の画像がみえましたね。 こんどは、先の(@)hazime.htmlファイルにこの画像を張り付けてみましょう。 A(b:\kmham211/hazimeni.htm) このファイルはdatagazouにあるhimawari3.jpgを 読み込んでいます。一度ご覧ください。 こうしてホームページ作りの第一歩が踏み出された次第です。 「千里の行も一歩より始まる」といいます。 あとは、タグの基本や、画像、音声の入力の仕方及び表組やリンクの仕方、フレーム 及びフォームなどの作成方法について学ぶだけです。 (JavaScriptや、JAVAなどの技法もありますが、ここでは省きます。)



以下、次回(第4回は、ここをクリックしてください。)トップへ戻る

ホーム          タグ一覧表