「ページにタイトルをつける」でタイトルを記入したファイルの <body>〜</body> の間にページの本文を書いていく。ここでは、まず見出しと段落について学ぶ。
見出しをつくる
『
見出しには〈見出し要素〉を用いる。ここでは、以下の例のように入力すればよい。
...
<head>
<title>苗栗の紹介</title>
</head>
<body>
<h1>苗栗の紹介</h1>
</body>
</html>
なお、XHTMLでは、すべて小文字のアルファベット（◎ a,b,c,d...）でマークアップmark-upしなければならない。タグtagを大文字（× A,B,C,D...）で書いてはいけないので、注意すること。
- 誤ったタグの書き方：<BODY> <H1> </H1>... ×［正しくない］
- 正しいタグの書き方：<body> <h1> </h1>... ○［正しい］
段落をつくる
次に、段落をつくって文章を入力することにする。段落を設定するには〈段落要素〉を用いる。
以下の例のように入力して、保存save（儲存檔案）する。日本語の入力の方法は、「日本語入力について」のページを参照せよ。
<head>
<title>苗栗の紹介</title>
</head>
<body>
<h1>苗栗の紹介</h1>
<p> 北東の台北市から直線で約80キロ、南西の台中市から直線で約50キロの位置にあります。住民の多くが第一次産業に従事しており、都市化はあまり進んでいません。</p>
</body>
</html>
入力する文章の読み方と、キー入力の例を以下に示す。
ほくとう の たいぺいし から ちょくせん で やく80きろ、なんせい の たいちゅうし から ちょくせん で やく50きろ の いち に あります。じゅうみん の おおく が だいいちじさんぎょう に じゅうじ しており、としか は あまり すすんで いません。
HOKUTOU NO TAIPEISI KARA TYOKUSENN DE YAKU80KIRO, NANNSEI NO TAITYUUSI KARA TYOKUSENN DE YAKU50KIRO NO ITI NI ARIMASU. JYUUMINN NO OOKU GA DAIITIJISANNGYOU NI JYUUJI SITEORI, TOSIKA HA AMARI SUSUNNDE IMASENN.
段落要素に関する注意
〈段落要素〉の内容は、インライン要素でなければならない。したがって、〈段落要素〉を入れ子にすることはできない。
※誤った記述の例［段落の入れ子］ <p>段落はブロックレベル要素です。 <p>入れ子にしてはいけません。</p> </p>
また、〈段落要素〉の中に〈ul要素〉や〈ol要素〉などのブロックレベル要素を書くこともできない。
※誤った記述の例［ブロックレベル要素の記述］ <p>段落の中に、 <ul> <li>〈ol要素〉</li> <li>〈ul要素〉</li> </ul> などは書けません。</p>
正しい書き方は、次の通りである。
※正しい記述の例 <p>段落はブロックレベル要素です。</p> <p>入れ子にしてはいけません。</p>
<p>段落の中に、</p> <ul> <li>〈ol要素〉</li> <li>〈ul要素〉</li> </ul> <p>などは書けません。</p>
ファイルをブラウザで開く
保存したファイルをブラウザで開いてみよう。ファイルを開くには、次のようにする。
- Macintoshの場合
- 「index.html」のファイルのアイコンiconをブラウザのアイコンにドラッグ・アンド・ドロップdrag and dropする
- 「index.html」のファイルのアイコンiconをブラウザのアイコンにドラッグ・アンド・ドロップdrag and dropする
- MS Windowsの場合
- ブラウザのアイコンをダブルクリックdouble clickして、ブラウザを起動する
- ブラウザのメニューから「index.html」ファイルを開く（※ブラウザウインドウ上部のメニュー>檔案(F)>開啓檔案>桌面>index.htmlを選択）
- ［開啓(O)］のボタンをクリックする
ファイルを開くと、次のように表示される（Macintoshの場合）。
