事前準備・環境設定
|
Windows環境の場合は、ファイルの拡張子が表示される設定にしておいた方が何かと便利です。
これは以下の手順で設定できます。
「ツール」→「フォルダオプション」をクリック 
「表示」タブ→「登録されている拡張子は表示しない」のチェックを外して「適用」 
HTMLファイルはテキストエディターで作成・編集してブラウザーで確認します。 （HTMLファイルの作成はテキストエディターとブラウザーと愛と勇気さえあれば問題ありませんｗ） 基本的にテキストエディターは普段使い慣れているエディターを使うのが一番です！ 特に慣れ親しんだお気に入りのエディターが無い方は別に何を使っても（メモ帳でも）構いませんが、 そんなクールな方は以下に紹介するテキストエディターが個人的にはお勧めです。 ・ez-HTML 主に手打ちで効率よくHTMLソースを記述する人向け用のテキストエディター |
・ホームページ作成ツールやブログを利用する ・ホームページ用のサーバーを持つ（借りる） ・プロバイダーのサーバースペースを利用する ・レンタルサーバー（ホスティング）を利用する ・ホームページ作成の基本的な流れ ・具体的なＨＴＭＬファイルの作成方法 ・ＨＴＭＬタグ・逆引きリファレンス ・作成したＨＴＭＬファイルをサーバーにアップする |
ＨＴＭＬの雛形・タグの説明
以下はHTMLの雛形です。
<html> <head> <title>ここにタイトルを入れる</title> </head> <body> ここにブラウザで表示される内容を入れる </body> </html>この内容をテキストファイルにコピーして、とりあえず index.htm と言う名前で保存します。  これをブラウザー開くと以下の様に表示されます。  HTML文書は、まずファイルの先頭に「<html>」、ファイルの末尾に「</html>」と決まり文句のように記述します。 これは、このファイルがHTML文書であることの宣言です。 また、HTML文書の中は、ヘッダー部分とボディー部分にわかれてます。 そのページの基本情報（タイトルや文字コードなど）の設定を行うのがヘッダーで「<head>」〜「</head>」タグで囲みます。 実際にブラウザーに表示される部分がボディーで「<body>」〜「</body>」タグの間にその内容を記述します。 このようにHTML文書はタグと言うものを使って書いていきます。 タグは「< >」で記述しますが、基本的に開始タグと終了タグでひとつのセットになります。 終了タグは、開始タグと区別するために「</ >」と記述します。 （※なかには終了タグの無いタグもいくつかあります） 例えばHTMLファイルは「<html>」タグで始まり「</html>」タグで終わります。 HTML文書は基本的に文章中にタグを記述して、 このタグの範囲は「ここから（開始タグ）」、「ここまで（終了タグ）」と目印を付けていく（マークアップする）だけです。 <タグ> 文章や単語など </タグ> タグは、半角文字で書きますが、大文字・小文字のどちらで書いてもかまいません。 <html>でも <HTML>でも <Html>でも <hTmL>でもＯＫですが、 大文字か小文字に統一した方が見やすくて良いです。 |
ＨＴＭＬファイルの例
以下はＨＴＭＬファイルの例の中身です。
<html> <head> <meta content="text/html; charset=Shift_JIS" http-equiv="Content-Type"> <meta name="description" content="フランダースの猫の日記です"> <meta name="keywords" content="猫,ネコ,キャット,フランダース"> <title>フランダースの猫</title> </head> <body> <center>フランダースの猫</center> <hr> フランダースの猫がフラダンスをしています<br> フランダースの猫が寝転んだ<br> フランダースの猫がキャット叫んだ <br><br> <strong>僕なんだか眠くなってきたよぉ。。。</strong> </body> </html>このHTMLファイル（とりあえず cat.htm と言う名前で保存）をブラウザーで開くと以下の様に表示されます。
先ほど説明したようにHTML文書は <html>タグで始まり、</html>タグで終わります。 そのなかに <head>〜</head> 部分と <body>〜</body> 部分があります。
ヘッダー部分で一番重要なのが <title>〜</title> タグです。これはブラウザーの左上に表示されるタイトルになります。 ちなみにタイトルは検索結果でのサイトの掲載順位に大きく影響しますので良く考えて、 これだ！と思ったフレーズを入れます。
<meta content="text/html; charset=Shift_JIS" http-equiv="Content-Type"> タグは文字コードの設定で終了タグはありません。 Windows環境の場合は「Shift_JIS」と言った文字コードで記述してますので このタグを入れておけばブラウザーの文字化けが防げます。
<meta name="description" content="フランダースの猫の日記です"> タグは、このページの説明・概要（description）の意味で終了タグはありません。 ブラウザー上には表示されず、特になくても構いませんが、 ヤフーやグーグル等の検索表示結果に、ここで記述した紹介文が表示されます。
<meta name="keywords" content="猫,ネコ,キャット,フランダース"> タグは検索用のキーワード（keyword）として利用され、終了タグはありません。 キーワードが複数ある場合はカンマ（,）で区切ります。 このタグも別に記述しなくても構いませんが、 多くの検索エンジンが利用しているので、 検索結果での順位をあげたい方はよ〜く考えて検索用キーワードを記述します。
次にボディー部分ですが、 この例だとまず <center>〜</center> タグで位置を中央に指定してます。
次の <hr> タグは罫線を引くことができ、終了タグはありません。
その下に好きな文章をずらずらと記述してますが、 HTML文書の場合は通常のテキストと違ってブラウザー上では改行が無視（半角スペース１つに置き換え）されます！ そこで、改行を行うには、改行タグ<br>を記述する必要があります。 この<br>タグも終了タグはありません。
他には半角スペースを連続で記述していても１つしか認識されず、他は無視されます。
例えば、テキストの「あ あ」は ブラウザー上では「あ あ」と表示されます。
半角スペースを連続で入れたい場合は、半角スペースを表す特殊文字「 」を入力します。
「あ あ」 と入力すれば、 ブラウザー上では「あ あ」と表示されます。
最後に、 <strong>〜</strong> タグは囲んだ文字を強調する効果があるタグです。
このような感じで、HTML文書を作成していきます。
タグは、リンクを貼ったり、画像を入れたり、 文字の色や大きさを変えたり・・・といった、いろんなタグがありますので、 実際に使ってみて覚えていきましょう☆
次のページでは、良く使うタグの具体的な使い方を説明します。