テーブル
基本編、最後に覚えるタグは"<table>タグ"です。
文字通りテーブル、つまり表組みを表示させる為のタグです。
ごみ曜日別速見表(表A)
|
月曜
|
火曜
|
水曜
|
木曜
|
金曜
|
土曜
|
日曜
|
燃えるごみ
|
×
|
○
|
×
|
○
|
×
|
×
|
×
|
燃えないごみ
|
○
|
×
|
×
|
×
|
○
|
×
|
×
|
では右クリックでソースの表示をクリックして上記の表組みがどのようにして書かれているのか見てみましょう。
まず<table>〜</table>で範囲が設定されています。
ここから少しややこやしいのですが表Aの一番上の行は<th>〜</th>で設定されています。
さらにその中に<td>〜</td>を空白と月〜日の8つ作られています。
そして2行目で改めて<tr>〜</tr>、<td>〜</td>で○×を書いています。
分かりづらいですね(笑)こればっかりは自分で作って慣れていかなければ身につかないと思います。
実際筆者はいくつも作って覚えていきました。変則的な表組みも組めるので覚えると便利だと思います。
ちなみに<th>と<tr>が同じように使われていますがthはtable headerつまり一番上の行に使われるべきの物です。
まずは筆者のソースを見ずに何かを表で作ってみましょう。
リンクと画像
<a href="○○○.html">〜</a>
上記でリンクを設定する事ができます。
○○○にはリンクしたい先のファイル名、もしくはURLを記述してください。
ファイルを指定した場合注意しなければいけない事があります。
階層の事で触れていますがこの階層という概念を思い出してください。
同じ階層のhtmlファイルにリンクする場合はそのままのファイル名を
上の階層であるなら"../○○○.html"、さらにそこから別のフォルダに入っているファイルなら"../フォルダ名/○○.html"となります。
もしリンクをクリックして"Not Found404"というエラーメッセージが出てしまうのであればリンク先に設定したファイル名、フォルダ名の他、階層指定を間違えている、と言う可能性もあります。
次は画像です。
<img src="○○○.jpg">
画像が一つあればウェブサイトに華が咲き文章だらけのページが少なからず見やすくなると思います。
分かっていて暫くは画像は控えていました。
画像を表示させるタグに終了タグは必要ありません。○○の所に画像のファイル名を入れてください。
先ほどのリンクと一緒で階層にも気をつけてくださいね。
さて、imgタグにはもう一つ重要な指定があります。
<img src="○○○.jpg" width="100" height="40" alt="画像">
width、height、altにそれぞれ100、40、画像と指定されています。widthとは画像の横幅、hrightが画像の高さ、altは画像が表示されなかった時、代わりに表示する文字です。
これらは省略していても画像は表示されます。実を言えばこれまで学習してきたタグの中にも終了タグを省略出来る物もいくつかあったのですが、あえてそれをしませんでした。
皆さんはタイムマシーンが今後実用化になると思いますか?ジョンタイターの存在をどう思いますか?
突然どうしちゃったんだコイツは、とうとう頭がアレしちゃったかな?等と思った方も少なからずいると思います。残念ながら筆者の頭はまだアレしちゃっていません。
実はタイムマシーンとその"省略できたけどしなかったタグ"の間には密接な関係があるのです。
その事はまた別のお話に必ずしますがとりあえずHTML編はこれで終了です。
皆さん、お疲れ様でした。
ウェブサイト作りに王道はない、と言われています。
まぁ言ったのは筆者ですが。
そしてウェブサイト作りが上手になる近道はひたすら作ってみることです。
しかし!HTMLだけではまだまだ本格的なウェブサイト作りからは程遠いと言っておきましょう。
現実はそんなに甘くありません。
そんなに簡単にはいかせません、次回CSS編、実はウェブサイト作りの本番はここから始まっている、と言っても過言では無い内容です。
次回を乞うご期待。