今更だけど、htmlってなに？初心者用Web講座１

　近年は、ブログやTwitter、Facebookなどの普及により、自分で一からサイトを作らなくても手軽にインターネット上へ自分の日記や考えなどを発信できる時代になりました。その一方で、上記のようなソーシャルネットワークサービスとは別に、一から構築するワンアンドオンリーなウェブサイトも増え続けており、そのデザインやコンテンツはますます多様化しています。

今や企業はもちろん自治体や個人サークルでも多くが自前のサイトを持つ時代となっており、この記事をご覧になられている皆さんの中にも、インターネット上にある様々なウェブページを目にして「自分だけのサイトを作ってみたい」と思った方がいらっしゃるのではないでしょうか。

ちなみに、当社ADCIPは、ホームページの制作もやってますよ。

　しかし、ウェブサイトを作りたいと思いインターネットや本で色々と調べてみたものの、良くわからない記号がずらずら羅列していたり、何やら専門用語が綴られていたりして、結局よく分からず投げ出してしまった、という方も多いのではないかと思います。

　そういった初心者の方へ向けて、3回に分けて「一日で簡単にできるサイト開設の方法」をご紹介していきます。

　まずは、サイト開設の作業を始める前に、全体の手順をまとめておきます。

パソコンでウェブページを作る。
サーバー（ウェブサイトを保存する場所）を借りる。
作ったウェブページをサーバーにコピーしてインターネットに公開する。

　当記事は「1. パソコンでウェブページを作る。」手順を行います。

ウェブサイトの中身

　まずは作業を行う前にパソコンでインターネット上のウェブサイトを見てみましょう。

　ブラウザ（ウェブページを閲覧するためのアプリケーション）を開き、適当なサイトを表示してみます。そして右クリックをしてメニューから「ソースの表示」を選びましょう。すると別ウィンドウが開き、記号のような文章が表示されます。その記号がウェブページを作るためのプログラミング言語「HTML」です。このHTMLを使用し、ごく簡単なウェブページを制作して行きます。

制作の準備

　HTMLはテキストエディタという「文章を記述するアプリケーション」を使用して作成します。ウィンドウズならば標準で「テキストドキュメント」というテキストエディタが入っているのでそれを使用します。

　マイドキュメントフォルダを開き、右クリックしてメニューを表示します。メニューの中に「新規作成」という項目があるのでそこへカーソルを置くとさらにメニューが表示され、その中に項目「テキストドキュメント」があるのでそれを選びます。これでマイドキュメントフォルダ内に「新規テキストドキュメント」という名前のファイルが生成されます。このファイルにHTMLを記述し、ウェブページを作って行きます。

HTMLの記述

　作成した新規テキストドキュメントを開き、そこに以下の通りの記号を書いて下さい。記号は半角英数で記述して下さい。

<html>

<body>

Hello world

</body>

</html>

これらの記号は先ほど紹介したHTMLというプログラミング言語です。個々の記号の意味は後述します。　これでウェブページを表示させる必要最低限の準備が整いました。

ブラウザで表示してみる

　とりあえず、まずは記述したHTMLがきちんと働くかどうか確認します。

　新規テキストドキュメントを上書き保存し終了します。そして新規テキストドキュメントを保存したマイドキュメントフォルダを開き、ファイルの拡張子を表示します。

ウィンドウズXP　上部メニューバーの「ツール」→フォルダオプション→表示→「登録されている拡張子は表示しない」チェックボックスのチェックを外す
ウィンドウズ8　上部メニューバーの「表示」→「ファイル名拡張子」チェックボックスにチェックを入れる

　すると新規テキストドキュメントのファイル名が「新規テキストドキュメント.txt」という表示に変わります。ファイル名の後ろにくっついた「.txt」という文字は拡張子と呼ばれるもので、ファイルの種類を示す名札のような役割を果たします。「.txt」という拡張子はテキストドキュメントのファイルであることを示しています。

　この「.txt」を「.html」に書き換えます。ファイル名が「新規テキストドキュメント.html」となり、ファイルのアイコンがブラウザのものと同じになります。「.html」という拡張子はHTMLファイル（ウェブページ）であることを示します。

表示例

　新規テキストドキュメント.htmlのアイコンをダブルクリックして開くと、テキストドキュメントではなくブラウザが立ち上がります。ブラウザに「Hello world」という文章が表示されていたらウェブページ制作は成功です。

記述したHTMLの意味

　ここで、先ほど記述したHTMLについて解説します。

　HTMLは上記の通りウェブページを作るためのプログラミング言語です。テキストエディタで記述し、ブラウザで開く事により表示する事が出来ます。

　基本的な文法としてはカギ括弧の中に要素名を入れたタグで内容を挟むという形になります。また、終了タグの要素名の前にはスラッシュが入ります。

Hello world 
ここに文字情報が入ります。ここに文字情報が入ります。ここに文字情報が入ります。ここに文字情報が入ります。ここに文字情報が入ります。ここに文字情報が入ります。

上記の例は、文章を表示するHTMLです。タグとタグの間に挟まれた文章がブラウザ上で表示されます。

表示例２

　では、再び新規テキストドキュメント.txtをテキストエディタで見てみましょう。ファイルのタイトルを「新規テキストドキュメント.html」から「新規テキストドキュメント.txt」に戻し、テキストドキュメントで開きます。

一番上に<html>タグが、一番下に</html>タグが入っています。これは、挟まれた範囲内がウェブページとなることを示すタグです。

<html>タグのすぐ下にある<body>タグと、</html>タグのすぐ上にある</body>タグは、ブラウザに表示する要素を挟むタグです。

この<html>タグと<body>タグの入れ子構造がウェブページの大枠となります。

<body>タグと</body>タグの間に挟まれているHello worldは、「Hello world」という文字列をブラウザに表示するという意味のHTMLです。タグは文章を入れるためのタグで、との間に入力した文をブラウザに表示します。

　以上で「1. パソコンでウェブページを作る。」は完了です。

　HTMLだのブラウザだのといった難しい言葉も出てきましたが、これらを理解できればウェブサイト制作の基礎は習得できたという事になります。

復習として、タグとタグの間に挟まれている文章を書き換えたり、Hello worldというコードを複数並べたりして、拡張子を「.html」に書き換えてブラウザで表示を確認してみて下さい。

ADCIP ／IT事業部