HTML でページの構造を作る

HTML（ハイパーテキスト・マークアップ・ランゲージ）は、Web ページの中身に意味を付ける言葉です。見出し、リスト、リンク、フォームを正しく選ぶと、人にも検索エンジンにも読みやすいページになります。

大学の学食のメニューページを例に、タグでページを組み立てる方法を学びます。

HTML は、文字をタグで囲んで書きます。<p> が始まりのタグで、</p> が終わりのタグです。

始まりから終わりまでが、1つの要素です。要素は入れ子にできます。リストの中に項目を入れるのが、その例です。

<h1>学食のメニュー</h1>
<p>今日の定食は3つです。</p>
<ul>
  <li>焼き魚定食</li>
  <li>唐揚げ定食</li>
  <li>野菜カレー</li>
</ul>
<!-- 練習: li を1つ足して、もう一度 Run しましょう。 -->

h1 から h6 は、ページの題と節の見出しです。h1 がページの題で、その下に h2、さらに下に h3 が続きます。

文字を大きくしたいときは、見出しではなく CSS を使います。見出しの順番は、目次として、画面を読み上げるソフトにも使われます。

div は、意味のない箱です。header や nav のように役目を表す要素を使えば、画面を読み上げるソフトがページの区分を伝えられます。

ボタンも同じです。押せる箱を div で作らずに、button を使います。キーボードでも押せるからです。

ラボには、小さなランチメニューのページが入っています。ターミナルから、Python のスクリプトでその HTML を調べられます。

スクリプトが出す言葉は英語です。tags in all はタグの合計、h1 と h2 は見出しの段を表します。

docker exec jupyter python3 steps/tags.py

docker exec jupyter python3 steps/outline.py

a 要素は、href 属性に行き先を書きます。#menu と書くと、同じページの id="menu" の場所へ飛びます。

入力欄には label を付けます。label の for と、input の id を同じ名前にすると、2つが結び付きます。

<h2>席の予約</h2>
<form>
  <label for="name">お名前</label>
  <input id="name" type="text">
  <label for="seats">人数</label>
  <input id="seats" type="number">
  <button type="submit">予約する</button>
</form>
<!-- 練習: ラベルの文字を押して、入力欄に移ることを確かめましょう。 -->

もう1つのスクリプトは、ページのリンクを1つずつ調べます。found は行き先がページにあること、MISSING はないことです。

a file here はこのフォルダのファイル、another site は別のサイトを指します。

docker exec jupyter python3 steps/links.py