メモ帳で土台を作ろう！

◆　メモ帳をスタート

HTML文書を入力するためにメモ帳を開きます。

製作前に全ての拡張子を表示できるようにしておきましょう。
ファイルの拡張子（*.htmlの部分）が表示されるようにしておきます。
アニメーション
「マイコンピュータ」→「コントロールパネル」→「フォルダオプション」→「表示」詳細設定の中の→「登録されているファイルの拡張子は表示しない」のチェックボックスを外し、「OK」をクリック。
または、
「スタート」→「設定」→「コントロールパネル」→「フォルダオプション」→「表示」の詳細設定の中の→「登録されているファイルの拡張子は表示しない」のチェックボックスを外し、「OK」をクリック。

ＮＮ（Mac）の方は「Simple Text」を開いてください。（ここから、先の画面図は、Windows.使用の説明になります。）

メモ帳を開くにはまず画面左下にあるスタートメニューをクリックし、プログラム→アクセサリ→メモ帳の順にポイント＆選択します。( ワードパットでも構いません。）さあ、見ながら作ってみましょう。

この画面は、Windows.MEです。

上図のウィンドが開きます。

▲up

◆　基本的なHTMLファイル（土台）を作ってみる

下図のとおりの文書を入力してみてください。
必ず、タグは、英数字、記号はすべて半角英数してください。
タグと要素のメモ図
説明文上、解りやすく・見やすいように、要素名は大文字にしていますが、タグ内の要素名と属性名の大きさは、今後の XHTML文章に移行のために半角英数の小文字にすることをお勧めします。

これが、基本的・最小限の HTML 構造のタグです。
Webブラウザ（ホームページを見る画面）に対して、元となる上図のようなHTML文書全体を「ソース」と呼びます。

<html>
<head>
<title> window title. </title>
</head>
<body>
(%block;|SCRIPT)+ +(INS|DEL) -- document body.
the body as a canvas.
( text, images, colors, graphics, etc.)
</body>
</html>

次に下図の通り、<TITLE>サンプルです</TITLE>と
<BODY>ようこそ、ホームページへ！！</BODE>のように、文字を入力してみてください。
タグと要素のメモ図-2
例：「<BODY>ABCDあいうえお</BODY>」これは、ブラウザ（画面上）に表示する文字です。★好きな文章で構いません。
これらが一般的に「ホームページ」といわれる正体です。

▲up

◆　出来たページを保存するには？

任意の場所（ハードディスクドライブ：HDD）に、ページや画像を保存するフォルダ（作業フォルダ）を作っておきましょう。フロッピーディスク(FD)やコンパクトディスク(CD)を主な保存場所として作業をするのは危険です。データの破損・欠損の確率がHDDよりも高いからです。あくまでデータの一時的な保存や移管のためにFDやCDを使ってください。

また、ある程度作業が進むたびにHTMLファイル（ページ）を上書き保存するように心がけましょう。「ファイル（F)→上書き保存（S)をクリック」
上書き保存の図

初めに製作したページを保存する時に、ファイル名（ページの名前）をつけることになりますが、一番初めに表示させるページはindex.html（index.htm）という名前（ファイル名）が一般的で、プロバイダによっては、トップページの名前や拡張子が指定される場合もあります。index.html としておけば　ほぼ間違いありません。
漢字やひらがな・カタカナ等の名前での保存はやめましょう。半角のアルファベット（小文字）で名前をつけてください。

右図のように、「ファイル(F)→名前を付けて保存(A) 」を選択します。
そして、下記・下図の要領で保存します。

ここでは、説明上新しいフォルダ名を「 site 」に変更、ファイル名を「 sample01.htm 」にしましたが、プロバイダによっては拡張子に .html と指定されていますので拡張子は .htmlにしましょう。

製作するホームページの保存先を解りやすくするために、新しいフォルダを、作ります。
新しいフォルダの名前は半角英数で、任意変更してください。
後で、出来たホームページを公開する時のアップロードに半角英以外では受け付けないサーバーもあります。例：web とか site 等の半角のアルファベットにしましょう。
そして、新しく作ったフォルダをダブルクリックします。
製作した、HTMLフアイル名を半角英数で任意指定してください。例：sample01 等・・・
ファイルの種類(T)の欄は、「　*.htm;*.html　」を指定してください。
ファイルの種類(T)の欄に「　*.htm;*.html　」が無い場合 sample01 に続き「 .htm 又は .html 」と入力してください。「 .html 」などの拡張子を付けることで確定されます。

保存方法の図保存の図

保存が出来ましたら、マイ　ドキュメントに新しく作ったフォルダ名 site の中に、サンプルファイル図左図のsample01.htm ファイルアイコンが出来ます。（ sample01 のアイコンをダブルクリックすると、ご自分で製作した物が確認できます。）
　作成したファイルをWebブラウザから開くと、下の画像のような画面になります。（サンプル画面を表示します。）

タイトルバーの「サンプルです」と「ようこそ、ホームページへ！！」に注目
サンプルブラウザの図
★ Webブラウザで表示すると、タイトルバーに「サンプルです」と表示されるのが確認できます。これは、WebブラウザがHTML文書の<TITLE>が「サンプルです」であることを理解し出力した結果です。
次に、<BODY>に書いた文字が表示されてます。
これが、Webブラウザ（画面）に表示するものと認識され出力します。

▲up

◆.　タグと要素

