HTML Hyper Text Markup Language 2009
2 HTML 2009
Copyright 2009 by BohYoh Shibata 3 WWW OS List 1 <HTML> index.html <HEAD> <TITLE> </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>!!<BR> <A HREF="http://www.fit.ac.jp/"> </A> <BR> <A HREF="KOTAE.xlsx"> </A> <BR> <A HREF="introduction.html"> </A> <BR> </BODY> </HTML>
4 HTML 2009 List 2 <HTML> introduction.html <HEAD> <TITLE> </TITLE> <STYLE TYPE="text/css"> A {text-decoration: none;} A:link {color: yellow; text-decoration: none;} A:visited {color: yellow; text-decoration: none;} A:active {color: white; text-decoration: none;} A:hover {color: white; background-color: lightgreen; } BODY { background-color: green; color: white; } </STYLE> </HEAD> <BODY> <HR> <BR> <HR> <A HREF="index.html"> </A> </BODY> </HTML>
Copyright 2009 by BohYoh Shibata 5 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 #E FFFF purple #8 8 olive #8 8 gray #8 8 8 lightgrey #D3D3D3 yellowgreen #9ACD32 brown #A52A2A greenyellow #ADFF2F silver #C C C chocolate #D2691E red #FF magenta #FF FF darkpink #FF1493 orange #FFA5 pink #FFC CB tomato #FF6347 gold #FFD7 snow #FFFAFA yellow #FFFF lightyellow #FFFFE white #FFFFFF HTML grey gray lightgrey Internet Explorer
6 HTML 2009 CSS <STYLE TYPE= text/css > </STYLE> <STYLE TYPE= text/css > <!-- --> </STYLE> <!-- --> { : }
Copyright 2009 by BohYoh Shibata 7 <STYLE TYPE="text/css"> <!-- body { color : white; background-color : black } 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 text-decoration none underline overline-color line-through blink
8 HTML 2009 <BODY BACKGROUND= > </BODY> <STYLE TYPE="text/css"> <!-- body { background-image:url(" "); background-attachment:fixed; background-repeat:no-repeat; background-repeat:repeat-y; background-repeat:repeat-x; 1 background-position:99% 99%; X Y 99 1 1 background-repeat:fixed; background-position:5 % 5 %; % 1 % } --> </STYLE>
Copyright 2009 by BohYoh Shibata 9 HTML <BR> <PRE> </PRE> <HR> NOSHADE WIDTH = n WIDTH = n% SIZE = n ALIGN = LEFT ALIGN = CENTER ALIGN = RIGHT COLOR = color <DIV> </DIV> ALIGN = LEFT ALIGN = CENTER ALIGN = RIGHT <FONT> </FONT> SIZE = n SIZE = +n SIZE = -n COLOR = color
10 HTML 2009 <IMG SRC=URL> ALIGN = TOP ALIGN = MIDDLE ALIGN = BOTTOM ALIGN = LEFT ALIGN = RIGHT ALT = string <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 SCROLLMOUNT = n
Copyright 2009 by BohYoh Shibata 11 JavaScript List 3 <HTML> omikuji.html <HEAD> <TITLE> Java Script </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> <DIV ALIGN = CENTER> <BR><BR> <SCRIPT LANGUAGE = "JavaScript"> // n function rand(n) { return Math.floor(n * Math.random()); } var r = rand(6); // if (r == ) { k = " "; } else if (r == 1) { k = " "; } else if (r == 2) { k = " "; } else if (r == 3) { k = " "; } else if (r == 4) { k = " "; } else if (r == 5) { k = " "; } document.write("<font SIZE=7 COLOR=RED>" + k + "</FONT><BR>"); </SCRIPT> <BR> <BR><BR><BR> </DIV> <HR> <DIV ALIGN = RIGHT> <A HREF = "index.html"> </A> </DIV> </BODY> </HTML>
12 HTML 2009 JavaScript HTML JavaScript <SCRIPT LANGUAGE = "JavaScript"> </SCRIPT> function ( ) { } function rand(n) { return Math.floor(n * Math.random()); } n 6. 6. 5
Copyright 2009 by BohYoh Shibata 13 Excel <TABLE> </TABLE> BORDER = n <TH> </TH> <TD> </TD> <TD ALIGN=CENTER> <TD ALIGN=LEFT> <TD ALIGN=RIGHT>
14 HTML 2009 List 4 <HTML> table 1.html <HEAD> <TITLE> </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: white; color: black; } </STYLE> </HEAD> <BODY> <B> 8A9999</B> <FONT COLOR=RED SIZE=5> </FONT> <BR> <BR> <TABLE BORDER=1 > <TH> </TH> <TH> </TH> <TH> </TH> <TD ALIGN=CENTER> </TD> <TH> </TH> <TD ALIGN=CENTER> </TD> <TH> </TH> <TD ALIGN=CENTER> </TD> <TH> </TH> <TD ALIGN=CENTER> </TD> </TABLE> <HR> <DIV ALIGN = RIGHT> <A HREF = "index.html"> </A> </DIV> </BODY> </HTML>
Copyright 2009 by BohYoh Shibata 15 JPEG Joint Photographic Experts Group GIF Graphics Interchange Format BMP Microsoft Windows Bitmap Image PNG Portable Network Graphics
16 HTML 2009 <TABLE> </TABLE> BGCOLOR = color BORDER = n BORDERCOLOR = color BORDERCOLORLIGHT = color BORDERCOLORDARK = color WIDTH = n WIDTH = n% CELLSPACING = n CELLPADDING = n BGCOLOR = color <TH> </TH>, <TD> </TD> BGCOLOR = color WIDTH = n WIDTH = n% ROWSAPN = n COLSAPN = n ALIGN = CENTER ALIGN = LEFT ALIGN = RIGHT VALIGN = TOP VALIGN = BOTTOM VALIGN = MIDDLE VALIGN = BASELINE
Copyright 2009 by BohYoh Shibata 17 List 5 <HTML> TableSample.html <HEAD><TITLE> </TITLE></HEAD> <BODY> <TABLE WIDTH=1 % BORDER=4 BORDERCOLORDARK=BLUE BORDERCOLORLIGHT=CYAN CELLSPACING=1 CELLPADDING= BGCOLOR=LIGHTYELLOW> <TD WIDTH=5 %> </TD> <TD WIDTH=5 %> </TD> </TABLE> <BR><BR> <TABLE WIDTH=1 % BORDER=4 BORDERCOLORDARK=BLUE BORDERCOLORLIGHT=CYAN CELLSPACING= CELLPADDING=1 > <TD WIDTH=5 %> </TD> <TD WIDTH=5 % BGCOLOR=LIGHTGREEN> </TD> </TABLE> <BR><BR> <TABLE BORDER=3 WIDTH=5 %> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> <TR BGCOLOR=LIGHTCYAN> <TD> </TD> <TD COLSPAN=2> </TD> <TD> </TD> <TD ROWSPAN=2> </TD> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TABLE> <BR><BR> <HR> <DIV ALIGN = RIGHT> <A HREF = "index.html"> </A> </DIV> </BODY> </HTML>
18 HTML 2009 List 6 <HTML> table 2.html <HEAD> <TITLE> </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: white; color: black; } </STYLE> </HEAD> <BODY> <B> 8A9999</B> <FONT COLOR=RED SIZE=5> </FONT><BR><BR> <TABLE BORDER=1 > <TH ROWSPAN=2 BGCOLOR=YELLOW> </TH> <TH COLSPAN=3 BGCOLOR=CYAN> </TH> <TH BGCOLOR=GREEN><FONT COLOR=WHITE> </FONT></TH> <TH BGCOLOR=BLUE> <FONT COLOR=YELLOW> </FONT></TH> <TH BGCOLOR=RED> <FONT COLOR=CYAN> </FONT></TH> <TH> </TH> <TD ALIGN=CENTER> </TD><TD ALIGN=CENTER> </TD><TD ALIGN=CENTER> </TD> <TH> </TH> <TD ALIGN=CENTER> </TD><TD ALIGN=CENTER> </TD><TD ALIGN=CENTER> </TD> <TH> </TH> <TD ALIGN=CENTER> </TD><TD ALIGN=CENTER> </TD><TD ALIGN=CENTER> </TD> <TH> </TH> <TD ALIGN=CENTER> </TD><TD ALIGN=CENTER> </TD><TD ALIGN=CENTER> </TD> </TABLE> <HR> <DIV ALIGN = RIGHT> <A HREF = "index.html"> </A> </DIV> </BODY> </HTML>
Copyright 2009 by BohYoh Shibata 19 List 7 <HTML> TableSample.html <HEAD> <TITLE> MS </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: white; color: black; } </STYLE> </HEAD> <BODY> <B> 8A9999</B> <FONT COLOR=RED SIZE=5> </FONT><BR><BR> MS ClearType <BR> <BR> <TABLE BORDER=1> <TH> </TH> <TH> </TH> <TH> </TH> <TH> </TH> <TD ALIGN=CENTER>12 <TD ALIGN=CENTER ROWSPAN=3> <TD ALIGN=CENTER ROWSPAN=3> <TD><IMG SRC="12.png"</TD> <TD ALIGN=CENTER>14 <TD><IMG SRC="14.png"</TD> <TD ALIGN=CENTER>16 <TD><IMG SRC="16.png"</TD> <TD ALIGN=CENTER>18
20 HTML 2009 <TD ALIGN=CENTER ROWSPAN=4> <TD ALIGN=CENTER ROWSPAN=4> <TD><IMG SRC="18.png"</TD> <TD ALIGN=CENTER>2 <TD><IMG SRC="2.png"</TD> <TD ALIGN=CENTER>22 <TD><IMG SRC="22.png"</TD> <TD ALIGN=CENTER>24 <TD><IMG SRC="24.png"</TD> </TABLE> <HR> <DIV ALIGN = RIGHT> <A HREF = "index.html"> </A> </DIV> </BODY> </HTML>
Copyright 2009 by BohYoh Shibata 21 javadoc HTML @author @author @ author {@code } HTML <code> </code> @return
22 HTML 2009 @param @see @see " " @see <a href="url#value">label</a> @see package.class#member label javadoc HTML
Copyright 2009 by BohYoh Shibata 23 pp.52 54 WWW/OS/ Thread List 8 <HTML> <HEAD> <TITLE>Sleep.java</TITLE> </HEAD> Sleep.html <BODY> Sleep.java <IFRAME WIDTH=1 % HEIGHT=9 % SRC="Thread/Sleep.java"> </IFRAME> <DIV ALIGN=RIGHT><A HREF="index.html"> </A></DIV> </BODY> </HTML> List 9 <HTML> <HEAD> <TITLE>ThreadPrinter.java</TITLE> </HEAD> ThreadPrinter.html <BODY> ThreadPrinter.java <IFRAME WIDTH=1 % HEIGHT=9 % SRC="Thread/ThreadPrinter.java"> </IFRAME> <DIV ALIGN=RIGHT><A HREF="index.html"> </A></DIV> </BODY> </HTML>
24 HTML 2009 List 10 <HTML> <HEAD> <TITLE>MyThreadTester.java</TITLE> </HEAD> Sleep.html <BODY> MyThreadTester.java <IFRAME WIDTH=1 % HEIGHT=6 % SRC="Thread/MyThreadTester.java"> </IFRAME> <BR> <TABLE WIDTH=1 % BORDER= > <TD WIDTH=5 %>synchronized <TD WIDTH=5 %>synchronized </TD> </TABLE> <NOBR> <IFRAME WIDTH=5 % HEIGHT=3 % SRC="Thread/NONSYNCHRONIZED.TXT"> </IFRAME> <IFRAME WIDTH=5 % HEIGHT=3 % SRC="Thread/SYNCHRONIZED.TXT"> </IFRAME> </NOBR> <DIV ALIGN=RIGHT><A HREF="index.html"> </A></DIV> </BODY> </HTML> MyThreadTester.java synchronized H WWW/OS/Thread javac MyThreadTester.java java MyTrreadTester > NONSYNCHRONIZED.TXT MyThreadTester.java synchronized H WWW/OS/Thread javac MyThreadTester.java java MyTrreadTester > SYNCHRONIZED.TXT
Copyright 2009 by BohYoh Shibata 25 JavaScript List 11 <script language="javascript"> <!-- index.html var today = new Date(); // var graduation = new Date(2 12, 2, 2 ); //, -1, diff = Math.ceil((graduation.getTime() - today.gettime()) / (24*6 *6 *1 )); document.write(" ", diff, " "); --> </script> JavaScript Java 1 12 11 1 31 1 31 1 1 January, February, 1, 2 4 4 4 4 4
26 HTML 2009 List 12 <SPAN ID="ELASPE"> </SPAN> <BR> index.html <script language="javascript"> <!-- var begin = new Date(); // function Time(){ crnt = new Date(); // document.getelementbyid("elaspe").innerhtml = Math.ceil((crnt.getTime() - begin.gettime()) / 1 ); } setinterval("time()", 1 ); --> </script>
Copyright 2009 by BohYoh Shibata 27 List 13 <HTML> <HEAD> <TITLE> </TITLE> <STYLE TYPE="text/css"> A {text-decoration: none;} A:link {color: yellow; text-decoration: none;} A:visited {color: yellow; text-decoration: none;} A:active {color: red; text-decoration: none;} A:hover {color: red; background-color: lightgreen; } BODY { background-color: black; color: white; } </STYLE> </HEAD> staff1.html <BODY> <DIV ALIGN=CENTER> <FONT SIZE=5 COLOR=YELLOW> </FONT><BR> </DIV> <HR> <BR> <MARQUEE DIRECTION=UP HEIGHT=7 % SCROLLAMOUNT=2> <DIV ALIGN=CENTER> Producer<BR> <FONT SIZE=5 COLOR=YELLOW> </FONT><BR> <BR> Copyright<BR> <FONT SIZE=5 COLOR=YELLOW> </FONT><BR> <BR> <BR> <FONT SIZE=5 COLOR=YELLOW>2 X 4 1 </FONT><BR> </DIV> </MARQUEE> <HR> <DIV ALIGN=RIGHT> <A HREF="index.html"> </A> </DIV> <HR> </BODY> </HTML>
28 HTML 2009 4 4 4
Copyright 2009 by BohYoh Shibata 29 BMI List 14 <HTML> <HEAD> <TITLE> BMI </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: white; color: black; } </STYLE> </HEAD> BMI.html <BODY> <P>BMI <B> kg) (m)<sup>2</sup></b> BMI 22 </P> <SCRIPT LANGUAGE = "JavaScript"> <!-- function CalcBMI(){ var Height = document.bmi.sincho.value; var Weight = document.bmi.taijyu.value; var CM = (Height / 1 ); var Value = (Weight / (CM * CM)) + " "; document.getelementbyid("bmi_value").innerhtml = Value.substring(, 5); } --> </SCRIPT> <FORM name = "BMI"> <input type = "text" size = "6" name = "Sincho">cm<BR><BR> <input type = "text" size = "6" name = "Taijyu">kg<BR><BR> <input type = "button" value = " " onclick= "CalcBMI()"><BR><BR> </FORM> <P>BMI <SPAN ID="BMI_VALUE"> </SPAN> </P> <HR> <DIV ALIGN = RIGHT> <A HREF="index.html"> </A> </DIV> </BODY> </HTML>
30 HTML 2009 BMI.
Copyright 2009 by BohYoh Shibata 31 List 15 <script language = "JavaScript"> <!-- index.html function setcount(n) { theday = 3 ; setday = new Date(); setday.settime(setday.gettime() + (theday * 1 * 6 * 6 * 24)); expday = setday.togmtstring(); document.cookie = "count=" + n + ";expires=" + expday; } function getcount() { thename = "count="; thecookie = document.cookie + ";" start = thecookie.indexof(thename); if (start!= -1) { end = thecookie.indexof(";", start); count = eval(unescape(thecookie.substring(start+thename.length,end))); document.writeln(count + " "); setcount(count+1); } else { document.writeln(" "); setcount(2); } } getcount(); --> </script>
32 HTML 2009 List 16 <script language = "JavaScript"> <!-- document.writeln(" " + document.lastmodified); --> </script> index.html List 17 <script language = "JavaScript"> <!-- wd = new Array(" ", " ", " ", " ", " ", " ", " "); mod = new Date(document.lastModified); document.writeln(" " + mod.getfullyear() + " " + (mod.getmonth() + 1) + " " + mod.getdate() + " " + "(" + wd[mod.getday()] + ")" + mod.gethours() + " " + mod.getminutes() + " " + mod.getseconds() + " " ); --> </script> index.html
Copyright 2009 by BohYoh Shibata 33 List 18 <DIV ALIGN =RIGHT> <FORM> <SELECT onchange="location=this.options[this.selectedindex].value"> <OPTION SELECTED VALUE="index.html"> <OPTION VALUE="introduction.html"> <OPTION VALUE="omikuji.html"> <OPTION VALUE="table 1.html"> <OPTION VALUE="table 2.html"> <OPTION VALUE="TableSample.html"> <OPTION VALUE="MSG/MSGothic.html">MS <OPTION VALUE="MSM/MSMincho.html">MS <OPTION VALUE="Sleep2.html">Sleep.java <OPTION VALUE="ThreadPrinter2.html">ThreadPrinter.java <OPTION VALUE="MyThreadTester2.html">MyThreadTester2.java <OPTION VALUE="staff1.html"> <OPTION VALUE="staff2.html"> PNG <OPTION VALUE="BMI.html">BMI </SELECT> </FORM> </DIV> index.html
34 HTML 2009 location=this.options[this.selectedindex].value