サーバーを立ててWEBサービスを作ろう!

とりあえずHTMLが出来ないと話にならない

 さて、実際にウェブサービスを作っていくとなるとまず、HTMLという物を理解していかなくては話になりません。CSSというデザインを携わる部分に関しては最近のプログラマーでもBootstrapのようなCSSフレームワークを利用していることが殆どですが、実際にどのように表示するのかという部分はちゃんとHTMLで書けるようにならなくてはいけません。といっても、このHTMLはほとんどまるまる覚えるだけで直にマスターしてしまえるので、九九を覚えるのより簡単だと思って頂ければ、安心してスタートできるのではないでしょうか? ここではそんなHTMLに関することをちょっとだけ紹介いたします。

そもそもHTMLとは?

 HTMLはHyperTextMarkupLanguage(ハイパーテキストマークアップランゲージ)の頭文字をとった言葉で、ウェブ上の文書を記述するためのマークアップ言語として利用されています。マークアップ言語と聞いてピンとこない人もいるかもしれませんが、今ではウェブの基幹的役割を持つ技術の一つになっており、ほかのドキュメントへのハイパーリンクを設定できるハイパーテキストなども含めて、画像・リスト・表等の高度な表現力を持つ。

 現在は、WHATWGにより仕様が作られ、それを元にW3Cにより勧告が行われるという流れで、より強力なものへと進化していっています。またW3Cは、XMLベースの規格であるXHTMLの勧告も行っています。

HTMLの特性は?

 HTMLの特性はハイパーテキストを利用した、相互間文書参照のフレームワークです。それぞれのページをリンクによって関連付けてつなげ、元々は研究結果などといった紙面を効率的に管理する為の仕組みの一つでした。現在は引用や画像の埋め込み、だけでなく動画などの埋め込みによって、エンターテイメントとしての利用の幅も大きくなってきています。

 その大まかな特徴として文書のタイトルの指定等を定める要素を記載すればユーザエージェントがそれらを解釈し形態に見合った表示を行うというところがあります。

 文書の詳細の一部分に「段落」や「章題」や「強調したい箇所」等、文章中での意味を付加する要素の殆どは開始タグ、意味を付加したい部分、終了タグの形で構成されます。開始タグ・終了タグはそれぞれ「<要素名>」、「</要素名>」のように表現されます。また、meta要素やimg要素やbr要素のように一つのタグだけからなる要素もあります。これらは単体で文書そのものに関してのメタ情報を宣言したり、画像や改行等文字では表現できない文書要素を記述するためのものです。

 要素には必要に応じて、要素に付加する特性を現す属性を記述します。

実際のコーディング

 さて、実際にHTMLでコーディングしていくわけですが、大まかな仕組みは見てみればふんわりとわかってくるようになるかと思います。今回は適当にHTMLで書いたソースを元に、HTMLにどのような要素があるのかを大まかに見て行きましょう。

コーディング例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの書き方</title>
</head>
<body>
<div>
<h1>見出しタグ(h1)</h1>
<p><a href="index.html">トップページのリンク</a>

HTMLは文章をどのブラウザでも同じように見せ、ハイパーテキストを利用してワールドワイドウェブ上で情報を発信するために作られました、<strong>太字にしたり</strong>といった文章の装飾もそうですが、どんな風に段落分けするかなどにも使われます。また、写真の埋め込みや、フォームの作成といった動的な部分をつなぐものとしても利用することが可能です。

  </div>
</body>
</html>
<!--</pre>-->

宣言

まずはじめに宣言について説明します。これは下のように書いていきます。

<!DOCTYPE html>

 つまり、このドキュメントはHTMLで作っていますよという宣言のことです。これをまず、最初に書かなくてはいけません

言語設定

日本語で書いてある文章であれば、日本語だよと宣言することも必要になります。この部分は一番最後の行の綴じタグと対になっています。

<html lang="ja">

日本語文章

</html>

メタタグ

 メタタグとは実際には表示されない様々な要素などを追加するタグです。この場合は文字セットというものをUTF-8というものに設定しています。他にも、キーワードやページの説明なども同じようにメタタグで記述することができます。

<head>
<title>ここがヘッダーエリア</title>
</head>
<body>

ここが本文エリア

</body>

見出しタグ(h1~h6)と本文

 次に出てくるのがこの見出しタグです。特に文章の見出しなどに用いられることが多いタグで、場合によってはタイトルと同じ内容をこの見出しタグのh1というもっとも大きな見出しにいれることがあります。またPタグという本文の段落を表すタグもあります。

<h1>見出しタグ(h1)</h1>
<p>
本文だよ

</p>

 

リンクや装飾

 リンクや装飾を行いたい場合はそれぞれのタグを使うと簡単にできます。

<a href="index.html">トップページのリンク

<strong>太字</strong>

大まかに解説したけれど

 このような様々な機能や用途をもったタグを組み合わせて文章を作っていくのがHTMLというものなのです。他にも入力部品であるinputタグなどもありますが、詳しい内容についてはドットインストールというサイトや、プログラミングの入門なら基礎から学べるProgateというサイトなどで学んでみるといいかと思います。