基金訓練(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>
では
- ああああ
- いいいい
と表示される。
・<dl>・・・構造定義タイプ(章立て)
例
<dl>
<dt>ああああ</dt>
<dd>いいいい</dd>
<dt>うううう</dt>
<dd>ええええ</dd>
</dl>
では
ああああ
いいいいい
ううううう
えええええ
と表示される。
9.見出し要素
・<h1>から<h6>まである。
・文字サイズは<h1>が1番大きく、数字が大きくなるほどサイズは小さくなる。
今日のポイント
・見出し要素はそれぞれのサイズでデザインを統一すると素敵。
・<ul>、<ol>で構造定義のように表示したいときは、<p>~</p>を使う。