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