10月の授業日記
10/7 HTMLとは
使用するアプリケーション
- 記述
- 閲覧
- アップロード
テキスト・エディタ(テラパッド)
HTML言語なのでテキスト・エディタに記述できる
- テキスト・エディタ>簡易ワープロのようなもの
- HTMLファイルは規定のプログラムがブラウザ>ダブルクリックせずテラパッドから開く
FTPソフト(FFFTP)
ファイルのサーバーへの転送(アップロード)にはFTPソフトを使用する
(P264)接続を押すと左右に分かれたフレームが開く
- 左がローカルフォルダー/右がサーバー
- ファイルアイコンを左から右へドラッグすることでアップロード
- もしくはアップロードボタン
ファイルが変わらない場合
- 編集後は「表示を更新」ボタンで時刻が新しくなったのを確認する
ブラウザ(IE)
HTMLファイルの閲覧にはブラウザを用いる
なぜHTMLを使うのか
インターネットでは環境に依存しない互換性が重視される
それまでのファイル形式
ワープロ
ファイルにコードで修飾情報を埋め込む>方法(ファイル形式)がまちまち
テキスト形式
コードを埋め込まず、文章だけなので互換性が高い
HTML形式
- 互換性の高いテキスト形式を利用
- 文章の情報を文字で記述した言語
- 文章の意味
- 画像の保存場所
- リンク先ファイルの場所
問題点
- 文章で文意が書かれているのでかえって読みづらい
解決策
記述と閲覧(ブラウザ)を分離
- 閲覧には閲覧専用ソフト>ブラウザを用いる
- ブラウザはタグの部分を表示せず、その意味を解釈し、ふさわしい表現をする
タグ
- 文章の役割を印をつけたもの(マークアップ)
- 文章と区別するために<>で囲まれる
- <>とその中は英数半角
範囲指定
- 範囲の始まりを<開始タグ>
- 範囲の終わりを</終了タグ>
- その間に挟まれた部分がタグの適応範囲
今日の一言
タグがなんとなく分かった気がしました
10/14 構造定義
記述のポイント
上から順に入力しない
- 開始タグの入力
- タグは<で始まり>で閉じられる
- 閉じ忘れると正しく表示されない
- <
- <>(先に閉じる)
- <タグ>(カーソルで戻り中身を入力)
- 終了タグの入力
- 開始タグと終了タグはセットになっている
- 終了タグがないと正しく表示されない
- 開始タグをコピー
- 改行し、ペースト
- /を打ち、終了タグに変える
- タグを適応する中身を入力
構造タグ
- すべてのHTML文章は<html>〜</html>(HTMLタグ)内に記述される
- HTML内は<head><body>に分かれる
BODY
- ブラウザの画面内に表示される部分はこの中に記述する
HEARD
- タイトルなど画面内に表示されない情報はここに入れる
以上の情報は(ほとんど)すべてのHTML文章で共通
いちいち作成せず雛形(kozo.html)を開き別名保存して作成する
(ここからは手書きでタグ入力)
文章の構造定義
HTML文章の記述とはタグを用いて文章の構造(機能)を明示していくことである
段落<p>〜</p>
文章の区切り
明示すると前後に1行空間が開き、段落が分離される
見出し<h1〜6>〜</h1〜6>
見出しのレベルを示す
ボールドが入り、見出しの強さに応じたフォントサイズが適用され、前後が改段落される
改行<br>
単なる改行は<br>で行う
スラッシュは不要
区切り線<hr>
区切り線を入れる
今日の一言
この日はお休みでした
10/21 属性
属性
タグにはオプション(属性)をつけて多彩な表現にすることができる
<タグ 属性="属性値">
タグと区別するため半角スペースを入れる
""を閉じ忘れるとおかしくなるので先に閉じる
ALIGN(left/center/right)
段落の水平ぞろえ
bodyタグの属性
bodyタグに属性をつけるとページ全体にわたる指定ができる
bgcolor
背景色
text
文字色
色の指定
色の指定にはカラーコード(P284〜)
複数の属性の指定
属性を複数指定する場合、間を半角スペースで空け明示する
fontタグ
文章の構造とは関係なく、文字に修飾を行うためにつくられた
修飾専門に新たにスタイルシートが作成されたため、タグは構造定義と役割分担され、あまり使用されなくなった
size="1〜7"
文字の大きさを変える(デフォルト=3)
color
部分的に文字の色を変える
今日の一言
タグは難しいです
前回休んだので一気に詰め込んだらごちゃごちゃになった
10/28 リスト(P138)
リストの種類
<ol>(ordered list)番号つきリスト
<ul>(un ordered list)番号なしリスト
リストの中身
<li>(list item)リスト項目
リストの作成方法
- まず<ol>か<ul>で領域を作る
- なかに入れたいものを<li>でくくる
リストの入れ子
- リストの中にリストを作ることでインデントされて階層化したリストを作ることができる
ulのリストのマークを変える(ul/li type属性)(P143)
ulに入れるとリスト全体が、liに入れるとその項目が変わる
olのリストのマークを変える(ol type属性)
<ol type="a">
- いっこめ
- にこめ
- さんこめ
<ol type="A">
- いっこめ
- にこめ
- さんこめ
<ol type="i">
- いっこめ
- にこめ
- さんこめ
<ol type="I">
- いっこめ
- にこめ
- さんこめ
olの開始順を変える(ol start属性)
- きのう
- きょう
- あした
今日の一言
リストのやり方がわかって、前に休んでたところもしっかりできました☆