Presentation is loading. Please wait.

Presentation is loading. Please wait.

タグの直接入力によるウェブページの制作 練習課題1~3

Similar presentations


Presentation on theme: "タグの直接入力によるウェブページの制作 練習課題1~3"— Presentation transcript:

1 タグの直接入力によるウェブページの制作 練習課題1~3
ウェブページ制作の基礎 タグの直接入力によるウェブページの制作 練習課題1~3 次のスライドへ進んだり,戻ったりしたい時は,右下のボタンをクリック。 次へ

2 練習課題で使用するタグ一覧 タグ 意味 <b> </b> 太字 <i> </i> 斜体
<h1> </h1>~<h6> </h6> 見出し文字 タグ 意味 <sup> </sup> 上付き文字 <sub> </sub> 下付き文字 前へ 次へ

3 練習課題に取り組む前に テキストエディタなどを使って以下の記述をする。 ファイル名は,「ren.html」とする。 表示例 HTML記述例
前へ 次へ

4 練習課題1(背景色の変更) フラワーショップのウェブページを以下のようにする。 ●背景色を黄緑色にする。(他の色で試してもよい) 表示例
 ●背景色を黄緑色にする。(他の色で試してもよい) 表示例 参考 カラーコード(16進数) 000000 FFFFFF FF0000 0000FF 008000 FFFF00 黄緑 00FF00 前へ 次へ

5 練習課題1 <body bgcolor=“#00FF00”>で背景色を指定する。
完成後,ファイル名「ren1.html」で保存する。 表示例 HTML記述例 前へ 次へ

6 練習課題2(文字の装飾1) 練習課題1で作ったページ「ren1.html」を以下のようにする。 ●「お花」の文字を強調する。 表示例 参考
 ●「お花」の文字を強調する。 表示例 参考 効果 タグの書き方 太字 <b> </b> 斜体 <i> </i> 見出し文字 <h1> </h1>~ <h6> </h6> 前へ 次へ

7 練習課題2 <b><h2>お花</h2></b>で文字の装飾を指定する。
完成後,ファイル名「ren2.html」で保存する。 表示例 HTML記述例 前へ 次へ

8 練習課題3(文字の装飾2) 練習課題1で作ったページ「ren1.html」を以下のようにする。 ●「お花」の文字を上付き文字にする。 表示例
 ●「お花」の文字を上付き文字にする。 表示例 参考 効果 タグの書き方 上付き文字 <sup> </sup> 下付き文字 <sub> </sub> 前へ 次へ

9 練習課題3 <sup>お花</sup>で上付き文字を指定する。 完成後,ファイル名「ren3.html」で保存する。
表示例 HTML記述例 前へ 次へ

10 まとめ:今回使用したタグ一覧 タグ 意味 <b> </b> 太字 <i> </i> 斜体
<h1> </h1>~<h6> </h6> 見出し文字 タグ 意味 <sup> </sup> 上付き文字 <sub> </sub> 下付き文字 前へ 次へ


Download ppt "タグの直接入力によるウェブページの制作 練習課題1~3"

Similar presentations


Ads by Google