PHPstep

トップページ > PHPを始めよう > HTMLを簡単に知っておこう

第一章 PHPを始めよう

HTMLを簡単に知っておこう

ウェブページはHTMLという言語で作成します。 高度なウェブアプリケーションを開発する場合にも、ウェブの基本はHTMLです。 このページでは、HTMLについて簡単に解説します。

ウェブページはHTMLとCSSでつくる

ウェブページはHTML(HyperText Markup Language)という言語で作成します。 そして、HTMLで作成したウェブページをどのようなスタイルで表示・出力するのかを、 CSS(Cascading Style Sheets)という言語で指定します。 ウェブページは、基本的にはHTMLとCSSで作成するのです。

HTMLとCSSでは出来ることに限界があるため、 高機能なウェブアプリケーションを作成する際にはPHPのようなプログラムが必要となるのですが、 HTMLとCSSをまったく使わずにPHPだけでウェブ制作することは基本的にはありません。 そこで、PHPによるプログラミングを始める前に、HTMLとCSSについて簡単に知っておきましょう。

HTMLファイルを作成してみよう

HTMLを理解するために、HTMLファイルを作成してみましょう。 HTMLファイルはテキストエディタで作成します。 使用されているテキストエディタを立ち上げてください。

このレッスンでは、テキストエディタとしてTeraPadを使用したサンプル画面を掲載していますが、 それ以外のテキストエディタやウェブ制作ソフトを使用している方はそれと読み替えてください。

テキストエディタのメニューの中から[ファイル]→[新規作成]と選択してください。

【図】

TeraPadの画面内には、[EOF]という文字が表示されているかもしれません。 これはEnd Of Fileの略で、このファイルの内容の終端であることを示しています。 ファイルの先頭行にいきなり[EOF]が表示されているということは、 つまりこのファイルにはまだ何も記述されていないことを意味しています。

理屈抜きに打ち込んでみよう

新規作成したファイルに以下の内容を記述してください。 それぞれの行の意味が分からない場合にも、まずは理屈抜きに以下の通りに打ち込んでください。

タグやプログラム部分には全角文字は使用せず、すべて半角で入力します。 DOCTYPEは半角大文字、htmlは半角小文字といった具合に大文字と小文字もきちんと区別して入力してください。 スペースも全角ではなく半角で入力します。 全角で入力するとうまく表示されないので注意してください。

test.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ウェブページを作ろう</title> </head> <body> <p> ウェブページを作りました!</p> </body> </html>

入力が完了したら、TeraPadの上部メニューの中から[ファイル]→[名前を付けて保存]と選択してください。 ファイル名は「test.html」として保存します。 ファイル名の「test」の部分はどんな名前でも良いのですが、拡張子は必ず「.html」としてください。 拡張子「.html」は、そのファイルがHTMLファイルであることを表します。

【図】

保存場所はどこでも構いません。 お使いのパソコン内の分かりやすい場所に保存してください。

どこでも構わないと言われても良く分らないという場合には、 デスクトップに保存しておくと分かりやすいかもしれません。 保存場所は、後から移動させることもできます。

ブラウザで表示確認してみよう

いま作成したhtmlファイルをブラウザで表示確認してみましょう。 標準的なパソコンならtest.htmlをダブルクリックするとブラウザが自動的に起動するはずです。

【図】

サンプルページを別画面で開く

上記の画面のように「ウェブページを作りました!」と表示されれば成功です。

HTMLの書き方

いま作成したtest.htmlのHTMLソースを確認しながら、HTMLへの理解を深めていきましょう。

HTML文書は、以下のようにおおまかに分けることができます。

【図】

HTMLのバージョンを宣言する部分

HTMLのバージョンを宣言する部分では、その文書で使用するHTMLのバージョンを宣言します。

<!DOCTYPE html>

上記の <!DOCTYPE html> という記述形式は、このHTML文書がHTML5の仕様に準拠したものであることを表しています。 HTMLにはバージョンがあり、2014年10月28日にHTML5が標準仕様として勧告されました。 HTML5は、2015年現在におけるHTMLの最新バージョンです。

HTML文書を開始する<html>タグ

HTMLのバージョンを宣言したら、html要素の開始タグでHTML文書を始めます。

<html>

html要素はHTML文書の最上位となる要素で、木の根っこになぞらえてルート要素と呼ばれることもあります。 あとに続く要素は、すべてhtml要素の子孫となります。

HTML文書は、html要素を根っことして、その直接の子要素にhead要素とbody要素を配置して、 さらに枝分かれして孫要素を配置するツリー構造になっています。

【図】

HTML文書のヘッダ部分<head>~</head>

ヘッダ部分は<head>~</head>で囲まれた範囲で、その文書の文字コードやタイトルなど、文書に関するヘッダ情報を示します。

<head>
<meta charset="UTF-8">
<title>ウェブページを作ろう</title>
</head>

ヘッダ情報のほとんどは、目に見えるかたちでブラウザ上には表示されませんが、 どのような文書であるかをブラウザや検索エンジンなどに知らせるための大切な情報です。

HTML文書のボディ部分

ボディ部分は<body>~</body>で囲まれた範囲で、その文書の本体になります。 この部分に書かれた内容が、ブラウザ上に表示されます。

<body>
<p>ウェブページを作りました!</p>
</body>

HTMLでは、HTMLタグと呼ばれる書き方で情報の意味を明確にします。 具体的には、テキストや画像などの情報を <開始タグ>~</終了タグ> で囲むことで、 囲まれた部分がどのような意味を持っているのかを指定します。

例えば、 <p>ウェブページを作りました!</p> の部分は、 「ウェブページを作りました!」というテキストを <p>~</p> で囲むことで、 この部分が段落(パラグラフ)を表すp要素であると指定しています。 HTMLは、HTMLタグを使用して情報の意味付けをする言語なのです。

HTML文書を終了する</html>タグ

HTML文書の最後はhtml要素の終了タグで閉じます。

</html>

以上、HTMLについて簡単に紹介しました。 HTMLのすべてを解説できたわけではありませんが、 テキストや画像などの情報に意味付けをするというHTMLの基本的な役割と、 <開始タグ>~</終了タグ> で囲むというHTMLタグの基本的な使い方を知っておいてください。