このページでは、HTMLを書くための器を作ります。他のページと比べても、ここは、難しそうで長いですので、サッと流し読みして、後でまた見てくれてもいいです。
ページは、テキスト形式で書かれてます。拡張子は、.htmlです。だから、メモ帳なりシンプルテキストなりに、HTMLを書いて、名前を付けて保存するときに、「名前.html」にして保存すれば、ページのできあがりです。
カンタンなページです。
これを記入するなり、コピー＆ペーストするなりして、てきとーな名前、index.htmlにでもして、保存して、クリックすると、ブラウザに、表示されると思います。白紙のページで、上部のタイトルバーに「test」と表示されてます。
これを、よく見ると、<>で囲まれたモノが、/を付け足したモノと、対になっています。3行目を見てみましょう。<TITLE>のように、<>に入ったモノを、タグといいます。
始めの<TITLE>のことを開始タグといい、/のついた</TITLE>のことを、終了タグといいます。htmlは、開始タグ〜終了タグで囲んだ要素で、作られます。(終了タグがないものや省略可能なものもあります)
開始タグ〜中身〜終了タグまでのことを要素といいます。
これを見てみると、全体が、まず、<HTML>〜</HTML>で囲まれています。HTMLは、この中に書きましょう。</HTML>後に書いても、実行されるでしょうけど、ダメです。なるだけ正式な書き方で書いた方がいいでしょう。
で、次にHEADがあります。よくよく見ると、HTMLの中に、HEADとBODYが入っていて、入れ子状(ネスト)になっていて、HEADの中に、TITLEが入ってる。そんな構成になってます。難しければ、ささっと読み流しましょう。やってるうちに分かってくると思います。
いよいよ、ひとつひとつについて、説明していきます。まずは、一番重要なHTMLです。この中に、HTMLを書くということです。
HTML全体を、<HTML>〜</HTML>で囲んで使います。後述のDOCUMENTを1行目に書きますので、2行目に<HTML>、最終行に、</HTML>を書きます。
要素(この場合は、HTML)には、属性を付けることができます。HTMLで私が使う属性は、LANGです。言語を表します。属性には、属性値がつきます。日本語は、JAです。
こーいうふうに書きます。HTMLは、基本的に、大文字でも小文字でもいいです。タグ(HTML,TITLE...)は大文字で、属性値(ja...)は小文字で書くことが多いように見えますが、好き好きでどうぞ。私は基本的に小文字で書きますが(ソース表示で見れます)。だから、こー書いてもいいです。
<HTML>の中にはHEADとBODYが入ります。HEAD内にいろいろな情報を記入します。BODY内に本文を書きます。
HEADタグに属性はつけません。いや、本当は、LANGやPROFILEという属性もあるのですが、私は今はつけてないということです。
HEAD内には、TITLE,META,STYLE,SCRIPT等が入ります
タイトルを付けます。HEAD内に入れます。必ず入れましょう。属性は、HEADと同じです。つけません。
この中にメインの本文、中身を書きます。
属性は、スタイル(色等の指定)として、CLASS,ID,STYLEがあります。いきなりJavaScriptを起動させるのに使うイベントとして、onLoadなどがあります。
色の指定は、あらかじめ決められたCSS(カスケードスタイルシート形式)をつかうか、styleで指定して使いましょう。CSSについては、step4-5でやります。
上の例では、STYLE属性を使ってます。使い方は、STYLE="プロパティ:値;"です。複数ある時は、半角スペースで区切りましょう。例で使ってるプロパティは、color(文字の色を変える)とbackground-color(背景の色を変える)です。
onLoadで、ページを読み終えた後、関数を呼び出します。使い方は、onLoad="関数()"です。引用符(",')は、紛らわしくないように使いましょう。onLoad='alert("引き返せません")'でもいいです。alertは、警告を出します。
どういうHTML言語を使うかを宣言します。ほぼ決められてるので、コピー＆ペーストして使いましょう。1行目に書きます。
普通はこれを使いましょう。これは、HTML4.01 Strictという文書タイプということです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">おすすめしないタグや、フレーム属性(target)を使うときに使います。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">フレームをセットする時に使います。
いろんな情報を書きます。HEAD内に入れます。よく使うものを紹介します。
JavaScriptを使うことを宣言します。さっきのalert等を使う時も宣言しましょう。
<META http-equiv="Content-Style-Type" content="text/css">CSS(カスケードスタイルシート形式)を使うことを宣言します。
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">文字コードを宣言します。この例はよく使われてるShift_JISです。
<META NAME="author" CONTENT="筆者名をいれます">HEAD内に書きます。各属性の説明はパス。これは、外部CSSを使う時の例です。basci.cssがファイル名です。ここだけ変えて使いましょう。
この中にJavaScriptを書きます。普通HEAD内にJavaScriptで関数を書いたりして、BODY内で使ったりします。大抵の説明書には、<SCRIPT LANGUAGE="JavaScript">となってますが、私は、HTML4.01 Strictをメインに使ってますので、typeを使ってます。
この中にCSSを書きます。基本的に、外部CSSを使って、そのページのみの設定をしたいときに使います。
さて、head内のタグを紹介してきましたが、addressは、bodyの最後に書くもので、メールアドレスを記入したりします。
例です。自分のメールアドレスをいれましょう。aは、href=""先にリンクします。「mailto:メールアドレス」で、メールを指します。
私が使うHTMLの雛型です。色違いを変更して使ってください。
Next : 次のステップへ Up : HTMLに戻る Home : ホームに戻る