HTMLコーディングをはじめよう〜副業にも!|序章 ウェブサイトとHTML

HTMLコーディングイメージ

独立起業して約20年、当社は一貫してネット上で旅行商品を販売してきた。その基盤となるものは、会社のホームページだ。

「自分でできることは自分で」をモットーに会社を運営してきたので、ホームページも一から十まで独学で制作してきた。

特別なプログラミングを覚える必要もなく、HTMLコーディングさえ知っていれば、誰でもホームページを作ることができる。

これは、約20年独学でやってきた筆者が実感していることだ。そして、コーディングを身につければ、副業やフリーランスとして収入を得ることもできるかもしれない。

今回、改めてGoogle HTML/CSS Style Guideに照らし合わせ、自らやってきたことを見直しながら、これからHTMLコーディングを始めようという人へ向けて、SEOを考慮した最新のHTMLコーディングについて、シリーズでご案内する。

ウェブサイトの仕組み

HTMLコーディングは、ウェブサイトの仕組みを知らないと理解できないので、最初にこのことについて簡単に触れることにする。

普段、ネットで見ているウェブページは、イメージ画像を取り入れながら読みやすく整理されている。それは全て、HTMLでコーディングしたファイルを、ネット上にアップロードして視覚的にわかりやすく表示されている。

どのページでも良いので、試しにページ上で右クリックして、「ページのソースを表示」してみよう。右クリックができないページは、

Google Chrome:右上の設定–>その他のツール–>デベロッパーツール
FireFox:右上の設定–>ウェブ開発–>ページのソース

でも良い。

表示された、コードがずらずら並んだページが、HTML文書だ。そして、HTMLコーディングとは、このようにコードと文章が混ざったファイルを書いていく作業のことを指す。

そして、「ウェブサイト」は、互いにリンクしあったHTML文書の集合体のこと。

ひとつひとつのHTML文書は、シンプルなテキストファイルだ。

しかし、表示させる文章や画像の前後に、「タグ」というHTML(HyperText Markup Language:ハイパーテキスト・マークアップ・ランゲージ)の約束事でくくられている。これによって、ページの体裁を整えたり、装飾したり、あるいは他のページにリンクすることができる。

シンプルなテキストファイルが、鮮やかで美しいウェブページとして表示されるのは、この「タグ」のおかげだ。

では、そのシンプルなテキストファイルの集合体を、どうやってネット上にアップロードして、ウェブサイトとなるのか?

IPアドレス・ドメイン・サーバー

パソコン内でに保存したテキストファイルは、FTPソフトを使って、決められたサーバーへアップロードする。それは、自社サーバーでもレンタルサーバーでも良い。

各サーバーには、IPアドレスというネット上の住所が割り当てられていて、サーバーがIPアドレスを管理している。

また、サーバーには、

  • Webサーバー
  • メールサーバー
  • DNSサーバー

がある。

Webサーバーは、文字通りウェブサイトを表示するためのファイルを保管するもの。メールサーバーは、メールの送受信を提供するものだ。

では、DNSサーバーとは何か?

DNSは、Domain Name Systemの略。そしてDNSサーバーは、ドメイン名を管理しているサーバーのこと。ドメイン名とは、ブラウザのURLバーに表示される、「www.◯◯◯.com」という、あれだ。

DNSサーバーは、ネット上の「住所」であるIPアドレスと、ネット上の「名前」のドメイン名をつなぐ役割を果たしている。

通常ひとつのサーバーを用意したら、最低この3つのサーバーは一つにまとめられている。

これらをまとめると、

「Webサーバー」にアップロードされたHTML文書は、「DNSサーバー」によってネット上の特定のドメイン名で表示され、それが「ウェブサイト」になる

ということだ。

HTMLコーディングに必要なサーバーは、主にWebサーバーなので、メールサーバーとDNSサーバーについては、存在を知っていれば良い程度だ。

ウェブサイトのナビゲーションとディレクトリ

製作されたHTML文書は、決められた「規則」のもと、パソコン内にフォルダ分けして保存する。

この規則とは、「ネット上に表示されるウェブサイトのナビゲーション通りに」ということだ。

手前味噌になるが、当社のホームページは、以下の図のようにファイルを整理している(多少簡略化しているが)。

例えば、ウェブサイトのメニューには、「スポーツ」や「スケッチ」という項目があり、その項目を示すフォルダを作成している。

ディレクトリ

ウェブサイトでは、フォルダのことを「ディレクトリ」と呼んでいる。

トップページにあたるファイルや、各項目ごとのディレクトリを格納している大元のディレクトリは、便宜上「Home」としているが、アップロードされたあとは「root」ディレクトリにあたる。

さらに、メニューの「スポーツ」を選択すると、「ゴルフ」や「テニス」といったページを選択できるようになっている。これらは「サブディレクトリ」だ。

このように、パソコン上のフォルダ(ローカルディレクトリという)は、アップロードした後表示されるウェブサイトのメニュー(ナビゲーション)通りに整理しておく、というのが、「規則」になる。

次に、ローカルディレクトリにある各フォルダとHTML文書は、どのようにネット上に公開されるのか?

ローカルディレクトリにある全てのフォルダとHTML文書は、FTPソフトを使って契約しているサーバー上へアップロードする。

以下は、FileZillaというFTPソフトを使って、当社サーバー上にアクセスした時の図だ。

FileZillaスクリーンショット

左側にはローカルディレクトリ、右側にはリモートディレクトリ(サーバー上のディレクトリ)が並んでいる。

ローカルディレクトリにあるフォルダやHTML文書を、このソフトを使用して右側のリモートディレクトリにアップロードすれば、めでたく制作したHTML文書がネット上に公開されるという仕組みになっている。

まとめ

ウェブサイトは、パソコン上のローカルディレクトリに格納されたHTML文書を、FTPソフトなどを使ってサーバーへアップロードすることにより、World Wide Web(www)上に公開される。

サーバーには、ネット上の住所としてIPアドレスが割り当てられていて、DNSサーバーにより、ウェブサイトの名前を示すドメイン名と結び付けられる。

文字だけではわかりにくいかもしれないが、ウェブサイトの仕組みを知っておくことで、HTMLコーディングを知るのに役立つはずだ。

次回は、コーディングに必要なものの準備や、動的サイトと静的サイトの違い、またHTMLの基準となるW3Cについて書く予定だ。

コメント