! "#$%&'()*+,-. STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ ÅÆÇÈÉÊËÌÍÎÏÐ

Size: px

Start display at page:

Download "! "#$%&'()*+,-. STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ ÅÆÇÈÉÊËÌÍÎÏÐ"

よしたかつつの
5 years ago
Views:

1 6 1 6 (1) (2) HTML (3) PDF Copy&Paste 1 Web 1 Web Web 1 Web HTML

2 ! "#$%&'()*+,-. STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ ÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕ Ö ØÙ ÚÛÜÝÞßàáâãäå æçèéêëìíîïðñòóôõö øùúûüýþÿd,c* Z e f[g ab Y hijkl!m"#n$%op&q'()r+-.s/t012 3uvwx4y5z{67 89:; ƒ EFGHˆI ŠJKLM NOP QRSTUVWX \]^_`Œ Ž š œ žÿ 6 2 1

3 HTML Web HTML(Hyper Text Markup Language) ( ) html htm HTML HTML5 <!doctype html> <html> <head> <meta charset="utf-8"> <title>takahagi </title>  </head> <body> <h1>takahagi </h1> <hr>

4 <h2> </h2> <p> </p> <p> </p> <p> </p> <h2> </h2> <p> </p> <h3> </h3> <p>4 </p> <ul> <li> <li> <li> <li> </ul> <h3> </h3> <p> </p> <p> </p> <h3> </h3> <p> </p> <p> </p> <hr> 6 4

5 <table style="margin-left:auto; margin-right:auto;"> <caption> </caption> <tr> <th> </th> <th> </th> <th> </th> <th> </th> </tr> <tr> <th>2012</th> <td>128</td> <td>23</td> <td>38</td> </tr> <tr> <th>2013</th> <td>158</td> <td>43</td> <td>52</td> </tr> <tr> <th>2014</th> <td>98</td> <td>18</td> <td>25</td> </tr> </table> <hr> 6 5 <div style="text-align:center;"> <img src="im_explicit_k.png" alt=" " style="width:500px;"><br> <caption> </caption> </div> <p> <a href=" > </a> </p> <p> )</p> <p> thc0456@senshu-u.jp</p> </body> </html>

6 6 6 1 HTML 1 HTML <h1> Markup Language HTML 1 <p> </p> 1 HTML <> <aaaa> </aaaa> aaaa <aaaa> </aaaa> <p>... </p> ( ) <h1>... </h1> 1 Web HTML (L) (V) 1 1 (L) (V) EUC-JP SHIFT-JIS utf-8 1 <!DOCTYPE html> 4 <meta charset= UTF-8 > <html> </html> web

7 Web Web ( ) Web Web Web web 13

8 6 8 2 Web ( ) ( ) Web Web webfiles (1) (2) (3) webfiles

9 Web (index.html( ) index.html, sample.css im explicit k.png IE index.htm l ( 2.3 index.html Web Mery *1 Mery webfiles index.html Web <a> ( / ) ) *1 Mery PC Mery

10 6 10 HTML ( Enter ) 1 < > & Web IE ) <title>takahagi </title> <title> </title> <title> </title> Ctrl + z Undo) (Heading) <h1> </h1>

11 <h1> </h1> 1 <h2> </h2> 2 <h6> </h6> <h1> </h1> <h2> </h2> h (Paragraph) <p> </p> 1 </p> <p> <p> </p> <br> <br> <p> <p>,</p> 2.6 <hr>

12 Web Web Web 10.3 ) Q12 Q12 ) <a href=" > </a> URL a anchor Web (1) <a href= ></a> (2) Web (3) URL( Ctrl C ( (4) HTML (Mery) (5) Ctrl + V ( (6) <a href= > </a> 2.8 a (Anchor) </a> href a (attribute) a (href) = ( ( Shift + 2 ) href URL

13 index.html (1) a b webfiles c index.html UTF-8(BOM ) (S) (2) a b c webfiles d index.html OK 3.1 (Mery) index.html F5 UTF-8 UTF-8(BOM )

14 HTML 4.1 HTML HTML HTML 2 HTML HTML 2

15 HTML & & > > < < " c 5 html HTML 5.1 < > < > HTML <! >

16  <ol> <li> </li> <li> 2 </li> <li> </li> </ol> <ul> <li> </li> <li> 2 </li> <li> </li> </ul>

17 <table> <table> <tr> </tr>: <th> </th>: <td> </td>: style= margin-left:auto; margin-right:auto; <caption> <table style="margin-left:auto; margin-right:auto;"> <caption> </caption> <tr> <th> </th> <th> </th> <th> </th> <th> </th> </tr> <tr> <th>2012</th> <td>128</td> <td>23</td> <td>38</td> </tr> <tr> <th>2013</th> <td>158</td> <td>43</td> <td>52</td> </tr> <tr> <th>2014</th> <td>98</td> <td>18</td> <td>25</td> </tr> </table>

18 Web 3 GIF 256 (GIF ) gif PNG GIF GIF GIF JPEG GIF 100% jpg

19 SmartArt (1) (2) (3) SmartArt (4) SmartArt :Web:SmartArt Excel (1) Excel (2) (3) :Web:Excel png webfiles Web (1) (2) (3) webfiles :Web: png

