HTML HTML.html.htm HTML HTML FTP HTML HTML <HTML> <HEAD> <TITLE> HTML</TITLE> </HEAD> <BODY> 1
</BODY> </HTML> HTML HTML HTML HTML <HTML> </HTML> <HTML> </HTML> HTML <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> BODY moji.htm <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> 2
</BODY> </HTML> moji.htm <BR> <FONT SIZE= 1 > </FONT> <FONT COLOR= #000088 > </FONT> blue red <B> </B> 3
<P ALIGN= right > </P> right center left <H1> </H1> HTML <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> <H1 ALIGN="center"><FONT COLOR="blue"> </FONT></H1> <H3 ALIGN="center"></H3> <BR> <BR> <BR> <P ALIGN="right"> <FONT SIZE="5"></FONT><BR> naraweb@nifty.com </P> </BODY> </HTML> ALIGN <P> <H1>,<H3> 4
<IMG SRC= ari.jpg WIDTH= 400 HEIGHT= 300 ALT= > <IMG> SRC= ari.jpg ari.jpg JPEG 5
GIF PNG GIF WIDTH= 400 (WIDTH= 50% ) HEIGHT= 300 HEIGHT= 50% ALT= HTML HTML <HTML> <HEAD> 6
<TITLE> </TITLE> </HEAD> <BODY> <IMG SRC= ari.jpg WIDTH= 400 HEIGHT= 300 ALT= > </BODY> </HTML> <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <IMG SRC= ari.jpg WIDTH= 400 HEIGHT= 300 ALT= > </BODY> </HTML> 7
ALIGN ALIGN= left ALIGN= right IMG 6 <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <IMG SRC= ari.jpg WIDTH= 400 HEIGHT= 300 ALT= ALIGN= left > </BODY> </HTML> right 8
WindowsXP InternetExplorer MacOSX Safari この写真は 小さくてちょっと見にくいかもしれませんが 文章の行数が違っ ているのが分かります この様にホームページはワープロと違って一行の文字 数や文章の行数を細かに決めることは出来ないのです ホームページを作ると きは違うブラウザで見た時にも見づらくならないような配慮をしなければなり ません １０ ＴＡＢＬＥ あまり崩れてしまってなにを書いてあるのか分からなくなっては困ります そこで登場するのが TABLE タグです 一文字ごとのレイアウトは無理ですが 文章ごとに配置を決める事が出来ます どのようなものなのか 理ӕしやすく するために次の写真を見て下さい TABLE のイメージ図 9
このページは TABLE がどのようなものなのか理ӕするために特別に TABLE が 見える様にしました 四Ԓい枠があって その中に文章やイラストが入ってい ます この様に文章や画像を入れる枠を作ってレイアウトを決めているわけで す この枠の線の太さは指定できます 太さをゼロにすれば 枠が見えなくな ります 通常は 枠を消して表示している １１ TABLE をつかってみよう ここでは TABLE を使って単価表を書いてみようと思います 以下がそのソ ースです このとおりに入力して確認してみて下さい 例７ <HTML> <HEAD> <TITLE>商品単価</TITLE> </HEAD> <BODY> 2003 年 2 月作成<BR> <TABLE BORDER= 1 > <TR><TH>商品番号</TH><TH>品名</TH><TH>単位</TH><TH>単価</TH></TR> <TR><TH>001</TH><TH> 牛乳 </TH><TH>200ml</TH><TH>100</TH></TR> 10
<TR><TH>002</TH><TH> </TH><TH>200ml</TH><TH>108</TH></TR> <TR><TH>003</TH><TH> </TH><TH>190ml</TH><TH>120</TH></TR> <TR><TH>004</TH><TH> </TH><TH>250ml</TH><TH>120</TH></TR> <TR><TH>005</TH><TH> </TH><TH>200ml</TH><TH>110</TH></TR> </TABLE> </BODY> </HTML> TABLE TABLE TABLE <TABLE> </TABLE> TABLE <TR> </TR> <TH> </TH> <TD> </TD> <TH> TABLE <TH>,<TD> TABLE 11
<TH COLSPAN= 3 > </TH> <TH> <TD> <TH ROWSPAN= 3 > </TH> <TH> <TD> <TABLE BORDER= 0 > </TABLE> TABLE ALIGN,WIDTH,HEIGHT, <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> <TABLE BORDER= 1 BORDERCOLOR= red > 12
<TR><TH COLSPAN= 4 > </TH></TR> <TR><TH ROWSPAN= 3 > </TH><TH COLSPAN= 2 > </TH><TH> </TH></TR> <TR><TH> </TH><TH> </TH><TH> </TH></TR> <TR><TH> </TH><TH> </TH><TH> </TH></TR> </TABLE> </BODY> </HTML> (MARCH) 2003 SUN MON TUE WED THU FRI SAT <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> 13
<DIR ALIGN= right ><FONT SIZE= 6 >3</FONT>(MARCH) <TABLE BORDER= 1 > 2003 </DIR> <TR><TH><FONT COLOR= red >SUN</FONT></TH><TH>MON</TH><TH>TUE</TH><TH>WED</TH> <TH>THU</TH><TH>FRI</TH><TH><FONT COLOR= blue HEIGHT= 60 >SAT</FONT></TH></TR> <TR><TH COLSPAN= 6> </TH><TH><FONT COLOR= blue HEIGHT= 60 >1</FONT></TR> <TR><TH><FONT COLOR= red >2</FONT></TH><TH>3</TH><TH>4</TH><TH>5</TH> <TH>6</TH><TH>7</TH><TH><FONT COLOR= blue HEIGHT= 60 >8</FONT></TH></TR> <TR><TH><FONT COLOR= red >9</FONT></TH><TH>10</TH><TH>11</TH><TH>12</TH> <TH>13</TH><TH>14</TH><TH><FONT COLOR= blue HEIGHT= 60 >15</FONT></TH></TR> <TR><TH><FONT COLOR= red >16</FONT></TH><TH>17</TH><TH>18</TH><TH>19</TH> <TH>20</TH><TH>21</TH><TH><FONT COLOR= blue HRIGHT= 60 >22</FONT></TH></TR> <TR><TH><FONT COLOR= red >23</FONT></TH><TH>24</TH><TH ROWSPAN= 2 >25</TH> <TH ROWSPAN= 2 >26</TH><TH ROWSPAN= 2 >27</TH><TH ROWSPAN= 2 >28</TH> <TH><FONT COLOR= blue ROWSPAN= 2 HEIGHT= 60 >29</FONT></TH></TR> <TR><TH><FONT COLOR= red >30</FONT></TH><TH>31</TH></TR> </TABLE> </BODY> </HTML> <A> </A> A A HREF 14
a <A HREF= sab_01.htm > </A> sub_01.htm b <A HREF= kamakiri.jpg ><IMG SRC= kamakiri_s.jpg ></A> kamakiri_s.jpg kamakiri.jpg c <A HREF= mailto:narwweb@nifty.com ></A> HTML <IMG SRC= pict.htm WIDTH= 200 HEIGHT= 200 BORDER= 0 USEMAP= #pictmap ALT= > IMG USEMAP Pictmap <MAP NAME= pictmap > pictmap <AREA SHAPE= rect COORDS= 0,30,80,120 HREF= sub.html ALT= > (0,30),(80,120) </MAP> 15
MAP タグの終了です このように 書き込むわけですが エリアの形は四Ԓの他に多Ԓ形と円があり ます 以下は座標の書き方の説明です (a) 多Ԓ形の場合 属性は SHAPE= poly で 頂点の座標を x,y の順で指定します 最後に最初 に書いた座標を書きます 例 COORDS= 40,140,135,115,185,185,155,200,80,200,40,140 この場合は５Ԓ形です (b) 円の場合 属性は SHAPE= circle で 中心の座標 x,y と半径 r の順で書き込みます 例 COORDS= 50,100,20 座標(50,100)の位置に半径 20 の円を指定します １３ フレーム 写真を見て下さい このように画 面を分割して複数のページを一度に表 示する方法があります FRAME とい うタグを使います 写真のページのソ ースリストを見ると以下のように表示 されます <HTML> <HEAD> <META NAME="robots" content="index,follow"> <META NAME="keywords" content="ホームページ作成代行,ホームページ作成,ホ ームページ,星空散歩,星空,月,惑星,天体写真,天体,しし座流星群,星"> <TITLE>ひでの星空散歩</TITLE> </HEAD> <FRAMESET COLS="20%,80%"> <FRAME SRC="left.htm" MAME="left"> <FRAME SRC="top.htm" NAME="right"> 16
<NOFRAMES> </NOFRAMES> </FRAMESET> </HTML> HTML BODY FRAMESET FRAME HTML FRAME <FRAMESET COLS="20%,80%"> COLS="20%,80%" 20% 80% ROWS <FRAME SRC="left.htm" MAME="left"> SRC NAME FRAMESET 20% 80% 20% FRAME 2 FRAME 80% FRAME A FRAME NAME <A HREF="hosizora.htm" TARGET="right"><H4><FONT COLOR="black"> </FONT></H4></A> TARGET="right"80% 17
FRAME <NOFRAMES> </NOFRAMES> FTP FTP FTP FTP FTP FTP FTP FFFTP FTP 18
HTML HTML HEAD TITLE HEAD BODY BGCOLOR 16 BGCOLOR= #99A080 BACKGROUND BACKGROUND= pict01.jpg FONT SIZE SIZE- 5 COLOR 16 COLOR= #99A080 BR 19
B P ALIGN left, center, right ALIGN= center H1 H ALIGN P ALIGN IMG SRC SRC= pic01.jpg WIDTH WIDTH= 500 HEIGHT HEIGHT= 500 ALT ALT= 20
BORDER A BORDER= 0 USEMAP USEMAP= #potimap MAP NAME NAME= potimap AREA MAP SHAPE default rect circle poly SHAPE= poly COORDS rect X Y X COORDS= 0,30,80,120 circle X Y COORDS= 100,120,30 poly XY XY 21
TABLE ALIGN XY COORDS= 40,140,135,115,185,185, 155,200,80,200,40,140 TABLE TABLE P ALIGN WIDTH TABLE IMG WIDTH BORDER TABLE BGCOLOR TABLE BODY BGCOLOR BACKGROUND TABLE BODY BACKGROUND TR TH WIDTH IMG WIDTH HEIGHT IMG HEIGHT 22
BGCOLOR BODY BGCOLOR BACKGROUND COLSPAN BODY BACKGROUND COLSPAN= 3 ROWSPAN ROWSPAN= 3 TD WIDTH IMG WIDTH HEIGHT IMG HEIGHT BGCOLOR BODY BGCOLOR BACKGROUND BODY BACKGROUND COLSPAN COLSPAN= 3 A ROWSPAN ROWSPAN= 3 23
HREF URL HREF= top.htm HREF=http://www.naraweb.org/ TARGET FRAMESET COLS ROWS COLS= 20%:80% COLS= 200,* ROWS= 20%:80% ROWS= 200,* FRAME SRC SRC= top.htm NAME TARGET NOFRAMES 24
25