読者です 読者をやめる 読者になる 読者になる

HTMLの勉強|Webサイト作りの基礎

初心者向けの向けのHTMLの勉強の仕方を綴っていきます。かくいう私もWebサイト作りの初心者です笑

headには何を書けば良いのかを勉強しましょう!part1

今回は、headについての勉強です。

headについての勉強は今回と、次回の2回を予定しています。

headタグについては、以前も勉強したことがありますが、今回と次回は以前よりも丁寧にお伝えします。

それでは、headタグには何を書けば良いのかを勉強してみましょう。

head部
  • UA(user agent)が表示するための必要な条件とページの目的、そして外部との関連づけを記述する
  • あくまでもブラウザが理解するための部分
  • 不可視(非表示)

 

現在のインターネットの利用の仕方は、ほぼ「検索」から始まります。

つまり、検索対象になるWebページを作成しない限り、見られることはないということです。

 

では「検索」は、何を検索するのか?

検索エンジンのサーバーに記録してあるデーターから検索します。

インターネットの世界にある「ありとあらゆるデータ」から検索されるわけではありません。

 

この「検索エンジンのサーバーに記録されること」を、インデックスと呼びます。

 

この「インデックス」をされるためには、HTML文書内の「head部」と「body部」のバランスが必要になります。

 

DTD

  • Document Type Definition(文書型定義、DTD)とは、文書構造(文書型)を定義するためのスキーマ言語の一つ
  • ごくごく簡単なDTDの説明
  • Strict(厳密型)、Transitional(移行型)、Frameset(フレーム設定型)の三種類がある - 詳細はテキストに入ってから解説します
  • 記述する位置は、ドキュメントの最上位部



HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<htmllang="ja">
<head>
<title>ページタイトル</title>
</head>
<body>
<p>内容</p>
</body>
</html>

 

XHTML 1.0 Transitional
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"lang="ja" xml:lang="ja">
<head>
<title>ページタイトル</title>
</head>
<body>
<p>内容</p>
</body>
</html>
  • XML宣言」は、IE6対策として記述しない場合もあります。

 

HTML5
<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<p>内容</p>
</body>
</html>

 

XHTMLでの記述

  • 2012年末の時点で主流の文書型です(HTML5は限定的)

 

XML宣言(必須)
<?xml version="1.0" encoding="UTF-8"?>

省略する場合もあります。(IE6対策のときに説明します。)

エンコードタイプが「UTF-8」のときのみです。

 

DTD(Document Type Definition)DOCTYPE宣言
  • 厳密な記述を目指していました
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • 現在では、Transitional(移行型)に落ち着いています
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

名前空間(xmlns)と言語コードxml:lang)を指定する
  • xmlns:xml name space
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"lang="ja">

 

XML言語は、データを管理するのには適しています。

メリットは、自由な名前を付けて管理しやすくできることです。

そのルールを規定しているのが「名前空間」です。

そのルールに則って名前を付けますよ。という意味になります。

 

HTMLとXHTMLの記述上の違い

  • 要素名、属性名は小文字で記述する
  • 必ず開始タグ・終了タグのセットで記述する(できない場合(非空要素)は、「 /」半角空き+スラッシュで閉じる)
  • meta、hr、br、img などは、空要素として書く
  • ‘id’および‘name’属性をもつ要素は、‘id’属性を使用する

 

<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8" />
<metahttp-equiv="Content-Style-Type"content="text/css" />

 

外部リンク

rel:relative 関係性(HTMLドキュメントに対しCSSファイル)

 

<linkhref="base.css"rel="stylesheet"type="text/css"media="screen, print" />

 

「media属性」は「screen, print」場合によって「tv」を追加します。

※「media="all"」は、旧ブラウザにCSSファイルを認識させないための指定で、現在のようにPCサイトを携帯キャリア(ガラパゴス)で見る場合などに、大きい画像を読み込ませないようにするために使用しません。

 

HTML5

  • XHTMLより簡潔な記述が可能
  • 授業の中では、この記述を基本とします

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>ホームページ</title>
</head>
<body>
<p>内容</p>
</body>
</html>

 

meta

  • Metainformation(メタ情報)の略
  • 「超~」「高次~」「~の間の」「~の後ろの」「~を含む」などの意味を持つ英語の接頭辞
  • metaphorが語源
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<metahttp-equiv="Content-Style-Type"content="text/css">
<metahttp-equiv="Content-Script-Type"content="text/javascript">
<metaname="description"content="サンプル">
<metaname="keywords"content="キーワード1,キーワード2,キーワード3">

 

HTML5の場合
  • 「http-equiv」を自明として省略します
  • 「keywords」も基本的には省略しますが、おまじないとして残すこともあります
<metacharset="UTF-8">
<metaname="description"content="ページの内容を説明する文章">
<metaname="keywords"content="キーワード1,キーワード2,キーワード3">