Tue >ホームページ

ホームページの仕組み、ホームページを表示するブラウザ、最も簡単なホームページの紹介を通して、ホームページの基本を取り上げます。

ハイパーテキスト

ハイパーテキストとは、複数のテキストを関連付け、リンクする仕組みを言います。インターネットでホームページを閲覧する仕組みWorld Wide Web(WWW)は、ハイパーテキストです。ハイパ-テキストはHTMLで記述されています。HTMLは「Hyper Text Markup Language」の略で、直訳すると「ハイパーテキスト構造で記述された言語」となります。

ホームページ(Webページ)の閲覧は、閲覧者がブラウザからURL(Uniform Resource Locator)を送り、URLのサーバがそのWebページのHTMLを返すことで実現しています。

ホームページの仕組み

▲ページの先頭へ

URL

URLは、ホームページ(Webサイト)の所在地を表す住所のようなもので、次のように表されます。

http://(ドメイン名)/(ポート番号)/(ディレクトリ名)/(ファイル名)

通常ポート番号は省略可、ディレクトリ名やファイル名も、トップディレクトリに「index.html」を配置するので、省略可となります。したがって、http://www.abc.co.jp/というURLが一般的です。このURLは、「http://」のHyper Text Transfer Protocol (ハイパーテキストで転送される通信規約)により、日本(jp)の企業(co)のabc社のWWWサーバにアクセスするという意味になります。

ドメイン

ドメイン名には、gTLDとccTLD、さらに汎用JPドメインがあります。本サイトは、この汎用JPドメインを取得しています。

gTLD(generic Top Level Domainの略)

.com
商用
commercial
.net
ネットワーク
network
.org
非営利団体
organization
.mil
米軍
milltary
.edu
4年制大学
education
.gov
米国政府
governmental
.biz
ビジネス
business
.info
情報提供
infomation

ccTLD(country code Top Level Domainの略)

.co.jp
企業
commercial
.ne.jp
ネットワーク
network service
.or.jp
非営利団体
organization
.ad.jp
JPNIC
administrator
.ac.jp
大学
academic
.go.jp
政府
governmental
.ed.jp
小中高の学校
education
.gr.jp
任意団体
group

▲ページの先頭へ

ブラウザ

Webブラウザは、HTMLを解釈して表示するソフトウェアです。WWWをテレビ放送に例えると、ブラウザがテレビ受信機、ホームページがテレビ番組になります。

ブラウザには、Google社の「Google Chrome」、Microsoft社の「Intenet Explorer」、Mozilla Foudationの「Mozilla Firefox」、Apple社の「Safari」などがあります。

ブラウザの歴史

▲ページの先頭へ

helloプログラム

ここで「helloプログラム」を紹介します。helloプログラムは画面に「hello」と表示するだけのプログラムですが、プログラムの作成やプログラムの実行環境を知ることができる最も簡単で重要なプログラムです。

まずはメモ帳を起動して、以下の文字列を入力します。(すべて半角英字)

”helloプログラム”

入力が終了したら、名前を付けて保存します。ファイル名は「hello.html」とします。「hello.html」をWクリックすると、ブラウザが立ち上がって「hello」という文字が表示されます。

▲ページの先頭へ

Tue >ホームページ >HTML

ホームページは、HTMLという言語で記述されています。Webの発展や状況の変化に対応するため、HTMLもバージョンアップされます。World Wide Web Consortium 略してW3Cという非営利団体が中心となってHTMLの仕様を策定、その最終仕様がW3C勧告です。

HTMLの歴史

HTMLは「ティム・バーナーズ=リー」によって設計され、HTTP(Hyper Text Transfer Protocol)、URI(Uniform Resource Indentifier)、HTMLとともに1990年に開発される。
年月 version remarks
1993年 6月 HTML 1.0 IETF(Internet Engineering Task Force)
1994年10月 W3C発足
1995年11月 HTML 2.0
1997年 1月 HTML 3.2 W3C勧告
1997年12月 HTML 4.0 W3C勧告
1998年 2月 XML 1.0 W3C勧告、Extensible Markup Language
1998年10月 DOM Level 1 W3C勧告、Document Object Model
1999年12月 HTML 4.01 W3C勧告
2000年 1月 XHTML 1.0 W3C勧告
2000年11月 DOM Level 2 W3C勧告
2001年 5月 XHTML 1.1 W3C勧告
2004年 WHATWG発足
2007年 W3CのHTML WG発足(WHATWGと共同)
2008年 1月 HTML5 W3C草案
2009年 7月 XHTML 2.0の仕様策定を停止
2009年10月 HTML5 WHATWG HTML5のLC、標準化作業がW3Cに
2014年10月 HTML5 W3C勧告
W3C勧告までの過程
W3Cは検討結果を標準情報(Technical Report)TRとして公開します。
  1. 草案 Working Draft
  2. 最終草案 Last Call Working Draft
  3. 勧告候補 Candidate Recommendation
  4. 勧告案 Proposed Recommendation
  5. W3C勧告 Recommendation

