コンピュータ中級B ～Javaプログラミング～第3回コンピュータと情報をやりとりするには?

全文

(1)コンピュータ2C ～マルチメディア～第2回 Webページを作成するには? (HTMLの基本2) コミュニケーション専攻白銀純子 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 1.

(2) 第2回の内容  HTMLの基礎(続き). Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 2.

(3) 出席確認  本日: 授業のページの「第1回授業の復習問題」に. アクセスし、問題に解答  授業のページ:. http://www.cis.twcu.ac.jp/~junko/MultiMedia/.  第3回以降は、授業開始前に、授業のページから. アクセスして解答  内容:. 前回授業の復習問題  タイムスタンプで、正規出席と遅刻を区別  15:10までに解答したら正規出席.  トラブルで解答ができないときは申し出ること Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 3.

(4) Webページ作りの基礎(復習). Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 4.

(5) Webページを作るには? 1.. HTMLファイルを作成するタグを書いていく方法  Webページ作成ソフトウェアを使う方法 . 作成したファイルの拡張子は「.html」 2.. 決められたフォルダにHTMLファイルを置く. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 5.

(6) HTMLって何?(1)  Hyper Text Markup Languageの略  Hyper. Text: ページからページでジャンプできる構造 (リンクをクリックすると別のページへジャンプ)  Markup Language: 「見出し」や「段落」などの印付けをする言語「ここからここまでが見だし」, 「ここからここまでが段落」などの印 <h1>コンピュータの授業のページ</h1> <p>コンピュータの授業に関する資料やお知らせを掲載するページです。 </p> 見出しや段落の内容 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 6.

(7) HTMLって何?(2)  Webページの構造を記述するための言語. (記述されたWebページを「HTML文書」と呼ぶ) 見出し, 段落, 箇条書き, 表, etc.  正しく印付けして書かれたファイルを、Webブラウザが内容を解釈してWebページとして表示  構造:.  W3Cという団体が、HTMLの規格を決定  「タグ」を使って構造を記述. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 7.

(8) タグって何?  Webページの構造(「見出し」や「段落」など)を. 表すために書く命令(「見出し」などの印)  「<abc>」のように、HTML文書の中で「<」と「>」で囲まれたもの  「<abc>」と「</abc>」で文章を囲むことで、 Webページの構造を決定  「<abc>」で「ここから」の意味  「</abc>」で「ここまで」の意味. ※タグは半角文字で書くこと Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 8.

(9) タグの共通規則(1)  文章を囲む必要のあるタグは、「<abc>」が文章の. 開始タグ、「</abc>」が終了タグ  「<h1>」は一番大きな見出しの開始タグ  「</h1>」は一番大きな見出しの終了タグ  「<p>」は段落の開始タグ  「</p>」は段落の終了タグ.  文章を囲む必要のないタグは、終了タグを書かない代. わりに、「<abc />」と記述. />」は文章を改行するためのタグ  「<img />」は画像を入れるためのタグ  「<br. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 9.

(10) タグの共通規則(2)  タグは内側から閉じる(タグの入れ子構造)  <xxx>が<yyy>の前にある場合、</yyy>は</xxx>の前に. 書く  カッコを閉じる関係(「[{( )}]」)と同様 <abc> <def> <ghi> </ghi> </def> </abc>. <abc> <def> <ghi> </def> </ghi> </abc>. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 10.

(11) Webページの作成  まずは、タグを直接書く方法から  Jeditを利用  「Finder」→「アプリケーション」→「Jedit X. Folder」. →「Jedit X」をダブルクリックする  「ファイル」→「新規」で新しいファイルを作成  「ファイル」→「開く」ですでに存在するファイルを開く. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 11.

(12) HTMLテンプレート(1)  HTMLテンプレート: HTMLを記述するときに. 最低限必要な記述  HTMLファイルのテンプレートは、Webブラウザで. http://www.cis.twcu.ac.jp/~junko/MultiMedia/. (授業のページ)から、「HTML文書のテンプレート (UTF-8用)」をクリック ※自宅のWindowsで作る場合は、「HTML 文書のテンプレート(Shift-JIS用)」をクリック. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 12.

(13) HTMLテンプレート(2)  表示されたテンプレートを全てマウスのドラッグ&. ドロップで選択し、「編集」→「コピー」をクリック  Jeditを出して、「編集」→「スタイルなしペースト」をクリック  テンプレートのコピー作業は、1つのファイルに1回だけでOK. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 13.

