10月の授業日記

10/7　HTMLとは

使用するアプリケーション

1. 記述
   • テラパッド（エディタ）
2. 閲覧
   • ブラウザ
3. アップロード
   • FFFTP

テキストエディタ（テラパッド）

HTMLは言語なのでテキストエディタで記述できる

• テキストエディタ簡易ワープロのようなもの
• ダブルクリックせずテラパッドから開く

プロトコル（FFFTP）

ファイルのサーバーへの転送アップロードにはFTPソフトを使用する

左右に分かれたプログラムが開く

• 左がローカルフォルダ、右がサーバー
• ファイルをドラッグすることでアップロードする
• もしくはアップロードボタン

ファイルが変わらない場合

• 表示を更新ボタンで時刻が新しくなったのを確認する

ブラウザ(IF)

ファイル閲覧にはブラウザを用いる

• インターネットエクスプローラ、ファイアーフォックス

なぜHTMLを使うのか

インターネットは環境に依存しない互換性が重視される

それまでのファイル形式

ワープロ形式

ファイルにコードで修飾情報を埋め込む＞方法（ファイル形式）

• 互換性が低い

テキスト形式

コードを埋め込まず文章だけなので互換性が高い

• 表現力が低い

HTML形式

• 互換性の高いテキスト形式を利用
• 文章の情報を文字で記述した言語
  • 文章の意味
  • 画像の保存場所
  • リンク先のファイルの場所

  問題点

• 文章が記述で書かれているのでかえって読みづらい

解決策

記述と閲覧を分離させる

• 閲覧には閲覧用のソフト＞ブラウザを用いる
• ブラウザはタグの部分を表示せず、その意味を解釈しふさわしい表現をする

タグ

• 文章の役割のしるしをつけたもの（マークアップ）
• 文章と区別するために<>が用いられる
• <>とその中は常に半角

範囲指定

• 範囲の始まりを<開始タグ>
• 範囲の終わりを</終了タグ>
• その間に挟まれた文字がファイルの適用

今日の一言

ついにメモ帳で作るようなレトロというか原始的なHTMLが始まって元気になるしかなかった！

10/14　構造定義

記述のポイント

上から順に入力しない

1. 開始タグの入力
   • タグは＜左向きの山括弧で始まり＞右向きの山括弧で書く
   • 綴じ忘れるとタグが表示されない
     1. ＜
     2. ＜＞閉じる
     3. ＜タグ＞（カーソルで戻り中身を入力
2. 終了タグの入力
   • 開始タグと終了タグはセットになっている
   • 終了タグがないと正しく表示されない
   • 改行し、ペースト
   • /を打ち終了タグに変える
3. ゴリラ

構造タグ

• すべての文章は＜HTML＞〜＜/HTML＞内に記述されている
• HTML内は＜head＞＜/herd＞

BODY

• ブラウザの画面内に表示される部分になる

HEAD

• 画面内に表示されない情報はここにいれる

以上の情報はほとんどのHTMLでも共通

いちいち作成せずkozo.htmとして保存し、ひな形として流用

文章の構造定期

段落＜p＞〜＜/p＞

文章の区切り

見出し＜h＞〜＜/h＞

見出しのレベルを示す

改行＜br＞

区切り線＜hr＞

10/28　リスト

リストの種類

＜ol＞（ordered list）番号付きリスト

＜ol＞（an ordered list）番号無しリスト

リストの中身

＜li＞（list item)リスト項目

リストの作成方法

1. まず＜ol＞か＜li＞で領域を作る
2. なかに入れたいものを＜/ol＞か＜/li＞でくくる

リストの入れ子

1. リストのなかにリストを作ることでインデントされて階層化したリストを作ることができる

ulのリストのマークを変える（ul/li type属性）

• disc
• disc
• disc

olのリストのマークを変える（ol type属性）

1. いっこめ
2. にこめ
3. さんこめ

olの開始枠を変える（ol start属性）

1027. 今日
1028. 明日
1029. 明後日