go to top page!

HomePage Lesson !

＜HTML タグ ＞

[基本講座]

1,HTMLファイルを作ってみましょう！

 　まずはじめに、Windows の MSノートパッド（メモ帳）を使ってＨＴＭＬファイル を作ってみましょう。
    　　HTMLファイルを作成します。
  1. デスクトップで右クリックし、「新規作成」から「テキスト文書」を選びます。
  2. デスクトップに出来た「新規テキスト文書」のアイコンをＷクリックします。
  3. 出てきた「ノートパッド」にＨＴＭＬのタグ（ソース）を書き込みます。 タグ < 〜 > はすべて半角文字で記入します。 
	<html>
	<head>
	<title>My HomePage !</title>
	</head>
	<body>
		マイ・ホームページ
	</body>
	</html>
  1. 名前を付けて保存しますが、拡張子を .txt から .html に書き直します。 （例；index.html）拡張子の前にはピリオドがきます。
  2. このアイコンをＷクリックすれば、ブラウザが立ち上がりホームページが 表示されます。
  3. 「新規テキスト文書」のアイコンは不要なので「ごみ箱」へドラッグします。
    フォルダを作成します。
  4. ＨＴＭＬファイルを格納するフォルダをデスクトップに作ります。
  5. フォルダは、デスクトップで右クリックし、「新規作成」から「フォルダ」 を選びます。
  6. デスクトップに出来た「新しいフォルダ」のアイコンをＷクリックします。
  7. 出てきた「フォルダの窓」の中に作成したＨＴＭＬファイルをドラッグします。
  8. 「新しいフォルダ」の名前を解りやすい名前に変更します。（例；homepage）
  9. 作成したフォルダは「エクスプローラー」でお好きな場所に格納してください。 （デスクトップのままでもＯＫです。）
    ショートカットを作成します。
  10. 編集する為に、デスクトップに「ショートカット」アイコンを作っておきます。
  11. 作成したＨＴＭＬファイルを右クリックして、「コピー」を選びます。
  12. デスクトップで右クリックして「ショートカットの貼り付け」を選びます。
＜ワンポイントアドバイス＞
　作成したＨＴＭＬファイルは、あなたのパソコンに保存されている為、このままでは 他の人からアクセスできません。ご加入のプロバイダに申し込み、プロバイダの コンピュータ（サーバー）にファイルをコピーしなくてはなりません。 サーバーにアップするには「ＦＴＰ」ソフトが必要になります。（ → ステップ２） この際、フォルダやファイル名を半角英文字にしておくと良いです。また、 大文字、小文字を識別しますので、小文字に統一しておいたほうが無難でしょう。

2,HTMLの基本的な「タグ」を覚えましょう！

 　作成したホームページはまたまだ貧弱ですネ。こんどは色々なタグを 書き加えて少しずつ形を付けていきましょう。
    　　HTMLファイルの編集の仕方
  1. デスクトップのＨＴＭＬファイルのショートカットをＷクリックして、 ブラウザにホームページを表示させます。
  2. インターネットエクスプローラーではブラウザの表示部分を右クリックして 「ソースの表示」を選ぶと、ＭＳノートパッド（メモ帳）でＨＴＭＬ文書が 表示されます。

    ネットスケープナビゲーターでは、編集用のＭＳノートパッドが起動できない ので、次の手順で行ってください。 
    @ＨＴＭＬファイルのあるフォルダにＭＳノートパッドへのショート
  カットアイコンを作成します。
A作り方は、エクスプローラーを使って Windows ファイルの中にある
   Notepad.exe を右クリックして「コピー」します。
BＨＴＭＬファイルのあるフォルダを開き、右クリックして「ショート
  カットの貼り付け」を選びます。
C編集するＨＴＭＬファイルのアイコンを、ＭＳノートパッドへのショ
　ートカットアイコンへドラッグします。
  3. 開かれたＭＳノートパッドには、ＨＴＭＬのソースが書かれているので、 これを編集し「上書き保存」します。
  4. ブラウザの「最新の情報に更新」をクリックすれば、編集したＨＴＭＬ ファイルがホームページとして表示されます。
    基本的なタグの説明
  5. 編集用のＭＳノートパッドをみてタグの位置関係を見てみましょう。 
	<html>
	<head>
	<title>My HomePage !</title>
	</head>
	<body>
		マイ・ホームページ
	</body>
	</html>
