###その四・・・・htmlハンバーガー###
用意する物 | |
・道具・・・・・・ | PC PC内メモ帳(windows) Symple Text 適当な画像 今まで作ったhtmlファイル ブラウザ(オフラインモードで使用) ※ブラウザは、インターネットエクスプローラー(IE)か ネットスケープ(ネスケ)がいいです。 私が他のものをもってないので、確認できない為です。 決して回し者ではありません。/^-^; |
●まず、メモ帳又はSymple Textを開けて下さい。
今回は、htmlハンバーガーを作ります。 コツは、綺麗に整頓して並べましょう♪ |
|||||||||
ソース(1) | 画面表示(1) | ||||||||
<html> <head> <title> 練習のページ </title> </head> <body bgcolor="white"> <center> <br><br> <table border> <tr> <td>好きなことをかいてみよう。</td> </tr> </table> </center> </body> </html> |
|
||||||||
まず、イラストで説明します。 | |||||||||
材料 | |||||||||
|
|||||||||
シンプルなhtmlダブルバーガー | |||||||||
*それぞれの色は上の説明と合ってなくても気にしないで下さい(笑) ※もちろんWでなくてもsingleでもいいし、3段でも4段でも何段でもOK! |
|||||||||
ソース(2) | 画面表示(2) | ||||||||
<html> <head> <title> 練習のページ </title> </head> <body bgcolor="white"> <center> <br><br> <table border="1"> <tr> <td>おいしいよ!</td><td>ほんとかな? </td> </tr> <tr> <td align="center">ほんとうだよーーーーー!<br> <img src="guruguru-s.jpg"></td> <td>えへ♪ </td> </tr> </table> </center> </body> </html> |
|
||||||||
<table
border="1">→表(テーブル)の始まり ※border="1"というのは、表の枠線の太さを指定しています。いろいろ試して見て下さい。 ※「0」にすると枠線はなくなります。 </table>→表の終わり <tr>→行の始まり </tr>→行の終わり <td>→セル(欄)の始まり </td>→セル(欄)の終わり <td align="center">→セルの中心に文字や画像を表示することを指示している。 align="center"がなければ、通常の左寄せになります。 右寄せにしたい場合は、align="right"とします。 ※表やセルの大きさが指定されてない場合は、中にある画像や文字の量によって表の大きさは変わります。 ※例:<table border="1" width="500" height="200">,<td width="500" height="200"> ※また、見出しのセルにしたいときは、『<td></td>』の変わりに『<th></th>』とします。そうするとわざわざ指定しなくても、太字で、しかもそのセルの中心に表示されます。 |
ページができたら、見やすいように、
他のページとリンクさせておきましょう。
というわけで、まだ表については途中ですが・・・、
この続きはまた後日。もう眠いです。(笑)
内容は、容器やチーズの加工などを追加する予定です。