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

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

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

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

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

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

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

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

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

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

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

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

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 21 head 要素その HTML ファイルにとって重要な情報を書いておくためのタグ (Web ページの内容ではない ) HTML ファイルの文字コードブラウザのタイトル著者の氏名キーワード etc. HTML テンプレートではこの部分 <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title> </title> </head>

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

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

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

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 32 見出しをつけるには?( タグ ) 見出し : 文章の章や節のタイトル <h1>, </h1> 一番大きな見出し <h2>, </h2> 2 番目に大きな見出し <h3>, </h3> 3 番目に大きな見出し <h4>, </h4> 4 番目に大きな見出し <h5>, </h5> 5 番目に大きな見出し <h6>, </h6> 6 番目に大きな見出し

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 34 文章はどこに書く? <body>~</body> の間 (<h1>~</h1> の下など ) に <p></p> で囲んで書く <p> ここでは東京女子大学での授業の...</p> <p>~</p> で段落を区切る <p>~</p> で囲まずに文章を書いてはならない

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 35 文献などを引用するには? 引用する文章を <blockquote>~</blockquote> で囲んで書く引用部分は普通の段落と区別するために左右に余白が入って表示される <blockquote> コンピュータは決して </blockquote>

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 36 箇条書き ( リスト ) をしたい!( タグ ) 番号をつけない場合 <ul>~</ul> と <li>~</li> を利用 <ul>~</ul> で箇条書き全体を囲む <li>~</li> で 1つ1つの項目を囲む番号をつける場合 <ol>~</ol> と <li>~</li> を利用 <ol>~</ol> で箇条書き全体を囲む <li>~</li> で 1つ1つの項目を囲む

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

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

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 43 内容ごとにページ内を区切るには?( 例 ) <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 2011, All rights reserved. 44 内容ごとにページ内を区切るには?( 例 ) <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 2011, All rights reserved. 45 内容ごとにページ内を区切るには?( 例 ) <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 2011, All rights reserved. 48 <, >, &, " を書くときは? 半角の <, >, &, " は HTML 文書では特殊な文字なのでそのまま書いてはいけない < : < と書く > : > と書く & : & と書く " : " と書く

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

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 57 図を描くには?(3) 色の設定ツールバーの選択ツールを選択し描いた図形を選択図形の線の色の設定はスタイルウィンドウのラインと図形ボタンを押して設定図形の塗りつぶしはスタイルウィンドウのフィルボタンラインと図形線の色の設定フィル塗りつぶしの色の設定

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 58 図を描くには?(4) 図をファイルに保存メニューバーのファイル書き出しをクリックし拡張子として.png をつけてファイル名を入力ファイル名は必ず半角英数でスペースを入れずにつけることファイル形式の欄が PNG 形式になっていることを確認場所の欄で HTML ファイルと同じフォルダを選択

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 59 <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 2011, All rights reserved. 60 インライン要素の扱いの注意 <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>

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

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