6 2 1

Similar documents

コンピュータサイエンス 1. ウェブの基本

ホームページ制作スターターズ

橡ホームページの作り方

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

HTML web HTML HTML

</BODY> </HTML> HTML HTML HTML HTML <HTML> </HTML> <HTML> </HTML> HTML <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> BODY moji.htm <HTML> <HEAD> <TIT

経営論集2011_07_小松先生.indd

(1) <html>,,,,, <> ( ) (/ ) (2) <!DOCTYPE html> HTML5 (3) <html> HTML (4) <html lang= ja > html (ja) (5) JavaScript CSS (6) <meta charset= shift jis >

07_経営論集2010　小松先生.indd

コンピュータサイエンス 4. ウェブプログラミング

Homepage HTML+CSS Flash JavaScript Homepage Homepage Homepage Homepage Web HTML Hyper Text Markup Language XHTML XHTML HTML5 CSS Cascading Style Sheet

4-1. html css html ht tp ht tp html HyperTex t Markup Language: html <meta ht tp - equiv="content-type" content=" tex t /html; charset=utf-

0序文‐1章.indd

インターネットマガジン2004年3月号―INTERNET magazine No.110

(a) WYSIWYG (What you see is what you get.) (b) (c) Hyper Text Markup Language: SGML (Standard Generalized Markup Language) HTML (d) TEX

山梨県ホームページ作成ガイドライン

HTML5&CSS3 レッスンブック

ii II Web Web HTML CSS PHP MySQL Web Web CSS JavaScript Web SQL Web

Transcription:

6 1 6 (1) (2) HTML (3) 1 Web 1 Web Web 1 Web HTML

6 2 1

6 3 1.1 HTML(XHTML) 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 />

<h2> </h2> <p>2008 4 20 </p> <p> </p> <p> </p> <h2> </h2> <p>2015 8 </p> <h3> </h3> <p>4 </p> <ul> <li> </li> <li> </li> <li> </li> <li> </li> </ul> <h3> </h3> <p> </p> <p> </p> <h3> </h3> <p> </p> <p> </p> <hr /> 6 4

<table> <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 /> <p><a href="http://www.senshu-u.ac.jp/" > </a> </p> <p> )</p> <p> takahagi@isc.senshu-u.ac.jp@senshu-u.jp</p> </body> </html> 6 5

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

6 7 1.2 Web Web ( ) Web Web Web web 14

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

2.2 6 9 Web (index.html( ) index.html, sample.css IE index.htm l ( 2.3 index.html Web webfiles index.html Web <a> ( / ) ) HTML ( Enter )

6 10 1 < > & 3 2.4 Web IE ) <title>takahagi </title> <title> </title> <title> </title> Ctrl + z Undo) 2.5 2.4 2.5.1 (Heading) <h1> </h1> <h1> </h1> 1 <h2> </h2> 2 <h6> </h6> 6

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

2.7 6 12 Web Web Web 10.3 ) Q12 Q12 ) <a href="http://www.senshu-u.ac.jp/" > </a> http://www.senshu-u.ac.jp/ URL a anchor Web (1) <a href= ></a> (2) Web (3) URL( http://www.senshu-u.ac.jp/libif/isc.html Ctrl C ( (4) HTML (5) Ctrl + V ( (6) <a href= http://www...jp > </a> 2.8 a (Anchor) </a> href a (attribute) a (href) = ( Shift + 2 href URL

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

6 14 4 HTML 4.1 HTML HTML HTML html ファイルブラウザ (IEなど) d 画面表示コンピュータの環境ブラウザの設定 2 HTML HTML 2

6 15 1 HTML & & > > < < " c 5 html HTML 5.1 < > < > 1 5.2 HTML <! >

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

6 17 5.4 <table> <table> <tr> </tr>: <th> </th>: <td> </td>: 2 2012 128 23 38 2013 158 43 52 2014 98 18 25 2 <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>

6 18 6 6.1 Web 3 GIF 256 (GIF ) gif PNG GIF GIF GIF JPEG GIF 100% jpg 6.2 Web *1 *1 OCR

6 19 貼り付け後ここをもってサイズを調整 3 ( ) (1) (2) A (3) ( 3) (4) PNG GIF

