【初心者向け】ホームページを作成してみよう①

  • 2017年1月6日
  • by 
【初心者向け】ホームページを作成してみよう①

あけましておめでとうございます、mayです。

私の出身地であるミャンマーではお正月は4月なんです。
実はこの挨拶も「まだ時期が早いんじゃないかな?」な~んて思ってしまう今日このごろです。

新年はその字のとおり“新しい年の始まり”を意味します。
つまり、新しいことを挑戦するには、これほどピッタリな時期は他にはありません!
ちなみにみなさんは何か“新年の抱負”を考えましたか?

bitWaveは“ITブログ”を銘打っていますので、今回は『“初心者向け”ホームページ作成』のノウハウを伝授したいと思います。
今回の記事をキッカケに、「Webサイトを作るゾ!」という抱負を持っていただければ幸いです!

『HTML』の「頭」と「体」と「足」

『HTML』と聞いて、すでに拒絶反応を見せている読者の方もいるかもしれません。
でも『HTML』はそんなに難しいものではなく、ちゃんと向かい合えば理解することができます。

まず、ホームページには3つの要素で構成されています。
それは「head」と「body」と「foot(fotter)」です。つまり「頭」と「体」と「足」。
つまり、人間と一緒ですね。
今みなさんがご覧になっているこの記事にも「頭」と「体」と「足」があり、三位一体となって初めてブラウザに表示できているのです。
その三位一体させた構成図こそ、『HTML』だと思っていただければ十分です。

ほらね、難しくないでしょ?

『HTML』を書いてみよう

しかし、チラシのウラに『HTML』を書いたところで、ホームページはできあがりません。
そこで、『HTML』を書くのに便利なツールを紹介したいと思います。

それが『ATOM』です。
このエディターは今回書こうとしている『HTML』だけでなく、「JS」や「PHP」などの拡張子にも対応しているので、結構便利です。「JS」や「PHP」などの拡張子については、また別の機会にご説明しますね。

それではさっそくダウンロードしてみましょう!
<参照:『ATOM公式サイト』>
ここからはすでに『ATOM』をインストールし終えているという前提でご説明しますね。

『ATOM』をインストールし終えたら、さっそくアプリケーションを立ち上げて、新規ファイルを作成してみましょう。
そして下記のコードを書いてみましょう。

このサンプルは『HTML』の基本なので、この際覚えておくといいでしょう。
よく見ると先ほど説明した「head(頭)」と「body(体)」と「footer(足)」がありますね。それぞれが「<」と「>」で囲まれていますし、例えば「<head>」ならそれと対をなすように「</head>」があるのがお分かりいただけると思います。
「<head>」は開始タグ、</head>を閉じタグと覚えておいてください。

この開始タグと閉じタグのセットで初めて機能するのです。
当然ながら、「<body>」には「</body>」、「<footer>」には「</footer>」という感じで対になっているんですね。

『おいおい、「<h1>」とか「<p>」なんて聞いていないし、人間の一部ですらないよ!』
それを次からご説明いたしますので、慌てないでください。

この「<h>」タグの「h」はheadingの略で、Webサイトの見出しを意味しています。見出しには<h1>から<h6>までの6段階で構成されており、数字が小さいものほど、より階層の高い大見出しとなるんです。

そして「<p>」タグの「P」はparagraph(パラグラフ)の頭文字です。

タグで囲まれた部分が一つの段落を指定するものだと思ってください。つまり“改行”させるためのタグということです。

前記の「頭」と「体」と「足」のように体の一部で例えられなくなってきましたが、「<h>」タグや「<p>」タグは関節であったり、筋肉であったりといったニュアンスで考えてください(笑)

『HTML』を保存し、ブラウザで見てみよう

書き終えた『HTML』を保存しておきましょう。
なお、保存の際には拡張子を「.html」にして保存してください。

そして保存した『HTML』を開く時は、対象ファイルのアイコン上で右クリックをし、「このアプリケ―ションで開く」を選択してください。なお、選択するアプリケーションはChrome やFirefoxなどの任意のブラウザを選択しましょう。

すると、下の画像のようにブラウザで見ることができるようになりました。

はい、これで基礎の『HTML』は完成です。

『あれ? ちょっとシンプルすぎやしないかい?』
そうです。今の見た目は素っ裸も同然です。

素っ裸では街も出歩けませんので、ここからは「css」や「js」や「jQuery」などでどんどんページを装飾していくことになります。
つまり服を着せたり、アクセサリーをまとったりするようなものですね。

次回はどのような服があり、どのように着せるべきかをご案内し、実際に見た目を変えていきたいと思います。

それでは最後に、今回の内容をまとめたいと思います。
・使っていたツール →「ATOM」
・拡張子 →「.html」
・『HTML』内のタグ →「<header>」「<body>」「<footer>」「<h1>〜<h6>」「<p>」

コメント