さて､今回から始まるよ。ホームページ作り。しかもメモ帳だけで。
よいしょ､ホームページってのはどんなもんで出来ているか知るために、
ここにアクセスして、ＩＥだったら【右クリック】して【ソースの表示】を選択してみて。
うわ､なんか英語がいっぱい出てきた･･･(こう思った人は英語を勉強しましょう)
これが､ホームページを作っているＨＴＭＬの正体。これを今からメモ帳で作っていく。
その前に下準備、デスクトップでもどこでもいいからフォルダを一つ作って
てきとーな名前をつけといて
いきなりこれすべて覚えろじゃ、何が作成講座だ！！ということになりかれないから。
今回は､こっちのページを作れるようにするのが目的。 サンプル1
『何だ､つまんないページ。』といわずに､この講座を続けていけば､
さっきのページぐらい作れるようなレベルになるから､安心して。
さっきのに比べれば、簡単そうじゃない？
<HTML></HTML>
まず一番上と､一番下に注目。
<HTML> </HTML>
てのがあると思うけどこれは、このファイルが、HTMLファイルですよ、
と示しているしるし。
必ず､一番上に<HTML>一番最後に</HTML>とつく。
<HEAD></HEAD> <TITLE></TITLE>
その次に出てくるのが、
<HEAD> </HEAD>
ここに書かれていることは、ブラウザのメインの画面にはなんも表示されない。
(今のところはね)
ここの中の、
<TITLE></TITLE>
で囲われた部分にタイトルを入れると、
ブラウザのウィンドウの上のほうに、タイトルが表示されるよ。
<BODY></BODY>
ここからがブラウザに表示される部分
<BODY></BODY>
ここの間に､文字や､画像を入れてホームページを作っていく。
つまり､ホームページを作っているＨＴＭＬファイルの大基本は、
<HTML>
<HEAD>
<TITLE>
このページのタイトル
</TITLE>
</HEAD>
<BODY>
本文
</BODY>
</HTML>
という順番になる。
ここで､"＜＞"でくくったものを"タグ"と呼ぶから覚えといて。
このタグには規則があって、
始まりは、なんもないタグ（Ｅｘ．＜ＨＴＭＬ＞）
終わりは、/(スラッシュ）付きのタグ(ＥＸ．＜/ＨＴＭＬ＞）
それじゃ､ここで､このＨＴＭＬのの大基本を、実際に書いてみよう。
メモ帳(さっき開いたやつの）【ファイル】から【新規】を選択して書いてみよう。
(ここで注意､必ずタグを書くときは､直接入力にして入力すること！)
書けたらこれを保存してみよう。
【ファイル】→【名前をつけて保存】と選ぶと､保存のウィンドウが開くから、
保存する場所を､さっき作ったフォルダにして
そこの､ファイル名に"index.html"と書いて、ファイルの種類を"すべてのファイル"として、保存をクリック。
(ファイル名には､なるべく英数字を使ったほうが無難。
必ず、拡張子".html"を直接入力でつけるように。）
大基本はこんなとこ。
それじゃあ､次に実際に今回のサンプルの本文を作ってみよう。
（<BODY></BODY>で囲まれた部分。）
まず、<center>ってタグが出てくるけどこいつは後回し。
<h1></h1>
その下の<h1></h1>というのから始めよう。
この<h数字></h数字>というタグは､見出しを作るタグ。
数字には１から６の数字が入って１が一番大きな文字６が
一番小さな文字となると今は覚えといて。
このサンプルのページでは<h1></h1>を使って
”Ｋ'Ｓ ＨＯＭＥ”というメインタイトルを出している。
もう一つ<h2></h2>で、―Ｃｏｎｔｅｎｔｓ―も出している。
サンプル2
<hr>
その次に出てくるのが<hr>。こいつは例外でスラッシュ付きの終わりのタグがない。
これは､水平線を描くタグ。よく画像を使って区切り線つけているページもあるけど、
文章だけのページで読みやすくするためだけだったら、
この<hr>で、水平線を引くだけで十分。
軽いページを作るには欠かせないタグ。
長さの調整には<hr width="Ｘ">。
Ｘは、パーセンテージで指定するか､ピクセル数で指定することが可能。
<i></i> <b></b>
<i></i>。これで囲まれた文字はイタリック体、つまり斜体になる。
似たようなのが<b></b>これに囲まれると太ってしまう（笑）
つまり、太字になるってこと。
<br> <p>
<br>こいつも､スラッシュ付きの終わりのタグを必要としないもの。
改行させるタグ。
これを入れないと､どんなにメモ帳で改行を入れた文章を作っても
ブラウザで表示したら、 改行なしの、横のだだ長い文字が出てきてしまう。
似たようなのに<p>というタグがあってこっちは､改段落。
<br>を使うと、
こうゆう文章があります。
こうゆう文章があります。
<p>を使うと、
こうゆう段落があります。
こうゆう段落があります。
となる。
これだけ使って何か文章入れてＨＴＭＬファイルを作ってみよう。
出来たら､【ファイル】→【上書き保存】を選んで保存しよう。
できた？
そうすると左に寄ったものが出来たと思うけど。サンプル３
<CENTER></CENTER>
これを、ちょっとかっこよくするには、
最初に出てきた<center></center>タグを 使ってやる。
これを、<BODY>の下と</BODY>の上に入れてやると、本文全体が中央寄せになる。
他に､ここだけ中央寄せにしたいという場合は、そこだけこのタグでくくってやればいい。
そうすると大体､今回のサンプル１のページは作れるんじゃないかな？
第二回はここまで。ちなみに､作ったＨＴＭＬファイルを表示させるには、
そのファイルをダブルクリックすればブラウザが立ち上がって表示されるから。
どう？ついてこれる？この調子で、最後までついてこれたら、
簡単なページは即作れるようになるよ。
それじゃあ､第三回の予告。今回作ったのは、えらーく地味なページ。
そこで､次はこれに色をつけていこうと思う。
うんじゃ、お楽しみに。
ご意見・ご感想・質問はこちらまで･･･
|
