1 
Copyright (c) 株式会社HEART QUAKE All rights reserved . 
HTML 
HTMLは、Internet ExplorerやFirefox、Chromeなどのインターネット 
プラウザ上にウェブページを表⽰示するための⾔言語です。わたしたちが 
ふだん利利⽤用しているウェブサイトは、どのようにして記述されている 
のか、詳しく⾒見見ていきます。
2 
Copyright (c) 株式会社HEART QUAKE All rights reserved . 
ゴールイメージ 
l HTMLのゴールイメージ 
- 以下のような簡単なサイトが作成できること
3 
Copyright (c) 株式会社HEART QUAKE All rights reserved . 
HTMLとは (1/2) 
l HTML 
- ウェブページを作成するために利利⽤用される⾔言語。 
- HyperText Markup Languageの略略 
ü HyperText :複数の⽂文書を相互に関連付け、結び付ける 
仕組み。「テキストを超える」という意味から。 
ü HTML →ハイパーテキストに⽬目印をつける⾔言語 
- ⽬目印をつける(Markup)というのは、⽂文書の各部分が、 
どんな役割を持っているのかを⽰示すということ。 
- コンピュータに理理解できるように⽂文書の構造を定義するこ 
とが、HTMLの最も重要な役割。
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 
時間制限 
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 
⽇日本語が変な⽂文字になったら 
l この現象を「⽂文字化け」といいます。⽂文字化けの原因は・・・ 
ü meta charset = ”utf-8”  と正しく書いてますか? 
ü ブラウザのエンコードはUTF-8になっていますか? 
ü ダブルクォーテーション「”」が半⾓角になっていますか? 
補⾜足 
chromeを 
使っている⼈人向けまずはスパナ 
Copyright (c) 株式会社HEART QUAKE All rights reserved . 
マークを 
クリック 
IEを 
使っている⼈人向け 
まずはブラウザ 
上で右クリック
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は⼤大きく分けて2つの部品に 
分けることができます。 
1つはこのサイトについての 
あれこれ(タイトルなど)を 
記述するヘッダ(頭)、 
もう⼀一つが実際に画⾯面に表⽰示する 
内容を記述するボディ(体)です。
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 
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 
Copyright (c) 株式会社HEART QUAKE All rights reserved . 
お疲れ様でした!!

HTML

  • 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は⼤大きく分けて2つの部品に 分けることができます。 1つはこのサイトについての あれこれ(タイトルなど)を 記述するヘッダ(頭)、 もう⼀一つが実際に画⾯面に表⽰示する 内容を記述するボディ(体)です。
  • 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 . お疲れ様でした!!