リストの作成 HTMLコード

今回の目標

Ⅰリストを作ってみる

Ⅱ表を作る

Ⅲ説明書きを書いてみる

 

Ⅰここで作るリストは↓こんなもの

f:id:Detsch:20160805191706p:plain

導出

<html>
<head>
<title>HTML練習中</title>
</head>
<body>
<h2><b>HTML基本構造</b></h2><br>

<h4>お支払い方法を以下からお選びください</h4>
<ul>            #順不同リスト指定
<li>郵便振替</li>       #li<タグ指定
<li>クレジットカード</li>
<li>代引き</li>
<li>銀行振り込み</li>
</ul>
</body>
</html>

 

Ⅱエクセルのテーブルと同じ物↓

f:id:Detsch:20160805194209p:plain

導出

<html>

<body>

<table border="sample2">   #tableは表作成指示、borderは外枠線の太さ
<caption>クルマ会社本社</caption> #captionは表タイトル


<tr><th>会社名</th><th>本社住所</th>   trは行部分の内容

<tr><td>三菱</td><td>東京都千代田</td></tr> tdはセル内容書くところ
<tr><td>ホンダ</td><td>東京都港区</td></tr>
<tr><td>スバル</td><td>東京都渋谷区</td></tr>
<tr><td>トヨタ</td><td>愛知県豊田市</td>
<tr><td>ダイハツ</td><td>大阪池田市</td>
</table>
</body>
</html>

 

Ⅲ説明書き(食品の中身)

 

f:id:Detsch:20160805200522p:plain導出

<html>

<body>

<table border="sample2">
<caption>当社飲料</caption>

<tr><th>食品名</th><th>内容物</th>

<tr><td>コーラ</td><td>糖類(果糖ブドウ糖液糖、砂糖)、カラメル色素、酸味料、香料、カフェイン</td></tr>

<tr><td>ブラッドオランジーナ</td><td>糖類、果実、オレンジピールエキス</td></tr>

<tr><td>天然水</td><td>水(鉱水)</td></tr>
<tr><td>Excitedビール</td><td>糖類、サッカリン</td>
<tr><td>スピリタス</td><td>アルコール分96%</td>
</table>

<dl>
<dt><dfn>感謝ポイント</dt></dfn>
<dd>継続して当社の商品を購入していただいた企業様には、半年に一度ご注文に応じたポイントをプレゼントさせていただきます。</dd></dl>

<h4>お支払い方法を以下からお選びください</h4>
<ul>
<li>郵便振替</li>
<li>クレジットカード</li>
<li>代引き</li>
<li>銀行振り込み</li>
</ul>
</body>
</html>