HTML を理解しよう
目標
HTML とはどういうものか理解できる
HTML って何？#
HTML とはどういうものでしょう？
実はもう皆さんこの画面で目にしています!
HTML はこの部分です！ 日本語や英語、中国語など国ごとに違う言語があるように、 コンピューターにもコンピューター用の言語がいくつかあります。 HTML はその一つです。
よく使う HTML『タグ』#
HTML をよくみると<h1>Hello World!</h1>のように書き方がたくさん使われています。
このかたまりを『タグ』と呼びます。
よく使うタグ#
<h1>1番目に大きな項目に使います</h1><h2>2番目に大きな項目に使います</h2><h3>3番目に大きな項目に使います</h3><p>段落に使います</p><a>リンクに使います</a><img />画像に使います他にもたっくさんあります！
実際に Web サイトをみてみよう#
<h1></h1>, <img>, <a></a>が実際にどのように使われて、表示されるのかみてみましょう
<h1> 1 番目に大きな項目に使います#
<h2> 2 番目に大きな項目に使います#
<h3> 3 番目に大きな項目に使います#
<p> 段落に使います#
<a> リンクに使います#
<img> 画像に使います#
すべて合わせると…#
Web ページは HTML タグが組み合わさってできていることがわかります
クイズ
1 つだけ紹介されていないタグがあります。どれでしょう？
HTML の書き方ルール#
基本的には始まりと終わりのタグがあります
始まりのタグと終わりのタグ#
<h1> 始まりのタグ </h1> 終わりのタグ
body の中に書こう#
実際に画面に表示されるのは <body></body>で挟まれたものだけです。
そのため必ず画面に表示させたいものは<body></body>の中に書きましょう
<!DOCTYPE html><html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="theme-color" content="#000000" /> <link rel="stylesheet" href="style.css" /> </head>
<body> <h1>世界の女性リーダーたち</h1> <a href="https://www.forbes.com/sites/avivahwittenbergcox/2020/04/13/what-do-countries-with-the-best-coronavirus-reponses-have-in-common-women-leaders/?sh=3c1d6b2a3dec" ><p> source: What Do Countries With The Best Coronavirus Responses Have In Common? Women Leaders </p></a > <div class="marin"> <h2>フィンランドのマリン首相</h2> <p>2019年、34歳で当時世界で最年少の首相として就任した。</p> <p>フィンランドでは3人目の女性首相。</p> <p>閣僚のジェンダーバランスもよく、世界から注目されている。</p> <p> 参考：<a href="https://courrier.jp/news/archives/194898/" >「首相は34歳女性、閣僚の4人が35歳未満」のフィンランドから学べること</a > </p> </div> <img src="https://docs.waffle-waffle.org/img/logo.png" alt="waffle logo" border="0" /> </body></html>応用#
index.html に以下のエレメントを付け加えてブラウザに表示させましょう。
- h1 をつかって自分の住んでいる都道府県を追加
- h2 をつかって自分の住んでいる市町村を追加