JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4.

Size: px

Start display at page:

Download "JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4."

つかさねぎたや
5 years ago
Views:

2 JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4.d 5.4.e 5.5.a 5.5.b 5.5.c 5.6.a 5.6.b 5.6.c 5.7.a 5.7.b 5.8.a 5.8.b

3 5.9.a 5.9.b 5.9.c 5.9.d 5.9.e 5.9.f Web 10 WebInspector ColorSelector ColorDoctor HTML

4 Windows WindowsXP Windows WindowsXP Windows WindowsXP HTMLCSS JavaScript HTML JavaScript CSS Web HTML CSS Web Web Web JIS

5 JIS accessibility JIS X JIS X Web Web W3CWorld Wide Web Consortium WCAG wcag W3C Web Web % -1-

6 Web 69.7% 81.1% 43.6% 19.6% % 36.5% 16.0% 13.7% 19.5% 8.5% 6.0% 9.2% 3.6% 0.7% 1.0% 12.2% 18.8% 7.1% 7.3% 11.4% 4.4% 52.4% 58.0% 47.0% Web Web -2-

7 -3- Web Web Web OS OS

8 OS IT Web JIS BP Web Web Web WindowsXP OS -4-

9 -5- Web Windows Web InternetExplorer Web

10 -6- JIS IT H JIS JIS X

11 JIS JIS JIS X8341-3:2004 JIS JIS X :2004 JIS X 0208 WindowsXP InternetExplorer MacOS Netscape blink InternetExplorer InternetExplorer Netscape -7-

12 <H1> </H1> <P> <BR> <BR> <BR> <BR> <BR> </P> caption caption -8-

13 <title> TOP </title> HTML index.html <frame src="menu.html" title=" " id=" " > <frame src="main.html" title=" " id=" " > HTML menu.html <title> </title> HTML main.html <title> </title> -9-

14 <BODY> <P> <A href="top.html">top</a> > <A href="syoukai.html"> </A> > </P> </BODY> -10-

15 <FORM> <FIELDSET> <LEGEND> </LEGEND> Word <INPUT type="checkbox"> <INPUT type="checkbox"> </FIELDSET> </FORM> <FORM> <FIELDSET> <LEGEND> </LEGEND><INPUT type="checkbox"> Excel <INPUT type="checkbox"> Lotus <INPUT type="checkbox"> </FIELDSET> </FORM> <FORM> <FIELDSET> <LEGEND> </LEGEND><INPUT type="checkbox" name=" "> PaintShop <INPUT type="checkbox"> Photoshop <INPUT type="checkbox"> </FIELDSET> </FORM> <FORM> <FIELDSET> Word <INPUT type="checkbox"> <INPUT type="checkbox"> Excel <INPUT type="checkbox"> Lotus <INPUT type="checkbox" name=" "> PaintShop <INPUT type="checkbox"> Photoshop <INPUT type="checkbox"> </FIELDSET> </FORM> -11-

16 -12-

17 -13-

18 <A href="#skip"> </A> <A name="skip">topic</a><br> -14-

19 <img src="photo.gif" alt=" "> <img src="top.gif" alt="top "> -15-

20 PDF Flash Adobe Reader Flash Player JavaScript Java HTML Flash -16-

21 -17-

22 -18-

23 Web BGM BGM -19-

24 GIF URL:

25 lang <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="ja"> <HEAD> <META http-equiv="content-type" content="text/html; charset=shift_jis"> <META http-equiv="content-style-type" content="text/css"> <TITLE> </TITLE> </HEAD> title <span title=" ">chemistry</span> -21-

26 -22-

27 CMS Web Web JIS -23-

28 FAX -24-

29 Web 11 Web 11 WAV HTML NOFRAMES longdesc summary CAPTION TH TH TD headers TH addr INPUT id LABEL for title LINK A AREA FRAME FRAMESET APPLET OBJECT IMG ABBR ACRONYM alt IMG IMG AREA -25-

30 APPLET INPUT TEXTAREA INPUT NOSCRIPT NOEMBED OBJECT Fujitsu Accessibility Assistance Web WebInspector ColorSelector ColorDoctor WebInspector WebInspector HTML CSS HTML -26-

31 ColorSelector ColorSelector ColorDoctor ColorDoctor Web -27-

32 Web URL Web index.html Web -28-

33 Web Web HTML Web Web HTML HTML Web W3C W3C 1996 CSS1Cascading Style Sheets Level 1 Internet Explorer3.0 Netscape Navigator

34 -30-

35 -31-1 <html> <head> <title>pagestyle01</title> </head> <body> </body> </html> PageStyle01.html <body> <p> </p> </body> 1.5 <body> <p style="font-size: 1.5em;"> </p> </body> PageStyle01.html 1.5

36 <style=""></> 1.5 <td style="font-size: 1.5em;"> </td> em 10pt <body style="font-size: 10pt;"></body> pt <p style="color: ;"></p> red #FF0000 PageStyle02.html -32-

37 color: ; 16 RGB <td style="color: red;"> </td> <td style="color: #FF0000;"> </td>

38 2 HTML #00FF33 <html> <head> <title>pagestyle03</title> </head> <body> </body> </html> PageStyle03.html <body> <p> </p> </body> #00FF33 <head> <title>pagestyle03</title> <style type="text/css"> body{ background-color: #00FF33; } </style> </head> PageStyle03.html #00FF33-34-

