HP相談室 > HP作成講座 > とりあえず簡単なのを作ってみよう!

►とりあえず簡単なのを作ってみよう!
いきなり作るなんてそれは無理です、HTMLはどんなものなのか少しなれるために簡単なのを作って見ましょう。

-目次-


HTMLを書いてみよう!
テキストエディタを開いて下の文章を書いてみてください。説明するにあたって、HTMLにあたる部分には色を付けておきます。
 
<html>
<head>
<title>
練習</title>
</head>

<body>
これからホームページを作っていくぞ!
</body>
</html>
 
書くことができましたでしょうか。そしたらこれをtest.htmlで保存することにしましょう。ウィンドウズ付属のメモ帳ならば、下の方法で保存可能だと思います。

ファイル→名前を付けて保存で、保存するフォルダを指定した後、無題と書かれたファイル名を消し、test.htmlと書き込んで保存して下さい。そしたら保存完了です。

@チョット解説@
<html>・・・HTML文章の始まりということを表しています。
<head>・・・ヘッダの始まりのことです。</head>までに書くのはHP情報で、ブラウザに表示はされません。
<title>・・・ページのタイトル名を書くために使います。ココに書いたタイトルは、下の画像の赤線で示した所に表示されます。(HP作成講座ってやつ)

</title>・・・タイトルの終わりを表しています。
</head>・・・ヘッダの終わりを表しています。
<body>・・・本文の始まりを表し、ココから</body>までがブラウザに表示されます。
</body>・・・本文の終わりを表しています。
</html>・・・HTML文章の終わりを表しています。

※注意
test.htmlのtestはどんな名前を付けても問題ありませんが、.htmlは拡張子と呼ばれるものなので.htmlは変更しないでください。また、testの部分は半角英数で書くようにしましょう。


ブラウザで表示してみよう!


上のファイルをブラウザで見てみよう!開き方は下の通り。

まず、さっきファイルを保存したフォルダを開いてください。そしたら、その中にtest.htmlと言うファイルがあると思いますので、それをダブルクリックすればブラウザが起動します。

開けましたか。開いたらブラウザに、「これからホームページ作っていくぞ!」と言う文字が目に入ると思います。また、ブラウザのタイトルバー(一番上の青色の所)に「練習」と言う文字も見えると思います。

表示されれば、彼方の一番最初に製作したホームページの完成です。表示されたのを確認できればブラウザ閉じちゃって結構です。


少し追加してみよう!


 test.htmlに少し文書を追加してみましょう。まずはメモ帳でファイルを開きます。開き方は下の通り。

ファイル→開くでさっき保存したファイルを開いてください。

開けましたか。開いたら「これからホームページ作っていくぞ!」に少し文章を追加してみましょう。そうですね、「これから最高のホームページを作っていくぞ!」にしてみましょうか。 書けたら下の方法で保存してください。

ファイル→上書き保存これで保存完了です。そしたらブラウザで表示してみてください。「これから最高のホームページを作っていくぞ!」になっていると思います。これで少し追加は終わりです。


文字の色を変えてみよう!


文字の色がずっと一色と言うのも面白くないと思うので、次は文字の色を変えて見ましょう。test.htmlを開いて「これから最高のホームページを作っていくぞ!」の中に下の文を追加してみてください。
 
これから最高の<font color="blue">ホームページ</font>を作っていくぞ!


出来たらまた上書き保存してブラウザで表示してみてください。「ホームページ」が青色になっていると思います。

これから最高のホームページを作っていくぞ!


文字を太字にしてみよう!
次に文字を太字にしてみましょう。強調したい時とかに良く使いますね。上の色を変えたやつを使用します。
 
これから<b>最高</b><font color="blue">ホームページ</font>を作っていくぞ!

出来たら上書き保存してブラウザで表示してみてください。「最高」の部分が太くなったと思います。「ホームページ」はもちろん青色です。

これから最高ホームページを作っていくぞ!


改行をしてみよう!
次は、改行をして文章を追加してみたいと思います。きっと皆さん下のように改行すると思います。
 
これから<b>最高</b><font color="blue">ホームページ</font>を作っていくぞ!
みんなが驚くホームページを作るぞ!

しかし、メモ帳内で改行を行っても、ブラウザで表示してみると一行で表示されてしまいます。改行もHTMLで書かないといけません。下の様にすればできます。

これから<b>最高</b><font color="blue">ホームページ</font>を作っていくぞ!<br>
みんなが驚くホームページを作るぞ!

出来たら上書き保存をしてブラウザで表示してみてください。<br>の後の文章が改行されているはずです。

これから最高ホームページを作っていくぞ!
みんなが驚くホームページを作るぞ!