HTML
タグに囲まれた文章
タグ：囲んだ文章が「何を示すか」を表すもの。開始タグと終了タグからなる。
要素：「開始タグ・文章・終了タグ」のかたまり。そのかたまりが「何を示すか」は「要素名」という。
1つの要素は、「<要素名>文章</要素名>」で記述される。
html要素を起点とした要素の階層構造になっている。
See the Pen
Untitled by nomi-kazu (@nomi-kazu)
on CodePen.
Webページで使用される画像形式
画像形式
画像
圧縮率
透過処理
アニメーション
JPEG
最大1677万色
非可逆圧縮
できない
できない
PNG
最大1677万色
可逆圧縮
特定の領域の透明度を調整できる
できない
GIF
最大256色
可逆圧縮(最大色数が少ないため他の形式より表現力が落ちる)
特定の色の透過色を指定できる
パラパラ漫画のようにアニメーションで表示できる
JPEGのデータ圧縮は非可逆圧縮
GIF、PNGのデータ圧縮は可逆圧縮
XML
HTMLもXMLも元はSGML(Standard Generalized Markup Language)から派生してできた。
HTMLと同じマークアップ言語だた、さまざまな用途で汎用的に利用できる。
目的に応じてタグを自分たちで定義できる。
HTML同様、開始タグと終了タグで文章を囲む。
自由な形式で構造化されたデータを表現できる。
<書籍 名前="Web技術のすべて" 発行年="2100年">
<目次>
・
<項目>Webとは</項目>
・
・
・
・
</目次>
</書籍>
XHTML(Extensible HyperText Markup Language)
HTMLをXML文法で再定義したもの。
XML宣言から始まる。
必ず開始タグと終了タグで文章を囲む。
開始タグのみの形式は許されないため、終了タグを付けるか、末尾に" />"をつけて終了を表す。
XHTMLに埋め込まれて利用されるXML文書の例
MathML(XMLで記述された数式)
SVG(XMLで記述された画像)
<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<meta charset="utf-8">
<title>〇〇のWebページ</title>
</head>
<body>
<h1>〇〇へようこそ</h1>
はじめまして。<u>〇〇</u>です。<br></br>
<img src="image.png">
これは、<a href="http://example.com/link.html">リンク</a>です。<br />
</body>
</html>
CSS
HTMLやXMLの表示方法(体裁)を表現する記述。スタイルシートとも呼ぶ。
See the Pen
1 by nomi-kazu (@nomi-kazu)
on CodePen.
凝った体裁にしようとするとHTMLが複雑化してしまう。
See the Pen
Untitled by nomi-kazu (@nomi-kazu)
on CodePen.
CSSを使うと、構造と体裁の記述を分離でき、シンプルになる。
サイト内でCSSを共有することでWebサイト内の表示を統一できる。
複数のCSSを利用することもできる。
スクリプト言語
動的処理に使われる。
サーバーサイド・スクリプト
CGIから呼び出すため、HTMLと別ファイルにする。
この言語でないと実現できないという機能の違いはほぼない。
言語
特徴
Perl
・文法の自由度が高い・歴史が古く、広く使われている
PHP
・CGIを使わなくてもHTMLに埋め込んで使うことができる
Python
・スクリプトの可読性が高い・文法の自由度は低い
Ruby
・オブジェクト指向プログラミングに適している・Perlに近い性質をもつ
クライアントサイド・スクリプト
クライアントサイド・スクリプトはJavaScript。
HTMLと別ファイルにしてもよいし、HTML内に直接スクリプト言語の記述を書き込むこともできる。一般的には分離させていることが多い。
ECMAScriptは標準化されたJavaScript。
DOM
HTMLやXML文書を扱うための手法(API)。
プログラムからHTMLやXMLの各要素を容易に参照・制御できる。
DOMツリー：DOMでは対象となる文書の各要素を抽出し、それらを階層構造として扱う。この階層構造が文書の最上位の要素を頂点(根)として、それぞれの下位の要素が木の枝のように分かれていく木構造(ツリー構造)のこと。
ノード：木構造の枝葉の部分。DOMではこのノードをたどっていくことで目的のデータにアクセスし、参照や編集を行う。
この図ではHTML要素をルート(根)と呼ぶ。
JSON
構造化したデータを表すためのデータ記述言語の一種。
データを階層的に並べることで構造を表現する。
[ { , : などの記号で親子、並列などの関係を表す。
文字数が少なくなるため、データサイズは小さくなるが、可読性は低くなる。
[
"名前": "Web技術",
"発行年": "2100年",
"著者": [
"田中太郎",
"佐藤聡"
],
"目次": {
"章": [
{
"章番号": 1,
"項目": [
"Webとは"
"インターネットとWeb"
]
},
{
"章番号": 2,
"項目": [
""
""
]
}
]
}
]
JSONはWebの世界では使いやすい。
フィード
Webサイトなどの更新履歴を配信するためのファイル。
更新頻度が高いブログやニュースサイトなどで使われている。
Webサイトに訪問しなくても、フィードを取り込むだけでWebサイトのどこが更新されたかを知ることができる。
フィードリーダー
Web上のフィードを取得し、管理するためのソフトウェア。
フィードアグリゲーター、RSSリーダーともいう。
フィードから新しい情報を効率よく取り込むために、登録したWebサイトのフィードを定期的に自動チェックして見やすく表示する。
ポッドキャスト
Webサーバー上に音楽や動画を配置し、RSSを通してWeb上に公開することで音楽をインターネット上で配信する手法。
RSSを使うことで、ブログのように手軽に音楽や映像を公開できる。
マイクロフォーマット
HTMLやXHTMLで記述されたWebページの中に意味を表現する記述を埋め込むための書式。
埋め込まれた情報は外部コンピューターから読み込んで利用でき、これを有効活用することでコンピューターが自律的に情報の意味を理解して処理するセマンティックWebを実現できる。
hCard(連絡先情報)
<ul class="vcard"> <!-- 連絡先情報であることを示す -->
<li class="fn">佐藤 聡</li> <!-- 氏名 -->
<li class="nickname">さとしくん</li> <!-- ニックネーム -->
<li class="bday">1999/1/1</li> <!-- 誕生日 -->
<li class="org">株式会社ビター</li> <!-- 組織 -->
<li class="tel">090-123-××××</li> <!-- 電話番号 -->
<li class="email">satoshi@email.com</li> <!-- メールアドレス -->
<li class="url">http://satosatoshi.com</li> <!-- Webアドレス -->
</ul>
hCalendar(イベント情報)
<p class="vevent"> <!-- イベント情報であることを表す -->
<span class="summary">球技大会</span> <!-- イベント内容 -->
<span class="dtstart">2000-01-01T14:00:00</span> <!-- 開始日時 -->
<span class="dtend">2000-01-01T18:00:00</span> <!-- 終了日時 -->
<span class="location">多目的グラウンド</span> <!-- 場所 -->
<span class="url">http://kyugievent.com</span> <!-- Webアドレス -->
</p>
主なマイクロフォーマット
名前
用途
hAtom
標準のHTML内に埋め込むAtomフィード
hCalendar
イベント情報
hCard
連絡先情報
hReview
書評などのレビュー
hResume
履歴書
音声・動画配信
データ圧縮にはコーデックというソフトウェアが用いられ、圧縮することをエンコード、再生するために伸帳することをデコードという。
主なコーデック
音楽用コーデック
拡張子
説明・用途
AAC
.aac、m4aなど
iPod、着うた
MP3
.mp3
携帯音楽プレーヤー
Windows Media Audio(WMA)
.wma
パソコン向け音源
動画用コーデック
拡張子
説明・用途
MPEG-4
.m4v、mp4など
スマホ向け動画
Windows Media Video
.wmv
パソコン向け音源
MPEG-2
.mpg、.m2p
DVD、地デジ
動画・音声の配信形態
ダウンロード配信
Webサーバーからファイルをダウンロードしてもらい、それを再生する方法。
プログレッシブダウンロード配信
ファイルをダウンロードしながら再生する方法。
Youtubeやニコニコ動画などの動画共有サービスではこの方式が多く使われている。
疑似ストリーミングともいう。
ストリーミング配信
ファイルを細かく分割し、細切れにしたデータをユーザーに配信して再生する方法。
ニコニコ生放送やAbemaTVなどのライブ配信を行うサービスはこの方式が使われる。
メディアタイプ
携帯電話、スマホ、パソコン、テレビなど、閲覧に使う機器の種類をHTMLやCSS内で指定できるもの。
メディアタイプ
説明
screen
パソコンのスクリーン
tty
文字幅が固定の危機
tv
テレビ
projection
プロジェクター
handheld
携帯機器
print
プリンター
braille
点字ディスプレイ
embossed
点字プリンター
aural、speech
音声合成機器
all
すべてのメディア
メディアタイプの指定
HTMLではlink要素のmedia属性を使用。
CSSでは@mediaルールを使用。
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen, tv" href="screen.css">
<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">
</head>
<body>
本文
</body>
</html>
@media screen, tv {
body {font-size:large;}
}
@media handheld {
body {font-size:small;}
}
@media print {
body {background: white; color:black;}
}
参考：Web技術の基本
↧