気の向くままに辿るIT/ICT
webzoit.netウェブサイトホームページ
ホームページ

3ステップで作るホームページ 1/3

ウェブ造ホーム前へ次へ
サイト内検索
カスタム検索
ホームページの作り方

3ステップで作るホームページ 1/3

1.ホームページ作り方・作成方法

 ホームページ作りは楽しく意外と簡単です。

 作りたいと思ったからこそあなたはここにいるわけで。

 出来る限りお手伝いしますのでがんばってくださいね。

 それでは早速とりかかりましょう。

◆例題1


<html>
<body>

表示できるかな?テスト

</body>
</html>

 HTMLにあるように、ちょっとしたお約束事さえ守って記述すればホームページはできるのでしたよね。

 でも、ちょっと待って。

 実はもうひとつお約束事があるんです。

 それは「私はこれからHTMLを使ってホームページを書くぞ!」との意気込みをブラウザに伝える為のおまじないです。

 以下の一文をあなたが書く全ての.htmlファイルの一番上に必ず記述してください(URL部分はある意味微妙なのでとりあえず除き、他は確実に大文字・小文字は区別されませんから全て小文字にしてもOKです)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html4/loose.dtd">

 これは、文字を一字一句記憶する必要はありませんし、ご自身のペースに合わせて必要な時に「そう言えばそんなのあったなぁ・・・」と思い出して頂ければ結構です。

 このおまじないはDOCTYPE宣言と呼ばれ、実は数種類ありますし、HTMLバージョンも含まれた情報ですので追加されていく事も充分にありますが、ここでは忘れましょう。

◆例題2


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html4/loose.dtd">

<html>
<body>

表示できるかな?テスト

</body>
</html>

 さてHTMLでも使った例題1にこの記述を追記したものが『例題2』です。

 それでは次にブラウザの一番左上の通常ブラウザのロゴマークとブラウザ名が表示されているところにあなたのページの題名をつけてみましょう。

<html>

          <= ここね

<body>
</body>
</html>

 ここでは<html></html>の内側で且つ<body></body>の前に以下のタグを追加します。

<head>
<title></title>
</head>

 尚、<title></title>は、<head></head>の内側に記述することになっています。

<head>
<title>表題</title>
</head>

 また、<head></head>は、<html></html>や<body></body>同様、他のタグを囲みますが、<title></title>は、その内側にページの表題となる文字列を記述します。

◆例題3


<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/TR/REC-html4/loose.dtd">

<html>
<head>

<title>表示テスト</title>

</head>

<body>

表示できるかな?テスト

</body>
</html>

 早速記述してみましょう。表示するタイトルは「表示テスト」にしましょう。

 全体としては、このようになります。

 次のステップは実際に作ったファイルがブラウザにどのように反映されるのか確認した後、一通りホームページを作ってみましょう。

  >> 2.ホームページの作り方

1.ホームページの作り方2.ホームページの作り方3.ホームページの作り方

各種HTMLとHTMLタグ/要素・属性・属性値

ウェブ造ホーム前へ次へ