練習課題プレゼンテーション(PowerPoint2013形式)

Download Report

Transcript 練習課題プレゼンテーション(PowerPoint2013形式) 

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