使用テキスト:はじめてのホームページ入門編 HTMLの書き方と使い方 (秀和システム)(amazonで購入)(正誤表)
| タグ | 意味 | オプション | 解説 | ページ | ||
|---|---|---|---|---|---|---|
| 基本 | <HTML> | HTML文書であることを宣言 | 5 | |||
| <HEAD> | ブラウザ内に表示されない文書情報を記述 | 5 | ||||
| <BODY> | ブラウザ内に表示させる文字列やタグを記述。オプションでページの背景や文字色を決めることができる | bgcolor background text link vlink alink | 解説 | 5,36 | ||
| ヘッダ | タイトル | <TITLE> | ブラウザに表示されるタイトル。ブックマーク(お気に入り登録)したときの見出しにもなる | 5 | ||
| 概要 | <META> | HTMLファイルに属性を追加します | http-equiv content keywords | 解説 | ||
| ボディ | 段落 | <H1>〜<H6> | 見出しタグ | align | 解説 | 8 |
| <HR> | 段落の間に水平線を引く。終了タグなし | width size color | 解説 | 23 | ||
| <P> | 行間あり改行。終了タグ省略可 | align | 解説 | 20,21 | ||
| <BR> | 行間なし改行。終了タグなし | clear | 20 | |||
| <DIV> | テキストの行位置を決める | align | 21 | |||
| テキスト | タグなし。通常のテキスト文にはタグは必要ない | 7 | ||||
| <B> | 文字を太字にする | 9 | ||||
| <U> | 文字にアンダーラインを付ける | 12 | ||||
| <I> | 文字を斜体にする | 11 | ||||
| <FONT> | フォントタグ。文字の大きさや色を決める | size color face | 10,13 | |||
| <!-- -- > | コメント。間に書いた文字は表示されない | 17 | ||||
| リスト | <UL> | 「・」で始まるリストを作ります | type | 解説 | 24,25,29,30 | |
| <OL> | 番号やアルファベットで始まるリストを作ります | type start | 26-28 | |||
| <LI> | リストに箇条書きします | type start | 24-30 | |||
| リンク | <A> | アンカータグ | href name target title | 解説 | 52-57 | |
| 画像 | <IMG> | イメージタグ。終了タグなし | src border width height align vspace hspace alt | 解説 | 31-35 | |
| テーブル | <TABLE> | テーブルタグ | border width height align bgcolor background cellpadding cellspacing bordercolor | 37-47 | ||
| <CAPTION> | テーブルのタイトル | align valign | 43 | |||
| <TR> | テーブルの行 | width height align valign bgcolor | 38,44,47 | |||
| <TD> | テーブルのセル | width height align valign bgcolor background colspan rowspan | 38,41,44-47 | |||
| <TH> | テーブルの見出しとなるセル | 39,41,44-47 | ||||
背景に黄色をつけたタグが基礎中の基礎です。これらは必ず覚えた方が良いでしょう。
これらの他に知っていると便利なタグとしては、<BIG><SMALL><BLOCKQUOTE><SUP><S><TT>などがあります。また、<FORM><INPUT>などで作るフォームという投稿の仕組みがあります。
参考:とほほのWWW入門>HTMLリファレンス
見やすいページ作り。誰にでも優しいページ作りを目指しましょう。
ホームページの目的は、誰かに見てもらうことです。見やすいページ作りはリピーターを作るための基本です。
ページを頻繁に、もしくは定期的に見直しましょう。ページの内容が変化することで、ページの作り手の息づかいが感じられるのです。変化の見えないページは、まるで放置された空き家のような印象を与えるため、段々と人が寄りつかなくなってしまいます。
更新日や日記をサイト内に置くのは、更新していることをアピールするのに良いことです。季節感のある模様替えもとても良いことです。しかし、更新が滞るとたちまち誰の目にもそれが判ってしまいます。ホームページは生き物ですので、作った後もちゃんと手を掛けてあげましょう。
コンテンツの種類は、基本的に動的な物と静的な物の2種類があると良いと思います。
動的なコンテンツとは、日々変化するものです。例えば日記や行動記録、近況報告で、ブログや掲示板を使っても良いでしょう。
静的なコンテンツとは、辞書や豆知識のようなもので、いつでも参照できる情報のことです。
ゲームや占いのようなお遊びプログラムもあります。
特に重要なのが動的なコンテンツです。
これがないと、いつみても変化のないホームページとなってしまい、リピーターがなくなって、忘れられてしまいます。最低でも月1回の更新を目標にし、季節の変化に応じた模様替えを楽しんでみてはいかがでしょうか。
利用者に優しいホームページ、その指針となるのがアクセシビリティです。
個人が作るページの中には、技術や作品を見せることを主体にしていたり、趣味を前面に押し出したページがあります。しかし、それらを受け入れない人もいますし、企業のような公共性の高いサイトでは、そのようなわがままな演出は
利用者に迷惑がかかるだけです。
インターネットは個人の部屋の様に自由に飾りつけできますが、ガラス張りで通行人の誰もが目にすることができる、ということを忘れてはいけません。プライベート空間として許されるのは個人サイトの中だけです。しかし、情報を検索して開いたときに、アクセシビリティの悪さによって情報を得る前に来訪者が帰ってしまう(閉じてしまう)ページというのもあるのです。
利用者はどんな人か分かりません。年齢や健康状態、アクセスする場所によって受け方が違ってくるのです。
やってはいけない、やらないほうが良い事例を挙げますので、作ったページがそれに該当しないように確認してください。配慮の優先度が高い順に並べて置きます。
| ●:タグ、オプションの解説/★:応用や実例のまとめ |
ホームページの背景に関する注意事項をまとめました。
参考:カラーチャート(色見本)
テーブルの細かな設定の違いを比較して見てみましょう。
<hr>についても記述しています。
基本的な配置、色分けによる見やすい表の作り方、テーブルの階層化、画像を使用した飾り枠など紹介しています。
テキストや段落の表現に関するタブについて一覧でまとめました。
<h1>
<font><div><center><p><br><blockquote>など。
リンクの仕方について、ディレクトリ構造についてもまとめました。