(14) HTMLファイルの保存(1)  Jeditで「ファイル」→「保存」をクリック  ファイルを保存するフォルダを開き、ファイル名を入力  ファイル名は必ず半角英数で  Webページを公開するときに日本語のファイルはよくないから.  ファイル名にスペースを入れないこと  Webページを公開するときにスペースが入っているとよくないから.  ファイル名に拡張子「.html」を忘れないこと  Jeditの「エンコーディング」の欄を「Unicode. (UTF8)」.  「UTF8」用のテンプレートを使うので、漢字コードの欄を. 「UTF8」にしないと、文字化けするから  ファイルをどこに保存したかは必ず確認しておくこと Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 14.

(15) HTMLファイルの保存(2) ファイル名(半角英数でスペースを入れず、拡張子「.html」で名前をつける) 「▼」をクリックすると、保存場所を細かく指定できる. 「漢字コード」の欄を「UTF8」にする. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 15.

(16) Webブラウザでの表示確認  Jeditで作成・保存したHTMLファイルは、. Webブラウザ(Safari)で表示し、内容を確認  Jeditは、タグなどのHTMLファイルの命令を記述する. ために使うソフトウェア  Webブラウザは、作成したHTMLファイルがどのように表示されるかを確認するために使うソフトウェア. それぞれのソフトウェアを、何のために利用するかをきちんと把握しておくこと. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 16.

(17) Webブラウザでの確認  Safariで「ファイル」→「ファイルを開く」をクリックして、. HTMLファイルを選択する. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 17.

(18) HTMLファイルの作成作業 JeditでHTMLファイルの内容を編集し、保存する 2. Webブラウザの「更新」ボタンを押して、変更内容を確認する 1.. . 更新ボタン: この繰り返しでHTMLファイルを作っていく. ※Webページの作成は、JeditでHTMLファイルの内容を編集して保存し、Webブラウザの「更新」ボタンを押して内容を確認する、という作業を繰り返す Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 18.

(19) Webページ作りの基礎(続き). Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 19.

(20) HTMLファイルを開く  Jeditで編集  「Finder」→「アプリケーション」→「Jedit X. Folder」. →「Jedit X」をダブルクリックする  「ファイル」→「開く」で作成途中のファイルを開く  Safariで表示確認.  「ファイル」→「ファイルを開く」をクリックして、作成途中の. HTMLファイルを選択する. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 20.

(21) ブロック要素とインライン要素. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 21.

(22) ブロック要素(1)  内容的なまとまりを表すタグ  HTML文書の構造を決定するタグ  見出し,. 段落, 箇条書き, 表, etc..  この種類のタグは、前後に改行が挿入. 1つ1つがブロック要素. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 22.

(23) ブロック要素(2)  ブロック要素のタグの中には…  別のブロック要素を入れても良いもの  普通の文字だけか、インライン要素のみ入れても良いもの. タグの種類によってルールが違う <abc> <def> </def> </abc> <abc> defghijkl… </abc>. <abc>の中に入れて良いもののルールは、<abc>が何のタグであるかによって決まる <def>がブロック要素であっても良いもの <def>がインライン要素でなければならないもの <abc>の中は、ただの文字とインライン要素の組み合わせはOKのものが多い ※<abc>はブロック要素. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 23.

(24) インライン要素(1)  ブロック要素の中に書き、ブロック要素の内容を装飾. したり、追加的な意味を与えるためのタグ  強調,. 改行, リンク, etc..  この種類のタグは、前後に改行はなし. インライン要素(強調). インライン要素(リンク) Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 24.

(25) インライン要素(2)  インライン要素のタグの中には、別のインライン要素. または文字しか入れてはならない  ブロック要素を入れてはならない.  ブロック要素の中であれば、どのブロック要素に. 入れても良い. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 25.

(26) 本文を書く場所. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 26.

(27) <body></body>タグ(1)  Webページの本文を記述する部分  <body>～</body>の外にWebページの内容を. 書いてはならない  <body>～</body>に直接インライン要素を書いてはならない →必ず別のブロック要素のタグで囲んで書くこと. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 27.

(28) <body></body>タグ(2)  Webページの本文を記述する部分  <body>タグは、1つのファイルに1セットのみ. この部分に表示される内容を記述. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 28.

(29) ブロック要素. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 29.

(30) 表を作るには?(タグ)  <table>, <tr>, <td>タグを利用  表全体を<table>～</table>で囲む. summary  値: 何のための表かの説明  引数:.  1行分を<tr>～</tr>で囲む(行:. セルの横の並び)  1つ1つのセル(マス)を<td>～</td>で囲む横の並びに必要な数だけ書く. <table summary=“表の説明”> <tr> <td>セル(マス)の内容</td> 縦の並びに </tr> 必要な数だけ書く </table>. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 30.

