5月の授業日記
リンクのページ
5/7 属性
属性(タグのオプション)
属性をつけることで同じタグでも様々な表現にすることができる
<タグ 属性="属性値">
タグ名と区別するために半角スペースを入れる
""を閉じ忘れるとおかしくなるので必ず先に閉じる
align属性(left/center/right)
段落の水平そろえを指定する属性
bodyタグの属性
bodyタグに属性をつけるとページ全体にわたる指定ができる
色の指定
色の指定にはカラーコード(P234)カラーネームを属性値として記述
bgcolor
背景色
text
文字色
複数の属性の指定
属性を複数指定する場合、間を半角スペースで明示する
FONTタグ
文章の構造とは関係なく文字に修飾を行うために追加された
しかし修飾は新たにできたスタイルシート、タグは構造定義と役割分担されたため非推奨化
size="1-7"
文字の大きさを変える(デフォルト=3)
color
部分的に文字の色を変える
5/14 リスト
HRの属性
size=太さ(10)
width=幅(400)
align=水平方向のそろえ(left)
color=色(#008B8B)
noshade
リストの種類
リスト(順不同リスト)<ul>〜</ul>
(Un ordered List)
番号付きリスト<ol>〜</ol>
(Ordered List)
リストの中身
<li>なかみ</li>
(List Item)
作成の方法
- まずolかulでリストの領域をつくる
- なかに入れたい項目を<li>〜</li>でくくる
リストの入れ子
リストの中にリストを作ることでインデントして階層化されたリストを作ることができる
ulのリストのマークを変える(ul/li type属性)
ulに入れるとリスト全体が、liに入れるとその項目が変わる
olリストの番号を変える(ol type属性)
<ol type="a">
- いっこめ
- にこめ
- さんこめ
<ol type="I">
- いっこめ
- にこめ
- さんこめ
OLリストの開始順を変える
<ol start="">
- きのう
- きょう
- あした
5/21 img
画像を貼り付ける流れ
- 画像の準備
- 気に入った画像をDLフォルダへダウンロード
- 使用するものだけをsite/imgフォルダへ(コピー)
- ファイル名を分かりやすいものに書き換える
- imgタグでどこにあるどの画像化を指定
- htmlファイルと画像ファイルの位置関係を保ちながらアップロード
<img>画像を貼り付けるタグ
<img src="画像へのパス">
- 画像に範囲はないので終了タグはなし
- src属性で画像ファイルの設置場所への経路を示す(画像へのパス)
パス
- htmlファイルから(画像)ファイルへの経路(行き方)
- imgフォルダのicon.gif>img/icon.gifと表記する
imgタグのalign属性
アニメgifも貼れます
- imgタグのalign属性は画像に対する文字の垂直揃え
- 画像の水平方向揃えを設定したい場合はその段落にalign属性で指定する(pをつける)
ページに背景画像を設置する(bodyタグbackground属性)
<body background="画像へのパス">
この画像を背景にします