ホームページイメージ

ホームページを作ろう!

ホームページの作成

ホームページの内容を記載する

さて、先ほどまでの作業でホームページの骨組みは出来上がりました。
まずは保存されたファイルをダブルクリックして開いてみてください。インターネットエクスプローラで真っ白なページが開かれれば大丈夫です。文字が表示されている場合はタグの記述に誤りがある可能性があるので、テキストエディタで開いて修正しておきましょう。

次は実際にページの中に文字や画像などの内容を記載していく作業をしていきましょう。
index.html をテキストエディタで開いて、赤字青字の部分を追記してあげてください。
赤字はタグや実際にページには表示されない部分です。
青字が実際に文字としてページに表示される部分になります。

<html>

<head>

<title>お花のホームページ</title>

</head>

<body>
<h1>お花のホームページへようこそ</h1>
<img src="hana.jpg">
<p>
花の画像です。とても<font color="red">キレイ</font>ですね。
<br>
<a href="sub1.html">
次へ</a>
</p>

</body>

</html>

それぞれのタグの意味↓

<h1></h1>
ページ内にある文章の見出しです。見出しは h1~h6 まであり、数字が小さいほど見出しのレベルは上になって文字のサイズも大きくなります。今回は h1 なので大見出しって感じですね。
<img>
ページの中に画像を読み込んで表示させるタグです。 src の部分を属性といいます。属性は、タグの細かな設定を指定するときに使う記述です。今回の場合であれば、読み込んでくる画像が何というファイル名かを指定しています。
<p></p>
段落の意味を持つタグです。上の HTML では <p>~</p> 間にある「花の画像です~次へ」までが一つの段落という扱いになっています。
<font></font>
文字の大きさや色などを指定するタグです。上の文章では color 属性を使って「キレイ」という文字を赤色に指定しています。<font></font>で挟まれた部分が影響を受けます。
<br>
改行させるタグです。
<a></a>
HTML の特徴とも言えるリンクを指定するタグです。<a> だけで使うことはほとんど無く、href 属性でリンク先のページを指定してセットで使うのが一般的な使い方です。リンク先はページだけでなく画像やその他のファイルを指定することもできます。上の文章では sub1.html に対してリンクするように設定しています。