HTML ABC of Hyper Text Markup Language 2009
2 HTML2009
Copyright 2009 by BohYoh Shibata 3 WWW HTML WWW WWWworld wide web hyper text resource
4 HTML2009 http WWW httphyper text transfer protocol HTML HTMLhyper text markup language URL URLuniform resource locator
Copyright 2009 by BohYoh Shibata 5 FIT Linux % cd % mkdir WWW WWW ~/WWW % cd ~/WWW WWW s9a**** ID index.html
6 HTML2009 HTML HTML DTPdesk top publishing HTML Level 1 4..1 HTML <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>
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.html"></a> <A HREF = "http://www.fit.ac.jp/index.html"></a> <A HREF = "http://www.fit.ac.jp/index.html"> </A> <BR>
Copyright 2009 by BohYoh Shibata 9 tag < > #include <stdio.h> if (a & 2 == ) a = c; #include <stdio.h> if (a & 2 == ) a = c; /
10 HTML2009 <!-- --> The characters /* start a comment, which terminates with the characters */. 16 25
Copyright 2009 by BohYoh Shibata 11 <BR> <BR> 16<BR> 25<BR> <BR> <PRE> あらかじ <PRE> 16 25 </PRE> <PRE> </PRE>
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.Ritchie</P> <P>UNIX</P> <H2></H2> <P>B.Strourstrup++</P> <Hn> <BIG>, <SMALL> CSS
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.Ritchie <DT>Pascal <DD>N.Wirth <DT>++ <DD>B.Stroustrup </DL>
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
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 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> literacy <IMG> <IMG SRC="MonaLisa.jpg" ALIGN=RIGHT ALT="">
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
Copyright 2009 by BohYoh Shibata 21 HTML first.html <BR> <A HREF="second.html"> </A><BR> second.html <BR> <A HREF="top.html"></ A><BR> CSS
22 HTML2009 CSS CSS <STYLE TYPE = text/css> </STYLE> <STYLE TYPE = text/css> <!-- --> </STYLE> <!-- --> { : }
Copyright 2009 by BohYoh Shibata 23 <STYLE TYPE = "text/css"> <!-- body { color : white; background-color : black background-image:url(""); } 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; text-decoration: none;} --> </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 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
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="http://www.fit.ac.jp/index.html"></A> </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="http://www.fit.ac.jp/index.html"> <IMG SRC="http://www.fit.ac.jp/img/title.gif" border = ></A> </DIV> </BODY> </HTML>
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="http://www.fit.ac.jp/index.html"> <IMG SRC="http://www.fit.ac.jp/img/title.gif" border = ></A> </DIV> </BODY> </HTML>
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>196311 <LI>1984 <LI>1988 <LI>1991 <LI>1991 <LI>19931 <LI>1994 </UL> <HR> <DIV ALIGN=RIGHT> <A HREF="http://www.fit.ac.jp/index.html"> <IMG SRC="http://www.fit.ac.jp/img/title.gif" border = ></A> </DIV> </BODY> </HTML>
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="http://www.fit.ac.jp/index.html"></A> <DD> <DT><A HREF="http://www.ipc.fit.ac.jp/~s********/"></A> <DD> </DL> <HR> <DIV ALIGN=RIGHT> <A HREF="http://www.fit.ac.jp/index.html"> <IMG SRC="http://www.fit.ac.jp/img/title.gif" border = ></A> </DIV> </BODY> </HTML>
Copyright 2009 by BohYoh Shibata 29
30 HTML2009