HTMLによるWebページ作成

次の例を参考に、

  • 自己紹介のページ原稿(HTMLファイル)を作成: 
       <html>
    <head>
     <title>菊地時夫の自己紹介</title>
    </head>
    <body>
     <h1>菊地時夫の自己紹介</h1>
     <h3>出身</h3>
      <p>
       本当は埼玉県生まれですが、記憶が無いので、
       中学・高校時代を過ごした、<strong>神奈川県</strong>と言ってます。
      </p>
     <h3>趣味</h3>
      <ul>
       <li>70年代のポップスを聴く</li>
       <li>ウォーキング</li>
      </ul>
    </body>
   </html>

メモ帳を起動

  • '<' から　'>' までの中に書かれているものを HTMLタグ と呼ぶ
  • タグとその中身は 半角英数 で記入
  • <abc> で開いたタグは </abc> で閉じる。
  • 保存のときに、「ファイルの種類」で「すべてのファイル (*.*)」を選び、intro.html というファイル名で、「ドキュメント」フォルダに保存する。

ブラウザで見る

  • ドキュメント(エクスプローラ)から、intro.html をダブルクリックで開く

いろいろなタグ

  • <h1> <h2> <h3> 見出し(heading) 数字はレベル
  • <p> パラグラフ (文の段落)
  • <ul> 番号の無い列挙 (unnumberd list)
  • <ol> 番号付きの列挙 (ordered list)
  • <li> 列挙中の項目 (list item)
  • <strong> 強調 (太字) <em> 強調 (斜字体)

リンクと画像を追加で入れる

  • </body> の前に入れます。: 
       <h3>リンク</h3>
    <ol>
     <li><a href="http://www.kochi-u.ac.jp/">高知大学ホームページ</a></li>
     <li><a href="http://www.google.co.jp/">Google 検索</a></li>
    </ol>
   <h3>画像</h3>
    <img src="http://www.kochi-u.ac.jp/JA/img/top/090508rigaku1.jpg"
         alt="高知大学理学部"/>

リロード

  • 追加（編集）ができたら、保存し、ブラウザで再表示（リロード）を行う