6 2 1

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

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

6 2 1

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

untitled

World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML

Web


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.

27短01研01斉藤.indd

Network Computing の基礎

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

HTML HTML HTML

■新聞記事

立ち読みページ

untitled

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63>


Microsoft PowerPoint - css-3days 互換モード

Webデザイン論

CSS CSS

Microsoft PowerPoint - css-3days 互換モード

css.pdf

r6.dvi

超簡単にWebページを作成

2 / 16 HTML=HyperText Markup Language( ハイパーテキストマークアップランゲージ ) ブラウザ (Chrome) での表示 ソースの表示 ( メモ帳 /TeraPad) HTML <========= =========>

PowerPoint Presentation

インターネット社会の発展

1

演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください 演習名 使用するフォルダ 演習 1 Z: Web データ管理 演習 1 演習 2 Z: Web データ管

HTML文書の作成

r6.dvi


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

Web情報システム 第1章~第5章

Microsoft PowerPoint - homepage1910.ppt - 互換モード

Microsoft PowerPoint - css-3days.ppt [互換モード]

SVG資料第6回目(その3) SVGとHTMLの間でデータを交換する

Taro-CSS.jtd

子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top


PowerPoint プレゼンテーション

b /b br / b /b b /b i /i b i /b i i -1/14-

目次 はじめに... 1 CSS?... 3 CSS の例... 4 CSS の基本の形... 5 HTML で CSS を読み込む... 7 <link> タグを置く ( ファイルを読み込む )... 9 <style> タグを置く ( スタイルを直接埋め込む ) セレクタ... 11

CSS

pdf

untitled

サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out

情報リテラシー(4)

Microsoft PowerPoint - CSS(Cascading Style Sheets)の基本.pptx

スライド 1

johokiso-webpage-large

3 CSS について Cascading Style Sheets(CSS カスケーディング スタイル シート カスケード スタイル シート) とは HTML や XML の要素をどのように修飾 ( 表示 ) するかを指示する W3C による仕様の一つ 文書の構造と体裁を分離させるという理念を実現す


untitled

ISコースプロジェクト実習 前期(第1回 ガイダンス)

Moshimo Challenge Report

スライド 1

スタイルシートでデザインを整えよう

Microsoft PowerPoint - makeweb2017.ppt [互換モード]

ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必

</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します 背景色を黒色で指定します 画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig

Microsoft PowerPoint - homepage 互換モード

ohp.mgp

IFRS 2011

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

(3) 本文を書く 実際にページを開いたときに表示される本文を書いてみましょう から の間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存する ここで一度ページを保存してみましょう テキストエ

サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り


overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ

padding( パディング ) padding プロパティでボックスの内側の余白を指定します この部分の内側には背景 ( 背景色や背景画像 ) を表示できます border( ボーダー ) border プロパティでボックスの境界線を指定します ボーダーには色 太さ 線の種類を指定できます 画像で

内容 WWWとは ブラウザ 検索エンジン HTML 自分のホームページ作成

Microsoft Word - 教材WebページのHTML5及びCSS3の解説

Sushi Web ページの編集 Card 1 of 10 3 パソコンの画面上で ブラウザとテキストエディタを横に並べます ブラウザ テキストエディタ 4 5 テキストエディタで 自分の自己紹介になるように変更します 変更したらテキストを保存します ( ファイル > 保存 ) 保存したら F5 を

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

PowerPoint Presentation

年刊EDP 2003

はじめに 本書の目的は 制作の効率化 クオリティの向上 各作業者間のスタイルの統一を 図る目安になることで 常にブラッシュアップを繰り返し 現時点での最適解の共 有に活用するものである 目次 基本仕様 ファイル ディレクトリ構成 画像ファイル 対応ブラウザ 品質管理 (X)HTML 制作 文字コード

i

Web データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/18

untitled

Web プログラミング 1 HTML+CSS (6) (2 章 ) 2013/5/29( 水 ) 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用

