ウェブサイトの“書き方”(1)~メモ帳でウェブサイトを作る｜web design－havin' a coffee break

＃

実は意外と簡単な“ホームページ”づくり

ホームページ作成ソフトは安いものでも数千円、高価なものだと1万円を超えるものもあります。これは「趣味でちょっとホームページを作りたいだけなのに...」という人には少しハードルが高いはずです。

しかし、“書き方”さえ知ればホームページを作るのに高価なホームページ作成ソフトを買う必要はありません。Microsoft Windowsに標準で付属している『メモ帳』を使えば高価なソフトがなくても簡単にホームページを作ることができます。

今ではブログなどもあって誰でもワープロ感覚で簡単にホームページを作っていくことができますが、コードの書き方を知っていて損はしません。コードを書くことができれば自由度が格段に高まりますし、もし本格的なホームページを作ろうとエディタソフトを使うようになっても基本的にはやることは変わらないからです。

ちなみにこのウェブサイトも今はHTML用のエディタで編集していますが、もとはメモ帳で作成しました。

ここでは『メモ帳』を使った基礎的なホームページの作り方を紹介していきます。

＃

“ホームページ”？“ウェブページ”？“ウェブサイト”？

「ウェブサイト」、「ホームページ」、「ウェブページ」、よくほぼ同じ意味で使われているこの3つの言葉ですが、正確には意味合いが少し違います。

“ウェブサイト”
インターネット上に公開されている文書、一般に“ページ”と呼ばれるものの集まりのことです。
例えるなら、インターネット上にある一冊の本のようなものです。: “ウェブページ”
インターネット上に公開されている“ページ”のことで、通常は複数集まって“ウェブサイト”を形成します。
例えるなら、“ウェブサイト”という一冊の本の中の一枚ずつのページのことです。: “ホームページ”
本来はブラウザを起動したときに最初に表示される“ウェブページ”のことで、そこから派生してウェブサイトの中で一番最初に閲覧されることを意図した“ページ”のことも指すようになりました。よく“トップページ”や“メニュー”と呼ばれます。
例えるなら、“ウェブサイト”という一冊の本の中の表紙のことです。

“ウェブページ”、それと“ホームページ”が“リンク”でつながれることで“ウェブサイト”となります。

＃

ウェブサイトを形づくる“HTML”

ほとんどのウェブページは“HTML”というコンピューター言語に書かれた“HTML文書”です。ということは“HTML”が書ければウェブサイトを作ることができるということになります。

“HTML”とは“Hyper-Text Markup Language”の略で、どういう意味なのかというと、

“Hyper-Text(ハイパーテキスト)”
“テキストを超えたテキスト”という意味です。: “Markup(マークアップ)”
見出しなどの文章の構造や、文字の大きさや色などの修飾情報、リンクなどの機能を文章中に記述していくことです。: “Language(ランゲージ)”
マークアップするためのルールや文法のことです。

“テキストを超えたテキスト”となる所以は“ハイパーリンク”です。一般には単に“リンク”と呼ばれるハイパーリンクは複数のHTML文書を結び付けたり、HTML文書にほかのデータ、例えば画像、動画、音声を埋め込むことができます。

HTML文書を“書く”ということは文書を人間だけでなくコンピュータにも理解できるように目印をつけることです。HTML文書に、役割が決められている"HTMLタグ"を使用して目印をつけることで、この部分が見出しで、この部分に画像を載せる、ここから他のウェブページにリンクする、などとどのようにウェブページを表示すればいいのかを示すことができます。

例えば以下のようなウェブページがあるとします。