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

超簡単「HTMLの書き方」

2019/04/02

ここでは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>

サイトを作りに当たりこれは最低限覚えておかないと話になりません。
メモとしてどこかに残しておいてもいいでしょう。

今はそれぞれのタグの意味は分からなくてOKです。書いていくうちに慣れて覚えましょう。
ここで覚えるべきは`<body>`と`</body>`の中にWebサイトの内容のタグや文字を書いていきます。

※ボディータグ内に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の階層(一段深いインデント)になります。

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

まとめ

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

マークアップ言語とはWebサイトの骨組みを作るための言語です。

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

今回出てきたタグはdivだけでしたが、雛形に使われているタグや、画像用のタグ、リンク用のタグなど様々なタグがあります。
次回は、HTMLの基本的な、「よく使うタグ」を見ていきましょう。

2019/04/02