Webデザイン1　第1回目(H20)

Webデザイン1　第1回目

それぞれの要素の利用方法を確認し、ブラウザでの動作を確認しなさい。

 環境整備

• テキストエディタNoEditorを導入する。
• ダウンロードしたファイルはLZHで圧縮されているので解凍レンジなどの解凍ソフトを使い展開する。
• Windowsで拡張子を表示するように設定する。

 HTML

• HTMLとは
• 文書構造の定義
• W3C
• タグ
  • 要素
  • 属性
  • 開始タグ
  • 終了タグ
• HTML文書の基本構造
• TITLE要素
• bgcolor属性
  • 色名

 空白文字

空白文字はキーボードのスペースキーを押して入力される半角文字(ASCIIコードの0x20)の事です。HTML文書中の空白文字はテキストファイルなどでの扱いと異なり、複数の空白文字は一つの空白文字に置き換えられてしまいます。このため、通常の空白文字と同じ効果を得たい場合には適切な要素( )やCSSを使って調節します。

 段落

段落はP要素を使い定義します。

 見出し

H1、H2、H3、H4、H5、H6の6つの要素を使い、定義する。見出しは文字の大きさが段落よりも大きくなる。

 構造化されたテキスト

文字の強調、引用など。

 改行

HTML文書中の改行コードは改行として扱われない。HTML文書ではBR要素を使い、ブラウザ上の改行を表現する。

 水平線

HR要素を使う。

 上付と下付

文字の右側の上下に小さい文字を表示する。SUBやSUP要素を使う。

 整形済みテキスト

整形されたテキストとを表示するときに使う。

 特殊記号

HTMLタグで使われる<や>、空白文字や直接キーボードから入力できない文字は&lt;といった表記または文字コードを使って表現する。一覧はここを参照。

演習　自己紹介のホームページ

自己紹介のホームページを作りなさい。ページには次の項目を含める事。

1. 学籍番号(強調する)
2. 氏名(強調する)とふりがな(名前の右側でいい)
3. 現住所と電話番号(整形済み要素を使い2行で表示)
4. 特技、趣味または今熱中している事(最低100文字、複数の段落で構成する事)
5. 将来の夢や書き記したい事(BLOCKQUOTE要素で)

• TITLE要素は自己紹介:自分の氏名とする。
• 項目を見出しにする。
  • 自己紹介をH1に、それ以外はH2など
• 文は必ず段落とする事
• ファイル名はprofile.htmlとする。

[Webデザイン1(H20)]