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