ホームページ(ウェブサイト)は、HTMLHyper Text Markup Language）というコンピュータ言語でできています。言語といっても決して難しく考える必要はないので肩の力を抜いて学習していきましょう。
HTMLは、「文書構造」を指定する「タグ」の集合体です。(タグの集合体をソースまたはソースコードと言います)タグの特性を生かし、文字列や画像をクリックすると、他のページへジャンプする仕組みを「リンク」といいます。そのほかにも、様々な画像を表示したり、動画や地図(GoogleMap)などを埋め込むことができます。また、CSS(シーエスエス・スタイルシート)を用いて、配色やレイアウト、美しく見栄えを整え、近年ではアニメーションを用いて躍動的な演出もできるようになりました。
ほかにも、JavaScript（ジャバスクリプト）という技術を使って、映像や動きのある表現することができます。比較的、簡単な記述でダイナミックな演出が可能です。それらの効果を用いることにより、見る人の心を動かし「見たい・知りたい・食べたい・買いたい」などの欲求に直結させ、多大な宣伝効果が期待できます。場所や時間を気にせず、だれでも気軽にお買い物ができるインターネットショッピングも今や欠かせない存在ですね。それぞれに様々な成り立ちをしているウェブサイトは、学べば学ぶほど奥の深さがあります。
スマホで見ているウェブサイトも、パソコンを使って作るんだ。今は、スマホでも作れるみたいだけれど、やっぱり簡素なものしか無理だもの。見る人のことをちゃんと考えて、しっかりしたホームページを作らないと、そのうち、AIに負けちゃうかもしれないよ。
HTMLの歴史
HTMLは、1898年スイスのジュネーブにある「欧州原子核研究機構（CERN-セルン）」に勤務していたティム・バーナーズ＝リー氏(イギリスの計算機科学者)によって、提案されました。当時のCERN-セルンは、膨大な量の研究論文をコンピューターで管理できないだろうかと思案していました。
そこで、バーナーズ＝リー氏は、文章の文字列から別の文章を呼び出せる仕掛けを考えました。普通の文章から文章を呼び出すことは不可能でしたが、特殊なテキスト「タグ」を埋め込むことで呼び出せることに成功しました。これが、現在のHyperTextの原形だと言われています。そして、時代とともに変遷を遂げながら、世界中のスマートフォンやパソコンで利用されるようになったのです。ティム・バーナーズ＝リー氏は、Web アドレスを『http://』で始めてしまったことを後悔しているそうです。「スラッシュが 2 つあるのは冗長で、数十億回も無駄にキーが押された」と語っています。
【参考】Tim Berners-Lee is cybercrime victim・ウェブのための大憲章
ちなみに、ティム・バーナーズ＝リー氏はネット詐欺の被害にも遭ったことがあるらしく、興味深いですね。
通信とセキュリティ
HTTP(Hypertext Transfer Protocol)とは、ウェブサーバとウェブブラウザの間で、情報をやりとりするためのプロトコル（通信規則）です。わたしたちは、この通信を介して、ウェブサイトを閲覧しています。最近のブラウザでは、スキーム(http)が見えない仕組みになっていますが、実際はアドレスの前に付加されています。現在は、「https://」「s」が付いているスキームが一般的です。
https://は、(HTTPS通信またはSSL通信) 安全な通信ができていることを閲覧ユーザに示すために、アドレスバーに鍵のアイコンを表示しています。鍵アイコンの形状は、ブラウザによって異なっていますが、HTTPS通信はネットワーク経路でデータを暗号化し、中身が外部に見えない仕組みになっています。パスワードやクレジットカード情報など重要なデータが第三者に漏洩することを防ぎ、通常の通信より安全性が高いものとなっています。SSLの正式名称はSecure Sockets Layer(セキュア・ソケッツ・レイヤー)これの頭文字をとってSSLと呼ばれています。
( SSL通信を介していないと表示されなかったり警告が出たりします。)
HTMLの種類と変遷
HTMLには「HTML1.0」 「HTML5」 「XHTML」など、いくつかバージョンがあります。自分が作成や編集をするHTMLがどの種類でどのバージョンなのかを確認しておきましょう。作成方法は、至って簡単です。メモ帳やテキストエディタで、HTML言語を入力し、拡張子を「.html」と名付けることによって作成できます。文字コードは、「utf-8」を指定すること、エディタのモードをhtmlに指定しておかないと、文字化けを起こしてしまう場合があります。
マルチデバイス最適化
レスポンシブウェブデザイン
HTML5は、2014年10月28日にW3C(World Wide Web Consortium)によって勧告されました。現在は、スマートフォン利用者に向けてのマルチデバイス最適化が求められます。主に、パソコン用とスマートフォンやタブレット用などデバイスごとにレイアウトを適用させる「レスポンシブウェブデザイン」という手法が取り入れられています。ResponsiveWebDesign(レスポンシブウェブデザイン)は、略してRWDなどと呼ばれる場合もあります。
ウェブサイトは、RWD手法だけでなく各デバイスの専用サイトを個別に構築し、ユーザーエージェントによる振り分けさせる手法も存在しています。現在のウェブサイトは様々な手法が混在しており、公開・制作する側によって異なっています。これが「正解」という考え方ではなく、それぞれの環境やボリュームに見合った手法を選択します。何よりも、ブラウザを通してレイアウトの崩れなく見やすく分かりやすく発信することが大切です。
W3C(World Wide Web Consortium)
World Wide Web Consortium（ワールド・ワイド・ウェブ・コンソーシアム）は、World Wide Webで使用される各種技術の標準化を推進する為に設立された団体です。ティム・バーナーズ＝リーが創設し、率いています。たくさんのWebサイトが、それぞれ勝手に開発したりバラバラな技術を採用すると、ブラウザ側も統一性を取ることが困難になり大変なことになってしまいます。このような団体が存在しているからこそ私たちは、パソコンやスマートフォンで安全にかつ豊富なWebサイトを閲覧できたりするわけですね。
拡張子とは
パソコン内のデータには、「拡張子」というものが付加されていて、それぞれデータの類を表しています。初心者は、拡張子の種類や特徴を覚える必要があるため、必ず「表示させる設定」にしておいてください。
拡張子の前には、必ず「.」(ドット)が付加されています。ファイル名を変える際には、ドットを消さないよう注意しましょう。拡張子を変えても、データそのものの性質が変わるわけではありません。
ホームページは、HTML言語でできているため、拡張子も「.html」となります。たまに、.htmlというものを見かけますが、現在はhtmlで統一されています。
トップページの注意点
インターネット上でのウェブサイトは、様々なものが存在しています。複数のページで構成されているものや1ページで完結しているものなどがあります。サイトの構成に関わらず、1番最初に表示させるページのことを「トップページ」「HOME」と呼称されていたりします。トップページは、特別場合を除き「index.html」と決まっています。ドメインとの関連性があり、別名をつけてはいけません。例えば、top.htmlなどと命名すると、それはトップページとは認めてもらうことができません。