こんにちは。HTML、CSS勉強中のうりのすけです。
今回はHTMLの基本について学んでいきたいと思います。
目次
まずはHTMLファイルを作ってみよう
なにはなくともHTMLを書いてみるところからです。テキストエディタを起動しましょう。うりのすけはsublime text 3を使っているので下のような画面です。
とりあえず下のようなコードを書いてみます。書けたらファイルを保存しましょう。ファイル名はindex.htmlとします。保存先はどこでもいいのですが、わかりやすくデスクトップとします。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>副業はじめました。。。</title>
<meta name="description" content="月収10万円を目指して副業始めました。">
</head>
<body>
<h1>副業始めました。。。</h1>
<p>月収10万円を目指して副業始めました。</p>
</body>
</html>デスクトップに保存したファイルを開きます。するとブラウザが立ち上がり下のような表示となります。これでWebサイト作成の初めの一歩、HTMLファイルが作成できました。
HTMLファイル作成する上でのファイル名とフォルダ名のルールがあるので注意が必要です。
- 拡張子（HTML)をつける
- 半角英数字のみ(日本語は不可）
- 「－（ハイフン）」「＿（アンダーバー）」以外は使わない
- 空白は使わない
- 小文字に統一
- ホームページ（Webサイトのホーム画面）は「index.html」とする
HTMLの基本構造について学ぼう
HTMLファイルが作れるようになったので、次は基本の構造について学んでいきましょう。
・<!doctype html>
Doctype宣言といいます。どのバージョンのHTMLが使用されているかを書いています。「XHTML1.1」などバージョンがいくつかありますが、特に指定がなければHTML5となります。
・<html>~</html>
htmlの文書ということを表しています。ちなみにlangは言語でjaは日本語ということを示しています。
・<head>～</head>
ページのタイトルやCSSファイルとのリンクなどブラウザに表示されない部分の情報を書いています。
・<meta charset="UTF-8">
「UTF-8」の文字コードにしますよと指定しています。これをしないとページが文字化けする場合があります。
・<title>～</title>
ページのタイトルとなります。ブラウザのタブの部分に表示されます。お気に入りに入れたときや検索で表示された時のタイトル名になります。
・<meta name="description" content="～">
検索した際にページタイトルと一緒に表示される部分になります。検索されやすいキーワード等をいれて記述したほうがいいかと思います。
・<body>~</body>
HTMLの本体の部分です。ブラウザで開いた際にページに表示される部分になります。
以上がWebページとして表示するために必須となる要素の内容となります。実際にネット上にあるようなWebサイトを作成する際は<header>や<footer>など他の要素も必要となってきます。
タグ一覧表
| <!doctype html> | どのバージョンのHTMLが使用されているか の宣言 |
| <html>~</html> | htmlの文書ということを表している |
| <head>～</head> | ページの情報を表している。ページ中には表示されない |
| <meta charset="UTF-8"> | 「UTF-8」に文字コードを指定している |
| <title>～</title> | ページのタイトルを表す。ブラウザのタブい表示される |
| <meta name="description" content="～"> | 検索の際にタイトルと一緒に表示される部分 |
| <body>~</body> | HTMLの本体部分。ページに表示される部分 |
HTMLの書き方を学ぼう
最後にHTMLを書く際の基本文法と注意点を見ていきましょう。
HTMLの基本文法
先ほど作ったHTMLのコードに<>、</>がたくさん書かれていたかと思うのですが、これはタグといいます。
<>が開始タグで</>は終了タグといいます。
開始タグと終了タグはセットになっており、仮に終了タグを書き忘れるとその部分は表示されなくなります。終了タグで囲むをタグを「閉じる」といったりします。
<タグ（開始）>コンテンツ内容</タグ(終了）>
といった形で、コンテンツ内容をタグで囲むというのが基本的なHTMLを書く際の文法となります。
タグを書く時のルール
・半角英数字で書く。
ファイル名と同じように、全角文字は使えません。
・基本的に小文字で書く
大文字と小文字の区別はありません。ただバージョンによっては小文字での記述が必要になる場合があるので小文字で統一したほうがいいです。
タグの中にあるタグについて
HTMLファイルを書いていくと<html>の中に<head>、<head>の中に<title>などタグの中にタグをどんどん書いていくことがよくありますが、このような書き方のときは必ず最後に書いたタグから閉じていく必要があります。下の例でいうと<head>から先に閉じていきます。
例：<html＞コンテンツ名<head>コンテンツ名</head></html>
タグに情報を加える
開始タグの中に付加情報を加える場合があります。その付加情報の種類のことを「属性」、内容のことを「値」といいます。下の例でいうと img は画像を貼るためのタグになります。画像の場所についてはsrc属性を使って開始タグの中に書きます。
<img src="image/gazou.jpg">
HTMLのファイルの作り方から基本構造、書き方まででした。とりあえずHTMLってどうやって書くんだろうかというところは理解できたのではないでしょうか。あとはタグの種類色々とあるので次回はタグについて勉強していきたいと思います。
