暮らしをおトクにかえていく|ポイントインカム
ワラウ - 遊べるポイントサイト
Internet Explorer
Version 7以降
Fire Fox
Version 3.5以降
Safari
Version 5以降
それ以前のバージョンでは表示が異なる場合があります。
  • 現在製作中...


HTML & CSS & JavaSc...

HTML & CSS & JavaScriptリファレンス

価格:2,625円(税込、送料別)

レンタルサーバー&ドメイン

ホームページを作るときにはサーバー(作ったHTMLを置く所)を借りなければいけません。お手頃なレンタルサーバーをいくつか上げてみました。



月額105円から、キャンペーンあり


380円から借りれるお得なサーバ!!オススメ


ナウでヤングなレンタルサーバー


20GBの大容量で『お試し期間が2週間!!』


リンクをはる

ホームページで別のページに飛ばすためにリンクをはります。
この講座でもありますね、『次に進む』や画面左の『■ホームペー時を見る』です。 リンクはテキスト(文字)にはったり、画像にはったりすることができます

リンクをはるには<a>(アンカー)タグと行き先をしめすhref(エイチレフ、ハイパーリファレンス)をつかいます。
『YAHOO JAPAN』にリンクをはるには下のように書きます。

<a href="http://www.yahoo.co.jp/">ヤフーに飛びます。</a>

画像の時と同じかんじです、href="〜" 〜の部分に飛ばしたいサイトのURLを書きます。
<a href="〜">***</a> ***の部分はボタンとなります。ここに書かれた文字をクリックすることで 〜に書かれた先にとびます。何も無いとクリックすることが出来ないので必ず書いておきましょう。

この講座のトップページへ飛ぶリンクを作って下さい。
URLは http://lecture.oshiirecords.com/

答えはここをクリック

<a href="http://lecture.oshiirecords.com/">トップページへ</a>

画像にリンクをはってみよう

画像にリンクをはるには前のページでつかった <img>タグを<a>タグで囲むだけです。

<a href="http://lecture.oshiirecords.com/"><img src="http://lecture.oshiirecords.com/img/illust/link.jpg"></a>

文字の部分を<img>に置きかえるだけです。

では下の画像を使ってリンクをはってみましょう。

link2.jpg

画像のURLはhttp://lecture.oshiirecords.com/img/illust/link2.jpgです。

画像(link2.jpg)をつかってGoogleのサイト(http://www.google.co.jp/)に飛ぶリンクを作って下さい。

答えはここをクリック

<a href="http://www.google.co.jp/"><img src="http://lecture.oshiirecords.com/img/illust/link2.jpg"></a>

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

いままで作ったリンクは、リンク先が今見ているウインドウで表示されました。
今見ているページをそのままに、リンク先を別ウインドウで表示することができます。

別ウインドウで表示するには target(ターゲット)を使います。

<a href="http://www.yahoo.co.jp/" target="_blank">YAHOOへ</a>

_blank以外には_top_selfなどが有ります。

target="_blank"
別ウインドウに表示
target="_self"
現在のウインドウ表示
target="_top"
フレーム分割を解除してウインドウ全体に表示
※フレームを使用していない場合は _self と同じ。

どうですか?タグには慣れてきたでしょうか?
リンクはお友達のホームページやブログ、プロフなどを紹介したりするためには大切なタグです。ちゃんと覚えておきましょう。

次のページでは表を作るタグ(テーブル)を見ていきます。