1. 1
Copyright (c) 株式会社HEART QUAKE All rights reserved .
HTML
HTMLは、Internet ExplorerやFirefox、Chromeなどのインターネット
プラウザ上にウェブページを表⽰示するための⾔言語です。わたしたちが
ふだん利利⽤用しているウェブサイトは、どのようにして記述されている
のか、詳しく⾒見見ていきます。

2. 2
Copyright (c) 株式会社HEART QUAKE All rights reserved .
ゴールイメージ
l HTMLのゴールイメージ
- 以下のような簡単なサイトが作成できること

3. 3
Copyright (c) 株式会社HEART QUAKE All rights reserved .
HTMLとは (1/2)
l HTML
- ウェブページを作成するために利利⽤用される⾔言語。
- HyperText Markup Languageの略略
ü HyperText :複数の⽂文書を相互に関連付け、結び付ける
仕組み。「テキストを超える」という意味から。
ü HTML →ハイパーテキストに⽬目印をつける⾔言語
- ⽬目印をつける（Markup）というのは、⽂文書の各部分が、
どんな役割を持っているのかを⽰示すということ。
- コンピュータに理理解できるように⽂文書の構造を定義するこ
とが、HTMLの最も重要な役割。

4. 4
普通の⽂文章
Copyright (c) 株式会社HEART QUAKE All rights reserved .
HTMLとは (2/2)
HTMLとは？
HTMLの基本
HTML（エイチティーエムエル、HyperText
Markup Language）は、ウェブページを作成す
るために開発された⾔言語です。現在、インター
ネット上で公開されてるウェブページのほとん
どは、HTMLで作成されています。
HyperText Markup Languageを⽇日本語で表すな
ら、「ハイパーテキストに⽬目印をつける⾔言語」
くらいの意味になります。ハイパーテキスト
（HyperText）とは、ハイパーリンクを埋め込む
ことができる⾼高機能なテキストです。ハイパー
リンクというのは、ウェブページで下線の付い
たテキストなどをクリックすると別ページへ移
動する、あのリンクのことです。
マークアップのイメージ
これはタイトルHTMLとは？ここまで
これは⾒見見出しHTMLの基本ここまで
これは段落落HTML（エイチティーエムエル、
HyperText Markup Language）は、ウェブペー
ジを作成するために開発された⾔言語です。現在、
インターネット上で公開されてるウェブページ
のほとんどは、HTMLで作成されています。 こ
こまで
これは段落落HyperText Markup Languageを⽇日
本語で表すなら、「ハイパーテキストに⽬目印を
つける⾔言語」くらいの意味になります。ハイ
パーテキスト（HyperText）とは、ハイパーリン
クを埋め込むことができる⾼高機能なテキストで
す。ハイパーリンクというのは、ウェブページ
で下線の付いたテキストなどをクリックすると
別ページへ移動する、あのリンクのことです。
ここまでね
コンピュータは各部の役割が
理理解できない
「開始タグ」と呼ぶ
コンピュータは各部の役割を
理理解できる！

5. 5
時間制限
Copyright (c) 株式会社HEART QUAKE All rights reserved .
HTMLの書き⽅方 (1/4)
l 勉強道具を揃えよう！でダウンロードしたSublime Text2を起
動しましょう。
l そこに以下のHTMLを記述し、ファイル名をhello.htmlにして
保存したファイルを、ダブルクリックしてみましょう。
「”」 をダブル
クォーテーション
と呼びます
html
head
meta charset=”utf-8”
titleウェブページのタイトル/title
/head
body
h2ウェブページの見出し/h2
ウェブページを作成しました！
/body
/html
ブラウザで表⽰示
10min
保存する際は、hello.html という名前で保存してください。
こうなればOK

6. 6
⽇日本語が変な⽂文字になったら
l この現象を「⽂文字化け」といいます。⽂文字化けの原因は・・・
ü meta charset = ”utf-8” と正しく書いてますか？
ü ブラウザのエンコードはUTF-8になっていますか？
ü ダブルクォーテーション「”」が半⾓角になっていますか？
補⾜足
chromeを
使っている⼈人向けまずはスパナ
Copyright (c) 株式会社HEART QUAKE All rights reserved .
マークを
クリック
IEを
使っている⼈人向け
まずはブラウザ
上で右クリック

7. 7
ブラウザからは
⾒見見えない
ウェブページに関す
る
あれこれを設定する
Copyright (c) 株式会社HEART QUAKE All rights reserved .
HTMLの書き⽅方 (2/4)
html
head
meta charset=”utf-8”
meta name=”keywords” content=”このページのキーワード”
meta name=”description” content=”このページの概要”
titleウェブページのタイトル/title
/head
body
h2ウェブページの見出し/h2
ウェブページを作成しました！
/body
/html
HTMLヘッダ
ボディ
ブラウザから
⾒見見える
ウェブページの中⾝身
を
あれこれ記述
HTMLは⼤大きく分けて２つの部品に
分けることができます。
１つはこのサイトについての
あれこれ（タイトルなど）を
記述するヘッダ（頭）、
もう⼀一つが実際に画⾯面に表⽰示する
内容を記述するボディ（体）です。

8. 8
h2文字/h2
u下線/u
⾒見見出しなら
下線なら
Copyright (c) 株式会社HEART QUAKE All rights reserved .
HTMLの書き⽅方 (3/4)
l HTMLの記述は⼩小⽂文字、半⾓角で
l 開始タグ〜～/終了了タグで内容を囲む
タグの種類を指定します。 どのようなタグを書くとどうなる
のかはタグの種類によって変わります。
- 終了了タグを持たない空要素
brやimgのように、終了了タグを必要としないタグ
もあります。
改⾏行行br 画像img src=”hoge.jpg”
image、sourceの略略
表⽰示したい画像ファイルの名前を書く
breakの略略
h2/h2で囲むと⽂文字が
⼤大きくなります。
ウェブページを作成しました！
はその外側なので普通の⼤大きさに
なります。

9. 9
Copyright (c) 株式会社HEART QUAKE All rights reserved .
HTMLの書き⽅方 (4/4)
- h1 〜～ h6
- p
- table
ü tr / th / td
- ul / ol
ü li
- dl
ü dt / dd
- div
- form
- a
- img
- span
- Input
- button
- select
ü option
HTMLタグの種類（⼀一例例）
エンジニアも全てのタグを
覚えているわけではありません。
みなさんも使いながら徐々に
覚えて⾏行行きましょう！

10. 10
Copyright (c) 株式会社HEART QUAKE All rights reserved .
お疲れ様でした！！