これまで次世代のWeb標準として押し進められたXHTML 1.0は、HTML 4.01をXML形式で記述できるようにしたものです。現在でも多くのサイトは、HTML 4.01もしくはXHTML 1.0で記述されています。

2004年 Apple、Mozilla、Operaは共同で、WHATWG(Web Hypertext Applications Technology Working Group)というワーキンググループを立ち上げ、HTMLを進化させるための努力を継続し始めました。その背景として、Web2.0の熱狂的な支持、Ajaxの台頭など、Webアプリケーションの利便性が広く知られるようになったことがあげられます。

HTML5は、要素や属性はDOM(Document Object Model)によって定義され、HTMLやXHTMLはそれを人間が読める形式にする…という扱いになっています。

▲ページの先頭へ

HTMLとCSS

HTML 4.01は1999年12月に、XHTML 1.0は2000年1月にそれぞれ勧告されています。HTML 4.01/XHTML 1.0の注目された点は、文書構造と視覚表現の分離です。文書構造をHTMLで、視覚表現をスタイルシート CSSでそれぞれ記述することを推奨しています。

HTML HyperText Markup Language webページの文書構造を記述
CSS Cascading Style Sheet webページの視覚表現を記述

HTMLのMarkupはしるしを付けるという意味です。文書の構造、見出し、段落、改行、リスト等…その部分が文書中どのような意味や役割を持っているのかを、専用のしるしで表わします。それが「要素」です。要素は、「開始タグ」「要素内容」「終了タグ」で構成されます。

<html> ←htmlの開始タグ
  <head>
    <title>…</title>
  </head>
  <body>
    ブラウザーで表示される内容
  </body>
</html> ←htmlの終了タグ

<html>タグはその文書がHTMLで書かれていることを宣言しています。文書全体の最初と最後に記述します。ただしXML宣言とDOCTYPE宣言は<html>より前に書かれます。<html>~</html>の中には、<head>~</head>と<body>~</body>をこの順で1つずつ入れ、それ以外の要素はすべて<head>~</head>と<body>~</body>の中に入れます。

▲ページの先頭へ

HTML5

最新バージョンであるHTML5は、2014年10月にW3C勧告されました。HTML5で注目される点は、webページやwebアプリに使用されるオープン・ウェブ・プラットフォームであり、webページやwebアプリの開発のための機能を提供することにあります。

HTML5は、ファイルの先頭にDOCTYPE宣言を含める必要があります。

<!DOCTYPE html> ←DOCTYPE宣言
<html lang="ja"> ←htmlの開始タグ
  <head>
    <meta charset="utf-8" />
    <title>…</title>
  </head>
  <body>
    ブラウザーで表示される内容
  </body>
</html> ←htmlの終了タグ

▲ページの先頭へ

HTML5の新要素

文書構造に関する新要素

新要素 remarks
section 汎用セクション、文書のアウトラインを構成
article セクションの一種、独立コンテンツの表記
aside セクションの一種、補足情報の表記
nav セクションの一種、ナビゲーションメニュー
header セクションのヘッダー
footer セクションのフッター
hgroup 複数の見出しをまとめる。

外部コンテンツの埋め込み

新要素 remarks
figure キャプション
video 動画プレーヤー
audio 音声プレーヤー
source video/audioのリソースURLやタイプの指定
canvas ビットマップキャンパス、テストサンプル analogclock_2
embed プラグインコンテンツ

フォームに関する新要素

新要素 remarks
keygen 公開鍵暗号方式のキーペアの作成
output 画面出力されるフォーム要素
progress 進捗状況を表すプログレスバー

テキストに関する新要素

新要素 remarks
mark Webページの意図とは異なる文脈での強調
ruby ふりがな
time 日時や時刻を表す。
command メニューから実行されるコマンド
details ユーザーが任意で展開したり閉じたりできる詳細情報
datalist オートコンプリート候補のデータリスト保持

HTML5で廃止される要素

applet acronym frame frameset noframes
basefont big blink center font
marquee bgsound

▲ページの先頭へ

Tue >ホームページ >ファイル転送

ホームページをサーバー上に設置する方法や、そのための基本的な知識を取り上げます。

ファイル転送とは…

サイト制作では、クライアントのパソコンでホームページを作成します。そのホームページが公開されるためには、サーバー内にホームページのファイルを設置する必要があります。クライアントからサーバーへファイルを送る、これが「ファイル転送」です。そのためのアプリケーションが「FTP」で、これを使用してサーバーにファイルを転送します

FTPの転送モード

