HTML講座第4回
☆とにかく表示させてみよう - クイックガイド
1. HTMLの基本要素『タグ』
 
index.html - Kobako Editer 
<html>
<head>
 <title>とりあえずやってみよう</title>
</head>
<body>
このページの制作中のぼやき<br>
ちょっと眠い(笑)
</body>
</html>
 
2. とにかく表示させてみよう
 
3. ソースを編集してみよう
←前回『HP作成のための準備』へ 次回『ソースの基礎構造を作ってみよう』へ→
HTMLの基本要素『タグ』

この講座の第1回で印付け言語のイメージを見てもらったね。 おさらいの意味でもう1回紹介するね。

ここが非常に(太字)重要(太字ここまで)です。

これをHTMLで決められている形に置きかえればいいんだったよね。 HTMLでここからが太字だよと指定する印は<b>。 こういう記号のことをタグと呼ぶよ。 今までもちらっと出てきている<html>とか</head>なども タグのひとつだよ。 1つ1つのタグの意味は順に説明していくので とりあえずそういうのがあるってことを憶えておいてね。

とにかく表示させてみよう

では、とにかく一度テキストエディタでソースを書き込んで ブラウザで表示させるというプロセスを体験してみよう。 メモ帳などのテキストエディタを立ち上げて 次のようにソースを書き込んでみてね。

<html>
<head>
 <title>とにかくやってみて</title>
</head>
<body>
この部分の文字だけが表示されるよ。
</body>
</html>

このままコピー&貼り付けしてもいいけど、 手作業で書き込む場合はタグの部分はすべて半角で打ってね。 入力が終わったら、これを保存しよう。

この時に注意してもらいたいのはそのファイル名。 HPで使うファイルはファイル名に使える文字に 制約が出てくる場合があるので、 なるべく半角の英数文字と半角の記号 [.(ドット) -(ハイフン) _(アンダースコア)] 程度で付けた方がいいかもしれない。 またファイル名の最後につける拡張子は必ず『.html』または『.htm』にしようね。 例えば『test.html』のような名前をつけて保存してね。

保存が出来たらInternet Explorerなどのブラウザで 今保存したファイルを開いてみよう。 そうすると次のような感じで表示されるはずだよ。

とにかくやってみよう - 
この部分の文字だけが表示されるよ。



*ブラウザで実際の表示を確認したい人はこちら(別ウィンドウで開くよ)

もしソースがそのまま表示されちゃった時は 拡張子が間違っている可能性があるので ファイル名や前回説明した拡張子の設定などを確認してね。

ソースを編集してみよう

ちゃんと表示が出来たら今度はソースを少し編集してみよう。 再びファイルをテキストエディタで開いて編集するよ。 表示される文字の部分を『ここからが太字』という意味の <b>と『太字はここまで』という意味の</b>の2つのタグで囲んでみよう。

<html>
<head>
 <title>とにかくやってみて</title>
</head>
<body>
<b>この部分の文字だけが表示されるよ。</b>
</body>
</html>

これを再びブラウザで開いて表示を確認しよう。 HTMLでHPを作る時の流れはだいたいこんな感じだよ。

とにかくやってみよう - 
この部分の文字だけが表示されるよ。






*ブラウザでの表示はこちら(別ウィンドウ)

次はそれぞれのタグの意味を解説していくよ。
前回はHP作成のための準備と設定。

ウェブ木箱HTML講座
Copyright(C) 2002 あう