Webを支える技術を読んでのメモ #2

HTMLとは

メディアタイプ

HTMLのメディアタイプには、「text/html」と「application/xhtml+xml」の2種類ある。「text/html」は、SGMLベースのHTMLを、「application/xhtml+xml」はXMLベースのXHTMLを示す

HTMLの構成要素

ヘッダ

要素 意味
title 文書のタイトル
link 他のリソースへのリンク
script JavaCcriptなどのクライアントサイドプログラム
meta その他のメタデータ

ボディ(ブロックレベル要素)

要素 意味
h1,h2,h3,h4,h5,h6 見出し
dl,ul,ol リスト
div ブロックレベル要素のグループ化
p 段落
address アドレス情報
pre 整形済みテキスト
table
form フォーム
blockquote 引用

ボディ(インライン要素)

要素 意味
em 強調
strong 強い強調
dfn 定義語
code ソースコード
samp
abbr WWW,HTMLなどの省略系

リンク

ハイパーメディアフォーマットととしてのHTML

  • <a>要素 アンカー

htmlでは他のWebページにリンクするためにアンカータグで<a>要素を使います<a>要素の内容のことを「アンカーテキスト」と呼びます

詳細な情報は<a href="http://gihyo.jp">技術評論社のWebページ</a>を参照してください

  • <link>要素

<a>要素はHTMLのブロック要素の中で別のwebページにリンクするために使いましたが、<link>要素はhtmlのヘッダでwebページ同士の関係を指定するために使います。rel属性はリンクの意味を示す

<head>
     <link rel="index" href="http://example.jp/index.html"/>
     <link rel="prev" href="http://example.jp/1.html"/>
     <link rel="next" href="http://example.jp/3.html"/>  
</head>
  • オブジェクトの埋め込み

HTMLはハイパーメディアなので、テキストだけではなく画像や映像などもうめこむ。歴史的経緯により一般的には画像の埋め込みには<img>要素をそれ以外のオブジェクトの埋め込みには<object>要素を利用する

<img src="http://example.jp/children.png" alt="子供たちの写真"/>
<object data="http://example.jp/children.mpeg">子供たちの動画</object>
  • フォーム

<a>要素や<link>要素とは少し異なるリンクの実現手段としてフォームがある。htmlのフォームではリンク先のURIに対してGETとPOSTが発行できる。

  • フォムによるGET

フォームによるGETは、キーワード検索などユーザーからの入力によってURIを生成する時に利用する。例をみてみましょう。

<html xmlns="http://www.w3.org/1999/xhtml">
  <head><title>form test</title></head>
  <body>
     <form method="GET" action="http://example.jp/search">
       <p>キーワード:
          <input type="text" id="q" name="q"/>
          <input type="submit" id="submit" name="submit" value="検索"/></p>
     </form>
  </body>
</html>

フォームの基本構造は、<form>要素とその中に入るフォームコントロール要素です。フォームコントロール要素にはテキスト入力(input type=“text")やラジオボタン(input type = "radio")、セレクトボックスなどがあります。フォームはターゲットとなるURIを持ちます。ターゲットとなるURIはフォーム要素のactin属性で指定します。この場合は"http://example.jp/search"です。フォームを利用した結果はターゲットURIに送られます。その時に用いるメッソドはフォーム要素のmethod属性で指定します。この属性の値はGETまたはPOSTになります。method属性の値がGETの場合、ターゲットURIとフォームへの入力結果からリンク先のURIを生成します。例えば、上記の例でid属性の値がqのテキスト入力に「test」を入力した場合、http://example.jp/search?q=testというURIを生成します。クエリパラメータの名前(この例ではq)はinput要素のid属性の値となる。生成するURIはユーザからの入力によって決まるため、どのようなキーワードのURIでも生成できます。URLを生成するといっても、クライアントはサーバーが用意するフォームにしたがってURIを構築している点に注意してください。もしサーバー側の実装を変更し、検索パラメータを追加した場合は、フォームに新たなパラメータを埋め込んでクライアントに配布することで解決します。クライアント側でURIを想像して勝手に組み立てている場合は、ここのクライアントの実装ごとにパラメータを追加しなければなりませんが、サーバ側が提供するフォームが変更になるのであれば、全てのクライアントが同時に新しい検索パラメータに対応できます。

  • フォームによるPOST

<a>要素や<link>要素でのリンクはGETしか発行できませんでしたが、フォームでのリンクはPOSTも発行できます。POSTはリソースの作成など、ユーザーの入力をターゲットURIに送信する時に利用します。method属性の値がPOSTの例をみてみましょう。

<html xmlns="http://www.w3.org/1999/xhtml">
  <head><title>form test</title></head>
  <body>
     <form method="POST" action="http://example.jp/search">
       <p>題名:<input type="text" id="title" name="title"/><br/>
              著者:<input type="text" id="author" name="author"/><br/> 
          <input type="text" id="q" name="q"/>
          <input type="submit" id="submit" name="submit" value="検索"/></p>
     </form>
  </body>
</html>

method属性がPOSTの場合ターゲットURIにたいしてPOSTを発行します。例えば上記題名に「test-title」、著者に「test-author」と入力した場合のリクエストメッセージは次のようになります。

POST /article HTTP/1.1
Host:example.jp
Content-Type: application/x-www-form-urlencodeed

tilte =test-title&author=test-author

リクエストメッセージのボディにはapplicaiton/x-www-form-urlencoded形式でフォームの内容が入っています

  • rel属性

<a>要素と<link>要素はそれぞれrel属性をモテます。rel属性の値にはリンク元のリソースとリンク先のリソースがどのような関係にあるかを記述します。rel属性の値のことを「リンク関係」と呼びます。HTMLでもっともよく使われるリンク関係は「stylesheet」でしょう。このリンク関係は、元のHTMLリソースを外部の CSSリソースにリンクする時に使います。

まとめ

  • HTMLは文書の構造を表現する面とリソースがリンクすることでハイパーメディアフォーマットとしての面がある

  • 構造の表現方法(記述方法)、ハイパーメディアフォーマットの表現方法(記述方法)について、教科書的には理解できたが、実務的には網羅仕切れていないの引き続き勉強

  • HTTPとURI、ハイパーメディアによるリンクの組み合わせによりWebが成り立つ