<html> 〜 </html>　
ＨＴＭＬ文章がこのタグで囲まれた中に書かれてます。
<head> 〜 </head>　
ヘッダー部分がこのタグで囲まれた中に書かれてます。 ブラウザには表示されない部分です。
<title> 〜 </title>　
タイトルがこのタグで囲まれた中に書かれてます。 ブラウザの上のタイトルバーに表示されます。
<body> 〜 </body>　
ボディ部分がこのタグで囲まれた中に書かれてます。 ホームページとしてブラウザに表示される部分です。
    基本的なタグの編集
  1. <body>タグを編集すると、壁紙の背景色や、テキストの文字色が 変更できます。

    <body bgcolor=white text=red>

    これで、背景色＝白，文字色＝赤　が設定されました。

    ＜ワンポイントアドバイス＞
    色の解説 ；

    本来、色指定には、 光の３原色Ｒ，Ｇ，Ｂを１６進法で現します。１０進法では０〜９までで、次が二桁 になりますが、１６進法では０〜９に加えてＡ〜Ｆを使い、Ｆの次が二桁になる訳です。 光の３原色のそれぞれの強さを二桁ずつで現すので、計６桁で表現されます。つまり ００９０ＦＦだとＲ＝００，Ｇ＝９０，Ｂ＝ＦＦということです。この６桁の頭には 必ず 「＃」 を付け「 ”」で囲むことになってます。

    例； <body bgcolor="#FFFFFF" text="#FF0000">

  2. 壁紙にイメージファイルを表示させるには、拡張子が gif や jpeg などの イメージファイルがあれば可能です。

    <body background="イメージファイル名">

    イメージファイル名は、必ず拡張子つきで書き込みます。保存場所も ＨＴＭＬファイルと同じ場所（同じフォルダ）に置きます。
    ＜ワンポイントアドバイス＞
    イメージの解説 ；

    　ブラウザにイメージを表示させるには、 イメージファイルを作成しＨＴＭＬのタグで呼び込むかたち をとります。この時のイメージファイルは、 gif や jpeg という 拡張子に限られ、bmp では表示されません。 また、イメージファイルの保存場所が呼び出すＨＴＭＬファイル と違う場合は、相対パス （ファイルの位置関係）も指定しなくては なりません。

[応用講座]

3,いろんな「タグ」を使ってみましょう！

 　つぎは、いろいろな「タグ」を使ってＨＴＭＬファイルを編集してみましょう。
　　壁紙と見出しの編集
ここで使う「タグ」は
壁紙色を指定するタグ；　　　<body bgcolor=white> 〜 </body>
見出しを指定するタグ；　　　<h1> 〜 </h1>
部分的な文字色を指定；　　　<font color= > 〜 </font>
中央揃えを指定するタグ；　　<center> 〜 </center>

	<html>
	<head>
	<title>My HomePage !</title>
	</head>
	<body bgcolor=white>
	<center>
	<font color=red>
		<h1>マイ・ホームページ</h1>
	</font>
	</center>
	</body>
	</html>
  1. 壁紙色を白く変える為に<body>タグを<body bgcolor=white>に 書き替えました。
  2. ホームページ全体を「中央揃え」させる為にボディ全体を<center> 〜 </center>タグで囲みました。
  3. 見出しの「マイ・ホームページ」というテキストを最大見出しの<h1> 〜 </h1>タグで囲み大きくしました。
  4. 見出しの「マイ・ホームページ」という文字色を<font color=red> 〜 </font>タグで囲み赤色にしました。
　　本文とリンクの編集
ここで使う「タグ」は
文章の改行を指定するタグ；　<br>
水平線を表示させるタグ；　　<hr>
リンクを付けるタグ；　　　　<a href= > 〜 </a>

	<html>
	<head>
	<title>My HomePage !</title>
	</head>
	<body bgcolor=white>
	<center>
	<font color=red>
		<h1>マイ・ホームページ</h1>
	</font>
	<hr>
	<h2>ようこそ！！マイ・ホームページへ！！</h2>
	みなさん、こんにちは！<br>
	ただいま、ホームページ制作の練習中です・・。<br>
	このホームページは、<br>
	下記のホームページを参考に作成してみました。<br>
	<hr>
	<a href="http://www2r.meshnet.or.jp/~yorozuya/">
	YOROZUYA'S web page !
	</a>
	<br>
	<hr>
	メールの宛先は
	<a href="maiito:usermane@abcd.co.jp">
	ここ
	</a>
	をクリックして下さい。
	
	</center>
	</body>
	</html>
  1. テキスト文字を改行する場所に<br>タグを書き込みました。
  2. 水平線を表示させる場所に<hr>タグを書き込みました。
  3. リンクを張るテキストを<a herf="URL"> 〜 </a>タグで囲みました。
  4. メーラー起動させたいテキスト文字を<a herf="mailto: メールアドレス > 〜 </a>タグで囲みました。

4,ファイルの位置関係を理解しましょう！

 　イメージファイルやリンク先のファイルを指定する時、その所在地が別の フォルダにある場合は、「絶対パス」か「相対パス」でその場所を指定する 必要があります。
　「絶対パス」とは、アップした時のサーバーの中の所在地 で、一般に「ＵＲＬ」と言います。
　例；　http://www2r.meshnet.or.jp/~yorozuya/

