ウェブサイトの“書き方”④~ホームページを作る

June 6th,2015
ホームページを作る
ホームページ
今回は“ホームページ”を作っていきます。
前置き編で説明したとおり、“ホームページ”は“トップページ”などとも呼ばれますが、ウェブサイトの中で一番最初に閲覧されることを意図した“ウェブページ”です。
まずはじめにファイルを作ります。
ファイルの作り方は『ウェブサイトの“書き方”②~ファイルとフォルダを準備する』で説明したとおりです。
ただし、HTML文書のファイル名は“index.html”にします。
“index.html”とは?
たとえば、
http://www.example.com/
というウェブサイトがあったとします。
URLにHTML文書のファイル名が含まれていませんが、アクセスした場合ホームページが開かれるはずです。
これは、一般的には、URLにファイル名が含まれない場合はサーバーが“index.html”を探して開くように設定されているからです。
index.html”がない場合は“index.htm”や“index.php”などを探しますが、それもない場合は“403 Forbidden”などとエラーページが出たり、サーバー上にあるファイルの一覧が表示されてしまう場合もあります。
絶対に“index.html”以外のファイル名にしてはいけないわけではありませんが、このようなことがあることを理解しておきましょう。
“一般的に”なので設定によって変えられる場合もあります。
また、レンタルサーバーのサービスによって違う場合もありますので、ウェブサイトを実際に形にしてアップロードするときには確認しておきましょう。
ホームページを編集する
何度も取り上げているHTML文書の基本の形です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文書のタイトル</title>
</head>
<body>

文書の内容

</body>
</html>
まずはウェブページのタイトルを書きます。
ウェブページのタイトルは“<title>”タグで示します。
ホームページのタイトルはウェブサイト自体のタイトルをつける場合が多いです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>果物を食べる</title>
</head>
<body>

文書の内容

</body>
</html>
あとは“<body>”タグの中にウェブページの内容を作っていきます。
とりあえず文字だけ書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>果物を食べる</title>
</head>
<body>

果物を食べる
美味しいフルーツについて紹介していきます。

メニュー
りんご
もも
バナナ
マンゴスチン
リンク
連絡先

&copy; copyright 2015 Frouts wo taberu

</body>
</html>
マークアップで使われる記号(“<”や“>”など)や特殊な記号(“©”、“♣”、“♪”など)を書く場合は“文字参照”という方法を使用する必要があります。
なぜ“文字参照”しなければならないかというと、“<”や“>”はそのまま書くとタグの一部として誤認される場合があるからです。
また、“©”なども文字参照しないと文字エンコーディングによっては文字化けする可能性があります。
“<”は“&lt;”、“>”は“&gt;”などと書き、“©”は“&copy;”と書きます。
内容が書けたら、タグで“目印”をつけていきます。
下が“目印”をつけた例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>果物を食べる</title>
</head>
<body>

<h1>果物を食べる</h1>
<p>美味しいフルーツについて紹介していきます。</p>

<h2>メニュー</h2>
<ul>
<li>りんご</li>
<li>もも</li>
<li>バナナ</li>
<li>マンゴスチン</li>
<li>リンク</li>
<li>連絡先</li>
</ul>

<p>&copy; copyright 2015 Frouts wo taberu</p>

</body>
</html>
まず、“<h1>”タグを使用してウェブページの見出しをつけています。
ここではウェブサイト自体の名前を見出しにしています。
そのあとにウェブサイトの簡単な説明文を書いています。ここでは段落を表す“<p>”タグを使用しています。
<h2>”タグは“<h1>”タグと同様見出しを表します。
見出しを表すタグは“<h1>”から“<h6>”まであって、番号は見出しのランクを意味します。
つまり、“<h2>”をつけた見出しは“<h1>”を付けた見出しよりランクが一つ下になります。
続いて、このウェブサイトのコンテンツの一覧を書いています。
ここではリストを表す、“<ul>”タグを使用しています。
リストの項目は“<ul>”タグの中に“<li>”タグを使用して並べていきます。
また、HTML文書では、“<p>”タグなど自動的に改行されるタグを使っているか、“<br>”タグで改行場所を指定していない場合以外、改行はブラウザ上では無視されるので注意が必要です。
ホームページが形になったらブラウザで開いてみましょう。
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク