HTML

タグ

<!-- htmlは「タグ」で挟む！ -->
<h1>セカイを変えるGEEKになろう</h1>
<p>最初は全くの初心者でOKです！！</p>

<!-- 挟まないものもある（単一のタグで成立） -->
<img src="hogehoge.png" />

タグの意味

プログラムがコンテンツの構造を理解できる．

• HTML を読むのは「プログラム」！！

なにがいいの？？

• 構造がしっかりしている web サイトはいい web サイトと判断される．
• 検索結果ではいい web サイトが上の方に表示される！

今回出てくるタグ

<div>この中に文章や画像を入れる「箱」のようなもの</div>

<h1>見出し1（タイトル，文書中に1つしか存在してはならない）</h1>

<p>段落（通常の文章はこれ）</p>

<h2>見出し2</h2>

<h3>見出し3</h3>

<img src="show-image.png" />

💡 構造をつくるコツ

全体をブロック（div 要素や section 要素）ごとに分ける！

入れ子構造（ツリー構造）を意識！

body
├── div
│   ├── h1
│   └── p
├── div
│   ├── h2
│   ├── h3
│   ├── p
│   ├── h3
│   └── p
├── div
│   ├── h2
│   ├── p
│   └── p
└── div
    ├── h2
    ├── p
    └── p

どのように分けるかでわかりやすさや実装しやすさが変わる．．！

今回の Web サイトの構造

練習

イメージを参考に HTML を書こう！

• 画像部分は content_img.jpg を使用！

↓ こんな感じになれば OK！