「ＨＰ作成講座」Topﾍﾟｰｼﾞ作成♪

　このページの内容

ﾍﾟｰｼﾞ構成を書き出します。

トップページのファイル名は必ず “index.htm”にしましょう。

今回は使用したファイル数が少ないので、
特に必要ないかと思いますが、
どこにどのファイルがあるかがわからなくなると
リンクや画像の表示ができなくなってしまいます。

　ソースファイルの解説

画面と解説を見ながらソースファイルを読んでみましょう。

　　HTMLの決まり事 ①　
　　　<HTML>
　　　　<HEAD><TITLE> タイトル </TITLE></HEAD>
　　　　　<BODY>
　　　　　　（ホームページの内容）
　　　　　</BODY>
　　　</HTML>

　　　　　* 各ページは必ず上の形式で作成します。
　　　　　* < >で囲まれた部分をタグと呼びます。
　　　　　* タグは必ず<BODY></BODY>のように一対で指定します。
　　　　　　　　　　　（<P><BR><HR>は例外）
　　　　　* 大文字・小文字どちらでも使用可ですが、ここでは大文字を使っています。
　　　　　* 色やサイズ等を指定する場合は "　" で囲みます。

　　タイトル ②　
　　　<TITLE> ○○○○ </TITLE>
　　　　　○○部分にこのページもタイトルをつけます。

　　背景色・壁紙の指定 ③　

　　　<BODY BGCOLOR="#000000" BACKGROUND="image/black_bg.gif">

　　　　　ページ全体の背景に black_bg.gifを使い、
　　　　　表示されない場合は#000000(黒)を表示します。

　　表示位置の指定 ④　
　　　<P ALIGN="CENTER">○○○○</P>
　　　　　P は段落という意味
　　　　　ALIGN は位置の指定

LEFT

CENTER

RIGHT

　　画像の表示 ⑤　
　　　<IMG SRC="image/main.gif" ALT="お月様"></IMG>
　　　　　SRCで示した画像ファイルを表示します。
　　　　　　　ここではimageフォルダの中のmain.gifを表示します。
　　　　　　　画像が表示できない場合はALTで示した内容を表示します。

　　文字のサイズ・色・書体の指定 ⑥　
　　　<FONT COLOR="#FFFFFF" SIZE="4" FACE="Comic Sans MS">
　　　　○○○○</FONT>

　　　　　○○○○という文字を#FFFFFF(白)のサイズ４で
　　　　　書体はComic Sans MSで表示します。
　　　　　　　色番についてはカラーサンプルをご覧ください。

　　　　　　　　※ 通常文字のサイズは３です。

　　水平線の指定 ⑦　

　　　<HR WIDTH="55%">

　　　　　水平線を表示画面の５５％の範囲で表示します。
　　　　　"　"の中はピクセルでも指定できます。

　　テーブルの指定 ⑧　　　（テーブルとは表のことです。）
　　　<TABLE ALIGN="CENTER" WIDTH="60%" BODER="1">
　　　　<TR>
　　　　　<TD ALIGN="CENTER">My Town</TD>
　　　　　<TD ALIGN="CENTER">Gallery</TD>
　　　　　<TD ALIGN="CENTER">Profile</TD>
　　　　　<TD ALIGN="CENTER">LINK</TD>
　　　　</TR>
　　　</TABLE>

TD1
↓

TD2
↓

TD3
↓

TD4
↓

TR1→

My Town

Gallery

Profile

LINK

　　　　　BORDERは枠線の太さの指定、"0"(ゼロ)にすると枠線は表示されません。

　　　　　　※ソースでは
　　　　　　　　画像の表示とリンクの指定（後述）を同時に行っています。
　　　　　　　　　　（半角ブランクでつなぎます。）

　　リンクの指定 ⑨　
　　　<A HREF="town.htm">My Town</A>
　　　　　My Townという文字はtown.htmにリンクしていることを意味します。
　　　　　つまり、 My Townをクリックするとtown.htmというページにジャンプします。
　　　　　　　ソースでは、
　　　　　　　　　　<FONT>～～</FONT>でMy Townの文字表示を指定し、
　　　　　　　　　　<IMG>～～</IMG>で三日月画像を表示しています。
　　　　　　　ちなみに
　　　　　　　　　 TARGET="top"をつけると新しいウィンドウを開き
　　　　　　　　　 TARGET="_top"では、同じウィンドウで開きます。
　　　　　　　　　　<IMG>内に
　　　　　　　　　 BORDER="0"を付けると画像に紫の枠が出ません。

　　　<A HREF="town.htm" BORDER="0" TARGET="_top">My Town</A>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　というように使います。

　　メールのリンク ⑩　
　　　<A HREF="mailto:medaka@orange.interq.or.jp">
　　　　　⑨のリンク指定で、リンク先に自分のメールアドレスを指定します。


	※ 上の画像をクリックして、実際のページを表示してください。　　新しいウィンドウの　　　表示 → ソースでソースを見ることができます。　　画像が必要な場合は　　右クリック → 名前をつけて画像を保存で取りこめます。


	FTP転送（アップロード）します。　　　アップロードが完了したら、トップページの出来上がりです。　　　URLを入力して自分のページを見てみましょう。　　　最初は誰でも１ページからのスタートです。　　　同様に他のページも作成してリンクし、　　　アップロード後は必ず動作確認してください。　　　＊注意事項＊　　　　　あたりまえの事ですが、　　　　　住所や電話番号等の個人情報の記載は　　　　　トラブルの原因になります。　　　　　誰の目にふれるかわからないので充分注意しましょう。