ウェブログラム ~学習するな実践せよ~

HTML書き方の「基礎の基礎」

前回はHTMLとは何なのか?ということについて解説しました。

今回はそのHTMLの書き方について「基礎の基礎」を学んでいきましょう。「HTMLってこういう書き方ができるんだ!」という感じで見ていってください。

まずHTMLは、タグと呼ばれるもので作られているマークアップ言語です。

HTMLタグとマークアップ言語

タグとは

<div></div>のようなもので
divのように、他にも<〇〇></〇〇>なタグがたくさん存在します。
それらのタグを組み合わせ使うことでWebサイトを作っていきます。

マークアップ言語についてですが、これは「Webサイトの設計図を作る」です。前回は設計図として説明しています。
設計図(構成)を決めるとは、「サイトの上にはメニューを表示したり、右側にはサイドバーを表示したりなどする」といった、どこに何があるのかを記述することです。

そしてHTMLはマークアップ言語ということになります。

書き方

では、書き方を見ていきましょう。
まずはHTMLファイルを作ります。

index.htmlというファイルを作ります。ファイル名には意味があるのですが、今の所意識しなくてもOKです。実は`.html`というところがちゃんと書かれていれば、前の文字は何でもいいです(hello.htmlでもOK)。

では、index.htmlにHTMLを書いて行きましょう。
HTMLファイルを作成する上で、最低限書いておかないといけない記述があります。
まずはコレを暗記しましょう(※書かなくてもページは表示されますが、重要なものなので書く癖をつけておきましょう)。

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ウェブログラム</title>
</head>
<body>
ここにタグを書いていく!
</body>
</html>

メモとしてどこかに残しておくのが良いでしょう。

この記述の意味としては、「HTMLで書かれたファイルだ」というような感じです。
今はそれぞれのタグの意味は分からなくてもOKです。なるべく書くようにして慣れて覚えましょう。
ここで覚えるべきは`<body>`と`</body>`の中にWebサイトの内容のタグや文字を書いていきます。

※bodyタグ内にWebサイトの内容を書く!

では、divタグのみを使ってサイトを簡単に作っていきましょう。

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ウェブログラム</title>
</head>
<body>
<div>
メニュー
</div>
<div>
<div>
サイトタイトル
</div>
<div>
サイト内容。サイト内容。サイト内容。
</div>
</div>
</body>
</html>

divがたくさん出てきました。これで実は以下のような構成のサイトが出来ます。
デザインがついていないので、キレイに見えませんが、ブラウザはちゃんと構成を認識しています。

<div>
<div>
サイトタイトル
</div>
<div>
サイト内容。サイト内容。サイト内容。
</div>
</div>

divタグの中にdivタグがある箇所があります。
この状態を、divが`入れ子`になっているといいます(またはネストしている)。入れ子にする場合はスペースを空けて見やすくしましょう。このスペースをインデントと言います。

入れ子にすることで、一段深いHTMLの階層(一段深いインデント)になります。

入れ子にしたい場合はたくさんあって、
記事内に画像とかを配置したい場合などは、記事用のタグ(divタグなど)内に画像用のタグ(imgタグ)を配置しタグを入れ子にしていきます。

まとめ

今回はタグとマークアップ言語について学びました。

マークアップ言語とはWebサイトの設計図を作るための言語です。

タグは<div></div>のようなもので、<〇〇></〇〇>に囲まれた文字がタグの範囲です。
タグは入れ子にすることが出来ます。入れ子にすることでHTMLの階層が一段ずつ深くなります。

今回出てきたタグはdivだけでしたが、雛形に使われているタグや、画像用のタグ、リンク用のタグなど様々なタグがあります。

もう一度まとめる、

  • HTMLはマークアップ言語で、これはサイトの設計図を作るためのもの
  • HTMLタグは「タグ内にタグを置ける」。つまり、ネストすることが出来る
  • ネストする場合は、見やすさのためにスペースでインデントする

次回は、HTMLの基本的な、「よく使うタグ」を見ていきましょう。