DHC-オンライン講座
文系の人にもわかる HTML入門

Lesson 1 ワープロの文書とホームページの違い

この講座では、ホームページの仕組みと作成方法の基本を学びます。 まず、ホームページとワープロの文書を比較しながら、初めてのページを作ってみましょう。

初めてのページの作成 ―― まずは同じようなページをワープロで

まず、図1-1のような、とても短いホームページを作ってみましょう。

図1-1 これから作成するページ

いきなり、ホームページを作るのはちょっと大変ですので、まずワープロを使って似たようなページを作ってみましょう。 Microsoft Word(マイクロソフト・ワード)などのワープロソフトを使って、図1-1と同じようなレイアウトのページを作成してみます。 次の手順に従ってください。

  1. Wordなどのワープロソフトを起動し、新しい文書(白紙の文書)を作成します。

    メモ

    Wordでホームページを作ることもできますが、Wordのこの機能にはいくつか問題がありますし、この機能を使ってHTMLの勉強をするのは困難ですので、ここでは普通の文書の新規作成を選択してください。

  2. 図1-1と同じように文字を入力し、大きさなどを指定します。
    「インナーウェブへようこそ」の部分はタイトル(見出し)なので、書体(フォント)を大きくして太字にするか、図1-2のように、「見出し1」などの見出し用の「スタイル(style)」を選択して目立つようにしてください。 図1-3のようなページに仕上げてください。
    図1-2 Wordにおける「スタイル」の指定
    図1-3 図1-1と同じような内容をワープロで作成
  3. 入力が終わったら[ファイル]メニューから[上書き保存](あるいは[保存])を選択します。
    図1-4のようなファイル保存の「ダイアログボックス」が表示されます。
    図1-4 ファイル保存のダイアログボックス
  4. 適当な場所にwebpageというフォルダを作り、そのフォルダに移動します。
    たとえば[ドキュメント]の下に[webpage]というフォルダを作ってください。 この講座で使う例題をすべてここに入れることにします。
    Windows 7などの場合、新しいフォルダを作るには、上の図1-4のように、ダイアログボックスの上のほうにある[新しいフォルダ]のアイコンをクリックして作るのが簡単です。
  5. 新しいフォルダを作ったら、それを選択してそのフォルダに移動してください。
  6. example1という名前で保存します(図1-5)。
    図1-5 名前を指定して保存

初めてのページの作成 ―― HTMLで

上で見たようにワープロソフトで図1-3のようなページを作るのは簡単です。 今度は同じような内容をもつホームページを作成してみましょう。 ホームページの作成用のプログラム(アプリケーション)も市販されていますが、じつは、既に皆さんのパソコンの中に入っているプログラムを使ってホームページを作ることができます。