改行コード OS ASCII文字コード
LF(Line Feed) UNIX 0x0A
CR(Carriage Return) Mac 0x0D
CR+LF Windows 0x0D+0x0A

LFやCRは、タイプライターが由来になっています。CRとは、紙を固定して移動する装置(キャリッジ)を元の位置に戻すことであり、LFとは、紙を必要な行(ライン)だけ上に送ることです。

▲ページの先頭へ

FTPのコネクション確立モード

▲ページの先頭へ

URLエンコード

ブラウザから送信されるデータは、特別な形式でエンコードされて送信されます。CGIスクリプトで送信データを扱う場合は、エンコードされたデータをデコードする必要があります。

IEFT(Internet Engineering Task Force)インターネットに関する技術を標準化する組織
RFC(Request For Comment)IEFTで策定された技術仕様

RFCでは「パーセントエンコーディング」と呼ばれ、1文字毎にパーセントを付加していきます。

文字 シフトJIS URLエンコード
ア イ ウ 83 41 83 43 83 45 %83A %83C %83E
2 0 1 4 32 30 31 34 2 0 1 4
94 4E %94N
大 阪 91 E5 8D E3 %91 %E5 %8D %E3

URLエンコードのサンプルCGI、PCの環境変数

▲ページの先頭へ

パーミッション

パーミッションとは、コンピューターのファイルやディレクトリに対するアクセス権です。サーバーの多くは、UNIXサーバーです。UNIXでは、ファイルやディレクトリに対して、所有者「Owner」、利用できるユーザ全体を意味する「Group」、その他「Other」のそれぞれに「読み込み」「書き込み」「実行」の権限を設定する必要があります。

読み込み r-- (2進) 100 (10進) 4
書き込み w-- (2進) 010 (10進) 2
実行 x-- (2進) 001 (10進) 1
すべて許可 rwx (2進) 111 (10進) 7

読み込み「r」、書き込み「w」、実行「x」ができる場合は「1」、できない場合は「0」になります。出来あがった2進数を、Owner、Group、Otherに区切って10進表記します。cgiスクリプトの「755」は、OwnerはすべてOK、他は読み込み・実行は可、書き込み不可という権限の設定になります。

Owner Group Other
通常のディレクトリ
cgiスクリプト
(10進) 755
rwx
(2進) 111
(10進) 7
r-x
(2進) 101
(10進) 5
r-x
(2進) 101
(10進) 5
cgiが書き込むファイル
(10進) 666
rw-
(2進) 110
(10進) 6
rw-
(2進) 110
(10進) 6
rw-
(2進) 110
(10進) 6
通常のHTMLファイル
(10進) 644
rw-
(2進) 110
(10進) 6
r--
(2進) 100
(10進) 4
r--
(2進) 100
(10進) 4

▲ページの先頭へ

ファイルパス

記憶装置のファイルやフォルダの所在を示す文字列を「パス」と呼びます。パスの区切り記号は、UNIXでは「スラッシュ」、MS-DOSやWindowsでは「バックスラッシュ」、その日本語版は「円マーク」を使います。パスの指定方法には、「絶対パス」と「相対パス」があります。

絶対パス

UNIXやLinuxでは、ルートディレクトリ(「/」で表わされる)を頂点とするツリー構造になっています。これに沿ってすべての道筋を記述して、特定のファイルを指定するパス表記法が「絶対パス」です。MS-DOSやWindowsでは、ドライブ名を頂点とするツリー構造で表わされます。

相対パス

起点となる現在位置(カレントディレクトリ)から、特定のファイルを指定するパス表記法が「相対パス」です。ホームページ上のパスは、相対パスで表記する決まりです。ただし他のサーバーのファイルを呼び出す場合は、「http://(ドメイン名)/ディレクトリ名/ファイル名」という形式で指定します。

絶対パス 相対パス
このファイルを起点とすると… / home / sun / sun_1.html sun_1.html
同一ディレクトリ内のファイル / home / sun / sun_2.html sun_2.html
1階層下のimage内のファイル / home / sun / image / sun.jpg image / sun.jpg
同階層のimage内のファイル / home / image / sun.jpg ../ image / sun.jpg
1階層上のファイル / home / sunday.html ../ sunday.html
2階層上のファイル / index.html ../../ index.html

レンタルサーバーはすべて公開されていませんので、自分が操作できる最上位ディレクトリを「トップディレクトリ」と呼びます。トップディレクトリは、ルートディレクトリと同じ意味で用いられますが、サーバー全体のルートディレクトリと、レンタル部領域のトップディレクトリは厳密には違います。

カレントディレクトリは、現在作業対象となる、相対パスの起点となるディレクトリです。カレントディレクトリは「./」で、カレントディレクトリの一つ上のディレクトリは「../」で表されます。

▲ページの先頭へ