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入門

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to HTML入門

Similar to HTML入門 (20)

More from sayoko miura

More from sayoko miura (20)

HTML入門