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

雛形を作成する

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

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

  2. 1行目に文書型定義を書く.
          <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    
  3. 次に, <html>, <head>, <body>, <title> などの基本タグの開始タグと終了タグを書いて下さい. <html> には言語指定をして下さい. 終了タグ</html>等 の場所にも注意して下さい. HTML文書の改行はWebページには反映されないので, タグとタグの間は見やすいように改行を入れて下さい. (それぞれどの場所に書くかを忘れた人は, この講義の Web ペイジの過去のテキストか, 参考書を参照する.)

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

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

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


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

2013-05-31