ホームページを作るにはWindowsの「メモ帳」などの「エディタ」と言われるプログラムを使うのが手軽な方法です。 次の手順に従って、作成してみてください。

  1. Windowsの「メモ帳」などの「エディタ」を起動します。
    たとえばWindows 7ならば、[スタート]メニューから[すべてのプログラム]→[アクセサリ]→[メモ帳]の順に選べば起動できます(図1-6。 表示のされ方は環境によって少し異なります)。
    図1-6-1 「メモ帳」を起動(Windows 7の場合)
    図1-6-2 「メモ帳」を起動(Windows XPの場合)
    OS Xなど、他のOS(オペレーティングシステム)を使っている方はそれぞれ付属のエディタ(「テキストエエディット」など)を使ってください。 なお、Wordなどのワープロソフトを使ってホームページを作ることもできますが、HTMLを使ってホームページを作る場合はエディタを使うようにしましょう。
  2. 開いたウィンドウに図1-7のように文字を入力してください(リスト1-1)。

    メモ

    入力した文字の行が長すぎて隠れてしまう場合は、[書式]→[右端で折り返す]を選択すると、折り返して表示してくれるので、隠れなくなります。

    図1-7 「メモ帳」を使って入力

    リスト1-1 example1.html 最初のホームページ

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <title>インナーウェブ ―― 内なる宇宙を見つめて</title>
    <meta charset="utf-8">
    </head>
    <body>
    <h1>インナーウェブへようこそ</h1>
    <p>
    インナーウェブは現代に疲れたあなたを心からリラックスさせる「癒しの空間」をご提供いたします。 
    </p>
    </body>
    </html>
    
  3. 入力が終わったら[ファイル]メニューから[上書き保存]を選択します。
  4. [ドキュメント]の下などに作った[webpage]というフォルダに移動します。
  5. ダイアログボックス下の[ファイルの種類]の欄をクリックして、図1-8のように[すべてのファイル]の方を選択します。
    通常のホームページのファイルは、単純な[テキスト文書]ではなくてホームページ用の[HTMLファイル]として保存しますので、「ファイルの種類」は[テキスト文書 (*.txt)]ではなく、[すべてのファイル]を選択します。
  6. また「文字コード」の欄をクリックして、[UTF-8]を選択してください。 以前は「シフトJIS」などの文字コードがよく使われましたが、最近は世界各国で使われている文字を表示できる「UTF-8」がよく使われます。 扱いも楽なので皆さんもこれからはUTF-8をを使うのがよいでしょう。
    図1-8 [すべてのファイル]と[UTF-8]を選択
  7. [ファイル名]にexample1.htmlを指定してこの名前で保存します(図1-9)。
    図1-9 ファイル名の指定
    これで準備は完了です。 それでは、作成したページをウェブブラウザで見てみましょう。
  8. Internet Explorer(インターネット・エクスプローラー。 以下IEと省略します)などのウェブブラウザを起動して読み込みます。
    IEの場合[ファイル]メニューから[開く]を選び、[参照]のボタンをクリックして先ほど作成したexample1.htmlを指定します([ファイル]メニューが見あたらないという人は下の「注意」を参照してください)。 [webpage]というフォルダの中にあるはずです。 標準の設定では拡張子の「.html」は表示されていないので、example1という名前のファイルを選択します(図1-10)。
    図1-10 ブラウザでファイルを選択

これで、図1-11のようなホームページが表示されるはずです。 初めてのページが完成しました。 厳密には、ほかの人がインターネットを経由して参照(アクセス)できないと「ホームページ」とは呼べないかもしれません。 そうするにはここでできたファイルを、単に「ウェブサーバ」と呼ばれるコンピューターにコピーすればよいだけですので、これも「ホームページ」と呼んでおきましょう。

図1-11 ウェブブラウザで表示

注意

