セッティング

このページでは、HTMLを書くための器を作ります。他のページと比べても、ここは、難しそうで長いですので、サッと流し読みして、後でまた見てくれてもいいです。

基礎

ページは、テキスト形式で書かれてます。拡張子は、.htmlです。だから、メモ帳なりシンプルテキストなりに、HTMLを書いて、名前を付けて保存するときに、「名前.html」にして保存すれば、ページのできあがりです。

カンタンなページです。

<HTML>
<HEAD>
<TITLE>test</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

これを記入するなり、コピー&ペーストするなりして、てきとーな名前、index.htmlにでもして、保存して、クリックすると、ブラウザに、表示されると思います。白紙のページで、上部のタイトルバーに「test」と表示されてます。

これを、よく見ると、<>で囲まれたモノが、/を付け足したモノと、対になっています。3行目を見てみましょう。<TITLE>のように、<>に入ったモノを、タグといいます。

始めの<TITLE>のことを開始タグといい、/のついた</TITLE>のことを、終了タグといいます。htmlは、開始タグ〜終了タグで囲んだ要素で、作られます。(終了タグがないものや省略可能なものもあります)
開始タグ〜中身〜終了タグまでのことを要素といいます。

これを見てみると、全体が、まず、<HTML>〜</HTML>で囲まれています。HTMLは、この中に書きましょう。</HTML>後に書いても、実行されるでしょうけど、ダメです。なるだけ正式な書き方で書いた方がいいでしょう。

で、次にHEADがあります。よくよく見ると、HTMLの中に、HEADとBODYが入っていて、入れ子状(ネスト)になっていて、HEADの中に、TITLEが入ってる。そんな構成になってます。難しければ、ささっと読み流しましょう。やってるうちに分かってくると思います。

HTML

いよいよ、ひとつひとつについて、説明していきます。まずは、一番重要なHTMLです。この中に、HTMLを書くということです。

HTML全体を、<HTML>〜</HTML>で囲んで使います。後述のDOCUMENTを1行目に書きますので、2行目に<HTML>、最終行に、</HTML>を書きます。

要素(この場合は、HTML)には、属性を付けることができます。HTMLで私が使う属性は、LANGです。言語を表します。属性には、属性値がつきます。日本語は、JAです。

<HTML LANG="JA">

こーいうふうに書きます。HTMLは、基本的に、大文字でも小文字でもいいです。タグ(HTML,TITLE...)は大文字で、属性値(ja...)は小文字で書くことが多いように見えますが、好き好きでどうぞ。私は基本的に小文字で書きますが(ソース表示で見れます)。だから、こー書いてもいいです。

<html lang="ja">

HEAD

<HTML>の中にはHEADとBODYが入ります。HEAD内にいろいろな情報を記入します。BODY内に本文を書きます。

HEADタグに属性はつけません。いや、本当は、LANGやPROFILEという属性もあるのですが、私は今はつけてないということです。

HEAD内には、TITLE,META,STYLE,SCRIPT等が入ります

TITLE

タイトルを付けます。HEAD内に入れます。必ず入れましょう。属性は、HEADと同じです。つけません。

BODY

この中にメインの本文、中身を書きます。

属性は、スタイル(色等の指定)として、CLASS,ID,STYLEがあります。いきなりJavaScriptを起動させるのに使うイベントとして、onLoadなどがあります。

色の指定は、あらかじめ決められたCSS(カスケードスタイルシート形式)をつかうか、styleで指定して使いましょう。CSSについては、step4-5でやります。

<BODY STYLE="color:white; backgroundcolor:black;">

上の例では、STYLE属性を使ってます。使い方は、STYLE="プロパティ:値;"です。複数ある時は、半角スペースで区切りましょう。例で使ってるプロパティは、color(文字の色を変える)とbackground-color(背景の色を変える)です。

<BODY onLoad="alert('引き返せません')">

onLoadで、ページを読み終えた後、関数を呼び出します。使い方は、onLoad="関数()"です。引用符(",')は、紛らわしくないように使いましょう。onLoad='alert("引き返せません")'でもいいです。alertは、警告を出します。

DOCTYPE

どういうHTML言語を使うかを宣言します。ほぼ決められてるので、コピー&ペーストして使いましょう。1行目に書きます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

普通はこれを使いましょう。これは、HTML4.01 Strictという文書タイプということです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

おすすめしないタグや、フレーム属性(target)を使うときに使います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

フレームをセットする時に使います。

META

いろんな情報を書きます。HEAD内に入れます。よく使うものを紹介します。

<META http-equiv="Content-Script-Type" content="javascript">

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="筆者名をいれます">
<META NAME="title" CONTENT="タイトルをいれます">
<META NAME="keywords" CONTENT="検索用のキーワードを,こーしてカンマで区切って,入れます,…">
<META NAME="description" CONTENT="紹介、説明文をいれます">

LINK

<LINK REL="stylesheet" TYPE="text/css" HREF="basic.css">

HEAD内に書きます。各属性の説明はパス。これは、外部CSSを使う時の例です。basci.cssがファイル名です。ここだけ変えて使いましょう。

SCRIPT

<script type="text/javascript">
<!--
//-->
</script>

この中にJavaScriptを書きます。普通HEAD内にJavaScriptで関数を書いたりして、BODY内で使ったりします。大抵の説明書には、<SCRIPT LANGUAGE="JavaScript">となってますが、私は、HTML4.01 Strictをメインに使ってますので、typeを使ってます。

STYLE

<style type="text/css">
<!--
-->
</style>

この中にCSSを書きます。基本的に、外部CSSを使って、そのページのみの設定をしたいときに使います。

ADDRESS

さて、head内のタグを紹介してきましたが、addressは、bodyの最後に書くもので、メールアドレスを記入したりします。

<address>
<a href="mailto:dis777@hotmail.com">Mail</a>
</address>

例です。自分のメールアドレスをいれましょう。aは、href=""先にリンクします。「mailto:メールアドレス」で、メールを指します。

まとめ

私が使うHTMLの雛型です。色違いを変更して使ってください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<META http-equiv="Content-Script-Type" content="javascript">
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META NAME="author" CONTENT="筆者">
<META NAME="title" CONTENT="タイトル">
<META NAME="keywords" CONTENT="キーワード1,キーワード2,...">
<META NAME="description" CONTENT="紹介、説明文">
<title>test</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="basic.css">
<script type="text/javascript">
<!--
//-->
</script>
<style type="text/css">
<!--
-->
</style>
</head>
<body>
<hr>
<address>
<a href="mailto:dis777@hotmail.com">Presented by Rei</a>
</address>
</body>
</html>
Next : 次のステップへ
 Up  : HTMLに戻る
Home : ホームに戻る

Presented by Rei

Gポイントポイ活 Amazon Yahoo 楽天

無料ホームページ 楽天モバイル[UNLIMITが今なら1円] 海外格安航空券 海外旅行保険が無料!