ＨＰの作り方・はじめの一歩

実際に作ってみよう2

お次に出てくるタグは

<center>

ですね。もうなんとなく分かってきているころだとは思いますが、このタグから、</center>
までの間にあるものが中央に表示されるよう命令を下すタグです。


んで、どの次がコレ

<table width=600 cellpadding=10 bgcolor=white><tr><td>

とコレ


</td></tr></table>→（これは文字列の最後のほうに出てきてますね。）


ちょっと分かりにくいんで、もっと簡単にしてしまうと、


<table><tr><td>　〜　</td></tr></table>こんな感じです。コレは俗に言う「テーブルタグ」と呼ばれるもので、本当によく使われ、またHPの作り方を知る上で絶対に避けては通れないタグのひとつです。
テーブルって言われると日本人にはなんだかいまいちぴんとこないかもですが、
要するに作業スペースを設定するためのタグだと考えて置いてください。<table>で「ここからテーブルタグの性質領域であること」を示し、<tr>が行。（横書きの１行ね）、<td>が列を表しています。

だから、この場合テーブルタグで指定している作業スペースは
width=600（ウィズ＝600ピクセル。つまり幅が600ピクセル分）で、
cellpadding=10（セルパッディング＝10ピクセル。文字や画像が入り始める起点がテーブルスペースの端っこから10ピクセルの余白を持ってはじめられる）
bgcolor=white（ビージーカラーホワイト。背景を白抜きにする）

という指定のついた
1行、1列のスペースである・・・ということ。うーんんん・・・・分かりにくいかなぁ？ま、いいや！
詳しくはテーブルと画像のページで再度解説していきますね。

次々！

次は
<br>〜（＝改行）
<small>〜</small>（＝小さな文字で表示しろ）
ですね。

<br>は、スラッシュでタグの終わりを入れる必要のないタグです。つまり<br>だけでいいってこと。
携帯でメールを打つときに出てくる改行マークと同じです。一個打てば改行するし、二回連続して打てば一行あけて文章が打てるよってやつです。

<small>〜</small>は、もう見たまんま。挟みこんだ間の文字列を小さな文字で表示させるタグです。



次！

<p>〜</p>
出てきました。超多用タグその名も「Pタグ」です。このタグで挟みこんだ部分が文章としてブラウザに認識され、表示されるんです。このタグは超重要！絶対に覚えておきましょう。

さ、ページのHTML解説は終わり！メモ帳にコピー＆ペーストを済ましたら、
ファイル形式？？？のページで習ったHTMLファイルの保存方法をおさらいしながら、
「名前をつけて保存」してください。


そんでほら！ダブルクリックして開いて御覧なさいな！


ね？だいぶHPっぽくなって来たでしょう？
あとは中身を書き換えて、自分の好きなようにしてしまって、保存しなおしてみてください。HPの完成です。（トップページの雛形だけね。）せっかくリンク集風のサンプルなので、好きなサイトをかき集めて、あなたオリジナルのリンク集にしてみるのがいいでしょう。



さて、でも何かが足りない。インターネットサイトのくせしやがって、このサイト、どこにもつながってないんですよ。リンク集のくせしやがってこのサイト、どこにもリンクしていないんですよ。さて・・・どうしたものか？


・リンクを張ってみよう

そう！リンクを張らなきゃどこにもいけない！どこにもつながっていない！リンクを張って、集めたリンク集のサイトに実際に飛べるようにしてみましょう。

使うタグはこれ。

<a href=リンクしたいサイトのURL target=_brank>サイト名</a>

通称「アンカータグ」と呼ばれるタグを使います。
ちなみにリンクしたいサイトのURLとは、インターネットエクスプローラーなどのブラウザ上部のパネルに
出てくるhttp://namakemono.mods.jp/indexphotoshop.htmlみたいな文字列のこと。コレは各HPのインターネット内での住所みたいなもんで、どのサイトにも必ずあるもの。パネル上でコピーして、
”リンクしたいサイトのURL” の上に張り替えて使ってくださいね。

で、ちなみにその後に入っているtarget=_brankってのは、「リンク先のサイトは別ウィンドウで開いてね」
ってない見になります。このtarget=_brankを入れない場合は同一ウィンドウの切り替えで表示するようになるんです。

早速さっき作ったリンクにこのアンカータグを貼ってみて、上書き保存。
表示してみてください。青紫色に文字が変化していたら成功！そこからリンク先に飛べるはずですよ。

手作りおやつ支援サイト <br> <small> とても内容が充実しているサイトです。 子供でも作れるお菓子レシピもあって、とってもおすすめのサイトです！</small><br><br> 上のようになっているのを、 <a href=http://misaling.net/ target=_brank> 手作りおやつ支援サイト </a> <br> <small> とても内容が充実しているサイトです。 子供でも作れるお菓子レシピもあって、とってもおすすめのサイトです！</small><br><br> と、かえるわけです。

さあ！完成ですよ！
次はとりあえず！何はともあれとりあえず！いやいやこんなちゃちなままじゃ・・・なんていわないでとりあえず！とにかくインターネット上にアップロードしてしまいましょう！まだ早いって？

うるせえ！

とにかく上げてみましょう！

次へ＞＞＞＞