(31) 表を作るには?(例) セルとセルの間に太さ「1」の線を引く(border: 引数, "1": 値) <table summary="スケジュール" border="1"> <tr> <td></td> <td>月</td> <td>火</td> <td>水</td> <td>木</td> <td>金</td> </tr> ...................... </table>. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 31.

(32) 表を作るには?(作り方)  表の作り方がよくわからない場合は... <table summary="スケジュール" border="1"> <tr> <td></td> <td>月</td> <td>火</td> <td>水</td> <td>木</td> <td>金</td> </tr>. 1. 例をそのまま写してWebブラウザで表示してみる 2. 「<tr>」～「</tr」の部分をコピーして、下にもう1セット作る 3. コピーした部分の「<td>」～「</td>」の部分を書き換える. コピー(2. のステップ). </table> Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 32.

(33) 内容ごとにページ内を区切るには?  内容的な区切り: 内容ごとに<div>タグで囲む  ページの左側にメニュー、右側に内容を表示するような. 場合に利用することが多い  後日学習するスタイルシートと組み合わせて利用することが多い. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 33.

(34) 内容ごとにページ内を区切るには?(例)  (1)・(2)・(3)のように区切っている  (1)・(2)・(3)の順で、HTMLファイル内にタグが書かれて. いる. (1) (3). (2) Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 34.

(35) 内容ごとにページ内を区切るには?(例) <div> <ul> <li><a href="./NotePC.html">専攻推奨ノートPCとは</a></li> <li><a href="./Settings.html">設定内容</a></li> <li><a href="./FreeSoftware.html">ソフトウェア一覧</a></li> </ul> </div>. (1). Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 35.

(36) 内容ごとにページ内を区切るには?(例) <div> <h1>メニュー</h1> <ul> <li><a href="./NotePC.html">専攻推奨ノートPCについて</a></li> <li><a href="./Settings.html">設定内容</a></li> <li><a href="./FreeSoftware.html">ソフトウェア一覧</a></li> </div>. (2) Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 36.

(37) 内容ごとにページ内を区切るには?(例) <div> <h1>コミュニケーション専攻推奨ノートPC</h1> <p>このページでは、東京女子大学現代教養学部人間科学部・学科・専攻コミュニケーション専攻で2004年度から導入したノートPC制度についての情報を掲載しています。 </p> <h2><a id="info" name="info">お知らせ</a></h2> .......... </div>. (3). Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 37.

(38) インライン要素. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 38.

(39) 改行するには?  <br />タグを書く(文章を囲む必要のないタグ). <br />ここに載っている.... ※HTMLファイルの中で改行していても、<br />を入れないとブラウザでは改行されない Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 39.

(40) <, >, &, "を書くときは?  半角の「<」, 「>」, 「&」, 「"」は、HTML文書では特殊. な文字なので、そのまま書いてはいけない  「<」:. 「<」と書く  「>」: 「>」と書く  「&」: 「&」と書く  「"」: 「"」と書く. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 40.

(41) リンクをするには?(タグ)(1)  リンクをするタグ. <a>  引数: href  値: リンクするファイル名またはURL  <a href="xxxx">yyyy </a>  タグ名:. リンクの説明リンクするファイルのありかまたはURL. 例えば... <a href="http://www.twcu.ac.jp/">東女Webページ</a>. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 41.

(42) リンクをするには?(タグ)(2)  引数「href」の値  URL  リンク元のファイル(<a>タグを書くファイル)から見た. リンク先のファイルのありか test.htmlからsample.htmlにリンクをしたい場合リンク元のファイルがあるリンク元のファイル(例えば「test.html」) フォルダ sample.html 「File」というフォルダ. リンク先のファイルのありか: File/sample.html ファイルのありかの表し方 フォルダ「A」の中にファイル「f」があるという関係を「A/f」と表す (「/」で、「～フォルダの中に」という意味) フォルダ「A」の中にフォルダ「B」があるという関係も「A/B」と表す フォルダ「A」が入っているフォルダを「..」と表す Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 42.

(43) リンクをするには?(例) <a href="http://www.twcu.ac.jp/~junko/Computer1/"> コンピュータ1....</a> または <a href="./Computer1/"> コンピュータ1....</a>. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 43.

(44) 図や絵を入れるには?  HTMLファイルとは別のファイルに、図や絵のファイルを. 用意する  HTMLファイルの中に、「<img />」というタグを使って図や絵のファイルの名前を書き込む. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 44.

