JoyWave便利箱　ホームページ制作≪基礎編１≫

ホームページ制作≪基礎編１≫

基礎編１

こん○○は。
ある事情で『ホームページビルダー　体験版（３０日間無料）』というのを見つけ、どんなものか見てみようとダウンロードしました。さすがに便利で、私のようなものでも作れたんです。感激でした^^
それ以来、制作にはまってしまい、今に至っています。

「ＨＴＭＬの基本構成」だけ読んで、私と同様、まずは何かを利用してから続きを読まれてもいいと思います。制作経験たった２年の私が書いていますので、たぶん難しくはないでしょう。
作ってみようかな？と思っている方は、是非読んでみてください。
「基礎編」は全部読んで欲しいと思っていますので、「こんなとき、どうするの？」といった「お助け記述」にはなっていません。「その他」はお助け的に作っています。
済みません。

実は「W3C」という組織？団体？規格名？があって、ホームページは準拠するように指導されているらしいのです。
でも私は見たことも読んだこともないので、私の説明が正しい（いわゆる文法どおり）かどうか判りません。
本当に正しく理解したい方は、「W3C」のサイトあるいはその解説サイトなどをご覧ください。

また、厳密には下記のように表現するそうです。

・　サイトのトップページのこと	→	ホームページ
・　サイト全体のこと	→	WEBサイト
・　サイトの各ページのこと	→	WEBページ

でも「ホームページ」の方が馴染みがあるので、ここでは各ページのことも「ホームページ」と言うことにします。

■HTMLの基本構成

メモ帳やNotepadなどのテキストエディタに、表示したい内容と、その内容をコンピュータに理解させ意図したとおりに表示させるための「タグ」を記述していきます。この全体を「ソース（source）」と言います。ＨＴＭＬの骨格は下記のとおりで、例外はありません。この骨格に、段落の作成、改行、テキストの装飾など、それぞれ意味を持つタグを規則に従って記述していけば、色々と肉付けし体裁を整えることができます。最近ではＨＴＭＬは基本的なことだけにとどめ、装飾、つまり体裁良く見せるためのタグはスタイルシートに記述することを推奨しています。しかし、このページでは装飾も含めた内容を記述しＨＴＭＬだけで表現し、さらに特に便利なタグ等を中心に書きます。
<･･･>のように書かれた記号の部分を「タグ」と呼び、複数の属性などを付けることができます。
図解説明しますと、

このようになります。
また、ソース（source）とは、ＨＰ（ホームページ）の元となるものの意味で、ＨＰを開き「右ボタンクリック」→「ソースの表示」で下記のような記号群が表示されます。
タグは大文字・小文字を区別しませんので、対になっているタグでも、小文字で始めて大文字で終わっても構いません。 <BODY>～</body>のような大文字・小文字の組み合わせも可能です。ただし、URL、JavaScriptやスクリプト名、文字コードなどは大文字・小文字を区別しますのでご注意ください。
<html>～</html>、<head>～</head>、<title>～</title>、<body>～</body>のように同じ言葉の前に「/」を付けて終わります。
<head>～</head>の間にタイトルやキーワードなどのタグ（メタタグと呼ぶ）を書き入れます。
<body>～</body>の間に本文や画像などを書き入れます。
作成したファイルを、ファイル名は半角英数字で、拡張子（.htmlまたは.htm）を付けて保存します。

その中の基本的なもの（HTMLのソース）は下記のとおりです。

<html>
<head>
<title></title>
</head>
<body>
<div align="center">
<font size="4" color="blue">
保存したファイル名をダブルクリックすると、<br>
こんな風に表示されます。
</font>
</div>
</body>
</html>

：html文書であることを宣言します。
：htmlの情報部分の始まりを宣言します。
：タイトルを書き入れます。
：htmlの情報部分の終了を宣言します。
：本体の始まりを宣言します。
：左右の中心に配置する命令です。
：文字の大きさと色を指定しています。

：文字指定解除
：この場合は位置指定解除
：本体の終了を宣言します。
：html文書の終了を宣言します。

上の内容をコピーしNotepadかメモ帳などに貼り付け、「*****.html」（*****の部分は何でもいいです）という名前でデスクトップなどに保存してください。そのファイルをダブルクリックして開くと、表示は下記のようになります。

基本的なソースの青字部分だけ残して、例えば「基本.html」などの名前で保存しておくと
「基礎編」や「その他」の気に入った内容を貼り付けることで、どんな感じか試せます。

ここで、文字を書き直したり、sizeの数値を変えたり・・・と、色々遊んでください。
「習うより慣れよう！」なんです。
そして、どうしていいのか判らなくなったとき、この先を読んで頂けると判りやすいと思います。

基礎編１