2006年05月19日

HTMLの基礎

HTMLの基本構造は次の通りです。

<HTML>
<HEAD>
そのページの基本情報や設定
</HEAD>
<BODY>
実際に表示される部分の記述
</BODY>
</HTML>

指定部分は < >(半角山形括弧)の中へ入れ、俗に「タグ」と呼ばれます。
必ず「終了タグ」と対になっていななければいけないものと、終了タグが必要ないものがあります。


上の例で見ていただくと、<HTML>と</HTML>が対になり、その間に<HEAD>〜</HEAD>と<BODY>〜</BODY>が入っていますね。
「HTML文書だよ」という全体の指定の中へ、HEAD(基本情報)開始〜終了とBODY(本文)開始〜終了という形で記述されているわけです。
見てわかるように、終了タグは </xxx> という形になります。


HEADに入るのは、そのページの基本情報や設定です。


HTMLのバージョンや使用言語の種類やバージョン・・・これは気にしなくてもいいです。
なくても、デフォルト指定されているものが勝手に使われることになっているので(こういう点がHTMLは便利なんですよね)記述しなくても特に問題ありません。
ただ、ここに「タイトル」や「説明文」が入ることになっていて、これは重要なので覚えておく方がいいかもしれません。
(ブログの場合は勝手に入れてくれますから、気にする必要はないんですけどねw)
あと、スクリプトを使用する場合は、ここへ記述する必要があることが多いです。


BODYは、実際に表示されている部分をHTML言語で書いた部分です。


ブログは基本的に「代入方式」で、場所や順番の指定だけがHTMLでされ、「ここに【記事】を新しいものから順番に入れるよ」「ここに【コメント】を入れるよ」のような書き方になっています。
が。
記事、コメント、トラックバックくらいは、どのブログでも「代入方式」なのですが、その他のものについては、ブログによってずいぶん違っています。


seesaaは、ほとんどのものが代入方式で、HTMLを弄る場合も各コンテンツの管理ページで弄れるので、大元のHTMLはほとんど弄ることがありません。
FC2になると、その点がseesaaよりも複雑になり、サイドバーにあるものはそれぞれのページで弄れますが、ヘッダーやフッターのものは大元を直接弄らなければいけなくなります。
ブログによっては、サイドバーのものも大元のHTMLを弄らなければいけないものもあります。


私が、初心者に一番敷居が低いかなと思うのは、seesaaです。


そして、実際のHTMLですが。


最低限、覚えておいた方がいいと思うのは、以下のものです。

・リンクを貼る時のタグ
<A href="">【文字あるいは画像の指定タグ】</A>

・画像の指定タグ
<IMG src="【指定する画像ファイルの場所】">  これは終了タグはいりません

・改行タグ
<BR>  これも終了タグはいりません

・スタイル指定タグ
<DIV> または <SPAN> または <P>

どれでもいいようですが、私はDIVを使っています。
<DIV class="xxx">のように、どのスタイルを使うか指定します。

・テーブルタグ
<TABLE><TR><TD>【テーブル内に入れるもの】</TD></TR></TABLE>

ちょっとややこしいですが、<TR>は行ですね。
<TD>は列・・・というか、文字や画像を入れるセルです。
横にセルを並べる時には、すぐに </TR> で閉めずに、セルの数だけ <TD> </TD> が続き、次の列に行く前にようやく </TR> で閉めることになります。

テーブルは、デザインが凝ってくると、<TD> の中へさらにテーブルを入れたりしますので、はっきり言ってかなりややこしいです。
まぁ「同じ種類の開始タグと終了タグが入れ子になることはない」ので、じっと見ていれば分かるものですがw


こうやってずらずらと書きましたが、HTMLについては、私は「系統立ててお勉強」はしない方がいいと思います。
(専門家になろうという人は、もちろん別w)


一番いいのは、何か「これをこうしたい!」というものが出来たとき、諦めないこと。
調べたり、わかる人に聞いたりして、ともかくやり方を教えてもらって、その通りにやる!
その時、まったく理解出来なくても、積み重なると、自分の頭の中で勝手に「何となくわかってくる」。
それが一番だと思うんですよね。



・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
この記事はいかがでしたか?少しずつですが、頑張っています。
応援お願いします!

e_02.gif     banner_03.gif
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。