PHPはHTMLと親和性が高く、HTMLの中にPHPモードとして記述したり、PHPからHTMLを出力したりします。そのため、まずHTMLの基本的な書き方について解説します。
文字化けを防ぐために文字コードを設定しよう
日本語を扱う文字コードには、Shift_JIS、EUC-JP、UTF-8などいくつかの規格があります。そのため、作成したファイルの文字コードとサーバ側の文字コードが同じでないとブラウザで表示したときに文字が正しく表示されない場合があります。この状態を「文字化け」といいます。
例えば、「こんにちは」と入力した場合に、「縺薙ｓ縺ｫ縺｡縺ｯ」や「 ����� 」などと表示されることです。
これを防ぐには「文字コード」を正しく設定する必要があります。Googleによると、多くのWebサイトがUTF-8を使っているようです。UTF-8は世界で使われているさまざまな国の文字を扱える文字コードとして考えられた「Unicode」という規格にひとつです。世界で標準となっているUTF-8で作成すれば文字化けの心配はないといえます。
文字コードはどこで設定すればいいの？
文字コードは次の2か所で設定します。
- HTMLとPHPのファイルを作成するテキストエディタの設定
- サーバ側のPHPの設定
PHP5.6以降は初期値がUTF-8に変更されているので、実際にはエディタの設定だけに気をつければいいでしょう。
HTMLの書き方
HTMLとは「HyperText Markup Language」の略で、ブラウザが文字や画像をWebページに表示させるための書式です。HTMLを書くためにはルールがあり、決められたルールどおりに書けば簡単にWebページを作成できます。しかし、ルールを間違えると正しく表示されません。
基本的な構文は次のようになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webページのタイトル</title>
</head>
<body>
<h1>大見出し</h1>
<p>本文をここに書きます。</p>
</body>
</html>
HTMLは2つのエリアに分かれている
HTMLはヘッダ部分とボディ部分の2つに分かれています。ヘッダ部分ではページタイトルや文字コードなどの情報を記述する部分です。<title>タグに書いた内容はブラウザのタブに表示されますが、それ以外は表示されません。ボディ部分には、Webページに表示する内容を書きます。
見出しタグは数字が重要度を表している
<h1>の「1」という数字は見出しの重要度を表しています。<h1>が文書の見出し、<h2>が章の見出し、<h3>が節の見出しといった具合に数字を変えることで、表示される文字の大きさも変わり、重要度も下がります。
HTMLタグの例
Webページの制作には、いくつかのタグを覚えなければなりません。その主な例をいくつかご紹介します。
<p>タグ
段落を分けるのに利用されるのが、Paragraph（段落）を意味する<p>タグです。<p>～</p>で囲まれた部分を1つの段落として表示できます。
<table>タグ
表を作成するのに使われるのが<table>タグです。 <table>タグの中で、行を示す<tr>タグでタイトル行のセルである<th>タグや、セルを表す<td>タグを囲むことで表の行を作成できます。
<table width="200" border="1">
<tbody>
<tr>
<th scope="col">氏名</th>
<th scope="col">国語</th>
<th scope="col">算数</th>
</tr>
<tr>
<th scope="row">田中</th>
<td>78点</td>
<td>72点</td>
</tr>
<tr>
<th scope="row">山田</th>
<td>64点</td>
<td>86点</td>
</tr>
</tbody>
</table>
| 氏名 | 国語 | 算数 |
|---|---|---|
| 田中 | 78点 | 72点 |
| 山田 | 64点 | 86点 |
<a>タグ
リンクの作成には<a>タグを使います。
<a href="リンク先のURL">リンクとして表示するテキスト</a>
<img>タグ
画像の表示には<img>タグを使います。
<img src="画像のパス" alt="画像の説明のテキスト">
このほかにも、Webページを作成するためには、HTMLのさまざまなタグを覚えなければいけません。
次回は、作成したファイルのサーバへの設定方法について解説します。
Follow me!
