サイト作成に役立つHTMLタグ

HTMLタグとは、サイトを作成する際に使うタグです。

HTMLとは、Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略で、タグと言う命令を記述することでWEBサイトを作ることができます。

よく使うHTMLタグ

リンクタグ

リンクを張るときに使うタグです。

同枠で開く場合
<a href=”リンク先URL”>テキストや画タグ</a>

外枠で開く場合
<a href=”" target=”_blank”>テキストや画像タグ</a>

画像挿入タグ

<img src=”画像URL” />
例)<img src=”http://m-affili.com/wp-content/uploads/2012/01/miyazaki160-4.jpg” />

<img src=”画像URL” alt=”キーワード等” />
例)<img src=”http://m-affili.com/wp-content/uploads/2012/01/miyazaki160-4.jpg” alt=”宮嵜誠プロフィール画像” />

<img src=”画像URL” alt=”キーワード等” title=”タイトル” />
例)<img src=”http://m-affili.com/wp-content/uploads/2012/01/miyazaki160-4.jpg” alt=”宮嵜誠プロフィール画像” title=”プロフィール” />

<img src=”画像URL” alt=”キーワード等” title=”タイトル” width=”幅(数字)” />
例)<img src=”http://m-affili.com/wp-content/uploads/2012/01/miyazaki160-4.jpg” alt=”宮嵜誠プロフィール画像” title=”プロフィール” width=”128″ />

<img src=”画像URL” alt=”キーワード等” title=”タイトル” width=”幅(数字)” height=”高さ(数字)” />
例)<img src=”http://m-affili.com/wp-content/uploads/2012/01/miyazaki160-4.jpg” alt=”宮嵜誠プロフィール画像” title=”プロフィール” width=”128″ height=”52″ />

<img src=”画像URL” alt=”キーワード等” title=”fuji-main.jpg” width=”300″ height=”52″ class=”その他の情報” />
例)<img src=”http://m-affili.com/wp-content/uploads/2012/01/miyazaki160-4.jpg” alt=”宮嵜誠プロフィール画像” title=”プロフィール” width=”128″ height=”52″ />

画像をリンクにする場合は、
<a href=”リンク先URL”>こちら</a>
に上記のような画像タグを入れます。

 

アフィリエイトサイトを作る際に役立つHTMLタグ

色を変えるタグ

赤の場合、こちらを挿入すると
<font color=”red”>テキスト</font>

以下のように赤いテキストになります。
テキスト

緑の場合
<font color=”green”>テキスト</font>

テキスト

ポインタを乗せた時に動くようにするタグ

まず以下の文字列をスタイルシートの最後に追加します。
div.img-move a:hover {
position: relative;
top: 5px;
left: 5px;
}

その後、以下のタグを使ってテキストリンクや画像を挟むことで上下するようになります。

<div class=”img-move”>
テキストリンクか画像リンク
</div>

タグ


よく使うHTMLタグ

リンクタグ

同枠で開く
<a href=”リンク先URL”>テキストや画タグ</a>

外枠で開く
<a href=”" target=”_blank”>テキストや画像タグ</a>

画像挿入タグ

<img src=”画像URL” />
例)<img src=”http://m-affili.com/wp-content/uploads/2012/01/miyazaki160-4.jpg” />

<img src=”画像URL” alt=”キーワード等” />
例)<img src=”http://m-affili.com/wp-content/uploads/2012/01/miyazaki160-4.jpg” alt=”宮嵜誠プロフィール画像” />

<img src=”画像URL” alt=”キーワード等” title=”タイトル” />
例)<img src=”http://m-affili.com/wp-content/uploads/2012/01/miyazaki160-4.jpg” alt=”宮嵜誠プロフィール画像” title=”プロフィール” />

<img src=”画像URL” alt=”キーワード等” title=”タイトル” width=”幅(数字)” />
例)<img src=”http://m-affili.com/wp-content/uploads/2012/01/miyazaki160-4.jpg” alt=”宮嵜誠プロフィール画像” title=”プロフィール” width=”128″ />

<img src=”画像URL” alt=”キーワード等” title=”タイトル” width=”幅(数字)” height=”高さ(数字)” />
例)<img src=”http://m-affili.com/wp-content/uploads/2012/01/miyazaki160-4.jpg” alt=”宮嵜誠プロフィール画像” title=”プロフィール” width=”128″ height=”52″ />

<img src=”画像URL” alt=”キーワード等” title=”fuji-main.jpg” width=”300″ height=”52″ class=”その他の情報” />
例)<img src=”http://m-affili.com/wp-content/uploads/2012/01/miyazaki160-4.jpg” alt=”宮嵜誠プロフィール画像” title=”プロフィール” width=”128″ height=”52″ />

画像をリンクにする場合は、
<a href=”リンク先URL”>こちら</a>
に上記のような画像タグを入れます。

タグ


2012年3月5日 | コメント/トラックバック(0)|

カテゴリー:HTML 解説

画像の挿入タグ

画像を挿入するためには、
<img src=”■画像のURL■” alt=”■画像の名前■” />を使う必要があります。

例えば、
<img src=”http://affili8.asia/wp-content/uploads/2012/02/aaa.png” alt=”プロフィール” />

これを、記事中やサイドバーに挿入します。

例えば、
<!– プロフィール開始 –>
<h3>プロフィール</h3>
<div>
<p><img src=”http://affili8.asia/wp-content/uploads/2012/02/aaa.png” alt=”プロフィール” />
現在、韓国に在住、空いた時間の活用</p>
</div>
<!– プロフィール終了 –>
などの形です。

もし、この画像の大きさを変更したい場合、
そもそもの画像の大きさを画像ソフトで縮小するか?

<img src=”■画像のURL■” alt=”■画像の名前■” width=”■数字■” height=”■数字■” />
を使います。

これを使って、例えば、
<img src=”http://kyabetu12.com/wp-content/uploads/2012/02/1322209158_7891.png” alt=”プロフィール” width=”128″ height=”128″ />
のようにして挿入します。

タグ


2012年2月25日 | コメント/トラックバック(0)|

カテゴリー:HTML 解説

このページの先頭へ