ホームページ作成に役立つ基本のHTMLタグの基礎を解説

超初心者でも簡単にできるホームページ作成 HTMLタグ基礎講座

初心者でもわかるホームページの作り方をHTMLタグの基礎から

ホームページ作成・HTML講座・スタイルシート(CSS)・javascript・SEO対策



リストマ−クHTMLタグの基礎 clear.gif
HTMLタグとは「<」と「>」で記号で挟まれた特定の文字列「要素(element)」をいいます。
ページを作成するにはタグを文章の中に追加していくだけで出来上がります。
HTMLで記述されたテキストファイルは「HTMLファイル」とも言います。
メモ帳等のテキストエディタで記述して拡張子を「html」で保存して下さい。

●基本的にタグは対になっていて、開始タグ終了タグがあり、終了タグは先頭に「/」スラッシュを記述しますが例外はあります。(<br>改行,<hr>水平線 等)

基本HTMLタグイメージ.gif

●開始タグには「属性(attribute)」と「属性値(value)」を必要に応じて追加する事も出来ます。
属性は対象となる要素に加える性質みたいなもので、その属性を具体的に表すのが属性値です。
基本HTMLタグイメージ.gif

※上記では、alignが属性でcenterがその属性値になります。
align属性は横方向の並びを指定する属性で、centerはセンタリングを意味する属性値で、つまりここでの要素は、センタリングして表示するという性質が追加されていることになります。
尚、属性はスペースで区切って複数指定する事も出来ます。


●下記が基本形です。
<html>
<head>
<title>タイトル</title>    #windowの最上位に表示される部分
</head>
<body>
webページに表示される部分
</body>
</html>
pcリストマークサンプル表示

●<b></b>タグで文字を太くしてみます。


<html>
<head>
<title>タイトル</title>    #windowの最上位に表示される部分
</head>
<body>
<b>webページに表示される部分</b>
</body>
</html>
pcリストマークサンプル表示

ご理解していただけましたでしょうか?
タグというのは基本はこれの延長なのです。
まずはタグでどんな事が出来るのか、種類を把握する事からはじめるのもいいかもしれません。もちろんタグの種類はたくさんあるのですが、頻繁に使用するタグはだいたい決まってきますので安心して下さい。
もちろんどんどん知識がついてきたら凝ったサイトも作成したいでしょうからその時は、また書籍やネットで情報を収集すればいいですからね。(CSSによるレイアウト・デザインの習得をお勧めします。)
※ある程度のサイトが作成出来るようになったら文字サイズや色等はCSSで記述する事をお勧めします。(次期HTMLのバージョン「XHTML」を考慮して)
※タグは大文字でも小文字でもかまいませんが小文字をお勧めします。
と言うのはW3C(WorldWideWebConsortium)という機関の次期バージョンが小文字しか認識しない等の理由な為)
※タグに属性を記述する事によってより、細かい指定も出来ます。


body要素内に配置出来る要素は大きく分けてブッロクレベル要素インラインレベル要素があります。

特 徴
 ブロックレベル要素は一つのまとまりを構成する要素でブラウザ上では前後に改行が行なわれます。
 インラインレベル要素は行内で完結する要素で前後の改行も行なわれずテキストの一部として扱われます。
ここで気を付けて頂きたいのが包含関係ですが、基本的にブロックレベル要素の中にはブロックレベル要素インラインレベル要素の両方を配置出来ますがインラインレベル要素内にはインラインレベル要素しか配置できません。
 インラインレベル要素内には要素自体が特定のもので置き換えられるのが存在します。(イメージやフォームの部品等がそうです)
例:img要素の内容はsrc属性で指定されるイメージによって置き換えられる。
下記に各要素別に抜粋で紹介します。

●ブロックレベル要素
addres,blockquote,center,dir,div,dl,fieldset,form,h1..h6,hr,isindex,menu,multicol,
noframes,noscript,ol,p,pre,table,ul

●インラインレベル要素
a,abbr,acronym,applet,b,basefont,bdo,big,blink,br,button,cite,code,dfn,em,embed,
font,i,iframe,img,input,kbd,label,map,nobr,object,q,rb,rp,rt,ruby,s,samp,script,
select,small,spacer,span,strong,sub,sup,textarea,tt,u,var,wbr

●置き換え要素
img,input,textarea,select,object
※insとdelはブロックとインラインの両方の性質を持ちます。


ページトップへ
TOP | 利用規約(免責) | お問合せ

Agora