ヘッダーエリアの作成

テンプレートができたら、ヘッダーエリアを作っていきます。
まず、キャッチフレーズは、新聞で言うと一面の大見出しに相当しますので、<h1>タグで記述するのが適切です。
テンプレートの<header>と</header>の間に記述します。
次にロゴです。ロゴは画像ファイルを用意し、<img>タグを使って記述します。

<img src= “(画像のURL)” alt=”(画像タイトル)”>

src属性には、HTMLファイルから見た画像ファイルのパスを、フォルダ階層の区切りに「/」を使って記述します。
このように、「http~~~」からではなく、記述元のファイルから見た相対的なパスで指定する方法を“相対パス”と言います。alt属性には、何の画像なのかを表す文章を記述します。
記述しなくてもエラーにはなりませんが、なるべく記述しましょう。

ところで、ロゴは表示するだけでなく、クリックするとトップページにリンクするようにしなければなりません。
リンクを貼るには<a>タグを使います。
<a>と</a>の間に、リンクにしたい文字や画像を入れます。

<a href=”(トップページのファイル名)”>
<img src=”(画像のURL)” alt=”(画像タイトル)”>
</a>

リンク先のURLはくa> タグのhref属性に指定します。
URLというと「http://~~~」という書式を想像されると思いますが、相対パスで記述すると「http://~~~」から書く必要はありません。
このホームページでは全てのページのHTMLファイルを同じフォルダに配置しますので、ファイル名よりも手前の部分は省略することができるのです。

例:<img src=”img/logo.png” alt=”ロゴ”>

また、トップページのファイル名を「index.html」とした時には、
<a href=”index.html”>~~~く/ a>となります。
こうすると、<img>タグは<a>タグに図まれてHTMLの階層が1階層下がりますので、上記のようにTabキーで字下げ(インデント)をしておきましょう。

そして、フッターの作成の際もそうですが、内側に表示するものを1つ1つ“四角形のボックスに入れていくような感覚で枠を書いていくと、それがHTMLの階層構造になります。
コツは、外側から内側へと段階的に枠を書いていくことです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です