今すぐホームページ作り

::無料でホームページ作り＞今すぐホームページ作り
BACK[もどる]

今すぐホームページ作り

メモ帳で作ってみる

ここではWindows付属のメモ帳（Notepad）を使って簡単にホームページを作ってみよう。メモ帳を開こう。「スタート」→「プログラム」→「アクセサリ」→「メモ帳」をクリックだよ。そのメモ帳に下のものを貼り付けよう。
じゃあ、メモ帳のメニューから「ファイル」→「名前を付けて保存」をクリックしよう。保存する場所はどこでもいいけど、マイドキュメントでいいよ。そして、ファイル名に半角英数で「index.html」って入力しよう。ファイルの種類をクリックして「すべてのファイル」を選びます。「保存」ボタンをクリック。メモ帳は開いたままだよ。]
次に、index.htmlのファイルを保存した場所から探そう。マイドキュメントに保存した人は、デスクトップのマイドキュメントのアイコンをダブルクリックします。デスクトップにない場合はマイコンピュータのアイコンをダブルクリック、ローカルディスクのどこかにあります。
index.htmlまたはindexという名前のアイコンがあればダブルクリックします。すると、InternetExplorerのブラウザが起動します。ホームページ完成！！
・・・ってこれじゃあ物足りないよね。じゃあ、今度はメモ帳の<title>タイトル</title>の「タイトル」ってとこを消して自分で好きなホームページのタイトルをつけてみよう。例）チョコマニアのページ
次に、下の「タイトル」、「このページは○○のページだよ。」ってとこも消して、自分で好きなことを書いてしまおう。例）ここはチョコ好きによるチョコ好きのためのホームページだよ。できたら、メモ帳のメニューから「ファイル」→「上書き保存」を選択。今度は、InternetExplorerのブラウザのほうの更新ボタンを押してみよう。ページが更新されたはずです。

HTMLの仕組みを覚える

次は、文字の大きさを変えて、色をつけよう。メモ帳の<body>〜</body>の間に下のものを貼り付けよう。
「ここに文字を書こう」の部分に文字を書いてみよう。メモ帳の上書き保存したら、ブラウザの更新ボタンを押す。
これから今までやってきたことを説明するね。メモ帳をみてみよう。<p style="color:red;">ここに文字を書こう</p>の部分に注目しよう。これはcolor、font、フォント（文字のこと）の色はRED、つまり赤だよっていうマークをしているんだ。
次に、<p style="color:red;">〜</p>で囲まれた部分だけ赤色になっているよね。つまり、文字色は赤ってマークは囲まれた部分だけに反映するんだ。<p style="color:red;">〜</p>みたいなのはエレメント（要素）っていって、lt;p>のようなものをタグというよ。
メモ帳に<・・・>で書かれた部分があるよね。この部分はブラウザで見ると表示されていないよね。それはホームページの構造を示すためのマークだからなんだ。
これはＨＴＭＬと呼ばれるものだよ。学校とかでノートに蛍光ペンで色つけをしたことあるよね。そうやってここは赤色とかマークしていくんだ。ＨＴＭＬはハイパーテキストマークアップランゲージの略でハイパーっていうぐらいだから単なるテキスト文書ではないってことだね。
これはInternet Expolorerなどのブラウザでのみ、表示されるマークアップ言語だよ。このＨＴＭＬは設計図のようなもので、ここは赤、ここは緑、こんな絵を書いて欲しいとマークする。すると、ブラウザっていう絵描きさんがその通りに絵を描くんだ。じゃあ、今まで書いたマークにはどういう意味があるか説明するね。ただ本来のHTMLは文書構造をマークするもので、デザインはスタイルシートを使うことをすすめるよ。
<html>〜</html>    一番最初と最後に書く。正しくは文書型宣言を書くのでHTMLを理解できたらそちらを参照してね。
<head>〜</head>    htmlの次に書く。head（頭）部分の範囲。本文はここには書かない。
<title>〜</title>    <head>〜</head>の間に書く。これは絶対必要。ホームページのタイトルでブラウザの一番上に表示される。正確で簡潔なタイトルを書こう。
<body>〜</body>    body（体）部分の範囲。ここにホームページの本文などを入力する。
これがホームページの基本です。ホームページの本文は<body>〜</body>の間に書いていきます。!ＨＴＭＬ言語は見ての通り、半角英数でしか書けないし、英語を使っているよね。これはアメリカで開発されたからなんだ。

色の仕組み

メモ帳を見よう。ホームページの本文は<body>〜</body>の間に書いてありますよね。じゃあ、今まで書いたタグ、エレメントを見てみよう。<p style="color:red;font-size:14pt;">ここに文字を書こう</p>を眺めてみるよ。
<p>〜</p>    このエレメントはパラグラフです。一つの段落のブロック要素です。
<br>    このタグを入力すると強制改行されます。メモ帳の中でENTERキーで改行してもホームページ上では改行されません。
style="color:red;font-size:100%;    文字の色とサイズを指定しているよ。文字の色は赤、文字（フォント）の大きさは100%っていう意味だよ。red、100%の部分を変えてみよう。色と文字サイズについてはトップページから文字の大きさと色を参照してね。
HTMLを理解してもらうために色を英語で指定したけど、実際はＲＧＢ値で指定しておくことをおすすめするよ。さらに、どんなパソコンでも同じように見えるように安全色を使うほうが無難だよ。color=""の"ここ"にＲＧＢ値（#F0F8FF）を入力するんだ。
！ＲＧＢ値は赤、緑、青の３原色ですべての色を表現するものだよ。

新しいページを作ってリンクでつなげよう

次に、もう一つページを作ろう。今度はプロフィールのページを作ってみるよ。さっきの復習だよ。index.htmlとは別に、新しくメモ帳を開いてね。メモ帳をもう一度起動させるんだ。
メモ帳のメニューから「ファイル」→「名前を付けて保存」をクリックしよう。保存する場所は絶対にindex.htmlを保存した場所と同じ場所にしてね。そして、ファイル名に半角英数で「profile.html」って入力しよう。ファイルの種類をクリックして「すべてのファイル」を選びます。「保存」ボタンをクリック。メモ帳は開いたままだよ。
次に、index.htmlのメモ帳を開いて。<BODY>〜</BODY>の間に下のものを貼り付けよう。
このタグがリンクといって他のページを呼び出すものだ。早速、ブラウザでプロフィールの文字をクリックしてみよう。プロフィールのページへ移動できたらＯＫだ。新しいページを作るときはこれを繰り返せばいい。そして、リンクを貼れば、ページ移動ができるよ。
ここまでは基本中の基本を学んだよ。次にメニューのページに戻って「みんなに観てもらう」を見よう。今までやってきたホームページは実は携帯でも表示できるページなんだ。まずは、自分のページが公開される喜びを味わってね。

TOP[上へ]

BACK[もどる]

::無料でホームページ作り＞今すぐホームページ作り
::Copyright © hiromichi.M メール