6日目 | Amazonのページを素材にHTMLを入力してページを作る

授業

今日書いたHTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>私の欲しいカフェグッズ</title>
<style>
h1{
  color: #666666;
  font-size: 24;
}

h2{
  color: #444444;
  font-size: 18;
}

h3{
  color: #33333;
  font-size: 16;
}

</style>
</head>
<body>
<h1>今Amazonで買いたい、温かいコーヒーを温かいまま飲めるマグカップ</h1>
<p>THERMOSかノーブランドか</p>
<h2>THERMOSの断熱マグ 240ml</h2>
<p></p>
<h3>真空断熱オフィスマグ 0.24L ラズベリー THERMOS</h3>
<p>断熱といえばTHERMOSという刷り込みがあります。フタ付きでパソコン作業中も安心。色も可愛い。</p>
<p><img src="img/rby.jpg" width="160" height="160" alt="" ></p>
<h3>商品の仕様</h3>
<ul>
<li>【サイズ】幅11.5×奥行8×高さ11cm</li>
<li>【材質】本体/ステンレス鋼、ホルダー/ポリカーボネート、フタ・トレイ/ポリプロピレン、茶こし/ステンレス鋼・シリコン</li>
<li>【重量】約0.3kg</li>
<li>【容量】240ml</li>
<li>【セット内容】本体、ホルダー、フタ、茶こし、トレイ</li>
</ul>
<h3>価格</h3>
<p>\2,625</p>
<h2>ノーブランドのステンレス保温マグカップ　320ml</h2>
<p></p>
<h3>ステンレス保温マグカップ　320ml　グリーン DCAA-320G</h3>
<p><img src="img/mug2.jpg" width="160" height="160" alt=""></p>
<h3>商品の仕様</h3>
<p></p>
<ul>
<li>【重量】約300g</li>
<li>【容量】320ml</li>
</ul>
<h3>価格</h3>
<p>\980</p>
<p><a href="sample.html">サンプルページへ移動</a></p>
<table border="1" width="500">
<tr>
<td rowspan="2"><img src="img/amazon1.jpg" width="47" height="75"></td><td><a href="http://www.amazon.co.jp/%E3%82%BB%E3%82%A4%E3%82%B3%E3%83%BC-SEIKO-MECHANICAL-%E3%83%A1%E3%82%AB%E3%83%8B%E3%82%AB%E3%83%AB-SARB033/dp/B001AE9XRQ/ref=sr_1_fkmr0_1?ie=UTF8&qid=1353922923&sr=8-1-fkmr0" target="_blank">SEIKO 腕時計 Mechanical メカニカル</a></td>
</tr>
<tr>
<td>ブランド説明:モーターバイクをモチーフにした、大胆なワイドフェイスとスマートフォルムが魅力の商品です。</td>
</tr>
</table>
<table border="1" width="500">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
<td>7</td><td>8</td><td>9</td>
</tr>
</table>
<table border="1" width="500">
<tr>
<td rowspan="2">14</td><td>2</td><td>3</td>
</tr>
<tr>
<td colspan="2">56</td>
</tr>
<tr>
<td>7</td><td>8</td><td>9</td>
</tr>
</table>
</body>
</html>

ブラウザで表示させるとこのようになります。


テーブルの入力

下記のタグを使う

<tr>
<td>
<td rowspan =""> セルを縦に合体 
<rd colspan ="">　セルを横に合体

画像の入力

<a href="../img/01.png" width="○○ " height="○○ "　alt=" ">

これはリンク先を相対パスで指定、一個上の階層のimgフォルダにある01.pngという画像を指定しています。
幅と高さ、alt属性も指定（中身はなくてもよい）

他のページへのリンク

<a href="sample.html" target="_blank">

リンク先として同じ階層にあるsample.htmlを指定