*高校生のためのホームページづくり(女の子用)

*5.自己紹介をしてみよう!

準備*

*まずウィンドウズに付属のメモ帳かもしくはさっき紹介したエディタを起動させてね。テキスト文書はそのままメールとか にも貼り付けできるのでとても便利です。文章を書くためだけならエディタがとても軽快でいろいろと便利です。長文を書くのにワープロソフトを使うのは近所のスーパーに買い物に行くのに大型トラックに乗って行くようなものです。QXエディタは htmlのタグを自動で挿入できるようなプログラムも本体とは別に開発されています。htmlのタグを挿入するフリーソフトは他に もありますが<center>とか<font>タグを用意しているようなソフトは避けるのが賢明です。何故ならそれらは1999年以降、使ってはいけないとされたタグだからです。<font>タグがだめな理由はスタイルシートの説明のところで述べます。

さっそく書いてみよう!

*始まりはこう書きます!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> これはhtmlのバージョンを宣言するものです。コピー&ペースト してください。※と言っても紙の説明を読んでいる場合は入力しないとだめですね。(極力やらない方が良いです。どこかで間違うもんね。)
<html>
<head>                        ここからが頭部=表紙の部分になります。
<title>デラバンの自己紹介のページ</title>  ここはとても大切です。
</head>   一応頭部を終わります。本当はもっと書くべきことがありますが最初はこれで良いでしょう。
<body>    本体部分の始まりです。
<h1>多摩太郎の自己紹介</h1> 見出し1です。
<h2>私の歴史</h2> 見出し2です。
<p> 1988年神戸生まれ<br>
1995年阪神大震災で被災〜怖かったヨ〜!<br>
2001年東京都青梅市に転居 <br>
2003年都立○○高校に入学 <br>
</p>
<h2>私の好きなもの</h2>
<p>
生年月日   1988年12月9日<br>
生誕地    神戸市中央区<br>
家族     両親と姉がふたり<br>
趣味     音楽、ネットサーフィン、ウェブページづくり<br>
得意な科目 英語、歴史<br>
好きな音楽 70年代のオールディーズロック&ポップス<br>
好きな食べ物 お好み焼き、もんじゃ焼きなどの粉物と麺類<br>
</p>
<hr>     水平線です。これは閉じるタグは必要ありません。
<address>作成日2004年2月1日 作成者 デラバン
mail:<a href="mailto:tamatarou@ybb.ne.jp">tamatarou@ybb.ne.jp</a>
</address>
</body>
</html>
※以上で終わりです。ここまで入力できたらファイル→名前を付けて保存を選び例えばprofile.htmlというファイル名にして保存してください。ファイル名は必ず英文字でなければなりません。大文字と小文字は区別されますので小文字に統一した方が良いです。それとprofile.htmでも良いのですがウィンドウズはお馬鹿なところがあって勝手に小文字のファイル名を大文字にしたりすることがありますがhtmlと4文字にしておきますとこういうことを避けることができます。こういう事って大事なことなんだけどあんまり書いている本って無いのですヨ〜!ではさっそく今作ったファイルを開いてみましょう。
●デラバンの自己紹介のページ [※注]デラバンというのは大阪梅田の阪神百貨店の地下で売られている大阪名物「イカ焼き」のデラックス・バージョン(卵入り=1枚170円)のことです。デラバンはデラバンが大好きなんです。
あんまりかっこよくないですね。それでは<head>と</head>の間のタイトルの下に
<link href="tama.css" rel="stylesheet" type="text/css">と1行挿入し、profile.htmlと同じところにCD-RWに添付してあるtama.css(男の子用)又はtama2.css(女の子用)をコピーしておいてください。それがきちんとできれば次のようになるはずです。
●外部スタイルシートを読み込んだデラバンの自己紹介のページ
どうですか?なかなかかっこいいでしょう?

改行について

*<br>は改行を表します。普通、段落というのは文章のひとまとまりなので途中では改行しません。何故なら読み手の環境は千差万別なのでそれらの環境で文章が自在に表現されるためには途中で改行してはいけません。それを作り手の環境に合わせてホームページビルダーの作成画面でEnterキーを押してしまいますと別の環境で見た場合変な表示になってしまいますので注意が必要です。例えば・・・

<br>は改行を表します。普通、段落というのは文章のひとまとまりなので
途中では
改行しません。何故なら読み手の環境は千差万別なのでそれらの環境
は千差万

・・・とこんな風にかっこ悪くなってしまいます。上の例は特別な例です。→次に表を作ってセルに先ほど書いたデータをコピー&ペースト(貼り付け)します。

Back<高校生のためのホームぺージづくり>Next

[TOPページへ] [目次のページへ]