学科 HTML基礎②

By 学科 HTML基礎

-本日のアジェンダ-

1限目
学科 HTML基礎②
HTML基本構造の復習

2限目
学科 HTML基礎②
見出しタグについて

3限目
学科 HTML基礎②
段落タグについて

4限目
学科 HTML基礎②
画像タグについて

5限目
学科 HTML基礎②
まとめ

本日のテーマ

タグを理解しましょう

h 見出し

見出しを付ける

<h1>∼</h1>：１番大きな見出し
<h2>∼</h2>：２番目に大きな見出し
<h3>∼</h3>：３番目に大きな見出し
<h4>∼</h4>：４番目に大きな見出し
<h5>∼</h5>：５番目に大きな見出し
<h6>∼</h6>：６番目に大きな見出し

【ルール】
① h1〜h6を使う順番を守る
②h1タグの使用は1回だけにする

p 段落

ひとつの段落（パラグラフ）であることを表す

<p>∼</p>

br 改行

改行する

<br>

img 画像

画像を表示する

<img src="images/sample_img001.jpg" alt="" width="400" height="300">

画像

絶対パスと相対パス

絶対パス
サーバー（インターネット上）に上がっているファイル
http://やhttps://から始まる
【例】
http://samplesdl.me/training_html-css_190622_01/index.html
https://samplesdl.me/training_html-css/images/deau-academye_logo.png

相対パス
自分で管理していてフォルダの中にアクセスできる
または、自分のPCの中にあるファイル
【例】
index.html
deau-academye_logo.png

パス

a リンク

ハイパーリンクを指定する

<a href="外部リンク" target="_blank">∼</a>

htmlの記述【body】

▼HTML（bodyの中）

<p><img src="http://deau-b.spawn.jp/wp-content/uploads/2020/09/HIRA86_nekojyarasideasobu_TP_V-1024x682-3-1024x682-1.jpg" alt="子猫" width="600"></p>

<h1>猫のからだ</h1>
<p>猫のからだの特徴を説明します。</p>
<h2>目</h2>
<p>顔の大きさの割に、かなり大きい</p>
<h3>視力</h3>
<p>8m位の距離ならば人間の顔を識別できる。</p>
<h3>色覚</h3>
<p>基本的にはモノトーンの世界。</p>
<h2>鼻</h2>
<p>人間の数万から数十万倍といわれる嗅覚を持つ。</p>
<h2>尾</h2>
<p>脊髄と直結しているため、痛覚が強い</p>

<p><a href="https://ja.wikipedia.org/wiki/%E3%83%8D%E3%82%B3" target="_blank">ネコについてのWikipedia</a></p>

▼CSS（今回はheadの中に書きます）

<style type="text/css">
h1 {
    background-color: black;
    padding: 1rem;
    color: white;
}
h2 {
    color: red;
    padding: 3rem 0 0.5rem 0;
    border-bottom: red 1px solid;
}
h3 {
    color: blue;
    padding: 0.5rem 0 0 3rem;
}
h3 + p {
    padding: 0 0 0 3rem;
}
h4 {
    color: green;
    padding: 0.5rem 0 0 6rem;
}
h4 + p {
    padding: 0 0 0 6rem;
}
h5 {
    color: orange;
    padding: 0.5rem 0 0 9rem;
}
h5 + p {
    padding: 0 0 0 9rem;
}
h6 {
    color: pink;
    padding: 0.5rem 0 0 12rem;
}
h6 + p {
    padding: 0 0 0 12rem;
}
</style>