 |
 |
|
 |
|
|
☆とにかく表示させてみよう - クイックガイド
|
|
|
 |
index.html - Kobako Editer |
|
|
<html>
<head>
<title>とりあえずやってみよう</title>
</head>
<body>
このページの制作中のぼやき<br>
ちょっと眠い(笑)
</body>
</html>
|
|
|
|
|
|
 |
|
 |
この講座の第１回で印付け言語のイメージを見てもらったね。
おさらいの意味でもう１回紹介するね。
これをHTMLで決められている形に置きかえればいいんだったよね。
HTMLでここからが太字だよと指定する印は<b>。
こういう記号のことをタグと呼ぶよ。
今までもちらっと出てきている<html>とか</head>なども
タグのひとつだよ。
１つ１つのタグの意味は順に説明していくので
とりあえずそういうのがあるってことを憶えておいてね。
では、とにかく一度テキストエディタでソースを書き込んで
ブラウザで表示させるというプロセスを体験してみよう。
メモ帳などのテキストエディタを立ち上げて
次のようにソースを書き込んでみてね。
 |
<html>
<head>
<title>とにかくやってみて</title>
</head>
<body>
この部分の文字だけが表示されるよ。
</body>
</html> |
|
このままコピー＆貼り付けしてもいいけど、
手作業で書き込む場合はタグの部分はすべて半角で打ってね。
入力が終わったら、これを保存しよう。
この時に注意してもらいたいのはそのファイル名。
HPで使うファイルはファイル名に使える文字に
制約が出てくる場合があるので、
なるべく半角の英数文字と半角の記号
[.(ドット) -(ハイフン) _(アンダースコア)]
程度で付けた方がいいかもしれない。
またファイル名の最後につける拡張子は必ず『.html』または『.htm』にしようね。
例えば『test.html』のような名前をつけて保存してね。
保存が出来たらInternet Explorerなどのブラウザで
今保存したファイルを開いてみよう。
そうすると次のような感じで表示されるはずだよ。
＊ブラウザで実際の表示を確認したい人は
こちら(別ウィンドウで開くよ)
もしソースがそのまま表示されちゃった時は
拡張子が間違っている可能性があるので
ファイル名や前回説明した拡張子の設定などを確認してね。
ちゃんと表示が出来たら今度はソースを少し編集してみよう。
再びファイルをテキストエディタで開いて編集するよ。
表示される文字の部分を『ここからが太字』という意味の
<b>と『太字はここまで』という意味の</b>の２つのタグで囲んでみよう。
|
<html>
<head>
<title>とにかくやってみて</title>
</head>
<body>
<b>この部分の文字だけが表示されるよ。</b>
</body>
</html> |
|
これを再びブラウザで開いて表示を確認しよう。
HTMLでHPを作る時の流れはだいたいこんな感じだよ。
 |
次はそれぞれのタグの意味を解説していくよ。
|
|
| 前回はHP作成のための準備と設定。
|
