10月の授業日記
>11月の授業日記
>homeにもどる
10/3 HTMLとは
使用するアプリケーション
- 記述
- 閲覧
- FTP
互換性
幅広くデータを共有するためには互換性が重要>テキスト形式(互換性が最も高い)
>表現力が弱い
HTML
- 文章にタグ(役割を文字で記したもの)を追加
- ブラウザがそれを解釈して見合った表示をする
拡張子
そのファイルがなんであるかを表す
拡張子を.htmlにすると
- ブラウザ 改行なくなる
- テラパッド プレビューアイコン
>HTMLとして認識される
構造タグ
- HTMLの基本の文書構造をまとめたもの
- ほとんどで共通なのでひな形を作り(kozo.html)そこから別名保存すれば省略できる
きょうのひとこと
来週からは手打ちです
10/7 構造定義
html文書は本文+タグ(文意)でできている
タグ(荷札の意味)
その部分が文章上どういう役割なのかの印をつけたもの
本文と区別するため<>で囲まれる
タグの範囲指定
範囲の始まり<開始タグ>
範囲の終わり</終了タグ>
その間のはさまれた部分がそのタグの適応範囲
H*(見出し)
1〜6で見出しのレベルを指定
p(段落)
段落分けはpタグで区切る
属性(タグのオプション)
タグにはオプション(属性)をつけて同じタグで様々な表現ができる。
<要素 属性="値" >
タグ名(要素)と区別するために半角スペースで区切る
””を閉じ忘れるとおかしくなるので必ず先に閉じる
align属性(left/center/right)
段落の水平そろえを指定する属性
<br>は範囲指定がないので段落単位でしか水平揃えはできない
bodyタグの属性
ページ全体にわたる指定はbodyタグの属性で指定する
背景色
bgcolor
文字色
text
色の指定
色の指定はカラーコードもしくはカラーネームを属性値として指定
複数の属性
半角スペースで区切ることで複数の属性を指定できる
きょうのひとこと
<生徒 学籍番号="1200">のような感じです
10/21 リスト
リストの種類
- 順不同リスト
- 番号付きリスト
<ol>〜</ol>(Ordered List)番号付きリスト
<ul>〜</ul>(Unordered List)順不同リスト
リストの中身
<li>なかみ</li>(List Item)
作成の方法
- まずolかulで括る
- そのなかにリストの内容を<li>〜</li>で括る
リストの入れ子
リストの中にリストを入れると階層化されたリストが作られる
リストのラベルを変更する(type属性)
3つの属性
実際にしてみた
OL,ULにかけると全体、LIだと個別に
10/28 img
画像を貼り付ける流れ
- 画像の準備
- 気に入った画像をDLフォルダにダウンロード
- 使用するものだけsite/imgフォルダにコピー
- ファイル名をわかりやすいものに書き換える
- imgタグでどこにあるどういう名前の画像かを指定
- htmlファイルと画像ファイルの位置関係を保ちながらアップロード
<img>画像を張り付けるタグ
<img src="画像へのパス">
- 画像に範囲はないので終了タグはいらない
- src属性で画像ファイルの設置場所への経路を示す(画像のパス)
パス
- htmlファイルから(画像)ファイルへの経路(行き方)
- imgフォルダのicon.gif>img/icon.gifと表記する
- ファイルの保存場所が変わると経路も変わる
背景画像
BODY全体の文字や画像の下に小さめの画像をタイル状に敷き詰められる
<body background="画像へのパス">
この画像を背景にします
imgタグのalign属性
アニメgifも貼れます
- imgタグのalign属性は画像に対する文字の揃え
- 画像の水平方向そろえを指定したい場合はその段落にalign属性(<p>をつける)
フォルダの階層が変わるとファイルへのパスも変わるのでHTMLでの変更が必要