　「相対パス」とは、タグを書くファイルの位置が基本になり、そのファイル から見てどこにあるかを意味します。
　　相対パスでのファイル指定
  1. イメージを表示させるには<img src="ファイル名">を書き込みます。
  2. 次のページなどにリンクさせるには、<a href="ファイル名"> 　〜　</a> で文字を囲みます。
  3. これらの場合、指定するファイルが別のフォルダにある時、「相対パス」で指定します。
相対パスの指定； 
           pburic_html
              │
              ├ 003.gif
              │
              ├ 006.jpeg 　　　
              │
              ├ フォルダ［ｉｍａｇｅ］　　　　┌ 004.gif
              │ 　　　　　　└────────┼ 005.gif
              │ 　　　　　　　　　　　　　　　└ 007.jpeg
              └ フォルダ［ｓｕｂ１］┌ 001.html
              　 　　　　　　└───┼ 001.gif
              　 　　　　　　　　　　└ フォルダ［ｓｕｂ１］　┌ 002.gif
              　 　　　　　　　　　　　　　　　　　　 └───┼ 002.html
              　 　　　　　　　　　　　　　　　　　　　　　　 └ フォルダ [sub3]
今書いているＨＴＭＬ001.htmlから見た 相対パスは
001.gif は同じ場所にあるので、そのまま
　<img src="001.gif">
002.gif は同じ場所にある[sub2]フォルダにあるので
　<img src="sub2/002.gif">
003.gif は一つ上の階層（[pburic_html]フォルダ）にあるので
　<img src="../003.gif">
004.gif は一つ上の階層（[pburic_html]フォルダ）にある [image]フォルダの中にあるので
　<img src="../image/004.gif">
つまり、一つ上の階層にある時は、「．．／」，フォルダの中にある場合は 「フォルダ名／」を頭につけます。

[特別講座]

5,フレーム構造のページを作ってみましょう！

 　ブラウザの画面がいくつかに分割されているページを作には、「フレーム構造」 を使います。「フレーム構造」を作るには、フレーム枠となるｈｔｍｌ ファイル を作り、それとは別に、各フレームに表示させるｈｔｍｌ ファイルを作ります。 　枠になるｈｔｍｌ にはフレームをどう表示させるかの命令語のみだけでできて いて、ブラウザにでる文章は書けません。
フレーム枠となるhtmlファイルの作り方
  1. 通常のHTMLファイルと同様にMSノートパッド（メモ帳）を新規に開きます。
  2. 基本構造のタグを書込みます。ただし、<body> 〜 </body> の代わりに <frameset> 〜 </frameset> を書込みます。<body>タグは不要。 
    
	<html>
	<head>
	<title>My HomePage !</title>
	</head>
	<frameset>

	</frameset>
	</html>
  3. ここでは、縦に二分割させるので、 rows="上部寸法,下部寸法" を書込みます。また、<frameset> 〜 </frameset> たぐの中に どのようにファイルを表示させるかを <frame src="ファイル名">タグ で命令します。 
    
	<frameset rows="上部寸法,下部寸法">
	  <frame src="上部表示ファイル名">
	  <frame src="下部表示ファイル名">
	</frameset>
  4. 上部寸法,下部寸法は、それぞれのピクセル数を書くか、％で指定します。 この時、初めに来るのが上部寸法ですので、二分割の場合、下部寸法は「＊」を書込めば 残りの部分と言う意味になります。例えば上部寸法が80ピクセルなら 　rows="80,*"　です。また、２０％　を指定するなら 　rows="20%,*"　となります。
    また、％指定の場合、ブラウザに対しての％なので、ブラウザが小さく表示された ときには、サイズも小さくなってまいます。
  5. 出来上がったファイルは名前を付けて保存します。（frame.html）
  6. 上部，下部に表示させるファイルを作り、名前を付けて保存します。 ここでは、 title.html と main.html とします。
  7. frame.html ，title.html ，main.html は、同じ場所に保存します。 
    frame.htmlのソースコード

	<html>
	<head>
	<title>My HomePage !</title>
	</head>
	<frameset rows="80,*">
	  <frame src="title.html">
	  <frame src="main.html">
	</frameset>
	</html>

title.htmlのソースコード

	<html>
	<head>
	<title>title</title>
	</head>
	<body bgcolor="#000000" text="#00ffff">
	 <center>
	  <h1>Welcome My HomePage !!</h1>
	 </center>
	</body>
	</html>

main.htmlのソースコード 

	step 1 を参照して下さい。
  8. また、横分割する場合は、rows= を cols= に書き替えます。
  9. 上記サンプルの main.html を更に横分割するには、frame.html を 書き代えます。 
    	<frameset rows="上部寸法,下部寸法">
	  <frame src="上部表示ファイル名">
	    <frameset cols="下部左寸法,上部右寸法">
		<frame src="下部左表示ファイル名">
		<frame src="上部右表示ファイル名">
	    </frameset>
	</frameset>
  10. その他にも細かい設定が可能です。
    参照：→ Dictionary 「フレーム構造のTAG」
| Lesson menu | Dictionary |

| HTML Tags | FTP | JavaScript | ActiveX | CGI | Shockweave |