HTMLを作ってみよう

HTML入門！10分後には制作開始！のページではHTMLが何なのかを学習しました。HTMLファイルはテキストエディタさえあれば、初心者でも入門者でも誰でも無料で作ることができます。

この実習ではHTMLの作り方を実践的に紹介します。一緒にHTMLを作ってみましょう。

準備としてテキストコンテンツを作ろう

さっそく、HTMLを施すための文章を作りましょう。テキストエディタを起動して、とりあえず次の文章を入力またはコピペしてください。

	カレー
	Googleでカレーを調べた。
	お腹がグーと鳴った。

内容は何でも良いのですが、気にせず入力してください。入力したらファイル名を「curry.txt」にして保存しましょう。文字コードを設定できる場合はUTF-8にします。

これは単なるテキストファイルです。このテキストにHTMLを施していきます。

HTMLファイルを作ろう

HTMLファイルの作り方を学習しましょう。

まず冒頭にこのファイルはHTMLファイルであるという宣言をします。これは決まり文句なのでそのまま入力します。さらに<html>で全体を囲みます。

	<!DOCTYPE html>
	<html>
	カレー
	Googleでカレーを調べた。
	お腹がグーと鳴った。
	</html>

DOCTYPE（DOCUMENT TYPE）はドキュメント（文書）のタイプ（型）という意味で、文書型はhtmlですよ、みたいな意味です。この場合はブラウザに向けてのメッセージです。DOCTYPEの後に実際のHTML文書が続きます。

HTMLでは<body>の中にコンテンツを書くことになっているので、文章を<body>で囲みます。ついでに文書の諸情報を記述する<head>部分も挿入しておきましょう。

ここではわかりやすくインデントを付けています。

	<!DOCTYPE html>
	<html>
		<head></head>
		<body>
		カレー
		Googleでカレーを調べた。
		お腹がグーと鳴った。
		</body>
	</html>

ここまで書けたら、これはもう立派なHTML文書なので、拡張子を「curry.html」に変更してOSにHTMLファイルとして認識させましょう。

なお最初から「curry.html」にしても何の問題もありません。

HTMLファイルを見てみよう

このHTMLファイルはかなり雑ではありますが、きちんとHTML文書として使えます。

ブラウザを起動して、「ファイルを開く」か「アドレス欄にローカルファイルを指定する」か「ファイルをドラッグしてぶち込む」かしてHTMLファイルを読み込ませましょう。

HTML文書が見れた

あまりHTMLっぽくは見えませんが、ブラウザはちゃんとHTMLファイルとして処理しているはずです。

念の為サンプルを用意しておきました。

サンプル

なお、ソースコードの改行がブラウザ表示に反映されていませんが、これについてはHTMLの改行とソースをご覧ください。

HTMLで見出し情報を付けてみよう

今まで使ったHTML要素はどちらかというと下準備的なタイプです。ここからはブラウザによって具体的に表現されるタグを付けていきましょう。

まずは見出しを表現してみましょう。新聞などの見出しを見たことはありますか？ほかの文字よりも大きく太く、目立っているのが見出しです。一般的なブラウザもそのように表現してくれます。

見出しにはh1〜h6までの強さがあり、<h1>が一番強く表現されます。ここでは一番強い見出しである<h1>をマークアップしてみましょう。

	<!DOCTYPE html>
	<html>
		<head></head>
		<body>
		<h1>カレー</h1>
		Googleでカレーを調べた。
		お腹がグーと鳴った。
		</body>
	</html>

HTMLファイルをブラウザで見てみましょう。見出しっぽく太くなって行間隔が大きく表現されていたら成功です。

サンプル

HTMLでテキストに特徴を付けてみよう

コンテンツに<em>を付けると強調を示します。また<strong>を付けると強い重要性や深刻性を示します。<i>は変調を与え、<s>は不正確性や無関係性を示します。

ほかにもいろいろなタグがありますが、ここでは<em>を使って文中の「カレー」という単語を強調し、<i>を使ってグーという擬音語に変調を与えてみましょう。

	<!DOCTYPE html>
	<html>
		<head></head>
		<body>
		<h1>カレー</h1>
		Googleで<em>カレー</em>を調べた。
		お腹が<i>グー<i>と鳴った。
		</body>
	</html>

ブラウザで編集したHTMLを確認してみましょう。

サンプル

ブラウザによって太字や斜体になったりと、表現方法が違うかもしれません。

HTMLでリンクを作ってみよう

今度は<a>を使ってリンクを作ってみましょう。

	<!DOCTYPE html>
	<html>
		<head></head>
		<body>
		<h1>カレー</h1>
		<a href="https://www.google.co.jp">Google</a>で<em>カレー</em>を調べた。
		お腹が<i>グー<i>と鳴った。
		</body>
	</html>

<a>は今までのタグより少し複雑なつくりになっています。

<a href="URL" >テキスト</a>

「href」のように、HTML要素にはそのHTML要素にまつわる付加情報を含ませることができます。これを「属性」と呼び、属性はそのHTML要素によって決まっています。

そして、<a>にはリンク先アドレスを示す「href」という属性を付けることができます。

まとめると、属性を持つ要素は次のようなつくりになっています。

<タグ名属性名="属性値">コンテンツ</タグ名>

編集して上書き保存したらブラウザを更新してみましょう。マークアップしたテキストがリンクとして表示され、クリックしてそのページが表示されれば成功です。

サンプル

<head>に文書情報を追加してみよう

headに追加できる要素はいくつも用意されていますが、とりあえずWebページのタイトルと文字コードを追加してみましょう。

	<!DOCTYPE html>
	<html>
		<head>
			カレーを調べた
			
		</head>
		<body>
		<h1>カレー</h1>
		<a href="https://www.google.co.jp">Google</a>で<em>カレー</em>を調べた。
		お腹が<i>グー<i>と鳴った。
		</body>
	</html>

<head>は<body>の前に書くのが基本ですが、<head>内の各要素の順番は適当で構いません。

<title>はWebページのタイトルを示します。大抵のブラウザは<title>の内容をタブ欄に表示します。また、検索エンジンは検索結果に<title>の内容を表示することがあります。

サンプル

コメントを書いてみよう

プログラミングでのコメントとは、発言やメッセージすることではなくてソースコード内のメモのことです。コメントを使うとコードとして処理されません。

	<!DOCTYPE html>
	<html>
		<head>
			
			カレーを調べた
			
		</head>
		<body>
		<h1>カレー</h1>
		<a href="https://www.google.co.jp">Google</a>で<em>カレー</em>を調べた。
		お腹が<i>グー<i>と鳴った。
		
		</body>
	</html>

HTMLでコメントを書くにはこのように「」の間に書きます。

サンプル

さいごに

今回の実習はここまでです。

HTMLの作り方はとても簡単なことがわかりましたか？

HTML要素は他にもたくさんあります。どんどん書いてどんどん使えるようになりましょう。