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