HTML

文書に関する情報を設定しよう

headタグ内で文書情報に関する設定を行っていきます。

  • 文字コード
  • title
  • favicon
  • description

文字コード

・headタグの中身についてみていきます。前回説明したとおりここにはHPの情報を入れて行きます。

・いろいろな情報を書いていくことができますが今回は文字化けしないためのコードとタイトル、アイコン、HPの説明などの書き方をみていきます

・まずは文字化けしないようにするための文字コードについてです。

・meta タグを使えば良くて charset="utf-8" としてあげてください.

・文字コードは、コンピュータがどの種類の文字セットを使うかという指定になります。昔はいろいろ種類があったのですが、最近だと UTF-8 に統一されつつあるので

title

・次にタイトルの設定です。ブラウザの上部に常に表示されている部分で店名やサイト名などをここに入れていきます。

・タイトルタブを使えばいいです。<title>Teatree Web</title>というように書いて行けばおkです。

favicon

・faviconはタイトル横に表示されるアイコンです。

・実は Chrome では favicon.ico というファイルがあれば自動的にこちらのタブのアイコンにしてくれたりもするのですが、明示的にアイコンを表示させるためのタグを書いておいたほうが良いでしょう。

・link タグを使ってあげます。rel 属性を icon としつつ、 favicon のファイル名は href 属性に指定してあげてください。

・ファイル構成を確認して favicon.icoを探します。今回の場合はindex.html と同じ階層にあるのでhref 属性にはそのまま favicon.ico と書いてあげれば OK です。

・.ico の形式のファイルの作り方は少し特殊なので、興味がある人は「favicon 作り方」などで検索して調べてみると良いかと思います。

description

・HPサイトの説明をするためには meta タグを使ってあげます。説明は、将来的にこちらのページをインターネットに公開したときに検索エンジンが説明用の文章として使うこともあります。

・name 属性を description 、そして説明自体は content 属性に書いてあげれば OK です。

<meta name="description" content="Teatree Web 公式サイトです。">というように書いていけばいいでしょう。

 

 





-HTML