はちど

ボードゲームのレビューなど。

*

HTMLを書いてみよう。その2:はじめの一歩

      2013/10/27

Hachiです。
HTML基礎講座、第2回です。
前回は、index.htmlを準備して決まり文句を書き入れました。
今回は、ブラウザ上にとりあえず文字を表示させてみましょう。

とりあえず何か書いてみる

前回終了時点のindex.htmlは、それだけでブラウザから開ける状態にはなっていますが、
開いても真っ白で何もないページがひらくだけです。
index1
では、ここに何か表示させてみましょう。

タイトルを書く

5行目の<title>と</title>の間にHTMLのタイトルを記述します。

本文を書く

8行目、<body>と</body>の間に本文を記述します。

途中経過

ここまでで、index.htmlの中身は下記のようになっていると思います。


html_templete2

改めてブラウザで開いてみる

ここまで編集したら一度index.htmlを保存して、改めてブラウザから開いてみます。
<title>に書いたものがタイトルバーもしくはタブに、
<body>に書いたものがメインの画面に出てきたでしょうか。
index2
上記のように表示されれば成功です。
プログラミング初歩のHello Worldみたいなものですね。

文章の体裁を整えてみる

<body>内に文章を書けばブラウザで本文が表示されることはわかりました。
次は、その本文を「見出し」と「段落」に分けて、より構造的に記述してみましょう。

見出し

見出しを書く場合は、一番上の見出しとなる文を<h1>~</h1>で括ります。


なお、見出しタグはh1のほかにh2からh6まで存在し、
それぞれがひとつ上のタグの(たとえばh2はh1の)小見出しになります。
適切に見出しをつけることで、文章の構造をはっきりさせることができます。

段落

見出し以外の、いわゆる本文を記述する場合は<p>~</p>で括ります。


pタグで括らなくても本文は表示できますが、段落を明示的に表しておくと、
後々便利になったりします。見出しもそうですが。

途中経過

では、見出しと段落を<body>の中に記述してみましょう。
ソースと表示は下記のようになると思います。


index3
複数の種類の見出しを使って、より構造的に記述すると、次のようになります。


index4
今回はここまで。
次回はいろいろなタグを使って、さらにWebページらしくしていきます。

sns-widget

更新情報の確認にはこちら!

 - HTML基礎講座