Top▲

文系の人にもわかるHTML5+CSS3入門

第2章 HTMLを使ったウェブページの作成

第2章では、第1章で見たHTMLコードをもつウェブページを実際に作って見ましょう。

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

ウェブページを作るには「テキストエディタ」と言われるプログラムを使うのが手軽な方法です。普通は単に「エディタ」と呼ばれます。

Windows標準の「メモ帳」やMac(macOS)標準の「TextEdit(テキストエディット)」も一応「エディタ」の仲間ではありますが、HTMLファイルを扱うのが簡単ではないので、利用はすすめません。

自分で使っているエディタがない人は下記のいずれかをおすすめします。インストールして利用してください(単純で使いやすいと思います。しばらくして慣れてきたら自分の好みのエディタを探してみるのもよいでしょう)。

エディタを準備したら、エディタを起動して開いたウィンドウに図2-1のように文字を入力してください(リスト1-1)。

図2-1 エディタに入力

リスト1-1 example1.html 最初のウェブページのHTMLコード (別ウィンドウに表示

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

メモ

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

入力が終わったら[ファイル]メニューから[名前を付けて保存](あるいは[別名で保存])を選択します。

第1章で[デスクトップ]の下などに作ったwebpageというフォルダに移動して[ファイル名]にexample1.htmlを指定して保存してください。

これで準備は完了です。それでは、作成したページをウェブブラウザで見てみましょう。

webpageというフォルダの中に作ったexample1.htmlをダブルクリックするとブラウザが起動してこのページが表示されます。

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

図2-2 ウェブブラウザで表示

メモ

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

文字そのものに関するデータだけが入っている文書のことを「テキスト文書」と呼びます。また、このような文書が保存されているファイルのことを「テキスト形式のファイル」「テキストファイル」などと呼びます。

テキスト形式のファイルには、文字について書体の種類や大きさ、レイアウトに関する情報はなく、また図なども入っていません。コンピュータの立場から見ると、単に、文字を表すコード(数値)が並んでいるだけです(人間がエディタで見れば普通の文字が表示されます)。ウェブページ用の文書はテキスト文書なのですが、HTMLという特別な形式で書かれているテキスト文書なので、拡張子として「.html」あるいは「.htm」をつけることに決まっています。

まとめ

最初の「ウェブページ」を作成してみました。 練習のために、<h1>や<p>のタグを使って、ご自分の文章をウェブページにしてみてください。

この章で登場したタグ

既に第1章で説明しましたが、実際に書いてみたところで、もう一度復習しておきましょう。

文系の人にもわかるHTML5+CSS3入門
第2章 次の章へ