HTML入門

HTMLとは

Webページを構成するための言語です。

「ハイパーテキスト・マークアップ・ランゲージ(Hyper Text Markup Language」の略で、専用の文字列を用いて、文章の構成や文章の役割を示し、Web上で表示させます。

基本的にWeb上で表示されるページを構成するのは「HTML」と「CSS」です。

CSSとは

CSSとは、HTMLで構成した基本的な要素に対して、装飾を施すものです。

文字の色や大きさ、画像のサイズやそれぞれのコンテンツの幅など、細かな指示を行います。

Webページの背景に画像を差し込みたい時なども、CSSで対応が可能です。

JavaScriptとは

躍動感のあるページにしたい時は、JavaScriptを活用します。

JavaScriptとは、他に変更したり、拡大表示や動かしたりできるプログラミング言語です。注目を集めたい部分や、特に閲覧者の注目を引きたい部分への使用がおすすめです。

JavaScriptはHTML上に書きます。書く時は以下のよう記述します。

<script>
  document.write("Hello");
</script>

詳細は省きますが、上記を記述すると、ブラウザ上で「Hello」と表示されます

HTMLをブラウザで表示させる

それでは、実際にHTMLファイルを作成してブラウザで表示させてみようと思います。

1. テキストエディタでコードを書く

まずは、下記の通りに記述してみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>Hello</title>
</head>
<body>
  <h1>見出し1</h1>
  <p> 表示したい文章</p>
</body>
</html>

2. 「.html」という拡張子で保存する

記述が終わったら、名前を付けて保存します。ドキュメントフォルダなどに保存してください。

ここではtest.htmlとします。

3. 保存したファイルをダブルクリックする

保存したtest.htmlをダブルクリックして下さい。

すると、設定しているブラウザでtest.htmlが開くと思います。

このように表示されれば問題ないです。

マスターすべきHTMLタグ

HTMLを記述するためには、複数のタグを使いこなさなくてはいけません。

まずはタグとはなんなのかマスターすべき基本的なタグを解説していきます。

HTMLタグとは？

HTMLタグとは、マークのことです。ブラウザはこのマークに従って、要素を表示します。

HTMLを記述するためには、見出しとして表示して欲しい・テキストとして表示して欲しい・画像を表示して欲しいなど、要素に沿ってそれぞれ指示出しが必要です。

ブラウザへ正確に指示出しするためには、適切なタグ使用が必須となるので覚えておきましょう。

HTMLタグの基本ルール

HTMLの基本的なルールは２つです。

要素をタグで挟む

まず１つ目のルールは、表示したい要素をタグで挟むことです。

<p>表示したい文章はここに記述しましょう</p>

要素の終わりには、頭に「/」を付けたタグを記述することで、ブラウザは「指示の終了」を認識します。

上記のHTMLで、「表示したい文章はここに記述しましょう」だけを文章として表示すればいい、とブラウザは判断するのです。

タグの中にタグを書く

タグは、タグの間に挟むように記述します。表示したい部分はここからここまで、とブラウザに指示を出したい場合はまず<body>タグで囲みます。

そして、その表示したい部分のエリアに、さらに表示したいコンテンツを入れ込んでいくのです。

<body>
	<p>表示したい文章はここに記述しましょう</p>
</body>

上記のHTMLで、ブラウザ上で表示したい部分は「body」タグの中にある部分で、「表示したい文章はここに記述しましょう」だけを文章に表示すればいい、とブラウザに指示ができます。

マスターすべきHTMLの基本構造

HTMLのルールは難しくありません。まずは基本的な構造を理解していきましょう。

HTMLファイルであることを宣言する

まず、HTMLファイルを書き始める前に、必ず<!DOCTYPE html>と記述しましょう。

<!DOCTYPE html>は、ブラウザにこのデータは「HTML」ですよと宣言するもので、HTMLそのものではありません。

従って最後の/がついた終了タグは必要ありません。

htmlタグで構成要素全体をはさむ

ここからここまでHTMLですよ、とブラウザに指示するためにhtmlタグで構成要素全体を挟みましょう。

HTMLタグの外に記述すると、HTMLとしてブラウザが認識できなくなるため注意が必要です。

headタグにwebページのタイトルなどを書く

Webページのタイトルは<head>タグで挟みましょう。headタグで挟んだ部分は、ブラウザ上に表示されません。

ブラウザのタブに表示されたり、検索エンジンがなんのコンテンツのWebページであるか判断するために必要です。

<head>
  <title>HTMLの練習</title>
</head>

ブラウザに表示させたい要素をbodyに書く

ブラウザで表示させたい要素をbodyタブの中に記述していきましょう。

下のhtmlであれば、「「HTMLの練習」大見出し」と「表示したい文章はここに記述しましょう」の部分のみがブラウザ上に表示されます。

<html>
<head>
  <title>HTMLの練習</title>
</head>
<body>
  <h1>「HTMLの練習」 大見出し</h1>
  <p>表示したい文章はここに記述しましょう</p>
</body>
</html>