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

Size: px

Start display at page:

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

みいかたておか
5 years ago
Views:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

35 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 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)

36 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 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)

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

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

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

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

42 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 42 引数 href の値 URL リンクをするには?( タグ )(2) リンク元のファイル (<a> タグを書くファイル ) から見たリンク先のファイルのありか test.htmlからsample.htmlにリンクをしたい場合リンク元のファイルがあるリンク元のファイル ( 例えば test.html ) フォルダ File というフォルダ sample.html リンク先のファイルのありか : 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. 43 リンクをするには?

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

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

47 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 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>

48 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 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>

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

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

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

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

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

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

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

コンピュータ中級B ～Javaプログラミング～第3回コンピュータと情報をやりとりするには? Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 1 コンピュータ 2C ~ マルチメディア ~ 第 2 回 Web ページを作成するには? (HTML の基本 2) 人間科学科コミュニケーション専攻白銀純子 Copyright (C) Junko Shirogane,

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

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