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

More Related Content

What's hot

Viewers also liked

Similar to Html s1

More from Jun Chiba

Html s1