1 1 2 Markup Language HTML XML XHTML

Size: px

Start display at page:

Download "1 1 2 Markup Language 2 2.1 HTML..................................... 2 2.2 XML..................................... 2 2.3 XHTML......................"

あやかほがり
7 years ago
Views:

1 HTTP CSS Web

2 1 1 2 Markup Language HTML XML XHTML HTML( CSS ) HTML( CSS ) HTML CSS JavaScript (breadcrumb) A 35 i

5.................................... 9 3.6.................................. 10 3.7.................................. 11 3.8.................................. 12 3.9.............................. 14 3.

3 ii

4 1 HTML CSS W3C HTML,XML,XHTML,CSS 1

5 2 Markup Language xxml 1. Standard Generalized Markup Language 1986 ISO ISO 8879 (a) Hyper Text Markup Language W3C HTML4.0 (b) extensible Markup Language W3C XML1.0 (c) extensible Hyper Text Markup Language W3C XHTML Cascading Style Sheet( ) 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 > </ t e l > <t e l > </ t e l > <t e l > </ t e l > </ > < name= passwd= hogehoge > <t e l > </ t e l > <t e l > </ 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

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

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

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.

7 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: & ; HTML : 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> &nbsp ; def <br> & nbsp ; ghi<br> &l t ;TAG&gt ;<br> &amp ; T r a n s i t i o n a l //EN > 4

12: & ; HTML4. 0 24 13: basic.html <!DOCTYPE HTML PUBLIC //W3C//DTD HTML 4.

8 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

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.

9 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

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 =.

10 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

11 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

12 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

13 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

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

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

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=

15 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

html > <frameset c o l s = 25%,75% > <frame name= A s r c =./ frame03. html > <frame name= B s r c =.

16 [ ] 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

17 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> : <table > <td colspan=nn> <td rowspan=nn> </table > 14

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.

18 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

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

19 1: 16

20 4 CSS : 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

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 ;

21 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

22 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 s o l i d ; / border top : 8px #f f 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

23 . 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

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

25 5 JavaScript : 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

26 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 ( ), ) ; </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

27 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

28 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

29 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

30 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

31 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

32 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

33 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

34 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

35 : 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

36 / / 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

37 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

38 A WEB 35

39 HTML CSS Web Ver

1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2

XHTML DOM JavaScript 2 2008 7 1 1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2 2.1.2 HTML.........................