Html s1

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

2
ゴールイメージ
l  HTMLのゴールイメージ
-  以下のような簡単なサイトが作成できること

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

4
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
HTMLの書き⽅方 (1/4)
l  Sublime Text2を起動しましょう。
l  そこに以下のHTMLを記述し、ファイル名をhello.htmlにして
保存したファイルを、ダブルクリックしてみましょう。
<html>
<head>
<meta charset=”utf-8”>
<title>ウェブページのタイトル</title>
</head>
<body>
<h2>ウェブページの見出し</h2>
ウェブページを作成しました！
</body>
</html>
保存する際は、hello.html という名前で保存してください。
「”」をダブル
クォーテーション
と呼びます
こうなればOK！

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

7
お疲れ様でした！！

Html s1

Recommended

Recommended

More Related Content

What's hot

What's hot (9)

Viewers also liked

Viewers also liked (9)

Similar to Html s1

Similar to Html s1 (20)

More from Jun Chiba

More from Jun Chiba (20)

Html s1