</BODY> </HTML> HTML HTML HTML HTML <HTML> </HTML> <HTML> </HTML> HTML <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> BODY moji.htm <HTML> <HEAD> <TIT

Size: px

Start display at page:

Download "</BODY> </HTML> HTML HTML HTML HTML <HTML> </HTML> <HTML> </HTML> HTML <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> BODY moji.htm <HTML> <HEAD> <TIT"

ゆりなひがき
9 years ago
Views:

1 HTML HTML.html.htm HTML HTML FTP HTML HTML <HTML> <HEAD> <TITLE> HTML</TITLE> </HEAD> <BODY> 1

2 </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

3 </BODY> </HTML> moji.htm <BR> <FONT SIZE= 1 > </FONT> <FONT COLOR= # > </FONT> blue red <B> </B> 3

4 <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> </P> </BODY> </HTML> ALIGN <P> <H1>,<H3> 4

</FONT></H1> <H3 ALIGN="center"></H3> <BR> <BR> <BR> <P ALIGN="right">

5 <IMG SRC= ari.jpg WIDTH= 400 HEIGHT= 300 ALT= > <IMG> SRC= ari.jpg ari.jpg JPEG 5

6 GIF PNG GIF WIDTH= 400 (WIDTH= 50% ) HEIGHT= 300 HEIGHT= 50% ALT= HTML HTML <HTML> <HEAD> 6

7 <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

8 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

9 WindowsXP InternetExplorer MacOSX Safari この写真は小さくてちょっと見にくいかもしれませんが文章の行数が違っているのが分かりますこの様にホームページはワープロと違って一行の文字数や文章の行数を細かに決めることは出来ないのですホームページを作るときは違うブラウザで見た時にも見づらくならないような配慮をしなければなりません１０ＴＡＢＬＥあまり崩れてしまってなにを書いてあるのか分からなくなっては困りますそこで登場するのが TABLE タグです一文字ごとのレイアウトは無理ですが文章ごとに配置を決める事が出来ますどのようなものなのか理ӕしやすくするために次の写真を見て下さい TABLE のイメージ図 9

きは違うブラウザで見た時にも見づらくならないような配慮をしなければなりません１０ＴＡＢＬＥあまり崩れてしまってなにを書いてあるのか分からなくなっては困ります

10 このページは 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

ースですこのとおりに入力して確認してみて下さい例７ <HTML> <HEAD> <TITLE>商品単価</TITLE> </HEAD> <BODY> 2003 年 2 月作成<BR> <TABLE BORDER= 1 >

11 <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

12 <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

13 <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

14 <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

<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=

15 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:[email protected] ></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

16 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

写真を見て下さいこのように画面を分割して複数のページを一度に表示する方法があります FRAME というタグを使います写真のページのソースリストを見ると以下のように表示されます <HTML> <HEAD> <META NAME="robots" content="index,follow"> <META

17 <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

htm" MAME="left"> SRC NAME FRAMESET 20% 80% 20% FRAME 2 FRAME 80% FRAME A FRAME

18 FRAME <NOFRAMES> </NOFRAMES> FTP FTP FTP FTP FTP FTP FTP FFFTP FTP 18

19 HTML HTML HEAD TITLE HEAD BODY BGCOLOR 16 BGCOLOR= #99A080 BACKGROUND BACKGROUND= pict01.jpg FONT SIZE SIZE- 5 COLOR 16 COLOR= #99A080 BR 19

20 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

21 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

22 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

23 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

24 HREF URL HREF= top.htm HREF= TARGET FRAMESET COLS ROWS COLS= 20%:80% COLS= 200,* ROWS= 20%:80% ROWS= 200,* FRAME SRC SRC= top.htm NAME TARGET NOFRAMES 24

25 25

HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17

1 11 13 2 11 27 3 12 11 HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 WWW(World Wide Web) HTML(HyperText Markup Language) HTML HTML HTML HTML - 1 - .1 HTML (V)(C) HTML - 2 - HTML HTML OS Windows 2.1 HTML