2.Basic

ああだこうだと御託を並べる前に、とりあえずWebサイトを作ってみましょう。習うより慣れろってね。うだうだ理屈を説明されるよりも実際にやってみた方が楽しいでしょ?

まずは適当なテキストファイル用意してください。何処かのサイトの文章をコピペしてもいいし、自分の書いた日記やレポート、小説でもいいです。私は次のような文章を扱うことにします。

HTMLとは何か
HTMLとは「HyperText Markup Language」の略です。直訳すると「ハイパーテキストをマークアップするための言語」ってところでしょうか。ようするに普通の文書をハイパーテキストにするための印の付け方(マークアップ法)を定めた約束事ってことです。

それでは、まず題名を<h1></h1>でくくりましょう。実際やると下記のような感じになります。

<h1>HTMLとは何か</h1>
HTMLとは「HyperText Markup Language」の略です。直訳すると「ハイパーテキストをマークアップするための言語」ってところでしょうか。ようするに普通の文書をハイパーテキストにするための印の付け方(マークアップ法)を定めた約束事ってことです。

次に段落を<p></p>でくくりましょう。こんな感じね。

<h1>HTMLとは何か</h1>
<p>HTMLとは「HyperText Markup Language」の略です。直訳すると「ハイパーテキストをマークアップするための言語」ってところでしょうか。ようするに普通の文書をハイパーテキストにするための印の付け方(マークアップ法)を定めた約束事ってことです</p>

そんな感じで題名と段落をくくったら(マークアップって言います)、あとはおまじないを書いてできあがり。

<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>HTMLとは何か</title>
</head>
<body>

<h1>HTMLとは何か</h1>
<p>HTMLとは「HyperText Markup Language」の略です。直訳すると「ハイパーテキストをマークアップするための言語」ってところでしょうか。ようするに普通の文書をハイパーテキストにするための印の付け方(マークアップ法)を定めた約束事ってことです</p>
</body>
</html>

マークアップが終わったら、適当なファイル名で保存してWebブラウザで見てみましょう。きちんと表示されました? おまじないの意味とか詳しいことについては次回解説します。別にそういうのはどうでもいいやって人は第3回に行ってください。下に今回作成したサンプルをリンクしておくので、参考にしてください。ちなみにダウンロードしたい場合は、右クリックメニュー(ワンボタンマウスの場合はボタン長押しかCtrl+クリック)で保存してください。

サンプルファイル:sample2.html

今回のまとめです。見出しは<hn></hn>(n=1から6までの整数)でくくる。見出し以外は<p></p>でくくる。それができたらおまじないを書く。この3ステップができれば立派なWebページになります。ちょっと見た目がいまいちですけどね。