トップページ>>HTML>>書き方

文書宣言

HTMLを書く時には、どんな規則に則って書きますと言う事を始めに宣言しなければなりません。
なんで？と言われても困ります。そう言う決まりだと思ってください。
記述する場所はファイルの先頭です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
これは厳密な規則に則って書きます。と言う宣言文です。
　最近（2010年）はこれが主流だそうですが、無料サーバーなんかを借りると、勝手に広告などが挿入されたりするので、この規則に則って書く事が出来ません。
なので、趣味でホームページを作ろうと考えている方は、これは使わない方が良いのではないかと個人的には思います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
　これは幾分かルーズに書きますと言う宣言です。
少し位大目に見てね！って感じです。多分。
だからと言って、文法もへったくれも無い文章はやめましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 　これはフレームを使いますと言う宣言です。
フレームは今や非推奨とされているので、あまり使わない方が良いのではないでしょうか・・・。

文法

それでは、HTMLの書き方を学んで行きましょう。
難しいのではないかと考えている貴方。そんな事はありませんよ。
先ほどのページに書いた通り、とても簡単なプログラミング言語です。

HTMLにはタグと言う物があります。
タグでテキスト（文字）を囲う事によって、ブラウザ上に表示させる事が出来ます。
　文章だけでは解り辛いと思いますので、実際に見てましょう。
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
 基本はこんな感じです。

　さぁ。これだけでは何もブラウザに表示されません。
では、どうすれば良いでしょうか？

ページの上へ

実際に書いてみる

先ほどのエメラルドグリーンの場所に書いてある物を一つずつ説明して行きましょう。
<と>に囲まれた英語をタグと言います。
タグはすべて半角で書きます。なぜなら、全角は欧米諸国には存在しないからです。
　キーボードの下の方に<　>この記号がありますね？
キーボードの「英数」と言うキーを押してから、シフト（shift）を押しながら押してみてください。
　さぁ表示出来ましたね？
それではタグについて説明して行きましょう。

　まずは<html>タグです。
<html>タグは、これからHTML文書を作成しますと言う宣誓の様な物です。
高校野球にも必ず選手宣誓はついているように、HTMLファイルを作成する時にはこれが必要になります。
　この中に書いた文章が、HTML文書なのだなぁ。と、パソコンやブラウザに解るようにするための物なので、必要なタグです。

　次に<head>タグです。
これはページの情報を記述するためのタグです。<head>タグの中に記述した文章は、普通にブラウザからは見えません。
この中には、色々な情報を書き込みます。
　検索エンジンから探してもらうための物だったり、
ページのタイトルだったり、後述しますがスタイルシート（デザインに必要な物）の宣言だったりリンクだったり・・・。
　まぁ色々な物を書き込むんです。これも必須なタグです。
ヘッダーなんて言われたりもします。

　続いて<title>タグ。
中学英語を少しでも勉強して来た人なら解ると思います。
読んで字の如く。タイトルを記述するタグです。

　さて。</title>タグが出てきました。
何かおかしな記号がついてますね？titleは解るけれど、/って何？

/は、タグの終わりを宣言する記号なのです。
前の<title>タグから、後ろの</title>までが、このページのタイトルですよ。とブラウザに教えるための物です。
この場合、「タグから、後ろの」がページのタイトルになるのです。
ページのタイトルは、ブラウザのタブに書かれます。
このページでは「HTML for Mac -HTMLの書き方-」となっているはずです。

　ほぼ全てのタグに、開始のタグと終了のタグがあります。
開始のタグは、そのタグをそのまま書いて、終了タグはそのタグの頭に/をつける。
それを覚えておいてください。
/は>の横にあります。shiftキーを押さないで押せば表示出来ます。

　よって、</head>もここで<head>タグの終了を宣言しています。
<head>って何だっけ？と言う人はこちら。

　ここからがやっとこ本体の文章を書く場所になって行きます。
ここまで長かった道のりご苦労様です・・・。

<body>タグの中には、ブラウザに表示させるものを書き込みます。
今、皆さんが読んでいるこの文章も、この<body>タグの中に書かれています。

それでは、何か書いてみましょう。
<html>
<head>
<title>これは！！</title>
</head>
<body>
初めてのウェブページじゃないか！
</body>
<html>
 　さぁ表示出来ましたでしょうか？
ファイル名は適当につけてください。何でも良いです。
（半角英数字の方が好ましいですが、今は日本語でも全角でも可）
ただし、拡張子は.html（半角）にしてください。

保存場所は専用のフォルダを作りましょう。フォルダ名はなんでも良いです。
しかし、のちにアップロードを考えているのでしたら、半角英数字で付けましょう。

そして、保存したらブラウザで開いてみましょう。
ダブルクリックをするか、右クリック（長押し）をして、ブラウザで開くを選択しましょう。
必ず、ファイルを上書き保存（新しく作る場合は新規保存）してから、ブラウザで開いてください。
　ファイルを上書き保存した場合、ブラウザでページの更新をしてください。
両方更新する事によって、自分が書いたHTMLファイルの動作が確認出来ます。

　さて。テキストエディットを使ってる人は、タグも全部表示されてしまったのではないでしょうか？
私も初めてHTMLファイルを作ったときはそうなりました。
これは、リッチテキストフォーマットなるものが邪魔をしているのです。
テキストエディットの環境設定を開いて、フォーマットを標準テキストに変更してください。
そうすればきっと上手く行くはずです。
上手く行かない場合は、悪い事は言いません。miを使いましょう。

　これで貴方もホームページ作成者の仲間入りです！おめでとう！！

ただ、これだけでは改行も出来ないし、延々と文章が続くだけのページになってしまいます・・・。
次の章からは、少しずつタグをご紹介して行きます。

<<前へ 次へ>> ページの上へ