- WEBデザイン&WEBプログラミング -sei2の日記- - http://blog1.dd-company.com -

基金訓練に行ってきました。(21日目)

基金訓練(Webデザイン・プログラミング科)の21日目に行ってまいりました。
本日は、HTMLプログラミングです。

本日の内容は下記のとおりです。

1.HTML文書の構造

・文書型宣言部
・ヘッダ部
・ボディ部

2.文書型宣言部の内容と種類

文書を書く基準となるルールを宣言するところ。

文書型の種類
・XHTML1.0 strict・・・厳密型
 文法絶対主義・・・非推奨の要素を含まない
・XHTML1.0 transitional・・・移行型
 非文法絶対主義・・・厳密型に非推奨の要素を加えたもの
・XHTML1.0 frameset・・・フレーム設定型
 移行型にフレーム設定用の要素を加えたもの

3.ヘッダ部の内容 <head>~</head>

文書に関する情報が入るところ。
・タイトル
・キーワード
・ページの説明文書
など

4.ボディ部の内容 <body>~</body>

文章の内容を含む本体。

5.<html>~</html>

ヘッダ部とボディ部は<html>~</html>で囲む。

6.タグについて

・タグには、物理タグと論理タグがある。
・物理タグは見栄えを決めるもので、CSSに移行しつつある。
・多くのタグは<p>~</p>のように開始タグと終了タグで囲む。
・例えば、<p>が開始タグ、</p>が終了タグ。
・タグには半角小文字を用いる。
・2つ以上の要素を入れ子構造にする時は、完全に内包しなければならない。
 例
 正<b><i>~</i></b>
 誤<b><i>~</b></i>
・開始タグは、要素、属性、属性値で構成する。(要素のみ、要素と属性のみの場合もある)
 例<font color=red>
 font・・・要素
 color・・・属性
 red・・・属性値
・属性はスペースで区切って複数指定可能。
 例
 <font color=red size=”+1″>
・属性値に半角英数字以外の文字を使用するときは、”(ダブルクォーテーション)で囲む。

7.いろいろなタグ

・<br>・・・改行タグ(終了タグ不要)
・<b>~</b>・・・太字表示
・<i>~</i>・・・斜体文字表示
・<font size=…>~</font>・・・文字の絶対サイズ(属性値1~7)、文字の相対サイズ(属性値-6~-1、+1~+6)
・<font color=…>~</font>・・・文字色
・<font face=…>~</font>・・・フォントの種類
・<p>~</p>・・・段落を定義

8.リスト要素

・<ul>・・・非序列タイプ(マーク付)
 例
 <ul>
 <li>ああああ</li>
 <li>いいいい</li>
 </ul>

 では

と表示される。

・<ol>・・・序列タイプ(番号順)

 例
 <ol>
 <li>ああああ</li>
 <li>いいいい</li>
 </ol>

 では

  1. ああああ
  2. いいいい

 と表示される。

・<dl>・・・構造定義タイプ(章立て)

 例
 <dl>
 <dt>ああああ</dt>
 <dd>いいいい</dd>
 <dt>うううう</dt>
 <dd>ええええ</dd>
</dl>

 では

ああああ
     いいいいい

ううううう
     えええええ

 と表示される。

9.見出し要素

・<h1>から<h6>まである。
・文字サイズは<h1>が1番大きく、数字が大きくなるほどサイズは小さくなる。

今日のポイント

・見出し要素はそれぞれのサイズでデザインを統一すると素敵。
・<ul>、<ol>で構造定義のように表示したいときは、<p>~</p>を使う。

実習で使用している教本

入門Webデザイン

3週間でマスター Webデザインの教室[CS4対応版]