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>
<meta charset=“UTF-8”>
<title>練習ページ</title>
</head>
<body>
</body>
ここに内容を書く!
HTMLのテンプレート
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title>練習ページ</title>
</head>
<body>
</body>
</html>
<head>
<meta charset=“UTF-8”>
<title>練習ページ</title>
</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と画像の場所
<img src=“aaa.jpg”>
test
index.html
<img src=“images/aaa.jpg”>
css
style.css
images
aaa.jpg
index.html
style.css aaa.jpg
test
HTMLと画像の場所
<img src=“aaa.jpg”>
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
*1つ上のフォルダー
HTMLと画像の場所
Webページの骨格を作る要素
<header>〜</header>
<footer>〜</footer>
<nav>〜</nav>
<section>〜</section>
<article>〜</artocle>
<aside>〜</aside>
<div>〜</div>
<div id=“header”>〜</div>
<header>〜</header>
HTML5
HTML4
*意味付け強化

HTML入門