HTTP CSS Web
1 1 2 Markup Language 2 2.1 HTML..................................... 2 2.2 XML..................................... 2 2.3 XHTML.................................... 2 2.4 HTML( CSS )......................... 3 2.5 HTML( CSS )....................... 3 3 HTML 4 3.1...................................... 4 3.2..................................... 5 3.3.................................. 6 3.4.............................. 7 3.5.................................... 9 3.6.................................. 10 3.7.................................. 11 3.8.................................. 12 3.9.............................. 14 3.10..................................... 14 4 CSS 17 4.1..................................... 17 4.2................................ 18 4.3.................................. 19 5 JavaScript 22 5.1..................................... 22 5.2...................................... 23 5.3..................................... 24 5.4....................................... 25 5.5......................................... 26 5.6......................................... 27 5.7.................................... 28 5.8................................. 30 5.9..................................... 31 5.10.............................. 32 6 34 6.1 (breadcrumb).............. 34 A 35 i
1................................ 16 ii
1 HTML CSS W3C 1 2010 4 26 1 HTML,XML,XHTML,CSS 1
2 Markup Language xxml 1. Standard Generalized Markup Language 1986 ISO ISO 8879 (a) Hyper Text Markup Language 1997 12 W3C HTML4.0 (b) extensible Markup Language 1998 2 W3C XML1.0 (c) extensible Hyper Text Markup Language 2000 1 W3C XHTML1.0 2. Cascading Style Sheet( )1998 5 W3C CSS2 2.1 HTML 1: htmlnoncss.html <HTML lang= j a > <HEAD> <META HTTP EQUIV= Content Type CONTENT= t e x t /html ; c h a r s e t=s h i f t J I S > <TITLE> CSS </TITLE> </HEAD> <BODY> </BODY> </HTML> 2.2 XML 2: xml010.xml <?xml v e r s i o n = 1.0 encoding= S h i f t J I S?> < > < name= passwd= hogehoge > <t e l > 000 000 000</ t e l > <t e l > 001 000 000</ t e l > <t e l > 002 000 000</ t e l > </ > < name= passwd= hogehoge > <t e l > 000 000 000</ t e l > <t e l > 002 000 000</ t e l > </ > </ > 2.3 XHTML 3: xhtml01.xhtml <?xml v e r s i o n = 1.0 encoding= S h i f t J I S?> <!DOCTYPE html PUBLIC //W3C//DTD XHTML 1. 0 S t r i c t //EN http : / /www. w3. org /TR/xhtml1/DTD/xhtml1 s t r i c t. dtd > <html xmlns= http : / /www. w3. org /1999/ xhtml xml : lang= j a lang= j a > 2
<t i t l e >XHTML </ t i t l e > <p> XHTML</p> 2.4 HTML( CSS ) 4: htmlwithcss.html <HTML lang= j a > <HEAD> <TITLE> C S S </TITLE> <META HTTP EQUIV= Content Type CONTENT= t e x t /html ; c h a r s e t=s h i f t J I S > <s t y l e type= t e x t / c s s > body { margin : 2em 10% 3em 10%; background c o l o r : #0000FF; c o l o r : #FFFFFF; </s t y l e > </HEAD> <BODY> CSS HTML </BODY> </HTML> 2.5 HTML( CSS ) body { margin : 2em 10% 3em 10%; background c o l o r : yellow ; c o l o r : black ; 5:./css/s0001.css 6: htmlrefcss.html <HTML lang= j a > <HEAD> <META HTTP EQUIV= Content Type CONTENT= t e x t /html ; c h a r s e t=s h i f t J I S > <l i n k r e l = s t y l e s h e e t h r e f =./ c s s / s0001. c s s type= t e x t / c s s > <TITLE> C S S </TITLE> </HEAD> <BODY> CSS HTML </BODY> </HTML> 3
3 HTML 3.1 <html 7: HTML lang= j a > 8: <t i t l e > </ t i t l e > <p> </p> 9: <br> 10: <b> </b> 11: 12: & ; HTML4. 0 24 13: basic.html <!DOCTYPE HTML PUBLIC //W3C//DTD HTML 4.01 <t i t l e >HTML </ t i t l e > <b> </b> <b> </b> <p> </p> <p><b> </b></p> <b> </b><br> <b> </b> <br> abc<br>   ; def <br> & nbsp ; ghi<br> &l t ;TAG> ;<br> & ; T r a n s i t i o n a l //EN > 4
3.2 14: <h1> </h1> <h1> <h6> h1 h2,h3,h4,h5,h6,h7,h8 15: <a h r e f= > </a> h r e f= 16: linkmain.html <!DOCTYPE HTML PUBLIC //W3C//DTD HTML 4.01 <t i t l e > </ t i t l e > T r a n s i t i o n a l //EN > <h1> </h1> <p> </p> <p><a h r e f= l i n k e d 1. html t i t l e = > </a></p> <p><a h r e f= l i n k e d 2. html t i t l e = > </a></p> 17: linked1.html <!DOCTYPE HTML PUBLIC //W3C//DTD HTML 4.01 <h1> </h1> <p> </p> T r a n s i t i o n a l //EN > 18: linked2.html <!DOCTYPE HTML PUBLIC //W3C//DTD HTML 4.01 <h1> </h1> <p> </p> T r a n s i t i o n a l //EN > 5
3.3 19: <img s r c= width= nnn height= nnn /> w i d t h h e i g h t n n n width height 5 <p> </p> 20: imagemain.html <!DOCTYPE HTML PUBLIC //W3C//DTD HTML 4.01 <t i t l e > </ t i t l e > T r a n s i t i o n a l //EN > <h1> </h1> <p> </p> <p><img s r c =./ images / c l o c k. jpg width = 100 h e i g h t = 100 /> width =100, height=100</p> <p><img s r c =./ images / c l o c k. jpg /> width = 127 h e i g h t = 119 </p> html images clock.jpg 6
3.4 21: <ol> </ ol> <ul> </ul> <l i > 2 o l u l ol ul 22: kajyogaki01.html <!DOCTYPE HTML PUBLIC //W3C//DTD HTML 4.01 <t i t l e ><h1> </ t i t l e > <div> <h1> </h1> <p> </p> <hr> <ol> <l i > <l i > <l i > <l i > <l i > </ol> <hr> <ol> <l i > <ol> <l i > <l i > <l i > </ol> <l i > </ol> </div> T r a n s i t i o n a l //EN > 7
23: kajyogaki02.html <!DOCTYPE HTML PUBLIC //W3C//DTD HTML 4.01 <t i t l e ><h1> </ t i t l e > <div> <h1> </h1> <p> </p> <hr> <ul> <l i > <l i > <l i > <l i > <l i > </ul> <hr> <ul> <l i > <ul> <l i > <ul> <l i > <ul> <l i > <l i > </ul> <l i > </ul> <l i > </ul> <l i > </ul> </div> T r a n s i t i o n a l //EN > 8
3.5 24: a <a name= > n a m e <a h r e f= > h r e f n a m e 25: inlink.html <t i t l e > C S S </ t i t l e > <a name= /> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <a name= /> <a h r e f= # > </a><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <a name= /> <a h r e f= # > </a><br> <a h r e f= # > </a> 9
3.6 26: <table > <caption > <th> <tr> <td> table border 27: table01.html <t i t l e > </ t i t l e > <s t y l e type= t e x t / c s s >. sotu nen { text a l i g n : c e n t e r ; </s t y l e > <h1> </h1> <p> </p> <t a b l e border = 2 summary= > <caption > </ caption > <tr> <th> </th> <th> </th> <th> </th> <th> </th> <tr> <td c l a s s=sotu nen>h21</td> <td> </td> <td><a h r e f =./ images / c l o c k. jpg > </a></td> <td>tugeru@ogawa. co. jp </td> <tr> <td c l a s s=sotu nen>h21</td> <td> </td> <td> </td> <td>anago@higasimurayama. com</td> </table > 10
3.7 28: <form> m e t h o d g e t p o s t <input> <s e l e c t > form method post 29: form01.html <t i t l e > </ t i t l e > <s t y l e type= t e x t / c s s >. sotu nen { text a l i g n : c e n t e r ; </s t y l e > <h1> </h1> <p> </p> <form a c t i o n= r e c e i v e. html method= get > <p> <input type= t e x t name= name ><br> <input type= t e x t name= name yomi s i z e = 50 ><br> <input type= t e x t name= email ><br> <input type= r a d i o name= sex value= Male checked> <br> <input type= r a d i o name= sex value= Female > <br> <s e l e c t name= nendai > <option value= low20 > <option value = 20 s e l e c t e d > <option value= 30 > <option value= 40 > <option value= 50 > </ s e l e c t > </p> <p> <input type= submit value= Send > <input type= r e s e t > </p> </form> 11
3.8 30: f r a m e s e t f r a m e frameset cols rows frame03.html a target [ ] 31: frame01.html <t i t l e > </ t i t l e > <frameset rows= 25%,75% > <frame name= t i t l e s r c =./ frame02. html > <frameset c o l s = 25%,75% > <frame name= A s r c =./ frame03. html > <frame name= B s r c =./ frame04. html > </frameset > </frameset > <h1> </h1> <p> </p> [ ] 32: frame02.html <t i t l e > </ t i t l e > <h1> </h1> 12
[ ] 33: frame03.html <t i t l e > </ t i t l e > <h1> </h1> frame04 : <A HREF= frame04. html TARGET= top >t a r g e t= top </A><BR> frame01 : <A HREF= frame01. html > t a r g e t </A><BR> [ ] 34: frame04.html <t i t l e >imode </ t i t l e > <s t y l e type= t e x t / c s s > body { margin : 2em 10% 3em 10%; background : skyblue ; background image : u r l (. / images /imode. jpg ) ; c o l o r : yellow ; </s t y l e > <h1> </h1> 13
3.9 35: usemap 36: click.html <t i t l e > </ t i t l e > <h1> </h1> <p> </p> <img s r c= images / c l o c k. jpg usemap= #demo01 a l t = c l o c k. j p g > <map name= demo01 > <area shape= r e c t a l t = A coords = 11,33,113,88 h r e f= http : / / l o c a l h o s t /a. html > <area shape= r e c t a l t = B coords = 1,1,127,31 h r e f= http : / / l o c a l h o s t /b. html > </map> <p> </p> <img s r c= images / c l o c k. jpg usemap= #demo02 a l t = c l o c k. j p g > <map name= demo02 > <area shape= c i r c l e a l t = C coords = 66,31,20 h r e f= http : / / l o c a l h o s t / c. html > <area shape= c i r c l e a l t = D coords = 66,85,20 h r e f= http : / / l o c a l h o s t /d. html > </map> <p> </p> <img s r c= images / c l o c k. jpg usemap= #demo03 a l t = c l o c k. j p g > <map name= demo03 > <area shape= polygon a l t = E coords = 15,88,111,31,92,104 h r e f= http : / / l o c a l h o s t / e. html > <area shape= polygon a l t = F coords = 1,1,64,1,1,61 h r e f= http : / / l o c a l h o s t / f. html > </map> 3.10 37: <table > <td colspan=nn> <td rowspan=nn> </table > 14
colspan rowspan colspan rowpan 38: table02.html <t i t l e > </ t i t l e > <h1> </h1> <p> </p> <t a b l e border = 2 summary= > <caption > </ caption > <tr><th colspan=8 />colspan, rowspan <tr> <tr> <td>a1</td> <td colspan=3>a2</td> <td colspan=4>a3</td> <td>a4</td> <td>a5</td> <td>a6</td> <td>a7</td> <td>a8</td> </tr> <tr> <td>b1</td> <td>b2</td> <td>b3</td> <td>b4</td> <td>b5</td> <td colspan=3 rowspan=2>b6</td> <td>b7</td> <td>b8</td> </tr> <tr> <td>c1 </td> <td>c2 </td> <td>c3 </td> <td>c4 </td> <td>c5 </td> <td>c6 </td> <td>c7 </td> <td>c8 </td> </tr> <tr> <td>d1</td> <td>d2</td> <td>d3</td> <td>d4</td> <td>d5</td> <td>d6</td> <td>d7</td> <td>d8</td> </tr> </table > 15
1: 16
4 CSS 4.1 39: h 1 # s t y l e i d s p a n s t y l e id 40: cssmoji.html <t i t l e > C S S </ t i t l e > <s t y l e type= t e x t / c s s > h1 { font s t y l e : i t a l i c ; #i t a 1 { font s t y l e : i t a l i c ; font s i z e : xx l a r g e ; text d e c o r a t i o n : u n d e r l i n e ; #i t a 2 { font weight : bold ; text d e c o r a t i o n : l i n e through ; </s t y l e > <h1> </h1> <p id= i t a 1 > </p> <p><span id= i t a 2 > </span> </p> 17
4.2 41: body background i m a g e b a c k u g r o u n d s k y b l u e 42: cssback.html <t i t l e > C S S </ t i t l e > <s t y l e type= t e x t / c s s > body { margin : 2em 10% 3em 10%; background : skyblue ; background image : u r l (. / images / c l o c k. jpg ) ; c o l o r : black ; </s t y l e > <h1> </h1> 18
4.3 43: 44: c-table.html <t i t l e >JavaScript </ t i t l e > <s t y l e type= t e x t / c s s >. money { margin : c e n t e r ; t a b l e { width : 600 px ; height : 200px ; background c o l o r : #d0d0d0 ; background image : u r l (. / images / backwin. jpg ) ; margin : 10 px 0px 0px 0px ; table, td, th { / border : 2px #f f 0 0 0 0 s o l i d ; / border top : 8px #f f 0 0 0 0 double ; border r i g h t : 6px #00 f f 0 0 s o l i d ; border bottom : 4px #0000 f f dotted ; border l e f t : 2px #c c c c c c dashed ; / border c o l l a p s e : c o l l a p s e ; / border c o l l a p s e : s e p a r a t e ; border spacing : 10px ; td { width : 100 px ; height : 50px ; t a b l e. ex1 { empty c e l l s : show ; t a b l e. ex2 { empty c e l l s : hide ; caption { / caption s i d e : top ; / / caption s i d e : r i g h t ; / / caption s i d e : bottom ; / caption s i d e : l e f t ; v e r t i c a l a l i g n : middle ; / text a l i g n : r i g h t ; /. c e l l 0 1 { text a l i g n : c e n t e r ; v e r t i c a l a l i g n : middle ; 19
. c e l l 0 2 { text a l i g n : l e f t ; v e r t i c a l a l i g n : top ;. c e l l 0 3 { text a l i g n : r i g h t ; v e r t i c a l a l i g n : b a s e l i n e ;. c e l l 0 4 { text a l i g n : r i g h t ; th, td { padding : 5px 10 px 15 px 20 px ;. h iding { v i s i b i l i t y : c o l l a p s e ;. show {. c l e a r L e f t { c l e a r : l e f t ;. c l e a r R i g h t { c l e a r : r i g h t ;. f l o a t L e f t { f l o a t : l e f t ;. f l o a t R i g h t { f l o a t : r i g h t ; </s t y l e > <body onload= b l i n k i n g (500) > <h1>t a b l e </h1> <p>t a b l e </p> <t a b l e c l a s s = f l o a t R i g h t c l a s s = ex1 border = 2 summary= t a b l e > <caption > </ caption > <c o l span= 1 > <c o l span= 1 > <c o l span= 1 > <tr><th colspan=8 />header </tr> <tr> <td>a1</td> <td colspan = 3 c l a s s = money >a2</td> <td>a3</td> <td rowspan= 3 >a4</td> <td>a5</td> <td></td> <td></td> <td>a8</td> </tr> <t r c l a s s=show> <td>b1</td> <td>b2</td> <td>b3</td> 20
<td>b4</td> <td>b5</td> <td>b6</td> <td>b7</td> <td>b8</td> </tr> <tr> <td>c1 </td> <td colspan = 3 rowspan= 2 >c2</td> <td>c3 </td> <td>c4 </td> <td>c5 </td> <td>c6 </td> <td>c7 </td> <td>c8 </td> </tr> <tr> <td>d1</td> <td c l a s s = c e l l 0 1 >d2</td> <td c l a s s = c e l l 0 2 >d3</td> <td c l a s s = c e l l 0 3 >d4</td> <td c l a s s = c e l l 0 4 >d5</td> <td>d6</td> <td>d7</td> <td>d8</td> </tr> </table > <p> 1 </p> <p> 2</p> <p c l a s s = c l e a r R i g h t > 3</p> <p> 4</p> 21
5 JavaScript 5.1 45: br 46: j-hello.html <t i t l e > </ t i t l e > <s c r i p t type= t e x t / j a v a s c r i p t > f u n c t i o n H ello ( ) { document. w r i t e ( Hello World!<br > ); dd = new Date ( ) ; document. w r i t e ( dd. t o L o c a l e S t r i n g ( ) ) ; </s c r i p t > <body onload= Hello () > 22
5.2 47: size 48: j-date.html <t i t l e > </ t i t l e > <s c r i p t type= t e x t / j a v a s c r i p t > f u n c t i o n DisplayTime ( ) { dd = new Date ( ) ; document. f. t. value = dd. t o L o c a l e S t r i n g ( ) ; window. settimeout ( DisplayTime ( ), 1 0 0 0 ) ; </s c r i p t > <body onload= DisplayTime () > <form name= f a c t i o n= # > <input type= t e x t name= t s i z e =30> </form> 23
5.3 \\ t r y c a t c h 49: 50: j-add.html <t i t l e > </ t i t l e > <s c r i p t type= t e x t / j a v a s c r i p t > f u n c t i o n Calc ( ) { try { var num1=e v a l ( document. k e i s a n. elements [ 0 ]. value ) ; var num2=e v a l ( document. k e i s a n. elements [ 1 ]. value ) ; a l e r t (num1+num2 ) ; catch ( e ) { a l e r t ( ) ; </s c r i p t > <form name= k e i s a n > <input type= t e x t value= 3 ><br> <br> <input type= t e x t value= 5 ><br> <input type= button value= o n c l i c k= Calc () > </form> </form> 24
5.4 51: 1 52: j-week.html <t i t l e > </ t i t l e > <s c r i p t type= t e x t / j a v a s c r i p t > f u n c t i o n c a l c ( ) { var yy = e v a l ( document. k e i s a n. elements [ 0 ]. value ) ; var mm = e v a l ( document. k e i s a n. elements [ 1 ]. value ) ; var dd = e v a l ( document. k e i s a n. elements [ 2 ]. value ) ; var day = new Date ( yy,mm, dd ) ; a l e r t ( year : + yy +, + day. getyear ( ) ) ; a l e r t ( month : + mm +, + day. getmonth ( ) ) ; a l e r t ( day : + dd +, + day. getdate ( ) ) ; a l e r t ( week : + day. getday ( ) ) ; </s c r i p t > <form name= k e i s a n > < input type= t e x t ><br> < input type= t e x t ><br> < input type= t e x t ><br> <input type= button value= o n c l i c k= c a l c () > </form> 25
5.5 53: \\ 54: j-sequence.html <t i t l e > </ t i t l e > <s c r i p t type= t e x t / j a v a s c r i p t > f u n c t i o n tasu ( ) { var a = document. k e i s a n. n01. value ; var b = document. k e i s a n. n02. value ; a l e r t ( s t r i n g= +a+b ) ; var c = e v a l ( document. k e i s a n. n01. value ) ; var d = e v a l ( document. k e i s a n. n02. value ) ; a l e r t ( numeric NG = +c+d ) ; a l e r t ( numeric OK = +(c+d ) ) ; </s c r i p t > <form name= k e i s a n > <input type= t e x t name= n01 value= 3 > <input type= t e x t name= n02 value= 5 ><br> <input type= button value= o n c l i c k= tasu () > </form> 26
5.6 55: c a s e if ( ) else 56: j-condition.html <t i t l e > </ t i t l e > <s c r i p t type= t e x t / j a v a s c r i p t > f u n c t i o n c a l c ( ) { var atu = e v a l ( document. k e i s a n. elements [ 0 ]. value ) ; var omo = e v a l ( document. k e i s a n. elements [ 1 ]. value ) ; i f ( ( atu >=10.0 & atu <=20.0) & ( omo>=3.0 & omo<=7.0)) { a l e r t ( ) ; e l s e { a l e r t ( ) ; </s c r i p t > <form name= k e i s a n > (mm)<input type= t e x t ><br> ( kg) < input type= t e x t ><br> <input type= button value= o n c l i c k= c a l c () > </form> 27
5.7 57: w h i l e f o r w h i l e while for 58: j-while.html <t i t l e >w h i l e </ t i t l e > <s c r i p t type= t e x t / j a v a s c r i p t > f u n c t i o n c a l c ( ) { var i n v a l u e = e v a l ( document. k e i s a n. elements [ 0 ]. value ) ; var wa = 0 ; var i = 0 ; while ( i < i n v a l u e ) { i ++; wa = wa + i ; a l e r t ( + wa ) ; </s c r i p t > <form name= k e i s a n > < input type= t e x t ><br> <input type= button value= o n c l i c k= c a l c () > </form> 28
59: j-for.html <t i t l e >f o r </ t i t l e > <s c r i p t type= t e x t / j a v a s c r i p t > f u n c t i o n c a l c ( ) { var i n v a l u e = e v a l ( document. k e i s a n. elements [ 0 ]. value ) ; var wa = 0 ; var i = 0 ; i f ( i n v a l u e <= 0) { a l e r t ( + document. k e i s a n. elements [ 0 ]. value ) ; return 1 ; f o r ( i = 1 ; i <= i n v a l u e ; i++) { wa = wa + i ; a l e r t ( ( f o r loop ) + wa ) ; </s c r i p t > <form name= k e i s a n > < input type= t e x t ><br> <input type= button value= o n c l i c k= c a l c () > </form> 29
5.8 60: 61: j-radio.html <t i t l e > </ t i t l e > <s c r i p t type= t e x t / j a v a s c r i p t > f u n c t i o n Saiten ( ) { var TrueCount=0; // // zero s t a r t var TrueAns = new Array ( 0, 4 ) ; // f o r ( i =0 ; i <2 ; i++) { i f ( document. radiobutton. elements [ TrueAns [ i ] ]. checked ) { TrueCount++; a l e r t ( + ( TrueCount 50) + ) ; </s c r i p t > <form name= radiobutton > 1+2 <br> <input type= r a d i o name= Q1 >3<br> <input type= r a d i o name= Q1 >4<br> <br> 3 x4 <br> <input type= r a d i o name= Q2 >10<br> <input type= r a d i o name= Q2 >11<br> <input type= r a d i o name= Q2 >12<br> <br> <input type= button value= o n c l i c k= S a i t e n ( ) /> </form> 30
5.9 J a v a S c r i p t blinking 62: 63: j-blink.html <t i t l e > </ t i t l e > <s c r i p t type= t e x t / j a v a s c r i p t > f u n c t i o n b l i n k i n g ( delay ){ var element = document. body. getelementsbytagname ( span ) ; f o r ( var i = 0 ; i < element. length ; i ++){ i f ( element [ i ]. classname == tenmetsu ) { element [ i ]. s t y l e. d i s p l a y = ( element [ i ]. s t y l e. d i s p l a y == none? i n l i n e : none ) ; settimeout ( b l i n k i n g ( + delay + ), delay ) ; </s c r i p t > <body onload= b l i n k i n g (1000); > <h1> </h1> <p> </p> <p> <span c l a s s = tenmetsu > </span> </p> 31
5.10 64: J a v a S c r i p t 65: j-validate.html <t i t l e > </ t i t l e > <s t y l e type= t e x t / c s s >. item { border width : 1px ; border s t y l e : s o l i d ; width : 100 px ; text a l i g n : c e n t e r ; background c o l o r : s i l v e r ; c o l o r : blue ;. in { width : 100 px ; text a l i g n : c e n t e r ; background c o l o r : s i l v e r ; c o l o r : blue ; </s t y l e > <s c r i p t type= t e x t / j a v a s c r i p t > / / f u n c t i o n NameCheck ( ) { var s t r = document. iform. NameText. value ; i f ( ( s t r==n u l l ) ( s t r == )) { a l e r t ( ) ; return 1 ; return 0 ; / / f u n c t i o n FuriganaCheck ( ) { var s t r = document. iform. FuriganaText. value ; i f ( s t r. match ( / [ ˆ \ s ]+/ ) ) { a l e r t ( ) ; return 1 ; return 0 ; / / f u n c t i o n AlphabetCheck ( ) { var s t r = document. iform. EnglishText. value ; i f ( s t r. match ( / [ ˆA Za z \ s. ]+/ ) ) { a l e r t ( ) ; return 1 ; return 0 ; 32
/ / f u n c t i o n NumberCheck ( ) { var s t r = document. iform. AgeText. value ; i f ( s t r. match ( /[ˆ0 9]+/ ) ) { a l e r t ( ) ; return 1 ; return 0 ; / / f u n c t i o n AllCheck ( ) { var check = 0 ; check += NameCheck ( ) ; check += FuriganaCheck ( ) ; check += AlphabetCheck ( ) ; check += NumberCheck ( ) ; i f ( check > 0 ) { return f a l s e ; return check ; </s c r i p t > <n o s c r i p t > </n o s c r i p t > <data> <form name= iform a c t i o n= http : / /www. g o o g l e. co. jp method= get > <l a b e l f o r= name ><span c l a s s=item> </span></l a b e l > <input id= name type= t e x t name= NameText s i z e = 20 ><br> <l a b e l f o r= f u r i g a n a ><span c l a s s=item> </span></l a b e l > <input id= f u r i g a n a type= t e x t name= FuriganaText s i z e = 30 ><br> <l a b e l f o r= engname ><span c l a s s=item> </span></l a b e l > <input id= engname type= t e x t name= EnglishText s i z e = 30 ><br> <l a b e l f o r= yubin ><span c l a s s=item> </span></l a b e l > <input id= yubin type= t e x t name= AgeText s i z e = 10 > 7 <br> <input type= submit value= onclick= r e turn AllCheck (); > </form> </data> 33
6 6.1 (breadcrumb) 66: HTML CSS 67: pankuzu.html <t i t l e > </ t i t l e > <s t y l e type= t e x t / c s s > #crumbs { background c o l o r : #eee ; padding : 4 px ; #crumbs h3 { d i s p l a y : none ; #crumbs ul { d i s p l a y : i n l i n e ; padding l e f t : 0 ; margin l e f t : 0 ; #crumbs ul l i { d i s p l a y : i n l i n e ; #crumbs ul l i a : l i n k { padding :. 2em ; #crumbs ul ul l i { background image : u r l (. / images / arrow. g i f ) ; background repeat : no repeat ; background p o s i t i o n : l e f t ; padding : 20 px ; </s t y l e > <h1> </h1> <p> </p> <div id = crumbs > <h3>location </h3> <ul> <l i ><a h r e f = / > </a> <ul> <l i ><a h r e f = /goods/ > </a> <ul> <l i ><a h r e f = /goods / books/ > </a></l i > </ul> </ l i > </ul> </ l i > </ul> </div> 34
A WEB 35
HTML CSS Web http://mizar.web.fc2.com/null/study/index.html Ver.0.1 2010.04.28