20 6.3 (mp (mp4 (1) (2) (3) (4) MPEG4- (*.mp4). webfiles html <video width="500" height="450" controls> <source src="videofile.mp4" type="video/mp4"> </video>

21 GET webfiles 6.5 <img> im explicit k.png <div style="text-align:center;"> <img src="im_explicit_k.png" alt=" " style="width:500px;"><br> <caption> </caption> </div> src= FTP Windows UNIX(Linux) OS UNIX alt=

22 6 22 <div style= text-align:center; > <div> style= text-align:center; style= width:500px;

23 (CSS) Web CSS Cascading Style Sheets) 7.1 index.html 6 8   ( F5 sample.css (<body>) <h1> 7.2 <body> sample.css body{ background-color: lightyellow; }

24 aqua gray navy silver black green olive teal blue lime purple white fuchsia maroon red yellow body body background-color : lightyellow ; 3 #ffffe0 # 16 6 body{ background-color: #ffffe0; } lightyellow body{ background-image: url("abc.gif") }

25 ( ) <h1>( 1) h1 { font-size: 2em; color: navy; background-color: lightpink; padding: 1em ; text-align:center; } font-size: 2em; em 2em 2 ( ) color: navy; background-color: lightpink; <h1> padding: 1em ; <h1> margin: text-align:center; text-align left right justify <h2>

26 ( ) #emp { font-size: 1.2em; color: red; } emp ID HTML <span id="emp"> </span>. <span> <div> <div> #torikesi { text-decoration:line-through; } <span id="torikesi"> </span>. text-decoration underline overline emp (underline) torikesi

27 ( ) table{ border-collapse: collapse; } th{ border: thin solid black; padding: 0.25em 0.5em 0.25em 0.5em ; text-align: center; background-color: #b0eeb0; } td{ border: thin solid black; padding: 0.25em 0.5em 0.25em 0.5em ; text-align: right; } border-collapse: collapse; collapse border: thin solid black; thin( solid black padding: 0.25em 0.5em 0.25em 0.5em ;

28 URL? Google Google( ) Senshu University ( ) URL? q= + Google Google ( ) URL UTF-8 16 URL UTF-8 URL %E5%B0%82%E4%BF%AE%E5%A4%A7%E5%AD%A6

29 <a href=" </a> ( ) , weathernews ( ) ( ) Google Map Google Map , ) ( ) Google Map ,

30 ( ) (Google Map )( ) Google Map HTML ( ) Weather Hacks HTML 8.3 Google chart tools Google chart tools JavaScript II: 3

31 Google chart tools

32 6 32 (1) 3 ( ) <head> (2) 3 <div id= piechart style= width: 1000px; height: 600px; ></div> (3) 3 Google chart tools 8.4 Goole Spreadsheet Goole Drive Google Document (Spreadsheet) Google Spreadsheets(how to use Google Charts with Google Spreadsheets.) Gmail Goolge Spredsheets Gmail Gmail Goolge Spredsheets

33 6 33 (1) Gmail (2) Spredsheet :Web:Google Spredsheet 1 (3) (2) Gmail URL a [ ] b [ ] [ ] c html (4) html (5) html :Web:Google Spredsheet 2 (6) Spredsheet [ ]

34 PDF HTML PDF (1) (2) (3) PDF (4) webfiles ( takahagi.pdf ) PDF (1) (2) Office PDF( XPS) (3) webfiles ( takahagi.pdf ) PDF HTML PDF <p> <a href="takahagi.pdf"> II </a>

35 Web 10.1 HTML 1 1 Web Web HTML (Mery) HTML (index.html) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> </body> </html>

36 html : page2.html syumi.html (1) (2) webfiles (3) Unicode(UTF-8) 10.3 <body> </body> HTML index.html <a href="index.html">takahagi </a> 2.7

37 6 37 index.html Web 2 (Mery) index.html <a href="page2.html"> </a> 11 HTML ( ) HTML Web HTML XML HTML Micorosoft Word [ ] [web (*.htm;*.html)] 12 Wiki HTML HTML Blog Wiki Blog Wiki

38 Web FTP Web (Web ) 4 ) 4 Web

39 FTP (1) Winscp (2) Winscp 5 (3) ikuta1 (S) (4) OK (5) FFFTP

40 edwww 6 edwww edwww (1) F7 ( ) (2) edwww OK (3) 6 edwww

41 13.2 edwww 6 41 edwww OK (1) 6 edwww (2) FTP webfiles edwww (1) 6 webfiles webfiles index.html (2) 6 edwww (1) 7. (2) html,jpg,gif

42 FTP index.html) (1) index.html (2) (3) 644 (4) 644

43 13.5 Web c /index.html c Web ID index.html index.htm index.html Server Not Found URL File Not Found URL index.html URL c / (c ID) index.html Winscp Forbidden HTML HTML HTML

44 edwww edwww public html Web

6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1

6 1 6 (1) (2) HTML (3) PDF Copy&Paste 1 Web 1 Web Web 1 Web HTML 6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1 6 3 1.1 HTML Web HTML(Hyper Text Markup Language)