HTMLの基礎
●HTMLとは? ホームページは < > </ > で囲まれた文字を文章中に入れて作ります。 この < > で囲まれた文字を タグ と呼び、このタグで構成されたファイルを HTML といいます。 タグはたくさんの種類がありますが、ほんの数個だけでもHP作成できます。 タグは大文字でも小文字でもかまいませんが必ず半角じゃないとだめです。 |
●HTML基本構造タグ 最も基本の骨格とも言えるタグです。これがあればHPはできます。 <HTML>〜</HTML> は、このページがHTMLで書かれてることを表します。 このタグを、ドキュメント全体の最初と最後に入れます。 <HEAD>〜</HEAD> は、このドキュメントのタイトルや特徴等の情報を表します。 このタグの中に記述された情報は、<TITLE>〜</TITLE> に挟まれたテキスト以外、基本的には表示されません。 <TITLE>〜</TITLE>の間にはページのタイトルを入れます。 タイトルは、ブラウザ枠の左上に出ます。このページでは、「HTMLの基礎」になってます。 <BODY>〜</BODY> で囲んだとこがブラウザに表示されるドキュメント部分になります。 |
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </BODY> </HTML> |
●早速作ってみよう! まず、画面下のスタート → アクセサリ → メモ帳を開きます。 メモ帳に限らず、テキストエディターでかまいません。 次に、上の基本構造タグを書き込みます。 上のをカットアンドペーストしてもかまいません。 それが終わったら、<TITLE>と</TITLE>の間に、枠左上に表示したいタイトルを記入します。 続いて、ホームページとして表示される部分はすべて<BODY>〜</BODY>の間に書きます。 下のサンプルでは、「ここは、ライオンかずの・・・」になってますが、好きなように書き換えちゃってください。 メニュー左上のファイル→名前を付けて保存 保存する場所で適当なフォルダ(分かりやすい場所)を選び、 ファイル名をindex.html、 ファイルの種類をすべてのファイル として、ここでいったんファイルを保存します。 指定したフォルダに、index.htmlというファイルができているはずです。 |
(サンプル) <HTML> <HEAD> <TITLE>ライオンかずの部屋</TITLE> </HEAD> <BODY> ここは、ライオンかずの部屋です。 ただ今、作成中! 頑張って作成しますんでよろしくお願いします。 </BODY> </HTML> |
●さあ、見てみよう 先ほど作成した、index.htmlを見てみましょう。 index.htmlをダブルクリックすると、ブラウザに表示されるはずです。表示されました? 一直線に先ほど<BODY>〜</BODY>間に入力した文字が出ているはずです。 では、なぜ改行されてないのでしょう? <BODY>〜</BODY>間でEnterを押して改行しても、実際表示される時には反映されません。 改行を行う場合には、<BR>というタグを使います。 |
ここは、ライオンかずの部屋です。 ただ今、作成中! 頑張って作成しますんでよろしくお願いします。 |
●改行してみよう では、先ほどのindex.htmlを、メモ帳(テキストエディター)で開いてください。 開けたら、改行したいところに<BR>を入れてみましょう。 入れ終わったら、index.htmlを上書き保存して下さい。 |
(サンプル) <HTML> <HEAD> <TITLE>ライオンかずの部屋</TITLE> </HEAD> <BODY> ここは、ライオンかずの部屋です。<BR><BR> ただ今、作成中!<BR> 頑張って作成しますんでよろしくお願いします。<BR> </BODY> </HTML> |
●再び、見てみよう 先ほど修正しなおした、index.htmlを見てみましょう。 index.htmlをダブルクリックすると、ブラウザに表示されるはずです。表示されました? 今度は、きちんと改行できてると思います。改行できていればOKです。 |
ここは、ライオンかずの部屋です。 ただ今、作成中! 頑張って作成しますんでよろしくお願いします。 |
●HP完成! これで、HPの出来上がりです。たったこれだけの事ですが、これでも立派なHPです。 数個のタグを使うだけでHPはできるものなんです。 これさえ出来れば、HP作りは簡単です。 HPは、たくさんのタグを組み合わせて作っています。 字を大きくしたり、リンクを張ったり、etc・・・。 今作った、必要最小限のタグしか使ってないHPをベースとして、色々なタグを組み合わせる事により、 色んな人が作ってるような、華やかでカッコいいHPを作ることができます。 という事で、次は色々なタグの説明をしていきたいと思います。 |