HTML入門

Size: px

Start display at page:

Download "HTML入門"

かおりみょうだに
9 years ago
Views:

1 HTML ABC of Hyper Text Markup Language 2009

2 2 HTML2009

4 4 HTML2009 http WWW httphyper text transfer protocol HTML HTMLhyper text markup language URL URLuniform resource locator

6 6 HTML2009 HTML HTML DTPdesk top publishing HTML Level HTML <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>

7 Copyright 2009 by BohYoh Shibata 7 List 1 List 1 <HTML> index.html <HEAD> <TITLE> Welcome to BohYoh Shibata's Home Page. </TITLE> </HEAD> <BODY>!! </BODY> </HTML> List 1 index.html.txt s9a**** ID index.html

8 HTML2009 HTML <BODY> CSS <A HREF = "http://www.fit.ac.jp/index.

8 8 HTML2009 HTML <BODY> CSS <A HREF = " <A HREF = " <A HREF = " </A> <BR>

10 10 HTML2009  The characters /* start a comment, which terminates with the characters */

Copyright 2009 by BohYoh Shibata 11 <BR> <BR> 16<BR>

12 12 HTML2009 <P> <P></P> <P> </P> <P> </P> <BR> <BR> <BR>

Copyright 2009 by BohYoh Shibata 13 <Hn> <H1></H1> <H2></H2> <P>D.M.

14 14 HTML2009 <UL> <UL> <LI> <LI>Pascal <LI>HTML <UL> <LI> <LI> </UL> <LI> </UL> <OL> <OL> <LI> <LI>Pascal <LI>HTML <OL> <LI> <LI> </OL> <LI> </OL>

Copyright 2009 by BohYoh Shibata 15 <DL> <DL> <DT> <DD>D.M.

16 16 HTML2009 <DIV> <DIV ALIGN=LEFT></DIV> <DIV ALIGN=CENTER></DIV> <DIV ALIGN=RIGHT></DIV> <B>, <I>, <TT>, <BIG>, <SMALL>, <STRIKE>, <U> propotional font monospaced font Operating System width Operating System width

17 Copyright 2009 by BohYoh Shibata 17 <EM>, <STRONG>, etc... <P>HTML<B></B><I> </I><TT></TT><BIG></ BIG><SMALL></SMALL><STRIKE></STRIKE><U> </U></P> <P>HTML<EM></EM><STRONG> </STRONG><CITE></CITE><DFN></DFN><CODE></CODE> </P>

18 18 HTML2009 <FONT> <FONT SIZE=7></FONT> <FONT COLOR=RED></FONT> <FONT SIZE=5 COLOR=GREEN>6</FONT> <HR>

Copyright 2009 by BohYoh Shibata 19 computer <HR>

20 20 HTML2009 RGB Red/Green/Blue RGB black # navy #8 darkblue #8B blue #FF darkgreen #64 green #8 darkcyan #8B8B lime #FF aqua #FFFF cyan #FFFF lightcyan #EFFFF purple #88 olive #88 gray #888 lightgrey #D3D3D3 yellowgreen #9ACD32 brown #A52A2A greenyellow #ADFF2F silver #CCC chocolate #D2691E red #FF magenta #FFFF darkpink #FF1493 orange #FFA5 pink #FFCCB tomato #FF6347 gold #FFD7 snow #FFFAFA yellow #FFFF lightyellow #FFFFE white #FFFFFF HTML grey gray lightgrey Internet Explorer

22 22 HTML2009 CSS CSS <STYLE TYPE = text/css> </STYLE> <STYLE TYPE = text/css>  </STYLE>  { : }

23 Copyright 2009 by BohYoh Shibata 23 <STYLE TYPE = "text/css">  </STYLE> body A A:link A:visited A:active A:hover body color background-color background-image text-decoration none underline overline-color line-through blink