6.3 6 20 GET webfiles 6.4 html <img /> <hr /> <br /> takahagim.png <img src="takahagim.png" alt=" " /> src= FTP Windows UNIX(Linux) OS UNIX alt=

6 21 6.4.1 mark1.gif http://www.senshu-u.ac.jp <a href="http://www.senshu-u.ac.jp"><img src="mark1.gif" alt="mark" /></a> 6.4.2 jpeg jpeg <div> <div> <img src="sirakawa.jpg" width="300" alt=" " /> </div> width= 300 6.5 PowerPoint (1) PowerPoint (2) (3) SmartArt (4)

a ctrl + A b ctrl + C (5) ( 3) PNG GIF 6 22 1 png 6.6 (Excel (1) (Excel (2) (3) (4) ( 3) PNG GIF

6 23 7 (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; }

6 24 3 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") }

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

6 26 7.4 #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

6 27 7.5 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 ;

6 28 8 8.1 URL? 8.1.1 Google Google( ) Senshu University http://www.google.co.jp/search?q=senshu+university ( ) http://www.google.co.jp/search URL? q= + Google http://www.google.co.jp/search?q= Google ( ) URL UTF-8 16 URL UTF-8 URL %E5%B0%82%E4%BF%AE%E5%A4%A7%E5%AD%A6 http://www.google.co.jp/search?q=%e5%b0%82%e4%bf%ae%e5%a4%a7%e5%ad%a6

<a href="http://www.google.co.jp/search?q=%e5%a4%a9%e6%b0%97%20%e7%99%bb%e6%88%b8"> </a> 6 29 8.1.2 35.696816,139.754014 weathernews http://weathernews.jp/pinpoint/cgi/search_result.fcgi?service=2&lat=35.696816&lon=139.754014 ( ) 8.1.3 Google Map Google Map 35.617256,139.564551 10 ) 8.1.4 Google Map 35.617605,139.564819 http://maps.google.co.jp/maps?ll=35.617605,139.564819

6 30 8.2 8.2.1 (Google Map ) Google Map HTML 8.2.2 Weather Hacks HTML 8.3 Google chart tools Google chart tools JavaScript II: 4

6 31 4 Google chart tools

6 32 (1) 4 ( ) <head> (2) 4 <div id= piechart style= width: 1000px; height: 600px; ></div> (3) 4 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

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

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

6 35 10 Web 10.1 HTML 1 1 Web Web HTML 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>

6 36 10.2 8 +.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 http://...

6 37 index.html Web 2 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

6 38 13 HTML IE HTML HTML HTML HTML XHTML XML XML (3) [ファイルを選択 ]をクリックして, lintを行うファイル (.htmlファイル)を選択 (1) Fileを選択する (4) [チェック]をクリックして,チェックを行う (2) この2 箇所にチェックする 5 lint

6 39 lint HTML lint Another HTML-lint 5 (1) (2) WAI Content Accessibility Guidelines (3) webfiles index.html ) (4) HTML 0 1 Google Chart lint src=

14 6 40 Web FTP Web (Web ) 6 ) 6 Web

14.0.1 FTP (1) Winscp (2) Winscp 7 (3) ikuta1 (S) (4) OK (5) 7 6 41 7 FFFTP

6 42 14.1 edwww 8 8 edwww edwww (1) F7 ) (2) edwww OK (3) 8 edwww

14.2 edwww 6 43 edwww OK (1) 8 edwww (2) 0755 0755 14.3 FTP webfiles edwww (1) 8 webfiles webfiles index.html (2) 8 edwww (1) 9. (2) html,jpg,gif

6 44 ドラックアンドドロップまたは右クリックして, アップロード 9 14.4 FTP index.html) (1) index.html (2) (3) 644 (4) 644

14.5 Web 6 45 http://edwww.isc.senshu-u.ac.jp/ c1001234/index.html c1001234 Web ID index.html index.htm index.html Server Not Found URL File Not Found URL index.html URL http://edwww.isc.senshu-u.ac.jp/ c1001234/ (c1001234 ID) index.html Winscp Forbidden HTML HTML HTML

6 46 14.6 edwww edwww public html Web