HOME >> HTML > HTMLの書き方 その2

point HTMLの書き方 その2

HTML文書を再編集する

皆さんはブラウザに表示された内容を見て何かおかしいと思いませんか?
そう改行がされていないのです。ブラウザに改行を表示するには、改行したい部分に<BR>タグを入力します。この<BR>タグには終了タグがなく、一個で使用します。

それでは、先ほどのHTML文書をメモ帳で開いて再編集してみましょう。Internet Explorerのメニューバーの「表示」をクリックし「ソース」を選択するか、画面上の何もないところで右クリックして、メニューから「ソースの表示」を選択します。これでメモ帳が起動します。 では、下記のように「〜出来ました。」の後ろに<BR>を入力してみて下さい。

ソース
<HTML>
<HEAD>
<TITLE>まさぼ〜のホームページ</TITLE>
</HEAD>
<BODY>
ホームページが出来ました。<BR>
自分のホームページが世界中の人に見られる日も近いかな?
</BODY>
</HTML>

再編集した内容を保存

再編集した内容を保存します。再編集した内容をブラウザ上に表示するには、再編集した内容をまず保存する必要があります。メモ帳のメニューバーの「ファイル」をクリックし「上書き保存」を選択します。 次にブラウザのメニューバーの「表示」をクリックし、「最新の情報に更新」を選択するか、ツールバーの「更新」をクリックします。 下記のような改行された文書が表示されましね。
まさぼ〜のホームページ - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)
ホームページが出来ました。
自分のホームページが世界中の人に見られる日も近いかな?

文字を太くしてみる。

先ほどのHTML文書をメモ帳で開きます。 文字を太くするには<B>〜</B>で、太くしたい文字の範囲を囲みます。とりあえず、自分のホームページの部分を囲ってみてください。それでは再編集した内容をまず保存し、ブラウザで確認してみましょう。自分のホームページの部分が太文字になりましたね。
ソース
<HTML>
<HEAD>
<TITLE>まさぼ〜のホームページ</TITLE>
</HEAD>
<BODY>
ホームページが出来ました。<BR>
<B>自分のホームページ</B>が世界中の人に見られる日も近いかな?
</BODY>
</HTML>
まさぼ〜のホームページ - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)
ホームページが出来ました。
自分のホームページが世界中の人に見られる日も近いかな?

文字の色を変えてみる

次は文字の色を変えて見ましょう。文字の色を変えるには、<FONT>タグにcolor属性をつけて属性値に文字色を指定します。 先ほどの文書をメモ帳で開き、次のように入力してみてください。世界中の人の部分が赤色になりましたか? ここでは簡単に<FONT>タグの説明をしましたが、後でより詳しく説明します。
ソース
<HTML>
<HEAD>
<TITLE>まさぼ〜のホームページ</TITLE>
</HEAD>
<BODY>
ホームページが出来ました。<BR>
<B>自分のホームページ</B>が<FONT COLOR="red">世界中の人</FONT>に見られる日も近いかな?
</BODY>
</HTML>
まさぼ〜のホームページ - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)
ホームページが出来ました。
自分のホームページ世界中の人に見られる日も近いかな?

まとめ

このページと前のページではホームページを作るための作業手順や、基礎的なタグを使ってのHTML文書の書き方について説明しましたが、皆さん理解できたでしょうか??
このようにメモ帳を使ってホームページを作るには、HTML文書をメモ帳で開いてタグや文章を記入し、それを保存してからブラウザでどのように表示されるかを確認し、またメモ帳に新たにタグを記入したり間違いを訂正していく、この手順の繰り返しです。

このページでは、文字を太くする<B>タグなどを紹介しましたが、<B>〜</B>のようにタグは基本的に効果を出したい範囲を<開始タグ名>〜</終了タグ名>で囲むだけでいいのです。例外的に<BR>タグみたいに1つで使うものもありますが、多くのタグは終了タグを記入します。タグって簡単♪と思いません?
後はタグで指定される命令を一つ一つ覚えていくだけいいのです。次のページからは文章に見出しをつけたり、中央揃えするタグなどを紹介していきます。少しずつタグを覚えていって、いつかはホームページの管理人になれるように頑張って勉強しましょう。

スポンサード・リンク
Copyright ©2001〜2016 まさぼ〜 All Right Reserved