ウェブページの簡単な例と主なタグ

更新日：2013.03.29

このページ内は授業用の表記で記述しています

ウェブページを開設するには、HTML(HyperText Markup Language)という言語の文法に沿って記述したファイルを作成する必要があります。
HTMLファイルの作成には、通常、以下の3通りの方法が採られます。

テキストエディタ(RED、秀丸、メモ帳等)で作成する
HTMLエディタ(Netscape Composer等)で作成する
ワープロの文書ファイルをHTML形式のファイルとして保存する

ただし、HTMLエディタやワープロでHTMLファイルを作ると、余分なタグや空白等が多く含まれるため、ファイルサイズが大きくなってしまい、殊に、遅い回線で見る人にやさしくありません。
そこで、HTMLエディタやワープロで作ったHTMLファイルから余分なものを削除してファイルサイズを小さくした方が良いことになりますが、そのためにはHTML文法の基礎知識が必要です。

HTMLの文法については多くの本や、ウェブページで紹介されているので、以下ではindex.html の簡単な例と、HTMLファイルの記述に必要なタグの中、主なものを紹介するに留めます。

index.html の例１

  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" >
      <title>Example 1</title>
    </head>
    <body>
      <h2>都市 大輔のウェブページへようこそ！</h2>
      作成日 2013年4月1日<br>
      <hr>
      ウェブページ作りに挑戦しています。
      <p>
      今後、充実させる予定ですので、時々覗いてみてチョーダイ！
      </p><p>
      今は、これだけなのー。もーしわけない！
      </p>
    </body>
  </html>

上のカラー文字のように記述すると、ブラウザでは以下の枠内のように表示されます。

都市大輔のウェブページへようこそ！

作成日 2013年4月1日

ウェブページ作りに挑戦しています。

今後、充実させる予定ですので、時々覗いてみてチョーダイ！

今は、これだけなのー。もーしわけない！

`index.html` の例２

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" >
    <title>Example 2</title>
  </head>
  <body>
     <h2>都市 大輔のウェブページへようこそ！</h2>
     作成日 2013年4月10日<br>
     <hr>
     <b>ウェブページ 第２版！</b>
     <p>
     <a href="kotaro.html">自己紹介のページを作りました。</a>
     </p><p>
     今後、ますます充実させる予定です。
     </p>
     <hr>
     <a href="mailto:g0999001@ed.ipc.musashi-tech.ac.jp">御意見はこちらまで</a>
     <p>
     <a href="https://www.tcu.ac.jp/">東京都市大学ホームページへ戻る</a>
     </p>
  </body>
</html>

上のカラー文字のように記述すると、ブラウザでは以下の枠内のように表示されます。

都市大輔のウェブページへようこそ！作成日 2013年4月10日

ウェブページ第２版！

自己紹介のページを作りました。

今後、ますます充実させる予定です。

御意見はこちらまで

東京都市大学ホームページへ戻る

主なタグ

上の例で示した < と > で囲まれた部分をタグと呼びます。
タグは、それ自体はブラウザの画面に表示されず、表示したい内容の文字の大きさを変えたり、他のHTMLファイルにリンクする場合など、制御文字として使われています。

以下に、主なタグをまとめました。なお、タグは大文字でも構いませんが、半角で記述しなければなりません。 ◆HTMLファイルの構造に関するタグ

<html>～</html>・・・・HTMLファイルの先頭と末尾に記述 <head>～</head>・・・・HTMLファイル中のヘッダ部をこれらで囲む <title>～</title>・・・表示ブラウザの最上段に表示するタイトル <body>～</body>・・・・本体部分をこれらで囲む bgcolor="#rrggbb"・・・背景色を赤(rr)、緑(gg)、青(bb)の16進数で指定 text="#rrggbb" ・・・・テキスト色 link="#rrggbb" ・・・・未アクセスのリンク箇所の色 vlink="#rrggbb"・・・・アクセス済みのリンク箇所の色［例］　<body bgcolor="#ffffff" TEXT="#000000"> 　　　　　　　　・・・背景を白、テキストを黒に指定

◆本文中の基本的なタグ

<hn >～</hn >・・・・・見出し文字。n に 1(最大)～ 6(最小)を指定 <br> ・・・・・・・・本文の改行指定 <p>～</p>・・・・・・文の段落

◆文字修飾用のタグ

<b>～</b>・・・・・・・・・・・・・太い文字 <u>～</u>・・・・・・・・・・・・・アンダーライン <tt>～</tt>・・・・・・・・・・・・タイプライタ体 <sup>～</sup>・・・・・・・・・・・上付き文字 <sub>～</sub>・・・・・・・・・・・下付き文字 <blink>～</blink>・・・・・・・・・点滅文字 <font size=n >～</font>・・・・n に 7(最大)～1(最小)を指定、3～4が標準 <font size=+n >～</font> ・・・・・・フォントサイズをn段階大きくする <font size=-n >～</font> ・・・・・・フォントサイズをn段階小さくする <font color="#rrggbb">～</font>・・・フォントの色

◆レイアウト用のタグ

<blockquate>～</blockquate>・・・文章などの引用。表示範囲の左右がインデント(字下げ)され <center>～</center>・・・・・・・センタリング(中央寄せ) <div align="center">～</div> ・・・・センタリング <div align="left">～</div> ・・・・・左寄せ <div align="right">～</div>・・・・・右寄せ <ul>～</ul>・・・・・・・・番号無し箇条書きの範囲指定 <ol>～</ol>・・・・・・・・番号付き箇条書きの範囲指定 <li>～</li>・・・・・・・・箇条書きの項目 <pre>～</pre>・・・・・・・整形済みテキスト <hr> ・・・・・・・・・・・エンボス調の水平線、太さは標準のピクセル数2 <hr size=n >・・・・・・・・エンボス調の水平線、太さをピクセル数nで指定

◆表作成用のタグ

　［注］以下において、|(縦棒)は「もしくは」を意味し、これで区切られた項目の1つを指定する。

◆リンクと画像用のタグ

<img src="画像ファイル名"> ・・・・・画像ファイルへのリンク align="left"|"center"|"right"　・・・左|中央|右寄せ(いずれか1つ) <a href="URL">～</a> ・・・・・・・・URLへのリンク <a href="#name">～</a> ・・・・・・・同一ページ内のnameへのリンク <a href="ファイル名">～</a>・・・・・別のHTMLファイルへのリンク <a href="URL"><img src="画像ファイル名">～</a> 　　　　　　　　　　・・・・・・・・画像ファイルをクリックしてURLへジャンプ <a href="mailto:メールアドレス">～</a> ・・・メールアドレスへのリンク

◆その他

<!コメント> ・・・・・コメント特殊文字：以下のように半角の英小文字で記述 < 　・・・・ < をテキストに含める場合 > 　・・・・ > を　　　　〃 &　・・・・ & を　　　　〃 " ・・・・ " を　　　　〃

ウェブページの簡単な例と 主なタグ

index.html の例１

都市 大輔のウェブページへようこそ！

index.html の例２

主なタグ

ウェブページの簡単な例と主なタグ

都市大輔のウェブページへようこそ！

`index.html` の例２