Windows 7やWindows 8などの場合、[ファイル]メニューなどの[メニューバー」は、設定をしないと表示されません。 まず、この設定を行う必要があります。
IEのウィンドウ左上をクリックすると、下のようなメニューが出てくるので[メニューバー]を選択します。 これで[メニューバー]の左側にチェックマーク✓が入ります。


すると下の図のように、[ファイル]などのメニューがウィンドウ上部に表示されます。


メモ

ホームページ用の文書は「テキスト文書」ではあるのですが、特別な書式に則って書かれているため、通常「テキスト文書」につける「.txt」という拡張子は使いません。

文字そのものに関するデータだけが入っている文書のことを「テキスト文書」、このような文書が保存されているファイルのことを「テキスト形式のファイル」「テキストファイル」などと呼びます。 テキスト形式のファイルには、文字について書体の種類や大きさ、レイアウトに関する情報はなく、また図なども入っていません。 単に、文字を表すコード(数値)が並んでいるだけです。 ホームページ用の文書はテキスト文書なのですが、HTMLという特別な形式で書かれているテキスト文書なので、拡張子として「.html」あるいは「.htm」をつけることに決まっています。

ホームページとワープロの文書の違い

さて、初めてのホームページが完成しましたが、どうだったでしょう? ワープロで文書を入力するのと比べてどちらが簡単でしたか?

ここで、ホームページとワープロと比較して両者の特徴を見てみましょう。

図1-1のワープロに入力した内容とリスト1-1と比較してみましょう。 ウェブブラウザでは下のリストの色違いの文字だけが表示されています。 このうち<title>...</title>に囲まれた部分は、ブラウザのウィンドウの「タイトルバー」あるいは「タブ」の部分に表示されています。

残りの<html>、 <head>、<title>、</title>などは「タグ(tag)」と言われるもので、ウェブブラウザには表示されません。

リスト1-1 example1.html 最初のホームページ(再掲)

<!DOCTYPE html> <html>
<head>
<title>インナーウェブ ―― 内なる宇宙を見つめて</title>
<meta charset="utf-8">
</head>
<body>
<h1>インナーウェブへようこそ</h1>
<p>
インナーウェブは現代に疲れたあなたを心からリラックスさせる「癒しの空間」をご提供いたします。
</p>
</body>
</html>

さて、HTMLの「タグ」は何のためにあるのでしょうか?

ホームページを記述する言語 ―― HTML

ホームページは「HTML」という「言語」を使って書かれます。 HTMLはHyperText Markup Language(ハイパーテキスト用マークアップ言語)を略したものです。 「ハイパー」は日本語にすれば「超」です。 したがって「ハイパーテキスト」は単に文字が並んでいるだけでなく、それを超えたものであるというわけです。 「マークアップ」は印刷の用語で活字の型や並べ方などを指定する「組み指定」のことです。

Wordなどの従来のワープロでは、たとえば文字を大きくして「見出し」にするのに、文字を選択してから太字にして大きくしたり、「見出し1」などの「スタイル(style)」を指定したりします。 これに対してHTMLの文書では、「タグ」で「見出し」を指定(マークアップ)するのです。

トレーナーやTシャツなど首のところに「タグ」がついています。 タグを見ると、大きさ(S, M, L, XL, XXL, ...)、メーカーや加工した国、時には洗濯の仕方などがわかります。 同じように、HTMLの文書では文字や単語、文などにタグを付けて、「これが見出し」「ここから次の段落の始まり」などと示すわけです。

タグをつける場所は対象の前と後ろ。 開始タグで始めて、終了タグで終わります。 たとえば、一番大きな見出しならば、<h1>ではじめて</h1>で終わるといった具合です。

おもなタグの意味

それでは、上の文書で出現したタグの意味を見てみましょう。 いずれのタグもほとんどすべてのホームページで使われる大切なものばかりですので、しっかり覚えてください。

これまでのところをまとめてみましょう。 どのようなHTML文書(ホームページ)でも次のような感じでできているというわけです。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>タイトル</title>
<meta charset="utf-8">
</head>
<body>
  <<本文>>
</body>
</html>

<<本文>>のところに、書きたい内容を書けばよい訳です。 今のところは、見出しと段落からなる単純な文章を書くことができるだけですが、これからいろいろなタグを習えば徐々に面白いことができるようになります。

開始タグと終了タグ ―― <xxx> ... </xxx>

多くのタグには「開始タグ」と「終了タグ」があります。 終了タグは開始タグの名前の頭に「/」が付いたもので、開始タグと終了タグに囲まれた部分が、そのタグが適用される対象となります。 <html>、<head>、<title>などが開始タグで、</html>、</head>、</title>などが終了タグです。

タグとウェブブラウザの関係

HTML文書について、別の角度からタグの特徴を整理してみましょう。

ホームページ Vs. ワープロ — ホームページの特徴

HTMLの文書(ホームページ)では、このように実際に表示される内容と、内容をどう表示するか ―― 「内容(コンテンツ)」と「見栄え」 ―― を分離したため、どのようなコンピューターを使ってもブラウザさえあれば内容を表示できるのです。 たとえばリスト1-1の文書をWindowsとはまったく別系統のOSであるMac OS Xに付属するSafari(サファリ)というブラウザで表示しても、似たように表示されます(図1-12)。

図1-12 Mac OS Xのブラウザ「Safari」で表示

また、同じ内容を図1-13のようにスマートフォンで表示しても(画面の大きさは変わりますが)同じように表示されます。

図1-13 スマートフォンで表示

さらに、同じ内容を図1-14のように従来型の携帯電話(いわゆるガラケー)で表示することもできます。

メモ

そうです。 この講座の内容をマスターすれば、あなたの使っている携帯電話から見られるページが作成できます。

図1-14 携帯電話のブラウザで表示

ホームページ Vs. ワープロ ―― ワープロの特徴

これに対して、Wordを初めとするワープロソフトには次のような特徴があります。

HTMLはさまざまな環境をもつさまざまなコンピューターがつながれたインターネットの世界で、誰もが文書を表示できるようにする目的で作られた言語です。 このため、HTMLのタグを解釈できるブラウザさえ用意すれば、どのようなコンピューターでもHTML文書を見ることができるのです。 これに対して、Wordを代表格とするワープロソフトは、印刷時にどのようなものになるかを常に念頭において使われます。 したがって、文書の作成者が表示のされ方を細部まで規定できますが、逆に、たとえば「別の種類のパソコンでは見られない(別のOSでは見られない)」「新しいバージョンのワープロソフトで作った書類なので、このバージョンでは見られない」といった問題も起こりうるわけです。

最近では、携帯電話を使ってホームページを見ることも多くなりましたが、Wordの文書を見ることは多くの携帯電話ではできません。 しかし、普通のホームページならば携帯電話でも読むことができるのです。 HTMLという言語が決められたときには、携帯電話がこれほど普及してホームページを見られるようになるとはほとんどの人が予想していなかったのですが、どんなコンピューターを使っても見られるように、「テキスト形式」で保存して、「タグ」によって文字列の意味を指定するという仕組みが用いられたために、携帯電話でも簡単にホームページが見られるのです。

メモ

従来型の携帯電話(ガラケー)のブラウザとパソコンのブラウザでは、表示できる内容がかなり異なります。 たとえば、多くの携帯電話では大きさの違う文字を表示したり、複数の書体を使ったりはできません。 スマートフォンではパソコンとほぼ同じように表示できます(それ故、「スマートフォン」と呼ばれるわけです)。 なお、パソコンのブラウザでも、動画の再生には対応していないものもあります。

じつは、ブラウザごとに対応しているタグが違っており、そのブラウザが対応していないタグは無視されます。 つまり、そのタグがなかったものとして扱われます。 タグが無視されるだけなので、無視されたタグに囲まれた文字は画面に表示はされます。 ただし、それがタグで意図したとおりに表示される保証はなくなります。 たとえば、文字を強調表示するためのタグを使っても、スマートフォンでない携帯のブラウザでは対象の文字は強調はされずに他の部分と同じ種類の文字で表示されるわけです。 動画の表示に対応していないブラウザでは、動画はまったく表示されないことになります。

Lesson 1とLesson 2で紹介するような基本的なタグはインターネットが広まってから使われているすべてのブラウザ(携帯電話のブラウザも含む)が対応していますから、この種の問題は起こらないはずです。 ほかの本などで調べたタグを使うときには、そのタグにほとんどのブラウザが対応しているか意識して使った方がよいでしょう。

ホームページ Vs. ウェブページ

このLessonの最後に言葉の定義をしておきましょう。 パソコンや携帯電話を使って「ホームページ」を見るのはすっかり一般的になってしまいました。 しかし、じつは英語のhome pageあるいはhomepageは、もともと次のいずれかの意味で使われていた言葉です。

日本ではインターネットが一般的になるにつれて、入り口のページに限らずどのページも「ホームページ」と呼ばれるようになってしまいましたが、英語の意味に従うと「ウェブページ(Web page)」が「正しい」呼び方です。

「ホームページ」という言葉を使うと、現在広く使われている意味なのか元々の意味なのかがになってしまいますので、この講座では、これ以降「ホームページ」という言葉は使わずに、「ウェブページ」という言葉を使うことにします。

メモ

※ WebはWorld Wide Web(ワールド・ワイド・ウェブ)を省略したものですが、あまりに長いので、多くの場合単にWebと呼ばれます。

まとめ

最初の「ウェブページ」を作成してみました。 また、HTMLの文書の特徴をワープロソフトと比較しました。 ワープロソフトは見栄えも自前で決めるのに対してHTML文書では、タグによって対象の文字列がその文書においてどのような意味を持つのか、どんな役割をしているのかを指定していきます。 これにより、携帯電話など超小型のものを含むさまざまなコンピューターからインターネット上の世界中のコンピューターにある文書を簡単に見ることができるのです。

このLessonで登場したタグ

DHC-オンライン講座
文系の人にもわかる HTML入門
Lesson 1