Webページを表示する仕組み

ブラウザに表示される仕組み

表示するものは「HTMLドキュメント」です。
「HTMLドキュメント」は、テキストで書かれた「HTML文書」です。
文章を解釈して表示するのが、「ブラウザ」です。

HTMLファイル内に記述されている「画像の置いてある住所」をもとにもう一度、画像ファイルを要求します。
このとき画像データの容量が大きすぎる場合、表示が遅くなります。

インターネットが表示するものの意味

（1）コンピュータを媒介としたコミュニケーションモデル

（2）効果的な情報発信のための要素

（3）視覚に訴える表現の特徴

（4）コミュニケーションシステムとしてのWWWの機能

（5）発信者と受信者の関係

ブラウザに情報を表示するためにはHTMLで記述する

ブラウザに伝える内容を表示するためには、HTMLで記述する必要があります。
それ以外では表示できないと言っても過言ではありません。

ですから情報を発信しようとすれば、必ずHTMLのルールを理解する必要があります。

HTML：HyperText Markup Language

Webページを記述するためのマークアップ言語

「ハイパーテキストのための、文書に目印を付ける方法を定めた文法上の約束」ということになります。

ある文章の中にある言葉から、関連のあるページのその言葉にリンクしてあること。
それが「ハイパーテキスト」という概念です。

正確な意味を理解するには、「仕様書」と呼ばれるW3C（World Wide Web Consortium）が策定したルールを読むことが必須です。

ごく簡単なHTMLの説明（HTML仕様書の日本語要約）

HTMLの目的

HTMLはネットワークでつながった世界中の文書を関連づけ、それを有益な情報としてコンピュータで分析できるようにする役割を持っています。
コンピュータのプログラムが「リンク」をたどって世界の文書を収集し、その「構造」を分析・管理することを可能にします。

HTMLを記述することは、見知らぬ誰かとつながること

一個人が作ったサイト（情報）であっても、リンクをたどって、その情報の知りたい人の役にたつことができるかもしれないということです。
つまり、自分の価値を誰かが認めてくれるということです。
その誰かを意識することにより、初めて「表現」が成立します。

HTMLの基本ルール

日本語で入力した文字はそのまま表示されない（他国語も同様）
マークアップという意味付けをすると表示できる
HTMLでは、大きさ・色のなどの修飾は直接記述しない

Markupとは

目印（荷札：タグ）をつけていくこと

記述する内容は3つ

どこから = 開始タグ
どこまで = 終了タグ
要素の種類 = 要素タイプ

開始タグ

「<」と「>」の間に「要素」を書く。

終了タグ

「</」と「>」の間に「要素」を書く。

<h1>一番重要な見出し</h1>

文書の部分ごとの意味に応じて、要素に適切なタグを適用することが、HTML作成の主な作業となります。

文字参照（character references）

記述	表示	説明
<	<	右大不等号　lesser than
>	>	左大不等号　greater than
&	&	アンドマーク、アンパサンド
"	"	ダブルクォート、引用符
		空白文字　no-break space

HTML基本構造

基本構造は「head部」と「body部」

head部

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

body部

閲覧者が内容を確認する部分
閲覧者のためだけではなく、検索エンジンに情報が蓄積されるような意味付けも必要
可視（表示）

現在のインターネットの利用の仕方は、ほぼ「検索」から始まります。
つまり、検索対象になるWebページを作成しない限り、見られることはないということです。

では「検索」は、何を検索するのか？
検索エンジンのサーバーに記録してあるデーターから検索します。
インターネットの世界にある「ありとあらゆるデータ」から検索されるわけではありません。

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

body要素の入力練習

head内の要素の入力はこの段階では難しいので、body内の意味を理解してから入力します

body内の入力には、必要充分なテキストが入力してあるところからマークアップしていくことが練習の基本です。

その内容は「本文（ほんもん）」として、記述します。
その中から、内容を一目で把握できるように「見出し」を立ち上げます。

つまり、見出しで表すことのできる、文節の塊が「段落」となります。

パラグラフの概念

「見出し+段落」で表す内容が「パラグラフ」と呼ばれます。

「p要素」そのものも「paragraph」と呼ばれますが、段落要素には見出し要素が不可欠であると考えましょう。

文章だけが長く続くと、可読性が落ちます。
そこで、箇条書きが利用されます。
１行で完結に表現できるものは、箇条書きにします。

特に、Webの表現では「読み物」というよりも「レポート」として読んでもらうことがほとんどです。
まず「結論」を読んでもらい、「検証」で納得してもらうという手法です。
ですから、それには「箇条書き」が有効です。

つまりbody内には、常に

見出し
段落
箇条書き

が記述されることになります。

《課題》
次の内容をマークアップしなさい。

今日の献立
今日は、子供も大人も好きなカレーを作ろうと思います。
カレーの材料
カレー・ルー
豚肉
じゃがいも
たまねぎ
にんじん

はてなダイアリー

新ブログではなく「はてなダイアリー」を作成
シンタックス・ハイライターが使いやすい
はてな記法で見出しとリストが作りやすい

ユーザー登録

このときGmailアドレスを使うとよいでしょう
「はてなID」が使用できるかチェックします

ここからは、自由に設定を変えてみましょう。
推奨する「設定」は、訓練の中で解説します。

はてな記法

ブラウザに表示される仕組み
インターネットが表示するものの意味
ブラウザに情報を表示するためにはHTMLで記述する
HTMLの基本ルール
HTML基本構造
- head部
- body部
body要素の入力練習
- パラグラフの概念
はてなダイアリー
はてなダイアリーの設定
- かんたん設定と詳細設定
  - かんたん
  - 詳細
- 「設定」の編集
はてなダイアリーの書き方
- はてな記法
- はてなpre記法（スーパーpre記法）

記法名	書式	備考
見出し記法	*〜〜	設定で指定した見出しレベル
小見出し記法	**〜〜	見出しレベルをアスタリスクで指定
リスト記法	-〜〜, --〜〜, +〜〜, ++〜〜	順序無し、順序付きリスト
定義リスト記法	:〜〜:〜〜
表組み記法	\| 〜〜 \| 〜〜 \|, \|*〜〜 \| 〜〜 \|
引用記法	>> 〜〜 <<	blockquoteでマークアップ
pre記法	>\| 〜〜 \|<	preでマークアップ
スーパーpre記法	>\|\| 〜〜 \|\|<	設定で指定したマークアップ HTMLエスケープ付き
脚注記法	（( 〜〜 ))
http記法	http://〜〜 hoge http://〜〜	キャッシュ用DBテーブル作成
キーワード記法	［[ 〜〜 ]］	キーワードにはタグが使用される
下書き記法	<!-- 〜〜 -->	記事を公開しつつ部分的に下書き
目次	見出し(記法)のインデックス
続きを読む	記事を表示する際<!--more-->に置換