Home > 2-1.オフライン作業

2. Edit Website

<< 戻る | 進む >>

2-1.オフライン作業

それではいよいよ、待ちに待ったコンテンツ作成に入りましょう！ Windowsの方は「メモ帳」、Macの方は「Simple Text」を開いて、次の通りに 入力してみて下さい。出来たら、ファイル名を「test01.html」(必ず半角文字で) として保存しましょう。

▼ファイル名：test01.html
<html> <head> <title>テストだよん</title> </head> <body> <h1>こんにちは!!</h1> </body> </html>

ここで確認です。英字で書かれている部分は必ず半角文字で 書いてください。でないとブラウザはデタラメな表示をします。 上記の<html>とか<body>とか のように「<」「>」で囲まれている文字こそ、HTMLのタグ と呼ばれるものです。タグの意味は次の通り

<html>～</html>→「これはHTMLファイルだよ」の意味。
<head>～</head>→「ここにファイルに関する情報が入るよ」の意味。
<title>～</title>→HTMLファイルのタイトル文字が入ります。
<body>～</body>→「この中にHTMLの中身が記述されるよ」の意味。
※↑上記4種類のタグは、HTMLファイルの最低限のお約束なので、 必ず書きます。
<h1>～</h1>→見出し用のでっかい字(h1サイズ)になる。

他にも、HTMLのタグは沢山あります。全部いっぺんに覚えられないのは 当然です。「タグが理解できない」という悩みは皆同じなので ひとまずあまり気にしない事にしましょう。(^^;)

このHTMLファイルをブラウザで見るとどうなるのでしょう？ 下のプレビューボタンを押せば、手っ取り早く確認する事ができます。



しかし、自分できちんと表示結果を確認する場合は、
  1. Windowsの方はエクスプローラ内(Macの場合はフォルダ内)でHTMLファイル(今回はtest01.html) をドラッグし、
  2. ブラウザの上でドロップする
こうすれば、簡単にプレビューが出来ます。

どうですか？インターネットにつながなくても、自分のPCだけで ホームページを表示する事が出来たでしょう？これをオフライン作業 と言います。こうやって、インターネットにアップする前に、自分のPCで ファイルの出来栄えを確認するんですね(^_^)

ヒント：test01.htmlの表示に成功したら、試しにそれを ブックマーク(お気に入りに追加)してみましょう。その後、ブックマークから 何度でも表示させられるので大変便利です。詳しくは 1-3.ブラウザの基本 をもう一度お読みください。


test01.htmlを書き換える

オフライン作業で最も頻繁に行われるのは「HTMLファイルの更新」です。 表示させてみたら、やっぱり内容が気に入らなかったので修正する、 という作業ですね。先ほどのtest01.htmlを使ってやってみましょう。 ファイルを次のように書き換えて、「上書き保存」してください。

▼ファイル名：test01.html
<html>

<head>
<title>テストだよん</title>
</head>

<body>
<center>
<h1>こんにちは!!</h1>
</center>
<hr>
ファイルの内容を修正したぞ!!<br>
そしたら少しカッコ良くなったような気がするぞ！<br>
さあ修行するぞ!
さあ修行するぞ!
さあ修行するぞ!
さあ修行するぞ!
さあ修行するぞ!<p>
。。。。なんか某宗教団体みたいでイヤだぞ!<p>
</body>

</html>



プレビューしたらどうなりましたか？少しホームページらしくなったのでは？ ここで、新しく出てきたタグの意味を紹介します。

<center>～<center>→ 文章の中央揃え
<hr>→ 横罫線を引く
<br>→ 改行する
<p>→ 一行あけて改行する

ところで、上記の「さあ修行するぞ!」の箇所ですが、ファイル上では 改行されているのに、実際にブラウザで表示すると、<br>や<p> を付けなかった箇所は改行されてない事が分ります。HTMLで文章を 改行したい時には、必ず改行タグを入れなければならないわけですね。

もういちど、あなたの書いたtest01.htmlを使って オフライン状態で試してみましょう。同じような表示結果になりましたか? ならない場合は、タグがちゃんと半角英字になっているか もう一度チェックしてみて下さい。(^_^)

ヒント：test01.htmlを書き換えて挑戦した勇敢な方へ！ 内容を書き換えて(上書き保存して)、ブラウザへドラッグ＆ドロップしたのに 表示されたページが書き換わらなかった場合→ 迷わずブラウザの 「更新(reload)」ボタンを押しましょう。詳しくは 1-3.ブラウザの基本 をもう一度お読みください。

>> 上にもどる
<< 戻る | 進む >>