ソースを見ると、いくつかのタグが使われています。「<」と「>」に囲まれているのがタグです、上から順に<HTML>～</HTML>、<HEAD>～</HEAD>、<TITLE>～</TITLE>、<BODY>～</BODY>の4組、8種類のタグをサンプルで入力しました。

HTMLのタグは、通常、要素（下図参照）名に「開始タグ」とスラッシュ（/）のついた「閉じタグ」（終了タグとも言う）をひと組として扱います。また文書中では、<HTML>～</HTML>で囲まれた中に、HEAD、BODY、TITLEの要素があり、<HEAD>～</HEAD>の中には<TITLE>が入っていますネ、これらのタグがすべて“入れ子構造”（タグの中にタグが、入っている状態）になっています。

また、タグには「空要素」という「閉じタグ」（終了タグとも言う）が、存在しない。または、省略が出来る物もあります。空要素タグは、その都度紹介します。
余談ですが、ＸＨＴＭＬには空要素が存在しません。

下図は要素の構造です。
要素図

★ 開始タグと終了タグに囲まれた全体を、「要素範囲」と呼びます。たとえば上図のサンプルでは、「<H1>～</H1>」という全体が「H1要素範囲」となります。
★　HTMLの目的は、文章・イメージ・その他に適切なタグ要素を割り当てページを構成し完成させることです。まさに「ハイパー・テキスト・マークアップ・ランゲージ」です。これから先に紹介しますが、タグには「要素名、属性、値」が、ある事だけ頭に留めて下さい。

▲up

■　市販ホームページ作成ソフトのメリットとデメリット

市販ホームページ作成ソフトでの良い面と悪い面を少し挙げると、
メリットは、要素・属性を特に意識しなくても簡単に作成され、ユーザーが入力した間違いタグや間違い要素、異常行動は警告し、良いものは訂正もます。
デメリットは、W3Cの改正やバージョンアップにはチョット弱いし、ドキュメントタイプ宣言の間違いや解釈を無視した場合もあります。

テキストエディター（メモ帳）が、「更地」なら、市販ホームページ作成ソフトは、「土地付き家具付き一戸建」
　パーソナルコンピュータを例えるなら、テキストエディター（メモ帳）は、「一から部品を揃えて自分で組み立てる自作パーソナルコンピュータ」、市販ホームページ作成ソフトは、「モニターや外部機器のそろったＯＳインストール済みのパーソナルコンピュータ」でしょうか？。

▲up

★今回は、基本的な形を作ったところで終りますが、メモ帳でも出来ることが、わかってもらえたでしょうし、あまり難しく考える必要もありませんルールを守り作れば良いです。
★起動したばかりのテキストエディターの画面は、“白紙のノート”メモ帳です。私たちが白紙のノートに何かを書き込むには、文字を書き必要に応じて罫線を引き、欄を作り、絵を張ったりする必要があります、そこで、次からはメモ帳の中に、いろいろと中身を書き込んで行く事にしましょう。
では、あなたのメモ帳・Simple Textで、あなたらしいステキなページを作りましょう。

▲up

一時限目：タグ解説

・HTML

HTML文書：<HTML>要素で文章の内容をＨＴＭＬ宣言し定義します。

<HTML>～</HTML>で囲んだ範囲の内容を、HTML文書として定義します。

「日本語」の宣言
“正しいアクセスアップのためにも”
始めの<HTML>タグに、<HTML LANG ="ja">と書けば、「この文書は日本語のHTML文書である」ことを意味するようになります。（米語＝"en-US"、英語＝"en"、仏語＝"fr"、独語＝"de"、露語＝"ru"、伊語＝"it"、オランダ＝"nl"、スペイン＝"es"、ポルトガル＝"pt"、アラビア＝"ar"、中国＝"zh"、韓国＝"ko"、等の言語名、後は、調べて下さい。）
　言ってみれば、「サージエンジンに日本語のホームページだよ！」と教えてキーワード・テーマ・要約文を拾ってもらい、検索する方に探し易くするのです。

・HEAD

文書のヘッダ：<HEAD>要素でタグ間にページの情報を記述します。

<HEAD>～</HEAD>で囲んだ範囲の内容を、HTML文書のヘッダとして定義します。
ヘッダは直接Webブラウザの画面中に表示されるものではなく、製作者の色々な補助的内容・タイトル・情報を記述しておきます。
<HEAD>要素の中に使える要素は、
TITLE｜BASE｜META｜LINK｜SCRIPT｜STYLE｜OBJECT｜ISINDEX 等があります。

・TITLE

文書のタイトル：<TITLE>要素タグ間でページタイトルの情報を記述します。

必ずヘッダ内に記述します。<TITLE>～</TITLE>で挟んだ範囲の内容をHTML文書のタイトルとして、Webブラウザのタイトルバーに反映されます。
<TITLE>～</TITLE>内で入力した文字は、の「お気に入り」やの「ブッマーク」の文字として反映されますので、わかりやすく簡潔なネーミングにしましょう。
タイトルが英語と言う時は <TITLE lang="en">と記述しましょう。

・BODY

文書の本体：<BODY>要素でタグ間にブラウザで表示する文章の本体を記述します。

<BODY>～</BODY>で囲んだ範囲の内容を、HTML文書の本体として定義します。
本体（本文）の内容は、Webブラウザの画面中に表示されます。

【←BACK ┃NEXT→】

メモ帳で土台を作ろう！