39 3 <style type="text/css"> body{ background-color: #00FF33; } p{ color: #FFFFFF; font-size: 3em; } </style> PageStyle03.html #FFFFFF 3 <style type="text/css"></style> <style></style> <head></head> body { color : blue; } body { color : blue ; font-size : 1.2.em ; }

40 font-size: ; <td style="font-size: 1.5em;"> </td> <td style="font-size: 12pt;"> </td> [ 1.5 ] [ 12 ] background-color: ; 16 RGB <body style="background-color: red;"> [ ] 3 <html> <head> <title>pagestyle04</title> </head> <body> <div> </div> <div> </div> </body> </html> PageStyle04.html <title>pagestyle04</title> <style type="text/css">.main_title { font-size: 2em; }.sub_title { font-size: 0.8em; } </style> </head> <div class="main_title"> <div class="sub_title"> -36-

41 PageStyle04.html ; <class=""></> class.menu { font-size: 1.5em; } <div class="menu"> </div> PageStyle04.html <html> <head> <style type="text/css">.main_title { font-size: 2em; background-color: #FFA500; }.sub_title { font-size: 0.8em; background-color: #FFA500; text-align: right; } </style> </head> <body> <div class="main_title"> </div> <div class="sub_title"> </div> PageStyle04.html </body> <html> -37-

42 4 #FFA style.css style.css.main_title { background-color: #FFA500; font-size: 2em; }.sub_title { background-color: #FFA500; font-size: 0.9em; text-align: right; } PageStyle05.html <html> <head> <title>pagestyle05</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div class="main_title"> </div> <div class="sub_title"> </div> </body> </html> PageStyle05-01.html <html> <head> <title>pagestyle05-01</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div class="main_title"> </div> </body> </html> -38-

43 PageStyle05.html PageStyle05-01.html PageStyle05.html PageStyle05-01.html <link rel="stylesheet" href="" type="text/css"> <link> HTML memo -39-

44 1 margin border padding -top-right-bottom-left margin-top margin-left padding-top padding-left width padding-bottom height padding-right margin-right margin-bottom padding margin width height InternetExplorer5.5 width height border padding 2 color: ; 16 RGB #0000FF <td style="color: #0000FF;"> </td> a-1.html -40-

45 text-decoration: ; overline underline line-through none <td style="text-decoration: overline;"> </td> <td style="text-decoration: underline;"> </td> <td style="text-decoration: line-through;"> </td> <td style="text-decoration: none;"> </td> a-2.html text-align: ; left center right <td style="text-align: left;"> </td> <td style="text-align: center;"> /td> <td style="text-align: right;"> </td> a-3.html -41-

46 vertical-align: ; top middle bottom <td style="vertical-align: top;"> </td> <td style="vertical-align: middle;"> /td> <td style="vertical-align: bottom;"> </td> a-4.html text-indent: ; <div style="text-indent: 1em;"> </div> a-5.html -42-

47 font-family: ; MS P <div style="font-family: 'MS P ';"> </div> <div style="font-family: 'MS P ';"> </div> b-1.html font-size: ; 15pt2em75% <div style="font-size: 15pt;"> </div> <div style="font-size: 2em;"> </div> <div style="font-size: 75%;"> </div> b-2.html font-weight: ; 100,200,300,400,500,600,700,800, normalbold bolder lighter <div style="font-weight: boldt;"> </div> b-3.html -43-

48 font-style: ; italic normal <div style="font-style: normal;"> (normal)</div> <div style="font-style: italic;"> (italic)</div> b-4.html background-color: ; 16 RGB #0000FF <body style="background-color: #0000FF;"> c-1.html background-image: ; <div> back.gif <div style="background-image: url(back.gif);"> </div> c-2.html -44-

49 margin-top: ; margin-right: ; margin-bottom: ; margin-left: ; 50px 30px <div style="margin-top: 50px; margin-left: 30px;"> </div> d-1.html padding-top: ; padding-right: ; padding-bottom: ; padding-left: ; 30px 50px <div style="padding-top: 30px; padding-left: 50px;"> </div> d-2.html -45-

50 border-top-width: ; border-right-width: ; border-bottom-width: ; border-left-width: ; 10px 50px <div style="border-left-width: 50px; border-top-width: 10px;"> </div> d-3.html border-top-color: ; border-right-color: ; border-bottom-color: ; border-left-color: ; 16 RGB <div style="border-left-color: #FF0000; border-top-color: #FF0000;"> </div> d-4.html -46-

51 border-top-style: ; border-right-style: ; border-bottom-style: ; border-left-style: ; none hidden dotted dashed solid double groove ridge inset outset ridge <div style="border-left-syle: ridge; border-top-style: ridge;"> </div> d-5.html width: ; height: ; <div></div> 300px 50px <div style="width: 300px; height: 50px;"> </div> d-6.html -47-

52 list-style-type: ; none disc circle square decimail10 decimail-leading-zero0 10 lower-roman upper-roman lower-greek lower-alpha lower-latin upper-alpha upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha <ul style="list-style-type: square;"> <li> </li> e-11.html <ul style="list-style-type: upper-roman;"> <li> </li> e-11.html list-style-image: ; listmark.gif <ul style="list-style-image: url(listmark.gif);"> <li> </li> e-20.html -48-

53 list-style-position: ; outside inside <ul style="list-style-position: inside;"> <li> <br> </li> e-30.html sogo.htmlmain.css main.css margin-top 20pxmargin-left 40px margin-bottom 10px 2px dotted #AAAAAA -49-

54 Web JIS Web -50-

55 CD CD CD TOP CD index.html

~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID

~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID 10 10 10.1 1. 2. 3. HTML(HyperText Markup Language) Web [ ][ ] HTML Web HTML HTML Web HTML ~b08a001/www/ ( ) ~b08a001/www-local/ ( ) html ( ) 10.2 WWW WWW-local b08a001 ~b08a001/www/ ~b08a001/www-local/