Border Width と記述します id 属性 div3 の div 要素を記述し 中にテキストで Border Radius と記述します id 属性 div4 の div 要素を記述し 中に span 要素を1つ記述しその中にテキストで Border All<br />(Color,Widt

eil _4.ppt

Web データ管理 HTML+CSS (6) (2 章 ) 2011/11/9( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/21

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は

Microsoft PowerPoint - homepage.ppt [互換モード]

ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個

1/2


websample 1 2 websample index.html

トリガーをわかり易くする方法

Microsoft PowerPoint - 04WWWとHTML.pptx

観光情報論 第6講 (着地情報)トラベルキオスク & 画像を入れる

カンペキな初心者のための、Adobe® AIR™の基礎の基礎

m_sotsuron

インターネットマガジン2003年11月号―INTERNET magazine No.106

_IMv2.key

Microsoft PowerPoint _1a-HTML.pptx

目次

Transcription:

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

6 2 1

6 3 1.1 HTML(XHTML) Web HTML(Hyper Text Markup Language) ( ) html htm HTML XHTML(XHTML 1.0 Transitional) <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <!-- <link rel="stylesheet" href="sample.css" type="text/css" /> --> <title>takahagi </title> </head>

<body> <h1>takahagi </h1> <hr /> <h2> </h2> <p>2008 4 20 </p> <p> </p> <p> </p> <h2> </h2> <p>2010 8 </p> <h3> </h3> <p>4 </p> <ul> <li> </li> <li> </li> <li> </li> <li> </li> </ul> <h3> </h3> <p> </p> <p> </p> 6 4

6 5 <h3> </h3> <p> </p> <p> </p> <hr /> <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 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 2

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> </html> web <html> xmlns= http://www.w3.org/1999/xhtml xml:lang= ja lang= ja 2.8 <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 6 7 1.2 Web Web ( ) Web Web Web

6 8 web 14

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

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

6 11 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 12 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 13 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 14 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 15 4 HTML 4.1 HTML HTML HTML html ファイル ブラウザ (IE など ) d 画面表示 コンピュータの環境ブラウザの設定 2 HTML HTML 2

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

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

6 18 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 19 6 6.1 Web 3 GIF 256 (GIF ) gif PNG GIF GIF GIF JPEG GIF 100% jpg 6.2 Web *1 *1 OCR

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

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

6 22 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 23 1 png 6.6 (Excel (1) (Excel (2) (3) (4) ( 3) PNG GIF

6 24 7 (CSS) Web CSS Cascading Style Sheets) 7.1 index.html 6 8 <!-- <link rel="stylesheet" href="sample.css" type="text/css" /> --> <!-- --> ( F5 sample.css (<body>) <h1> 7.2 <body> sample.css body{ background-color: lightyellow; }

6 25 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 26 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 27 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 28 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 29 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 30 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 31 8.2 8.2.1 (Google Map ) Google Map HTML 8.2.2 Weather Hacks HTML

6 32 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 33 10 Web 10.1 HTML 1 1 Web Web HTML HTML (index.html) <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="sample.css" type="text/css" /> <title></title> </head> <body> </body> </html>

6 34 10.2 8 +.html : page2.html syumi.html (1) (2) webfiles (3) Unicode(UTF-8) *2 *2 <?xml version= 1.0 encoding= utf-8?> (XML ) utf-8

6 35 10.3 <body> </body> HTML index.html <a href="index.html">takahagi </a> 2.7 http://... index.html Web 2 index.html <a href="page2.html"> </a> 11 HTML ( ) HTML Web HTML XML HTML Micorosoft Word [ ] [web (*.htm;*.html)]

6 36 12 Wiki HTML HTML Blog Wiki Blog Wiki 13 HTML IE HTML HTML HTML HTML XHTML XML XML lint HTML lint Another HTML-lint 5 (1) (2) WAI Content Accessibility Guidelines (3) webfiles index.html ) (4)

6 37 (3) [ ファイルを選択 ] をクリックして, lint を行うファイル (.html ファイル ) を選択 (1) File を選択する (4) [ チェック ] をクリックして, チェックを行う (2) この 2 箇所にチェックする 4 lint HTML 0 1 Google Chart lint src=

14 6 38 Web FTP Web (Web ) 5 ) 5 Web

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

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

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

6 42 µµµ µµ 8 14.4 FTP index.html) (1) index.html (2) (3) 644 (4) 644

14.5 Web 6 43 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 44 14.6 edwww edwww public html Web