覚えておきたいHTMLタグ

覚えておきたいHTMLタグ

ブログに挑戦で触れましたが、是非覚えておきたいHTMLタグについてご説明します。

表を作るタグ

<table border><tr><td>インターネット</td><td>Yahoo</td></tr>
<tr><td>ブログ</td><td>ライブドア</td></tr></table>

上のHTMLタグによってつくられた表が下の表です。

インターネット Yahoo
ブログ ライブドア
最初の<table>は、表を作りますよ。という命令ですね。
最後の</table>は、表が終わりました。という命令です。
<table border>のborderは表の枠を表します。borderを取ると下のようになります。
インターネット Yahoo
ブログ ライブドア
<tr>は列の始まりをいっています。</tr>は列が終わりました、です。
<td>は行の始まり</td>は行の終わり。
文字や写真などは、<td>　　　</td>の間に入れます。

改行するタグ

ブログの記事設定では、原稿に改行（通常はEnterキーを押す）があると、自動的に改行タグが入ります。
表を作った場合、改行を自動的に改行タグにするよう設定されていると、表の位置がとんでもなく下の方に行くことがあります。 その場合は、改行はHTMLタグのみによって行う事に設定を変更します。
そうすると、改行タグが分からないと、改行できませんよね。
改行は<br>で命令します。
<br>は便利なタグです。例えば、
インターネット Yahoo
livedoor
gooブログ
Fc2ブログ
エキサイトブログ
楽天広場
OCN Blogzine ブログ人
NINJAブログ
Seesaa ブログ
オリコンブログ
上のような表を作る場合には、<tr><td>　</td><td>　</td></tr>を繰り返し使わなくても、次のようにします。
<table><tr><td>インターネット</td><td>Yahoo<br>livedoor<br>gooブログ<br>Fc2ブログ<br>エキサイトブログ<br>楽天広場<br>OCN<br>Blogzine ブログ人<br>NINJAブログ<br>Seesaa ブログ<br>オリコンブログ</td></tr></table>

<br>で改行を続けていきます。

表の枠を見せたくない場合は<table>とします。下のようになります。
インターネット Yahoo
livedoor
gooブログ
Fc2ブログ
エキサイトブログ
楽天広場
OCN Blogzine ブログ人
NINJAブログ
Seesaa ブログ
オリコンブログ
インターネットを表の一番上に配置したい場合は、
<table><tr><td valign="top">インターネット</td><td>Yahoo<br>livedoor<br>gooブログ<br>Fc2ブログ<br>エキサイトブログ<br>楽天広場<br>OCN <br>Blogzine ブログ人<br>NINJAブログ<br>Seesaa ブログ<br>オリコンブログ</td></tr></table>
とします。
インターネット Yahoo
livedoor
gooブログ
Fc2ブログ
エキサイトブログ
楽天広場
OCN Blogzine ブログ人
NINJAブログ
Seesaa ブログ
オリコンブログ
枠の表示を無くして、表に色を付ける方法は？
<table><tr><td valign="top"bgcolor="#ffff66">インターネット</td><td bgcolor="#99ffff">Yahoo<br>livedoor<br>gooブログ<br>Fc2ブログ<br>エキサイトブログ<br>楽天広場<br>OCN<br>Blogzine ブログ人<br>NINJAブログ<br>Seesaa ブログ<br>オリコンブログ</td></tr></table>とすると
インターネット Yahoo
livedoor
gooブログ
Fc2ブログ
エキサイトブログ
楽天広場
OCN Blogzine ブログ人
NINJAブログ
Seesaa ブログ
オリコンブログ
こうなります。

写真の位置を左にして文字を回り込ませる

写真を記事に挿入すると、下のようになります。
マカフィー・ストアマカフィー・ストアでは、マカフィーの全製品を30日間無料で体験できる、「30日間無料版」を提供しています！
これでは、レイアウト的におもしろくないですね。その場合は次のタグ
<align="left">を使います。

写真などは、ファイルとしてアップロードされますので、URLが付いています。
<img src="http://○○○○○○○○○○○">となっています。ここに<align="left">を入れます。と、こうなります。
<img src="http://○○○○○○○○○○○"align="left">
これで、写真は左側に位置して文字が回りこみます。

右の場合は"right"です。
マカフィー・ストアマカフィー・ストアでは、マカフィーの全製品を30日間無料で体験できる、「30日間無料版」を提供しています！
写真ではなく表の場合は<table align="left">とします。

リンク先サイトを別ウィンドウで開く

自分のサイトから別のサイトにリンクした場合、リンク先サイトが同一ウィンドウで開いてしまうと、そのまま行ったきり、ということがあります。
せっかく来てくれた人が、リンク先から他に行ってしまっては、悲しいですよね。
そういう時には、別ウィンドウで開くタグを使います。
<target="_blank">です。

リンクのHTMLは、<a href="http://○○○○○">詳しくはこちら</a>などとなります。
ここへ<target="_blank">を入れますと、こうなります。

<a href="http://○○○○○"target="_blank">詳しくはこちら</a>これで、詳しくはこちらをクリックすると、別ウィンドウで開きます。