HTML入門

Webページ
ヘッダー(header)
ナビゲーション(nav)
フッター(footer)
コンテンツ
＊HTMLで役割付けをする

Webサーバー
ブラウザで表示
リクエストを送る
HTML CSS 画像
URL
データが送り返される

拡張子
HTMLファイル .html
CSSファイル .css

ファイル名に使える文字
・半角英数字
・ “-“ ハイフン（半角）
・ “_” アンダーバー（半角）
○ index.html ✖︎ index:1.html

HTMLとは
Hyper Text Markup Langage
（ハイパーテキストマークアップランゲージ）
Webページを構造化し、マークアップする言語

HTMLの「タグ」と「要素」
＜p＞今日からHTMLの授業始まるよ！</p>
HTMLは、タグで内容をマークアップして、要素を作り出します
開始タグ終了タグ内容
要素

HTMLの「タグ」と「要素」
＜p＞今日からHTMLの授業始まるよ！</p>
HTMLは、タグで内容をマークアップして、要素を作り出します
開始タグ終了タグ内容
要素
＊文字列にタグ付けしていくこと
マークアップされていない文字列は作らない！

タグの記述ルール
・半角で記述
・開始タグと終了タグを
対にして記述するのが基本

タグの入れ子
＜p＞今日から<strong>HTMLの授業始まるよ！</strong></p>
段落の中の、強調

タグの入れ子
＜p＞今日から<strong>HTMLの授業始まるよ！</p></strong>
これはダメ！

実際に
HTMLを書いてみましょう

Webページを作成する準備
フォルダーを作成しよう
css
style.css
・
・
images
aaa.jpg
bbb.jpg
・
・
index.html
about.html
・
・
test

HTMLのテンプレート
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title>練習ページ</title>
</head>
<body>
</body>
</html>
<head>
</head>
<body>
</body>
ここに内容を書く！

HTMLのテンプレート
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
<head>
</head>
<body>
</body>
ここに内容を書く！
サイトに関する詳細
非表示部分
サイトの中身
表示部分

見出し
<h1>○○○</h
1>h1
h6
太字・サイズ大

段落の指定
<p>○○○</
p>
段落内で改行 <br>
<p>こんにちは。<br>今日も良いお天気です。</p>

箇条書きリスト
<ul>
<li>○○○</li>
<li>○○○</li>
<li>○○○</li>
</ul>
・
・
・

番号リスト
<ol>
<li>○○○</li>
<li>○○○</li>
<li>○○○</li>
</ol>
1
2
3

リンク
<a
href=“ ”>○○○</a>属性
・ファイル名
・URL
値
＊○○○をクリックすると値へ飛ぶ
<a href=“http://www.oic-ok.ac.jp/” >OICへのリンク</a>
<a href=“index.html”>トップページ</a>

リンク
<a href=“http://www.oic-ok.ac.jp/” target=“_blank”>
OICへのリンク</a>
元のページを維持したままリンク先を開く

画像の掲載
<img src=“ ”>
ファイル名（画像ファイルのパス）
<img src=“cat.jpg” alt=“飼い猫の写真” widch=“250” height=“100”>
alt=“ ” 代替文字列
widch=“300”
height=“200”
単位はなし

<img src=“aaa.jpg”>
test
index.html style.css aaa.jpg
HTMLと画像の場所

test
index.html
<img src=“images/aaa.jpg”>
css
style.css
images
aaa.jpg
index.html
style.css aaa.jpg
test

test
index.html
<img src=“images/aaa.jpg”>
css
style.css
images
aaa.jpg
index.html
style.css aaa.jpg
<img src=“../images/aaa.jpg”>
css
style.css
images
aaa.jpg
html
Index.html
test
test
＊１つ上のフォルダー

Webページの骨格を作る要素
<header>〜</header>
<footer>〜</footer>
<nav>〜</nav>
<section>〜</section>
<article>〜</artocle>
<aside>〜</aside>
<div>〜</div>

<div id=“header”>〜</div>
<header>〜</header>
HTML5
HTML4
＊意味付け強化

HTML入門

More Related Content

What's hot (20)

Similar to HTML入門 (20)

More from sayoko miura (20)

HTML入門