どの様なジャンルのホームページを作る上でも必ず文章は必要となってくるはずです。

簡易なものならば、文章だけでもホームページを作る事ができますし、タグによって文章に意味を持たせる事は、検索エンジン上でホームページを上位表示させるためのSEOという技術でも重要視されています。

Advertisement

1.ホームページのタイトルを決定

まず、ホームページにタイトルをつけましょう。

ホームページのタイトルとは、名前の通りにホームページ自体のタイトルになり、ブラウザを開いた時に左上に表示される部分になります。

image7

*上図では、赤枠内の「Google」がタイトルとなります。

タイトルは、headタグ内にtitleタグを作成し、titleタグ内に任意のタイトルを書き込んで下さい。
ここでは、仮で「ほーむぺーじのつくりかた」をタイトルとします。

すると下図の様なソースコードになるはずです。

ソースコード

image8

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html" />
<title>ほーむぺーじのつくりかた</title>
</head>

<body>
</body>

<html>

2.見出しの決定

見出しは、文書の区切りやコンテンツを紹介する場合にも利用できます。

ホームページでの見出しはhタグで決定します。
hタグは見出しであると共に、自身のホームページ重要なキーワードを示す部分であるので、分かりやすいものにしましょう。

hタグには 番号が振られていて<h1>~<h6>まで存在し、番号が若い程に上位の見出しという扱いになります。

まずは、<h1>で大見出しを決定しましょう。
タイトルと同様に、「ほーむぺーじのつくりかた」を見出しにします。

先ほどのタイトルタグはheadタグ内に書きましたが、実際にブラウザに表示させる部分はbodyタグ内に書きますので、見出しを入力したソースコードは下図の様になるはずです。
※ソースコードは変更するたびにファイルを保存しなおして下さい。

ソースコード

image9

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html" />
<title>ほーむぺーじのつくりかた</title>
</head>

<body>
<h1>ほーむぺーじのつくりかた</h1>
</body>

<html>

では、実際にブラウザ上ではどの様に表示されているか見てみます。

indexファイルをダブルクリックすればブラウザが開くはずです。
もしも、ダブルクリックしてもメモ帳が開いてしまう場合は、indexファイルを右クリックして、プログラム開く(H)を選択し、お使いのブラウザを指定して下さい。
※ブラウザはInternetExplorerを使っている事を前提に進めていきます。

ブラウザ

image10

上図の様に、タイトルと見出しがブラウザ上に反映されています。

ちなみに、hタグは見出しの重要度によって数字を指定します。
例えば、ホームページのタイトルを見出しとして表示させるなら<h1>で指定し、小見出しは<h2>指定する様に重要度が高い見出し程に数字が若くなります。

実際にhタグで指定した字は以下の様になります。

 

見出し1

 

見出し2

 

見出し3

 

見出し1は<h1>、見出し2は<h2>、見出し3<h3>で囲っています。

<h1>は本見出しですので、あまり多用するのは好ましくありません。
場合によって<h2>、<h3>と使い分けてください。

3.文章と段落

実際にホームページに文章を表示させる方法です。
HTMLで文章を表示させる時、基本的にはpタグを使います。

pタグは、<p>~</p>で囲われた部分をひとつの段落とします。

それでは、「2.見出しの決定」の続きとして、小見出しと文章をブラウザ上に表示させたいと思います。

まずh2タグで「ほーむぺーじのきほん」という小見出しを設定します。
そして、下記の文章をpタグで表示させてみましょう。

ほーむぺーじのきほん

ホームページの基本は、HTMLとタグになりますが、此処までで理解は深まって来ているでしょうか? 文章を表示させる事が出来るようになれば、やっとホームページらしくなってきますね。もうすぐ次のステップですので、しっかりと覚えていきましょう。


これをソースコードにすると下図の様になっているはずです。

ソースコード

image11

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html" />
<title>ほーむぺーじのつくりかた</title>
</head>

<body>
<h1>ほーむぺーじのつくりかた</h1>
<h2>ほーむぺーじのきほん</h2>
<p>ホームページの基本は、HTMLとタグになりますが、此処までで理解は深まって来ているでしょうか? 文章を表示させる事が出来るようになれば、やっとホームページらしくなってきますね。もうすぐ次のステ ップですので、しっかりと覚えていきましょう。</p>
</body>

<html>

これをブラウザで表示させると下図の様になります。

ブラウザ

image12

しかしこれだと、文章としてとても読みづらいと思いませんか?
読みやすいように、改行と段落を使って区切っていきましょう。

下図の様にソースコードに書き込みます。

ソースコード

image13

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html" />
<title>ほーむぺーじのつくりかた</title>
</head>

<body>
<h1>ほーむぺーじのつくりかた</h1>
<h2>ほーむぺーじのきほん</h2>
<p>ホームページの基本は、HTMLとタグになりますが、此処までで理解は深まって来ているでしょうか?<br />
文章を表示させる事が出来るようになれば、やっとホームページらしくなってきますね。</p>
<p>もうすぐ次のステップですので、しっかりと覚えていきましょう。</p>
</body>

<html>

まず、段落ごとにpタグで区切りましたが、本来pタグはこの様に使います。
先ほどの様に、全ての文章をひとつのpタグ内に収めてしまうのではなく、段落ごとに区切るものだと覚えておいて下さい。

<br />は文章内の改行を行うときに使用するタグであり、開始タグと終了タグの様にセットせずに単体で使用するタグですので注意して下さい。

ブラウザを開くと下図の様になっているはずです。

ブラウザ

image14

いくらか見やすくなりましたね。
改行と段落を使い見やすい文章を作成するのは、ホームページを作成する上でとても重要なことなので心がけましょう。

それでは、この項目はここまでとなりますので、文章を変化させるの項目に進んで下さい。

Big-Sea All rights reserved.2010-2013
当サイト内の文章、画像など、すべての無断使用、転載を禁じます。