超初心者向けHTML講座２ |
| 表を使ってページのレイアウトを考えたり、画像の利用や他のページにリンクさせたりして、ホームページを作っていきます。 |
表 | ||||||||||||||||
| 表の仕組み 全体を<TABLE border=" ">〜</TABLE>で囲み、各セルを <TD>〜 </TD>で囲みます。 枠線の太さの属性borderを0〜7まで指定でき、0にすると枠線がなくなります。 <table border="1"><td>セル1</td><td>セル2</td><td>セル3</td></table>
セルの改行タグ<tr>を入れることでセルを増やしていくことが出来ます。 <table border="1"><td> セル1 </td><td> セル2 </td> <tr> <td> セル3 </td><td> セル4 </td> <tr> <td> セル5 </td><td> セル6 </td></table>
セルの結合 TDタグにrowspan属性（行）、colspan属性（列）をつけることで、複数行、列にまたがるセルを作ることがきます。 <table border="1"><td colspan="2">横結合セル1</td> <tr> <td>セル2</td><td>セル3</td> </table>
<table border="1"> <td rowspan="2">縦結合セル1</td><td>セル2</td> <tr> <td>セル3</td> </table>
表のアレンジ tableやtdタグに色々な属性タグを付ける事で、表をアレンジできます。 border=" " 枠線の太さ bordercolor=" " 枠線の色 cellspacing=" " セルとセルの間隔 cellpadding=" " 枠とセル内の文字などの間隔 それぞれピクセル数で指定します width=" " 表やセルの横幅 height=" " 表やセルの高さ それぞれピクセル数やウィンドウに対するパーセントで指定します。 align=" " セル内の横位置 valign=" " セル内の縦位置 top middle bottomで指定します。 bgcolor=" " 背景色 background=" " 背景画像 画像についてはあとで説明します。 | ||||||||||||||||
画像の挿入 |
| 画像の用意 ホームページに使える画像は、GIF形式（拡張子gif）かJPEG形式(同jpeg又はjpg）です。GIFのほうが保存サイズが小さく、主にバナーやマークなどの“絵”向きで、JPEGは写真向きです。 ペイントソフトなどでホームページ用に編集した画像は、どちらかの形式で保存しましょう。保存する時は半角英数字で名前をつけて、HTMLファイルと同じフォルダ内に保存します。 ここでは例として、背景用の画像kabegami.gifと猫のイラストneko.gifを用意して、画像用のフォルダgazoに入れて、HTMLファイルを保存したフォルダに保存したと仮定します。 画像を挿入 猫のイラストneko.gifを表示させる場合、<img src="gazo/neko.gif"> となります。 もしneko.gifがgazoフォルダの中ではなく、HTMLファイルと同じ場所にそのまま置いてある場合は、<img src="neko.gif">となります。 さらに属性border=" "で画像に枠線を、width=" " やheight=" "で表示させる大きさを指定できます。 背景画像 ページや表、セルに背景画像を挿入する場合は、属性background="画像ファイルの場所"を入れます。 <body background="gazo/kabegami.gif"> <table background="gazo/kabegami.gif"> <td background="gazo/kabegami.gif"> backgroundで指定した画像は、例えばタイルを敷き詰めたように連続して表示されます。 |
リンクの挿入 |
| リンクを挿入するには、リンクを設定したい文章や画像を<a href="リンクさせたい場所や名前">文章や画像</a>で囲みます。 新しく作った猫のページnekonopage.htmlにリンクさせたい場合は、 <a href="nekonopage.html">〜</a> となります。 この場合、nekonopage.html は index.html と同じ場所にある必要があります。 文字にリンクを挿入 <a href="nekonopage.html">猫のページ</a> リンクを設定した文字の色を設定できます。 bodyタグに、次の属性を付ける事で、ページ全体の文字の色を設定できます。 text=" " 標準の文字色（" と " の間で色を指定、以下同様） link=" " クリックしていないリンク vlink=" " クリックしたリンク alink=" " クリックした時の色 画像にリンクを挿入 <a href="nekonopage.html"><img src="gazo/neko.gif"></a> 画像にリンクを挿入すると、自動で枠線が入ります。色は文字の色で指定した色になります。 枠線を消したい場合はborderを使って <a href="nekonopage.html"><img border="0" src="gazo/neko.gif"></a> とします。 他のホームページにリンク http://○○○というURLのページにリンクしたい場合 <a href="http://○○○">○○○さんのページ</a> このようになります。 |
HTMLファイルを作ってみよう | ||
| 練習に、メモ帳でHTML文書を作ってみましょう。 最初に<html> </html>と書き込みます。 次に<head></head><body></body>と、最初に書いた<html>と</html>の間に書き込んで行きます。このように対になっているタグを一度に書き込めばわかりやすくてミスも減ります。 あとは適当に改行（BRタグのことではありません)などして、解りやすい様にするといいと思います。
と書くよりも
と書いた方が解りやすいでしょう。 |
HTMLファイルの保存 |
| 出来たファイルの保存方法です。 メモ帳のメニューバーから ファイル → 名前をつけて保存 とクリックして、あらかじめ作っておいた格納用フォルダを選んで保存します。 その時に、ファイル名に全て半角英数字で名前をつけ、最後に拡張子.hｔｍｌをつけます。ファイルの種類は全てのファイルを選びます。 もしトップページを作ったのならば、ファイルの名前は半角でindex.htmｌとしましょう。インターネットではindex.htmlという名前ページが、一番最初に開かれるページとして一般的だからです。 複数のページを作ったのならば、それらも一緒に保存します。画像などもですね。 保存したＨＴＭＬファイルを、修正するために開くには、 ファイルを右クリック → プログラムから開く → Notepad でメモ帳から開けます。 そのままダブルクリックするとブラウザから開いてしまいます。 この格納用フォルダのなかにあるファイル全てをホームページスペースにアップロードすれば、あなたの作ったホームページが全世界に向けて公開されます。 |
| 超初心者向けＨＴＭＬ講座は以上で終わりです。ここで紹介したＨＴＭＬタグだけでも、それなりのページは作れます。無料ホームページ作成は、難しいと言うよりめんどくさくて大変と言う事ですね。 ＨＴＭＬについてさらに勉強しようと言う方は、これ以上の解説は専門のサイトを探してみてください。まだまだ便利なＨＴＭＬタグや重要なＨＴＭＬタグがたくさん有ります。さらにスタイルシートなども知っておくと良いでしょうね。 |