Transcript ｽﾗｲﾄﾞ ﾀｲﾄﾙなし

HTMLの記述と
WWWにおける情報公開
遠藤 美純 [email protected]
1
バネーバー・ブッシュのMEMEX
2
HTML とは?
Text Markup Language の略
 文章の論理構造をタグ (札) によるマーク
アップ (印づけ) を用いて記述
 HTML では論理構造を記述するのであっ
て、見た目を記述するものではない。
 視覚的にどのように表現されるかは最終
的にブラウザに依る。
 Hyper
3
タグを用いたマークアップ
 見出しや段落、箇条書きといった文書の論
理構造を示すのに、 HTML ではタグという
札を使って記述する。
4
マークアップの例
 タイトル
 開始タグと終了タグで囲んだ部分を要素と
呼ぶ
 HTML はこのような要素の集まりで構成
5
HTML の基本構造
 三つの要素
6
タイトル要素
 HEAD
要素の中に記述
7
見出し要素
 最上位の
H1 から最下位の H6 まである
8
段落要素
 終了タグが省略できる
9
箇条書き要素
 箇条書きには、順序あり
OL と順序なし
UL がある。
10
ハイパーリンク
の後にリンク先のURLを記述
 タグの間にリンク元となる文字列
 HREF
11
記述例とその見え方
 記述例
 実際にブラウザで見ると…
12
ファイル名を付けて保存する
 ファイル名は必ず半角英数字のみ
 ファイル名の最後に
“.html” を付ける
 最初に表示される目次ページ
 index.html
13
サーバへの転送
 コンピューターセンターの「ホームページを
公開する」のページを読み、指示に従う
 マイドキュメントに public_html フォルダが
作成される
 そのフォルダに入れたファイルが公開され
る。
14
自分のページを閲覧する
 自分のページの
URL は…
 http://home.soka.ac.jp/~ユーザID/
 まず最初に
index.html が表示される
15
応用1：画像を埋め込む
 <img
src=“画像ファイル名”> を使う
 画像をフォルダ
public_html に保存しておく
 それが logo.png というファイル名ならば
 <img src=“logo.png”> と記述する
 著作権には十分に注意すること！
16
応用2：ページのデザイン
 ページのデザインにはスタイルシートを使
う
 h1 のような要素ごとに色などを設定する
17
スタイルシートの指定方法

ＨＥＡＤ要素に以下の記述を追加
 <link
rel="stylesheet" href="default.css"
type="text/css">
フォルダにメモ帳で
default.css というファイルを作成
 public_html
18
default.css への記述
 背景の色を設定する
 body
{ background-color: lightblue}
 見出しの色を赤にする
 h1
{ color: red;}
 他の設定についてはページを参照
19
実習
 「ホームページを公開する」のページから
ウェブページ公開の手続きを行なう
 メモ帳で HTML を記述
 マイドキュメントの public_html というフォ
ルダ内の “index.html” として保存
 ブラウザで閲覧してみる。
 http://home.soka.ac.jp/~ユーザID/
 チャットで自分のページを紹介
20