(45) 図や絵を入れるには?(タグ)  図や絵を入れるタグ  タグ名:. <img />.  文章を囲む必要のないタグ. src  値その1: 貼り付ける画像のファイル名  引数その2: alt  値その2: 画像ファイルの内容の説明  引数その1:.  何らかの事情で画像が表示されなかったときなどに代わりに表示. される言葉. <img src="xxxx" alt="yyyy" /> 画像の内容説明貼り付ける画像のファイルのありか Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 45.

(46) 図や絵を入れるには?(例) <img src="images/twcu.png" alt="ロゴマーク" />. 今回は...授業のページの「サンプル画像」のページにある画像を、右クリック→「名前をつけて保存」で保存して、入れてみよう! Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 46.

(47) <p>タグの扱いの注意  <p>, <ul>, <ol>, <table>は<body>の直下に  <ul>や<p>. の中に書いたり、<ul>や<table>の中に <p>を書いてはならない. <body> <p>コンピュータ2Cでは… </p> <ul> <li>Webページ作成</li> <li>静止画</li> </ul> <table summary="今週の予定"> <tr> <td>…</td> </tr> </table> <body>. <body> <p>コンピュータ2Cでは… </p> <ul> <p><li>Webページ作成</li></p> <li>静止画</li> </ul> <p><table summary="今週の予定"> <tr> <td>…</td> </tr> </table></p> <body>. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 47.

(48) インライン要素の扱いの注意  <img>, <a>, <br>は、<p>や<li>, <td>の中に  <img>,. <a>, <br />を<body>の直下に書いては. ならない <body> <p>コンピュータ2CのWebページ: <br /> <a href="…">Webページ</a> </p> <ul> <li>Webページ作成</li> <li><img src="…" alt="…" /></li> </ul> </body>. <body> <p>コンピュータ2Cでは… </p> <br /><br /> <img src="…" alt="…" /> <ul> <p><li>Webページ作成</li></p> <li>静止画</li> </ul> <a href="…">Webページ</a> </body>. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 48.

(49) HTML文法チェック. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 49.

(50) HTML文法チェックって?  HTML文書が文法的に正しく記述されているか. どうかをチェックするツール  HTMLの書き方には細かい規則あり  規則に従っていなければ、見た目が大きく崩れたり、. 内容が表示されないことも. HTML文法チェックを利用できるWebサイト: The W3C MarkUp Validation Service(本家本元、ただし英語) http://validator.w3.org/ Another HTML lint5(日本語) http://www.htmllint.net/ Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 50.

(51) W3C Validation Service(1) 1. ファイルをアップロードしてチェックすることを選択 2. 「参照」ボタンを押してチェックするHTMLファイルを選択. 3. 「Check」ボタンを押してチェック. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 51.

(52) W3C Validation Service(2) チェックした結果(問題がなかった場合). 問題がなければ、このマーク(合格マーク)が表示される. このタグをHTMLファイルに書くと、合格マークを貼り付けることができる. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 52.

(53) Another HTML lint5(1) 1.. 「ゲートウェイページ」にたどる 2. 「FILE」タブをクリックする 3. 「参照」ボタンを押して、チェックしたいHTML ファイルを選択する 4. 「チェック」ボタンを押す 3. 「参照」ボタンを押して、 HTMLファイルを選択する. 2.「FILE」タブを選択する. 4.「チェック」ボタンを押す Copyright (C) Junko Shirogane, Waseda University 2012, All rights reserved.. 53.

(54) Another HTML lint5(2) チェックした結果 100点満点で採点. 問題のあった箇所(先頭の数字が減点の点数, 「line」の欄が、HTMLファイルの行数) Copyright (C) Junko Shirogane, Waseda University 2012, All rights reserved.. 54.

(55) HTMLファイルの修正  文法チェックの結果、HTMLファイルを修正  Jeditで、HTMLのタグを修正し、保存  文法チェックのしなおし.  修正時の原則. この繰り返し.  表示されているエラーの上から順に修正すること  1つのエラーが後々に影響していることも多いため(1つ修正. すると複数のエラーが表示されなくなることも多い)  「line:」の前にある数字は、エラーの重要度  0が最も軽いエラー、9が最も重いエラー  重要度が0のエラーは減点対象外. →重要度1以上のエラーについての修正が大切 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 55.

(56) HTML文法チェックでのヒント  HTMLでは、文書の構造のみを記述すべき. 色やフォントの指定などの見栄えに関する設定が入っていたら、Another HTML lintでの点数が下がる見栄えに関する設定はスタイルシートに. Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved.. 56.

(57)

コンピュータ中級B ～Javaプログラミング～ 第3回 コンピュータと情報をやりとりするには?

コンピュータ中級B ～Javaプログラミング～第3回コンピュータと情報をやりとりするには?