HTMLの文書の構造を知ることでBlueGriffon(ブルーグリフォン)を使いこなそう

BlueGriffon(ブルーグリフォン)は使い方さえわかれば、
HTMLの知識がなくてもホームページの作成は可能です。

しかし、HTMLの知識があればもっと便利になります。
今回は、基本的なHTMLの勉強をしていきましょう。

文書の構造について

HTMLは基本的に文書の構造を記述することで成り立ちます。

文書の構造として書籍の場合、次のような構成をよく見かけます。

bght1

行について

文書の基本的な単位は、文字の集まりで構成される行です。

HTML文書内での改行は、半角1文字分の空白として扱われます。
また2個以上連続して空白をあける際は1個の空白として表示されます。

HTMLでは、原則としてウィンドウの幅で自動的に折り返されて表示されます。
ただ、強制的に改行する場合は、<br>タグを用います。

例えば、

2014-01-29_113559

この文章を強制的に改行しようと思うと、HTMLではこうなります。

bght4

改行した部分に<br>タグを入れると、

bght5

強制的に改行されます。

段落について

ワープロ文書にも段落がありますが、HTML文書では<p>タグを使い明確に指定します。

次のような文章に段落を付けたい場合は、

bght6

bght7

段落をつけたい範囲を<p>~</p>で囲みます。そうすると、

bgth8

このように、<p>と</p>タグで囲まれた範囲の
段落の前後に空白行が入って表示されます。

見出しについて

見出しを指定するタグは<h1>~<h6>です。

例えば、h1はレベル1の「Heading」つまり見出しを指定します。
前後は改行されます。

多くのブラウザでは<h1>の見出しは大きな文字で<h6>は小さな文字で表示されますが、それは絶対的ではなく、ブラウザの解釈の問題です。

基本的には、レベル1~レベル6までの見出しを指定しているのに過ぎません。
このレベルは、「章」、「節」、「項目」といったレベルに対応づけて考えることが出来ます。

例えば、HTML文書でこのように記述すると、

bght8

ブラウザでは次のように表示されます。

bght9

HTML文書では、このようにタグを使い分けて文書を作成します。
基本的なところはきちんとマスターしておくと、BlueGriffon(ブルーグリフォン)を使う際に便利です。

コメントを残す