###その四・・・・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>

好きなことをかいてみよう。
 まず、イラストで説明します。
材料
・<table></table>テイクアウト用容器 ・・・・・・上下1セット
・<tr></tr>パン ・・・・・・・最低1セット
・<td></td>棒チーズ ・・・・・・最低1セット
・あなたの好きな具(あなたからのメッセージ、イラストなど)
シンプルなhtmlダブルバーガー
*それぞれの色は上の説明と合ってなくても気にしないで下さい(笑)


※もちろんWでなくてもsingleでもいいし、3段でも4段でも何段でもOK!
中の<td></td>チーズで挟んだ具も何個でもOK!
勿論、具は文字でも画像でもOKです。

ただ、この配置・・つまりペアで中の物を挟んでいれば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>』とします。そうするとわざわざ指定しなくても、太字で、しかもそのセルの中心に表示されます。


ページができたら、見やすいように、
他のページとリンクさせておきましょう。

というわけで、まだ表については途中ですが・・・、
この続きはまた後日。もう眠いです。(笑)
内容は、容器やチーズの加工などを追加する予定です。


<<Back   3分間クッキング・Index  Next>>