PowerPoint プレゼンテーション

ウェブページ制作の基礎
タグの直接入力によるウェブページの制作
練習課題1~3
次のスライドへ進んだり,戻ったりし
たい時は,右下のボタンをクリック。
次へ
練習課題で使用するタグ一覧
タグ
<b> </b>
<i> </i>
<h1> </h1>~
<h6> </h6>
意味
太字
斜体
見出し文字
タグ
<sup> </sup>
<sub> </sub>
意味
上付き文字
下付き文字
前へ
次へ
練習課題に取り組む前に
テキストエディタなどを使って以下の記述をする。
ファイル名は,「ren.html」とする。
表示例
HTML記述例
前へ
次へ
練習課題1(背景色の変更)
フラワーショップのウェブページを以下のようにする。
●背景色を黄緑色にする。(他の色で試してもよい)
表示例
参考
色
カラーコード(16進数)
黒
000000
白
FFFFFF
赤
FF0000
青
0000FF
緑
008000
黄
FFFF00
黄緑
00FF00
前へ
次へ
練習課題1
<body bgcolor=“#00FF00”>で背景色を指定する。
完成後,ファイル名「ren1.html」で保存する。
表示例
HTML記述例
前へ
次へ
練習課題2(文字の装飾1)
練習課題1で作ったページ「ren1.html」を以下のようにする。
●「お花」の文字を強調する。
表示例
参考
効果
タグの書き方
太字
<b> </b>
斜体
<i> </i>
見出し文字
<h1> </h1>~
<h6> </h6>
前へ
次へ
練習課題2
<b><h2>お花</h2></b>で文字の装飾を指定する。
完成後,ファイル名「ren2.html」で保存する。
表示例
HTML記述例
前へ
次へ
練習課題3(文字の装飾2)
練習課題1で作ったページ「ren1.html」を以下のようにする。
●「お花」の文字を上付き文字にする。
表示例
参考
効果
タグの書き方
上付き文字
<sup> </sup>
下付き文字
<sub> </sub>
前へ
次へ
練習課題3
<sup>お花</sup>で上付き文字を指定する。
完成後,ファイル名「ren3.html」で保存する。
表示例
HTML記述例
前へ
次へ
まとめ:今回使用したタグ一覧
タグ
<b> </b>
<i> </i>
<h1> </h1>~
<h6> </h6>
意味
太字
斜体
見出し文字
タグ
<sup> </sup>
<sub> </sub>
意味
上付き文字
下付き文字
前へ
次へ