24 24 HTML2009 HTML <MARQUEE> </MARQUEE> WIDTH = n WIDTH = n% HEIGHT = n HEIGHT = n% HSPACE = n VSPACE = n BGCOLOR = color ALIGN = TOP ALIGN = MIDDLE ALIGN = RIGHT DIRECTION = LEFT DIRECTION = RIGHT LOOP = n LOOP = INFINITE BEHAVIOR = SCROLL BEHAVIOR = SLIDE BEHAVIOR = ALTERNATE SCROLLDELAY = n SCROLLAMOUNT = n

25 Copyright 2009 by BohYoh Shibata 25 List 2 <HTML> index.html <HEAD> <TITLE> Welcome to BohYoh Shibata's Home Page. </TITLE> <STYLE TYPE = "text/css"> A {text-decoration: none;} A:link {color: blue; text-decoration: none;} A:visited {color: blue; text-decoration: none;} A:active {color: red; text-decoration: none;} A:hover {color: red; background-color: lightgreen; } BODY { background-color: black; color: yellow; } </STYLE> </HEAD> <BODY> <MARQUEE><H1>!! </H1></MARQUEE> <HR> <P><BIG><A HREF=" </BIG></P> <BR> <UL> <LI><A HREF="intro.html"></A> <LI><A HREF="history.html"></A> <LI><A HREF="links.html"></A> <LI><A HREF="test.html">HTML</A> </UL> <HR> <DIV ALIGN=RIGHT> <A HREF=" <IMG SRC=" border = ></A> </DIV> </BODY> </HTML>

26 26 HTML2009 List 3 <HTML> intro.html <HEAD> <TITLE> BohYoh Shibata's Self-Introduction. </TITLE> <STYLE TYPE = "text/css"> A {text-decoration: none;} A:link {color: blue; text-decoration: none;} A:visited {color: blue; text-decoration: none;} A:active {color: red; text-decoration: none;} A:hover {color: red; background-color: lightgreen; } BODY { background-color: black; color: yellow; } </STYLE> </HEAD> <BODY> <MARQUEE><H1> </H1></MARQUEE> <HR> <P><BR> <BR> <BR> </P> <HR> <DIV ALIGN=RIGHT> <A HREF=" <IMG SRC=" border = ></A> </DIV> </BODY> </HTML>

27 Copyright 2009 by BohYoh Shibata 27 List 4 <HTML> history.html <HEAD> <TITLE> BohYoh Shibata's Brief History. </TITLE> <STYLE TYPE = "text/css"> A {text-decoration: none;} A:link {color: blue; text-decoration: none;} A:visited {color: blue; text-decoration: none;} A:active {color: red; text-decoration: none;} A:hover {color: red; background-color: lightgreen; } BODY { background-color: black; color: yellow; } </STYLE> </HEAD> <BODY> <MARQUEE><H1> </H1></MARQUEE> <HR> <UL> <LI> <LI>1984 <LI>1988 <LI>1991 <LI>1991 <LI>19931 <LI>1994 </UL> <HR> <DIV ALIGN=RIGHT> <A HREF=" <IMG SRC=" border = ></A> </DIV> </BODY> </HTML>

28 28 HTML2009 List 5 <HTML> links.html <HEAD> <TITLE> BohYoh Shibata's Favorite. </TITLE> <STYLE TYPE = "text/css"> A {text-decoration: none;} A:link {color: blue; text-decoration: none;} A:visited {color: blue; text-decoration: none;} A:active {color: red; text-decoration: none;} A:hover {color: red; background-color: lightgreen; } BODY { background-color: black; color: yellow; } </STYLE> </HEAD> <BODY> <MARQUEE><H1> </H1></MARQUEE> <HR> <DL> <DT><A HREF=" <DD> <DT><A HREF=" <DD> </DL> <HR> <DIV ALIGN=RIGHT> <A HREF=" <IMG SRC=" border = ></A> </DIV> </BODY> </HTML>

30 30 HTML2009

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