雛形を作成する

Next: 写真を載せるためのタグを書く Up: 実習 Previous: 復習

雛形を作成する

はじめに述べたことと矛盾しますが, HTML文書の基本を覚えるために, コピーによらずに, 雛形を一から作成します.

gedit を起動し, 強調表示モードをHTML にします.

1行目に文書型定義を書く.

      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

次に, <html>, <head>, <body>, <title> などの基本タグの開始タグと終了タグを書いて下さい. <html> には言語指定をして下さい. 終了タグ</html>等の場所にも注意して下さい. HTML文書の改行はWebページには反映されないので, タグとタグの間は見やすいように改行を入れて下さい. (それぞれどの場所に書くかを忘れた人は, この講義の Web ペイジの過去のテキストか, 参考書を参照する.)
タグ<head>と</head>の間に文書の内容と文字コードを示すメタタグと, スタイルシート指定のためのリンクタグを書きます.
```
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <link rel="stylesheet" type="text/css" href="fellows.css">
```
同じくタグ<head>と</head>の間に次の文を書く.
```
  <title>Fellows</title>
```
次にタグ<body>と</body>の間に次の見出しを書く. (x には, 適当な数字を入れる.)
```
    <h1> 基礎ゼミ x組のメンバー </h1>
```
全て書き終ったら, 先ほど作った fellows というフォルダの中に, fellows.html と言う名前で保存します. 保存先の変更方法は, 保存を選んだときに出てくるダイアログウィンドウの中で, 「フォルダの中に保存」と書かれているところの下にある「他のフォルダ(B)」の左の小さな三角形 $\rhd$ を押します. そうすると, 場所と言う部分が現れますから, 右側の欄からフォルダ「fellows」をダブルクリックします. この後一番上の名前欄に, fellows.html を入力して右下の「保存」ボタンをクリックします.

雛形が正しく作成出来たかどうかを Firefox で確認します. 「fellows」フォルダの「fellows.html」をダブルクリックして下さい. 次を調べて下さい.

window の中の上部中央(タイトルバー)に「Fellows」が書かれているか?

上記のように表示されない場合は, gedit でファイル「fellows.html」の内容を確認し, 必要があれば修正して, firefox の再読み込みのボタンをクリックします.

Next: 写真を載せるためのタグを書く Up: 実習 Previous: 復習

平成23年6月10日