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