入門編ではHTMLがどのようなものか概要を解説しました。
今回はHTMLを書くにあたっての基礎知識をご紹介します。
入門編をまだご覧になっていない方はこちらからどうぞ
自分でHTMLを書きながら学習をしたほうが理解しやすいので、環境構築がまだの方はこちらから済ませてください。
HTMLの基礎
まずはHTMLの基本構造から身につけましょう！
タグではさむ
まずはHTMLのサンプルを見てみましょう。
|
1 2 3 4 5 |
<h1>〇プロフィール</h1> <h2>・名前</h2> <p>－わかる太郎</p> <h2>・好きな食べ物</h2> <p>－チョコレート</p> |
これを表示してみると、
このようになります。
HTMLでは上のサンプルのように「<なんとか></なんとか>」このような形にします。この「なんとか」のことを「タグ」と呼びます。 例えば、<h1></h1>は「h1（エイチワン）タグ」のように呼びます。
また、 <h1></h1> の最初のカッコの「<h1>」は「開始タグ」、最後のカッコの「</h1>」は終了タグと呼びます。
このように、タグでさむことがHTMLの基本構文になります。
タグに属性をつける
属性はタグに追加の情報を書きます。
例えば、「<a></a>」というタグがあります。これは他のページに飛ぶためのリンクを作ることができます。
次のように書いたとすると
|
1 |
<a href="https://wakarublog.com/">わかるブログへ</a> |
ブラウザ上では以下のように表示されます。
よく見てみると、「a」タグの中に「href=”https://wakarublog.com/”」と書かれています。
この「href」が属性です。「a」タグでは、「これはリンクを表すよ～」ということしか示していません。
そこで、「href」という属性を使うことで、クリックしたらどこに飛ぶのかを示します。
ですから、今回の場合ですと、
- 「a」タグ→「わかるブログへ」はリンクですよ
- 「href」属性→ 「https://wakarublog.com/ 」ここに飛んでください
と「href」属性は「a」タグに情報を追加していますね。
まとめ
このように「開始タグの中に追加の情報が入ることがある」ということを知っておきましょう。
最初はタグや属性の種類は暗記する必要はありません。見ながら書ければ問題ないです。基本的なタグなどは使っていくうちに覚えるので、暗記することに時間を使わないでください！
HTMLをブラウザで表示させる
HTMLをブラウザで表示させるには、上で書いたようなサンプルのようなコードは実はあまりよくありません。
というのも、ブラウザがファイルを読み込んだ時に「このファイルはHTMLで書かれているよ！」と教えてあげるなど、コンピュータにわかりやすく説明をしてあげなければいけません。
そこで、ブラウザに表示する前に書くべきコードを見ていきましょう！
今回作るのは以下のようなものです。
コードは以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="ja"> <head> <title>わかるブログ</title> </head> <body> <h1>〇プロフィール</h1> <h2>・名前</h2> <p>－わかる太郎</p> <h2>・好きな食べ物</h2> <p>－チョコレート</p> <a href="https://wakarublog.com/">わかるブログへ</a> </body> </html> |
HTMLファイルの作成はこちらの記事の「ファイルの作成」を参考にしてください。
コードの解説
<!DOCTYPE html>
１行目にある<!DOCYTPE html>ですが、「これはHTML文書ですよ」と文書宣言をしています。
このタグには終了タグはいりません。また、画面には表示されません。
<html lang=”ja”></html>
2行目に「<html lang=”ja”>」、15行目に「</html>」と書かれています。
これは「<html></html>で囲まれているところはHTMLで書かれているよ」という意味です。
「lang=”ja”」というのは、「html」タグの属性で、「日本語の文章が書かれているよ」という意味です。
<head></head>
3行目に「<head>」、６行目に「</head>」が書かれています。
これは「この文書自体の情報を書く場所」です。
画面には表示されません。
今回は中に「title」タグがあります。
「title」タグではWebページのタイトルを設定します。
他にも「meta」タグなど、いろいろありますが最初は気にしなくても大丈夫です。
<body></body>
7行目に「<body>」、14行目に「</body>」が書かれています。
これは「この文書の本文を書く場所」です。
サンプルで書かれたものはここに入っていますね。
ここに書かれたものがWebページの本文として表示されます。
まとめ
いかがでしたか？
今回はHTMLの基礎編についてご紹介しました。
最初は慣れなくて分かりにくいかもしれませんが、プログラミングを勉強する上で重要な基礎となります。
何度も書いて、まずは慣れるところから始めましょう！
