イントロダクション
HTML ハンズオンpart1,2閲覧いただきありがとうございます！
この記事では、以下を参考記事等を活用しながらHTMLのハンズオンした内容をまとめます。
書籍『改訂版 演習 Webプログラミング入門』
目次
- HTMLファイル作成(リスト)part1
- HTMLファイル作成(リスト)part2
- HTMLファイル作成(リスト入れ子)
1. HTMLファイル作成(リスト)
書籍『改訂版 演習 Webプログラミング入門』2-3 リスト 例題3のからWebページを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>リスト</title>
</head>
<body>
<h2>マーク付きリスト</h2>
<ul>
<li>春の新規講座</li>
<li>夏の野外活動</li>
<li>秋の行楽行事</li>
<li>冬のスポーツ</li>
</ul>
<hr>
<h2>番号付きリスト</h2>
<ol>
<li>春の新規講座</li>
<li>夏の野外活動</li>
<li>秋の行楽行事</li>
<li>冬のスポーツ</li>
</ol>
</body>
</html>
以下のWebページが作成されます！
説明:
-
<ul>:番号がつかないマーク付きリストの開始と終了を表します。●のマークが付いたリストが作成されます。 -
<ol>：番号付きのリストの開始と終了を表します。1から始まる数字が各項目の先頭に表示されます。 -
<li>：リスト一つ一つの項目を指定します。ulやolの間に挟みます。
2. HTMLファイル作成(リスト)part2
書籍『改訂版 演習 Webプログラミング入門』2-3-2 リスト 練習問題3-1からWebページを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>マーク付きリストと番号付きリスト</title>
</head>
<body>
<ul>
<li>北海道</li>
<li>青森県</li>
<li>岩手県</li>
<li>秋田県</li>
<li>宮城県</li>
<li>山形県</li>
<li>福島県</li>
</ul>
<hr>
<ol>
<li>東京都</li>
<li>神奈川県</li>
<li>千葉県</li>
<li>埼玉県</li>
<li>群馬県</li>
<li>栃木県</li>
<li>茨城県</li>
</ol>
</body>
</html>
以下のWebページが作成されます！
3. HTMLファイル作成(リスト入れ子)
書籍『改訂版 演習 Webプログラミング入門』2-3-2 リスト 練習問題3-2のからWebページを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>リストの入れ子</title>
</head>
<body>
<ul>
<li>北海道</li>
<li>青森県</li>
<li>岩手県</li>
<li>秋田県</li>
<li>宮城県</li>
<ul>
<li>仙台市</li>
<li>石橋市</li>
<li>気仙沼市</li>
</ul>
<li>山形県</li>
<li>福島県</li>
</ul>
<ol>
<li>東京都</li>
<li>神奈川県</li>
<li>千葉県</li>
<li>埼玉県</li>
<ol>
<li>春日部市</li>
<li>越谷市</li>
<li>ふじみ野市</li>
</ol>
<li>群馬県</li>
<li>栃木県</li>
<li>茨城県</li>
</ol>
</body>
</html>
以下のWebページが作成されます！
まとめ
最後までご覧いただきありがとうございます！！HTMLの見出しと段落を学んでみました！次回は総合練習1に挑戦します！