June 6th,2015
“ホームページ”
今回は“ホームページ”を作っていきます。
一つ目の記事でも触れましたが、“ホームページ”は“トップページ”などとも呼ばれ、ウェブサイトの中で一番最初に見てもらう“ウェブページ”です。ホームページはウェブサイトの“表紙”であるとともに、ウェブサイトのほかのコンテンツへの入口のとなります。
まず、ホームページになるHTMLファイルを作成しますが、この時に保存するHTMLファイルの名前は“index.html”にします。
前の記事で試しに作ったHTMLファイルが残っていれば名前を変更して利用したり、コピーして利用しても構いません。右クリックして「プログラムから開く」からメモ帳を選択することでHTMLファイルが編集できます。
“index.html”とは？
たとえば以下のようなURLのウェブサイトがあるとします。
https://www.example.com
よくある形のウェブサイトのURLですが、実はこのURLはホスト名、一般的にはウェブサイトを配信しているサーバーの名前で、正確には見ているウェブページを指しているものではありません。
https://www.example.com/content.html
ウェブサイトのホームページからほかのページに遷移するとスラッシュ(“/”)の後に文字列が追加されますが、通常はこの文字列がその時見ているウェブページを作っているファイルの名前を表しています。
なぜ一つ目の例のURLでもウェブページが表示されるかというと、通常はURLにファイル名が含まれない場合にどのファイルを表示するかがあらかじめ決められているからです。
ブラウザがファイル名が含まれないURLを表示しようとすると、まず最初にサーバーは“index.html”をブラウザに送って表示させます。なので多くの場合ホームページのHTMLファイルの名前は“index.html”にします。
ホームページを作る
何度も取り上げているHTML文書の基本の形です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文書のタイトル</title>
</head>
<body>
文書の内容
</body>
</html>
まずはウェブページのタイトルを書きます。“<title>”と“</title>”の間がウェブページのタイトルです。ホームページとなるウェブページのタイトルはウェブサイト自体の名前とすることが一般的です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>果物を食べる</title>
</head>
<body>
文書の内容
</body>
</html>
次に“<body>”と“</body>”の間に実際に表示される部分を書いていきます。
まずは文字だけ書いてみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>果物を食べる</title>
</head>
<body>
果物を食べる
美味しいフルーツについて紹介していきます。
メニュー
りんご
もも
バナナ
マンゴスチン
リンク
連絡先
© copyright 2015 Frouts wo taberu
</body>
</html>
次に、HTMLタグでどの部分がどのような機能を持つのか“目印”をつけていきます。
<h1>果物を食べる</h1>
美味しいフルーツについて紹介していきます。
<h2>メニュー<h2>
りんご
もも
バナナ
マンゴスチン
リンク
連絡先
© copyright 2015 Frouts wo taberu
“<h1>”と“<h2>”は見出しを示すタグです。
“<h1>”、“<h2>”、“<h3>”と続き、“<h6>”まであります。
見出しはランク付けすることができ、“<h1>”が一番上のランクの見出し、数字が増えるほどランクが下がります。一般的に文章には章、節、項などというように見出しが付けられますが、HTMLで示す見出しも同様にランクが下の見出しはその前にある上位の見出しに関係する見出しになります。
上の例では最上位の見出しをウェブサイトの名前にしています。
続いて、ウェブサイトのコンテンツの一覧になる部分を、リストを表す“<ul>”で示します。
<h1>果物を食べる</h1>
美味しいフルーツについて紹介していきます。
<h2>メニュー<h2>
<ul>
<li>りんご</li>
<li>もも</li>
<li>バナナ</li>
<li>マンゴスチン</li>
<li>リンク</li>
<li>連絡先</li>
</ul>
© copyright 2015 Frouts wo taberu
“<ul>”はリスト全体を表し、リストの一つ一つの項目は“<li>”で表します。
最後に、“<p>”を使います。“<p>”は“段落”を表しますが、大きな文章のまとまりだけでなくちょっとした文も“<p>”ほとんどの場合囲まれます。
<h1>果物を食べる</h1>
<p>美味しいフルーツについて紹介していきます。</p>
<h2>メニュー<h2>
<ul>
<li>りんご</li>
<li>もも</li>
<li>バナナ</li>
<li>マンゴスチン</li>
<li>リンク</li>
<li>連絡先</li>
</ul>
<p>© copyright 2015 Frouts wo taberu</p>
<!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>© copyright 2015 Frouts wo taberu</p>
</body>
</html>
これで最低限の形ができたのでブラウザで表示してみます。
特にホームページはこういう形にしなければならないといった決まりはないので他のウェブサイトのホームページを見るなどして良いホームページの形を作っていくのが良いでしょう。
