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