本時の目的（以下のことを理解する） 情報B ～第28回～ 総合実習４ 情報発信手段のひとつであるＷｅｂの仕 組みを理解し、体験する 東京都立上野高等学校 情報科 能城茂雄（のしろ しげお） http://www.ueno.ed.jp/ http://noshiro.shigeo.jp/ noshiro@ueno.ed.jp , noshiro@shigeo.jp ＨＴＭＬとＣＳＳについて、その仕組みを 理解する 能城茂雄 http://noshiro.shigeo.jp/ ＨＴＭＬ Ｗｅｂページ インターネットで情報収集をしたり、情報発 信をするときにみる情報はＷＷＷ、Ｗｅｂ、 Ｗｅｂ Site、Ｗｅｂページなどと呼ぶ Ｗｅｂページは、テキストファイルで記述 される ＷＷＷは、World Wide Webの略語 ＷＷＷの文書は、ＨＴＭＬと呼ばれる規格 に従い記述する ＨＴＭＬはHyper Text Markup Language の略語 テキストファイル(text file)は文字に代表 される文字コードで表現されるデータで記 述されたファイル 対義語はバイナリファイル(binary file) Webページは、専用のツールで書いて もテキストエディタで書いてもよい。 能城茂雄 http://noshiro.shigeo.jp/ 能城茂雄 http://noshiro.shigeo.jp/ 内容と見栄えの分離 Webページ作りの注意点 文章は「内容（構造を含む）」と「見栄え」 に分けて考える ＨＴＭＬでは 2008年現在、Webページ製作で一般 的に使われている規格 文章の内容と構造を記述 ＣＳＳ(Cascading Style Sheets)では 文章の見栄えや表現に関することを記述 ＣＳＳまたは、スタイルシートと呼ぶ 能城茂雄 http://noshiro.shigeo.jp/ (HTML4.01 or XHTML1.1) + CSS2.1 使われなくなった記述は使わない 経験者向けの注意 例 <font size=“10”> <font color=“red”> <bgcolor=“red”> 能城茂雄 http://noshiro.shigeo.jp/ 1 本日作成するページのイメージ 製作するWebページ 「自己紹介のWebページ」を製作 記述する項目（必須項目） 名前 クラス番号 誕生日 星座 血液型 最近興味があること 好きな食べ物 能城茂雄 http://noshiro.shigeo.jp/ テキストエディタで書いてみる 上野一郎 １年９組１番 ６月２５日 かに座 B型 能城茂雄 http://noshiro.shigeo.jp/ 保存する時の注意 ファイル名は、 z:¥index.html マイコンピュータ Zドライブ index.html すべてのファイル 能城茂雄 http://noshiro.shigeo.jp/ 能城茂雄 http://noshiro.shigeo.jp/ Webブラウザで見てみよう（１回目） 保存が成功すると 記述したテキストファイルをダブルクリック Webページとしては何も加工していないテキス ト文書のため、文章の論理構造が不明確 能城茂雄 http://noshiro.shigeo.jp/ 能城茂雄 http://noshiro.shigeo.jp/ 2 index.htmlをマークアップ 論理構造を記述 論理構造とは「タイトル」「見出し」「ここは 文章の段落」など 論理構造に基づいてマークアップ マークアップとは、タグと呼ばれるマーク アップ命令でテキストを囲う 例 見出しの場合 <h1>上野一郎の自己紹介</h1> 能城茂雄 http://noshiro.shigeo.jp/ Webブラウザで確認 能城茂雄 http://noshiro.shigeo.jp/ index.htmlをマークアップ 日本語入力は OFF！ 能城茂雄 http://noshiro.shigeo.jp/ 上書き保存して更新 能城茂雄 http://noshiro.shigeo.jp/ マークアップの基本 HTMLでは、”<”から”>”までの文字列をタグま たは開始タグと呼ぶ ”</”から始まるタグを終了タグと呼ぶ 開始タグから終了タグまでを要素と呼ぶ h2要素 <h2>好きな食べ物</h2> 開始タグ <h2> 終了タグ </h2> 内容 能城茂雄 http://noshiro.shigeo.jp/ 好きな食べ物 能城茂雄 http://noshiro.shigeo.jp/ 3 使用した基本的なHTMLタグ スタイルシートを適用してみよう <html> 以下の４行を追加 </html> HTMLファイルの開始と終了を示す <body> ダブルクォート SHIFT + 2 <html> </body> <head> 本文の開始と終わりを意味する <title>上野一郎 自己紹介ページ</title> <h1> </h1> <h2> </h2> <link rel="stylesheet" type="text/css" href="my.css"> 文章の見出しを示す。h1が最上位 <p> </p> </head> 段落を示す <body> <br> 教材(k:¥web)からmy.cssをz:¥にコピー 改行を意味する 能城茂雄 http://noshiro.shigeo.jp/ 能城茂雄 http://noshiro.shigeo.jp/ 著作権について おしまい このスライドに使用した引用のない図版などで 能城が著作者でないものは以下の著作権者 の許諾のもとに使用しています。 日本文教出版株式会社 実教出版株式会社 教育図書出版 第一学習社 スライドに記載されている内容の無断使用、 無断複製、スライドを印刷して配布するなどの 行為はご遠慮下さい 不明な点は、情報科 能城（のしろ） noshiro@shigeo.jp までご連絡下さい 能城茂雄 http://noshiro.shigeo.jp/ 4
© Copyright 2024 Paperzz
