概要と目標
HTMLとは何かを知り、
基本的なタグを覚えよう。
HTMLの基本を学習し、HTMLに必ず必要な全体構造の要素を記述できるようになりましょう。
Chapter01 HTMLの基本
概要と目標
HTMLとは何かを知り、
HTMLとは
ホームページの文章に、
意味や役割を持たせるコンピュータ言語。
HTMLとは、
タグという印を使ってホームページの文章に意味や役割を持たせるコンピュータ言語です。
-
一番土台がHTML
-
その上にCSS
-
一番上にJavaScript
-
タグの役割
-
文章の意味を示す
-
「ここまで」は「/」にする
-
英語にする
-
短くする
Hyperlink - 別のページにジャンプする機能の事で、単に「リンク」とも呼ばれる。
正確には複数の文書を結び付ける役割を担う「参照」である。
開発環境
テキストエディタと、
ブラウザで開発できる。
HTMLはテキストエディタと呼ばれる文書が書けるソフトと、ブラウザがあれば開発できる。
テキストエディタ
文書を書くためのソフト。
Windowsの「メモ帳」や、Macの「テキストエディット」でも開発できる。
以下は、よりHTMLを開発しやすい無料のテキストエディタ。
-
Visual Studio Code
Visual Studio Codeのダウロードページ -
Atom
Atomのダウロードページ -
Brackets
Bracketsのダウロードページ
ブラウザ
ホームページを閲覧するためのソフト。
Windowsの「Internet Explorer」や、Macの「Safari」でよい。
以下は、その他のよく利用されているブラウザ。
-
Google Chrome
Google Chromeのダウンロードページ -
Firefox
Firefoxのダウンロードページ
HTMLの全体構造 HTMLには、枠組みが必要。
HTMLは、文章に対して適切なタグを付けていくのだが、
それだけをテキストエディタに記述するわけではない。
これらを記述するために、まずページ全体の枠組みとなる
全体構造の要素を記述する必要がある。
<html>
<head>
<title>ページのタイトル</title>
</head>
<body>
ページの内容
</body>
</html>| 要素名 | 意味・役割 |
|---|---|
html
|
html文章を表す。他の全ての要素はこのhtml要素の中に配置する。 |
head
|
ページの情報を表す。head要素の内は基本的に画面に表示されない。 |
body
|
ページの内容を表す。画面に表示する情報は全てbody要素内に配置する。 |
title
|
ページのタイトルを表す。 |
はじめてのHTMLを書いてみよう！
- 「html-lessons」 › 「chapter01」フォルダ内に「index.html」を作成
- 下記を参考にはじめてののHTMLを記述
<html>
<head>
<title>ここにページのタイトルが入ります。</title>
</head>
<body>
ここにページの内容がはいります。
</body>
</html>- 上書き保存
- 「html-lessons」 › 「chapter01」フォルダ内に保存した「index.html」をダブルクリック。
- ブラウザが開くので確認する。
- HTMLのファイル名
- HTMLのファイル名は必ず「◯◯.html」という形式で保存する。（拡張子：.html）
◯◯の部分は任意で記入するが、必ず 半角英数字で命名する。
なお、使える記号は「-（ハイフン）」と「_（アンダーバー）」のみ。
コードを見やすくする コードは常に、見やすく、きれいに。
たくさん文章を書いて行くけばHTMLファイル内で、
どの要素の中にどの要素が挟まれているのかがわかりにくくなる。
そこで「インデント」を付けて、コードを見やすくする。
- インデント
- インデントとは字下げの事で、 （半角スペース）や、tabを使ってつける。
一般的にインデントは半角スペース2つ分か、4つ分つける事が多い。
タブを使う場合のスペース量はテキストエディタによって異なる。
インデントを付けてみよう。
- 「html-lessons」 › 「chapter01」フォルダ内の「index.html」をテキストエディタで開く
- 下記を参考に半角スペース2つ分のインデントを付ける
<html>
<head>
<title>ここにページのタイトルが入ります。</title>
</head>
<body>
ここにページの内容がはいります。
</body>
</html>- 上書き保存
- 「html-lessons」 › 「chapter01」フォルダ内の「index.html」をダブルクリック。
- 見た目には影響されていないことを確認
この様に、要素の外であれば半角スペースやタブを付けても、ブラウザ上では何も影響しませんので、HTMLファイルのコードは誰もが見やすいように、きちんと整理するように意識しましょう。コードを整理する癖をつけるとミスも減りますよ。ただし、要素内でのスペースはスペースとして反映してしますので、注意してください。
属性とは 要素に設定を付ける。
HTMLの各要素には、属性という何かしらの設定を付ける事ができる。
属性は、開始タグの要素名の後ろに半角スペースを開けて、「属性名="属性値"」の書式で記述します。
<要素名 属性名="属性値">
〇〇の 〇〇は 〇〇です
属性値を囲む引用符は「"（ダブルクオート）」の代わりに、「'（シングルクオート）」を使っても構いません。
半角スペースで区切れば複数指定できる
html要素には、lang属性という属性を指定することが推奨されてる。
lang属性は、その要素内の言語が、何語かを指定をする属性で、この属性をhtml要素に指定することで、音声でWebサイトを読み上げるソフトや、自動翻訳機などにページの言語を伝えるサポートをすることができる。
<html lang="ja">属性の種類
属性には、特定の要素にのみ指定できる属性と、どの要素にでも指定できるグローバル属性の2種類がある。
| 属性名 | 役割 |
|---|---|
id |
要素に固有の名前を指定する属性。 |
class |
要素に分類名（種類）を指定する属性。 |
title |
要素に補足情報を指定する属性。 |
lang |
要素内の言語を言語コードで指定する属性。 （日本語："ja"、英語："en" など） |
lang属性を使ってみよう
- 「html-lessons」 › 「chapter01」フォルダ内の「index.html」をテキストエディタで開く
-
下記を参考に
lang属性を指定
<html lang="ja">
<head>
<title>ここにページのタイトルが入ります。</title>
</head>
<body>
ここにページの内容がはいります。
</body>
</html>- 上書き保存
- 「html-lessons」 › 「chapter01」フォルダ内の「index.html」をダブルクリック。
- 見た目には影響されていないことを確認
DOCTYPE宣言
利用するHTMLのバージョンを、
冒頭で宣言する。
HTMLにはいくつかのバージョンがある。
そのバージョンによって利用できる要素や属性、記述のルールなどどが異なる。
どのバージョンのHTMLを利用するのかを、HTMLファイルの冒頭に宣言する必要があり、
その宣言をDOCTYPE宣言という。
- W3C（World Wide Web Consortium）
- Web技術の標準化を目的とした非営利団体。
にティム・バーナーズ＝リによって創設。
| バージョン | 概要 |
|---|---|
| HTML4.01 |
に勧告されたバージョン。 視覚的な表現を行なう為の要素や属性を非推奨（CSSという言語に移行）とし、文章構造のみを記すというHTML本来の目的に沿ったバージョン |
| XHTML1.0 |
に勧告されたバージョン。 XHTMLの「X」は「エクステンシブル」という意味で、具体的にはXMLという別の言語で定義しなおしたHTML。 使える要素や属性はHTML4.01と変わらず、タグは小文字で記述するなどといったルールがより厳格になったバージョン |
| HTML5 |
に勧告されたバージョン。 HTML5はより人間にも機械にも理解しやすい言語になるとともに、Webアプリケーションを 開発するための様々な仕様が新たに盛り込まれている |
| バージョン | DTDの種類 | DOCTYPE宣言 |
|---|---|---|
| HTML4.01 | Strict （仕様書通り） |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
| Transitional （非推奨も可） |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
|
|
| Frameset （frameも可） |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
|
|
| XHTML1.0 | Strict （仕様書通り） |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
| Transitional （非推奨も可） |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
| Frameset （frameも可） |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
|
|
| HTML5 | なし |
<!DOCTYPE html>
|
DOCTYPE宣言を指定してみよう。
- 「html-lessons」 › 「chapter01」フォルダ内の「index.html」をテキストエディタで開く
- 下記を参考にDOCTYPE宣言を記述
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ここにページのタイトルが入ります。</title>
</head>
<body>
ここにページの内容がはいります。
</body>
</html>- 上書き保存
- 「html-lessons」 › 「chapter01」フォルダ内の「index.html」をダブルクリック。
- 見た目には影響されていないことを確認
文字コードの指定 文字化けは、嫌だ。
HTMLファイル自身の文字コード（文字エンコーディング）と、
それを表示するブラウザの文字コード（文字エンコーディング）が異なると、文字化けが発生する。
meta要素にcharset属性を使って、HTMLファイルの文字コードを指定することで、
文字化けを対策できる。
| 要素名 | 意味・役割 |
|---|---|
meta |
ページに関する情報を表す |
<meta charset="文字コード">詳細は4.2.5. The meta elementを参照
文字コードを指定してみよう
- 「html-lessons」 › 「chapter01」フォルダ内の「index.html」をテキストエディタで開く
-
下記を参考に
head内に、metaを記述
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ここにページのタイトルが入ります。</title>
</head>
<body>
ここにページの内容がはいります。
</body>
</html>- 上書き保存
- 「html-lessons」 › 「chapter01」フォルダ内の「index.html」をダブルクリック。
- 見た目には影響されていないことを確認
これらの要素が、全てのHTMLファイルに必要な要素。
練習問題 今回の理解度をチェック。
「chapter01」 › 「training」フォルダ内に「index.html」を作成し、
下記の問題を解いて下さい。
-
- ファイル名： index.html
-
- HTMLのバージョン： HTML 5
-
- 文字コード： UTF-8
-
- タイトルの文字列「Webの勉強を開始」
-
- 本文の文字列「これからWebの勉強を行って、Webサイトを作れるようになる！」
- 解答例
-
chapter01/training/index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Webの勉強を開始</title> </head> <body> これからWebの勉強を行って、Webサイトを作れるようになる！ </body> </html>解答例は全問題のチェックボックスが on になるとご覧いただけます。
まとめ HTMLは文章に意味を付ける言語
HTMLは、タグを使って文章に意味や役割を付ける言語です。
- 基本構造の要素が必要
- テキストの冒頭にDOCTYPE宣言を行う
- 文字コードは、
meta要素で指定する