CEC公開授業 Webサイト制作にチャレンジ！ 2007年11月20日 於：東京都立板橋有徳高校 学校インターネット教育推進協会

CEC公開授業：Webサイト制作にチャレンジ このレッスンの内容 　■WWWって何？ 　■WWWはどうやって作るの？ 　　◆HTML・CSSとは 　　◆HTMLタグ 　■実際に作ってみよう！ 　　◆雛形ページについて（HTML・CSS） 　　◆文字を変更（HTML） 　　◆写真を変更（HTML） 　　◆背景を変更　色・背景画像（CSS） 　　◆リンクをはる（HTML) 　■どんなWebサイトができたかな？ この授業は、競輪の補助金を受けて実施します。 財団法人コンピュータ教育開発センター

■WWWって何？ ●特徴１ ●特徴２ WWW（ワールドワイドウェブ）は、インターネット上でさまざまな情報を発信するためのしくみです。 ページどうしがリンクしていること。他（ほか）のページともリンクできるので、クリックしていくだけで、いろいろなページに行くことができます。 ●特徴２ 文字だけではなく写真や音やビデオなども発信することができます。 http://www.kids.soumu.go.jp/internet/dekiru/WWW2/WWW2.html http://www.kids.soumu.go.jp/internet/dekiru/WWW3/various.html

■WWWはどうやって作るの？ WEBページはHTML（エイチ・ティー・エム・エル）という決まりで書かれています。 HTMLはHyper Text Markup Languageの略です。 　●HTMLは文章の内容と構造の記述をします。　　　●見栄え（表現）はCSSで指定します。 http://www.kids.soumu.go.jp/internet/dekiru/HTML/Html.html http://www.kids.soumu.go.jp/internet/dekiru/css/css.html

HTML文書はブラウザーの表示から「ソース」を選択することで見ることができます。

■実際に作ってみよう！ ●雛形ページをもとにして作成 ★文字の修正 ★写真の修正 ★背景画像の修正 ★リンクをはる ●制作方法 　　★文字の修正 　　★写真の修正 　　★背景画像の修正 　　★リンクをはる ●制作方法 　　★エディターでHTML文書を修正 　　★ブラウザーで確認

◆雛形ページについて index.html デスクトップのwww内 profile.html other1.html other2.html

◆文字を変える その１：other1.html ブラウザーの表示メニューから「ソース」を選択するとエディターにHTML・CSSが表示される。 タグは触らず、文章のみ変更する。 other1.html ソース

◆文字を変える その２：profile.htmlの場合 ブラウザーの表示メニューから「ソース」を選択するとエディターにHTML・CSSが表示される。 タグは触らず、文章のみ変更する。 profile.html ソース

◆写真を変える その１：other1.htmlの場合 images_other1というフォルダー内の画像の中から好きな画像を選び、ファイル名を変える。 images_others1この中から選択 other1.html ソース

◆写真を変える その２：other2.htmlの場合 images_other2というフォルダー内の画像の中から好きな画像を選び、ファイル名を変える。 images_others2この中から選択 ソース other2.html

◆写真を変える その3：profile.htmlの場合 images_profileというフォルダー内の画像の中から好きな画像を選び、ファイル名を変える。 images_profile この中から選択 profile.html ソース

◆写真を変える その4：index.htmlの場合 images_indexというフォルダー内の画像の中から好きな画像を選び、ファイル名を変える。 images_index この中から選択 index.html ソース

◆背景を変える　その１：色を変える ＨＴＭＬ色指定チャート を参照の上、body{background-color:#FF0000;} の:#FF0000 を変更。 ←CSS ソース ＨＴＭＬ色指定チャート http://www5a.biglobe.ne.jp/~RyomaK/zatsu/unit/colorchart2.htm other1.html

◆背景を変える　その２：背景画像 body{background-color:#FF0000;} を次のように変更body{background-image:url(“画像ファイル名");} 例：body{background-image:url("./images_bg/bg_sample8.gif");} body{background-image:url("./images_bg/bg_sample8.gif");} ソース images_bg この中から選択 profile.html

◆リンクをはる other2.htmlへのリンクをはる 　　＝＞　<li>と</li>の間に　<a href=“other2.html”>タイトル：その２</a>を挿入 <a href=“other2.html”>タイトル：その２</a> index.html ソース

■どんなWebサイトができたかな？ みんなの作品を見てみましょう！