664 views
Webで通信を担当するHTTPとURIは、RESTの統一インターフェース制約により、シンプルに設計される。
それを利用して、WebサービスやWeb APIを作成/設計する。
設計時、使用するのが、ハイパーメディアフォーマット。
本章では、ハイパーメディアフォーマットの「HTML」を扱う。
HTML
HTMLは、HTTP,URIとともにWebの誕生時に生まれた基本技術。
ハイパーメディアを実現している。
HTMLとは
マークアップ言語の一種(タグで文章の構造を表現する)。
※ 処理プログラムを作りやすくする目的でxmlを開発した。
※ この時、xmlベースで改良したのが、XHTML
メディアタイプ
Charsetパラメータを設定する必要がある。基本はUTF-8がよい。
HTMLのメディアタイプには、2種類ある。
- text/html：HTML
- application/xhtml/html：XMLベースのXHTML
拡張子
基本的には、「○○.html」
XMLの基礎知識
<?xml version="1.0" encording="utf-8">
<html xmlns="http://www.aaa/test/xhtml">
<head><title>初めてのHTML</title></head>
<body>
<h1>初めてのHTML</h1>
<br />
<p>HTMLの使用書は、<a href="http://www.w3.org">W3C</a>にあります。</p>
</body>
</hml>
空要素
要素は内容を持たない場合がある。要素を持たない要素のことを「空要素」と呼ぶ。
(例)< br />
属性
要素は、属性を複数持つことができる。
コメント
<!-- コメントはこうやって使用できる -->
XML宣言
<?xml version= "1.0" encoding="utf-8"?>
<html xmlns="......">
.....
</html>
HTMLの構成要素
ヘッダ
<?xml version= "1.0" encoding="utf-8"?>
<html xmlns="......">
<head>
<!-- ここに入れる内容 -->
</head>
</html>
| No | 要素 | 意味 |
|---|---|---|
| 1 | title | 文書のタイトル |
| 2 | link | 他のリソースへのリンク |
| 3 | script | jacaScriptなどのクライアントサイドプログラム |
| 4 | meta | 他のメタデータ |
ボディ
<?xml version= "1.0" encoding="utf-8"?>
<html xmlns="......">
<head>
<!-- -->
</head>
<body>
<!-- ここに入れる内容 -->
</body>
</html>
| No | 要素 | 意味 |
|---|---|---|
| 1 | h1,h2,h3,h4,,, | 見出し |
| 2 | dl,ul,ol | リスト |
| 3 | div | ブロックレベル要素のグループ化 |
| 4 | p | 段落 |
| 5 | address | アドレス情報 |
| 6 | pre | 成形済みテキスト |
| 7 | table | 表 |
| 8 | form | フォーム |
| 9 | blockquote | 引用 |
共通の属性
id属性
文書で一意なID。CSSでスタイルを指定したりするときに使う。
<h5>html</h5><?xml version= "1.0" encoding="utf-8"?>
<html xmlns="......">
<head>
<!-- -->
</head>
<body>
<h1 id="title">タイトル</h1>
</body>
</html>
h1#title{
font-size: 120%
}
class属性
CSSのスタイルを反映するときに使用する。
<h5>html</h5><?xml version= "1.0" encoding="utf-8"?>
<html xmlns="......">
<head>
<!-- -->
</head>
<body>
<p>著者<span class="author">山田 太郎</p>
</body>
</html>
span.author{
color:red
}
リンク
< a >(アンカー)要素
Webページにリンクするためにアンカータグ(「< a >要素」)を使う。
「< a >要素」の内容のことを、アンカーテキストと呼ぶ。
<a href="http://test/aaa/sample">このページ</a>を参考にしてください。
< link >要素
< a >は、HTMLブロック要素の中で使用する。
< link > は、ヘッダでwebページ同士の関係を指定するために使用する。
<head>
<link rel="index" href="http://aaa/sample/item1">
<link rel="prev" href="http://aaa/sample/item2">
<link rel="next" href="http://aaa/sample/item3">
</head>
オブジェクトの埋め込み
HTMLでは、文書だけでなく画像や映像等の埋め込みも可能
フォーム
フォームによるGET
method属性がGETの時、ターゲットURIとフォームへの入力結果から、リンク先のURIを生成する。
<html xmlns="http://sample/aaa">
<head><title>フォーム</title></head>
<body>
<form method="GET" action="http://sample/search">
<p>キーワード：
<input type= "text" id= "q" name="q">
<input type="submit" id="submit" name="submit" value="検索"/>
</form>
</body>
</html>
フォームによるPOST
method でPostを指定するときは、リソースを作成する場合に使用する。
<html xmlns="http://sample/aaa">
<head><title>フォーム</title></head>
<body>
<form method="POAT" action="http://sample/search">
<p>題名：<input type = "text" id="title" name="title"><br />
著者名：<input type="text" id="author" name="author"><br />
<input type="submit" id="submit" name="submit" value="登録"/>
</form>
</body>
</html>
Page 13 of 18.
[添付ファイル]
お問い合わせ
owl
自己紹介
駆け出しエンジニア
だいたいweb系をかじってる
最近ちょとブロックチェーンに興味出てきた
