HTMLの学習

Size: px

Start display at page:

Download "HTMLの学習"

えみうばら
7 years ago
Views:

1 HTML Hyper Text Markup Language 2009

2 2 HTML 2009

3 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=" </A> <BR> <A HREF="KOTAE.xlsx"> </A> <BR> <A HREF="introduction.html"> </A> <BR> </BODY> </HTML>

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

5 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 6 HTML 2009 CSS <STYLE TYPE= text/css > </STYLE> <STYLE TYPE= text/css >  </STYLE>  { : }

7 Copyright 2009 by BohYoh Shibata 7 <STYLE TYPE="text/css">  </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 8 HTML 2009 <BODY BACKGROUND= > </BODY> <STYLE TYPE="text/css">  </STYLE>

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

11 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 12 HTML 2009 JavaScript HTML JavaScript <SCRIPT LANGUAGE = "JavaScript"> </SCRIPT> function ( ) { } function rand(n) { return Math.floor(n * Math.random()); } n

Copyright 2009 by BohYoh Shibata 13 Excel <TABLE> </TABLE> BORDER = n

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

16 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

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

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

22 HTML 2009 @param @see @see " " @see <a

22 22 @see " <a 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.

23 Copyright 2009 by BohYoh Shibata 23 pp 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 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

25 Copyright 2009 by BohYoh Shibata 25 JavaScript List 11 <script language="javascript">  </script> JavaScript Java January, February, 1,

26 26 HTML 2009 List 12 <SPAN ID="ELASPE"> </SPAN> <BR> index.html <script language="javascript">  </script>

27 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 28 HTML

29 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">  </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 30 HTML 2009 BMI.

31 Copyright 2009 by BohYoh Shibata 31 List 15 <script language = "JavaScript">  </script>

32 32 HTML 2009 List 16 <script language = "JavaScript">  </script> index.html List 17 <script language = "JavaScript">  </script> index.html

33 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 34 HTML 2009 location=this.options[this.selectedindex].value

HTML入門

HTML入門 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