ＨＴＭＬ（Webページを記述するためのタグ）を使ってホームページをつくる　Ⅰ


　

　　←そんなことないですよ～～。私にお任せあれ！(*＾Ｏ＾*)v　ピース♪
　　これからここに書いている通りにすればきっとあなたにも超簡単に
　　ホームページが作れますよぉ！

　　☆と～～ても素直なあなたは赤字で書かれた番号順に！
　　☆タグってなんだ？この際勉強しとこう！っていうあなたは
　　　タグ説明も見てね
　　★彡 ここはどうするんだ？？って人は掲示板に書き込んでね★彡 　　　

　　　　

　　◆◆◆　トップページを作る　◆◆◆

【　準備　】

　　　　はじめに拡張子を見えるようにする

　　(方法)
　WINDOWS XPの場合

　スタート　→　マイコンピュータを開く


　WINDOWS 98/2000の場合

　デスクトップのマイコンピュータを開く

　 　①上のメニュー欄のツール→フォルダオプション→表示→詳細設定の
　　　「登録されている拡張子は表示しない」の□のチェックを外す



【　本番スタート 】
★デスクトップにホームページ用のフォルダを作る★

　②デスクトップの何も無いところで右クリック→新規作成→フォルダ

　③フォルダが出来たら、名前を変更しておこう

　④フォルダの上で右クリック→名前の変更を左クリック→「Back Spase]キーで元の名前を消す
　　→新しい名前を入れる （※この時半角英数字で判りやすく）「ｈｐ」とか・・

　⑤フォルダをクリック（開く）してみる　まだ、真っ白け!（⌒^⌒)ｂ

★イメージ（画像用）ファイルを作る★
　　　
　　やっぱ、ホームページだもん文字ばっかりも
　　　寂しいでしょう！　うんうん(^-^)

　⑥右クリック　→　新規作成　→　フォルダ

　⑦フォルダの名前は「img]にしてね
　　　　※画像はここに全部保存してね


★index(ホームページの一番最初のページ）フォルダを作る★

　⑧右クリック　→　新規作成　→　テキストドキメント

　⑨今作った「新規テキストドキメント」の名前を変更（右クリック　→　名前の変更）する
　　　　※ドキュメントのままではインターネットに反映されません

　⑩名前を　「index.html」に変えてね

★いよいよページを作りましょう★
　⑪まずはメモ帳を開きましょう
　　スタート　→　プログラム　→　アクセサリ　→　メモ帳を左クリックで開きます
　　※私の場合はタグが色分けされるので見分けやすいので
　　　「TeraPad（メモ帳）」を使っています

　⑫そこへ「index.html」をドラッグ（マウスの左ボタンを押したままマウスを移動）
　　　する
　　※この状態ではメモ帳の中は真っ白！(;^_^A

　⑬さていよいよタグを打ち込んでいきます
　　※ < >タグは全部半角英数字で入力しなくてはいけませんよ！！
　　　　　 <html>←は○（半角）　　　＜ｈｔｍｌ＞←は×（全角）

　それでは、真っ白なメモ帳に下のとおりに打ち込んでね 
<html>
<head>
<title>ここにはホームページのタイトルを書く（例　ekuboisland)</title>

</head>
<body>　　




私の記念すべき１ページです

                           

　　　　　　　　　　　
<br>

</body>

</html>

☆　タグ説明　☆
　<html>　</html>　＝ 「HTMLで表示してる」と言う事
　<head>　</head>　＝　どんなホームページかっていう情報を書き入れる場所
　<title>　</title>＝　ホームページのタイトルでブラウザ（画面）の１番上の青い部分に表示されます
　<body>　</body>　＝　ここの間に内容を打ち込んでいきます
　<br>　　＝　改行します



上のように打ち終わったら保存（ファイル　→　上書き保存）しましょう！
上書き保存したら早速どう表示されるか見てましょう
※見方は「index.html」をクリックしてみてね（⌒^⌒)ｂ
　さっき打ち込んだ文字だけが表示されましたか？　表示されればＯＫで～す　v(=∩_∩=) ピース♪


★壁紙を貼り付けよう★

　⑭←まずはこれを右クリックして「img]フォルダに「名前を付けて画像を保存」してね
　　　※保存するファイル名はなんでもいいけど、「kabe.gif]　にするかな　（⌒^⌒)ｂ

　⑮メモ帳に戻って、<body>のなかにイメージを入れますよ
　　※消してしまった人はもう１度ドラッグすればいいので慌てないでね　(*＾Ｏ＾*)v

　⑯<body　background="img/kabe.gif">となります

☆　画像タグ説明　☆
　　　background = は背景のタグ
　　　img/　　＝　イメージフォルダの中ですよっていうタグ　
　　　　　＝　や　””のタグも忘れないように！ 　どうしても画像が出ない人はここで教えてくれてます 


<html>
<head>
<title>ここにはホームページのタイトルを書く（例　ekuboisland)</title>

</head>
<body　 background="img/kabe.gif">

　　
                     ↑（ここに書き込みます）



私の記念すべき１ページです

                           

　　　　　　　　　　　
<br>

</body>

</html>


★ウエルカム画像を付けてみよう！★

　⑰　
　　　↑またまたこれを保存してね（右クリック　→　名前を付けて画像を保存）
　　ファイル名は　「welcome.gif」　　がわかりやすいよねぇ（⌒^⌒)ｂ

　⑱画像の保存が終わったら早速下の赤字のように打ち込んでね
　 
<html>
<head>
<title>ここにはホームページのタイトルを書く（例　ekuboisland)</title>

</head>
<body　background="img/kabe.gif">

　　
                 

<div align="center">


<img src="img/welcome.gif" width="422" height="55" border="0" alt="welcome">
<div>

                     ↑（ここに書き込みます）




私の記念すべき１ページです

                           

　　　　　　　　　　　
<br>

</body>

</html>

☆　イメージタグ説明　☆
　　　★の部分は数字を記入する。保存したイメージと同じ大きさにする時は画像にマウスを重ねると
　　　　大きさ★（width）×★（height）が出るのでその数字を記入すればいい

　　　img src="★" ＝　イメージの指示タグ
　　　width="★" ＝　画像の横幅（ピクセル）
　　　height="★"　＝　画像の高さ（ピクセル）
　　　alt="★" ＝　画像の名前（日本語でもＯＫ。後でなんの画像か判るように表示。書かなくてもいい）
　　　border="★"　＝　外枠の表示（０～数字が大きくなるにしたがって線が太くなる。０は線が消える）
　　　<div align="☆"> ＝　範囲指定のタグで、この範囲ということ
　　　　　　　　　　　　　　　　☆のところは　left＝左寄せ　 center＝中央　right＝右寄せ　のどれかを入れる
　　　 </div >　＝　<div align="★">が終了しましたと言う事。　/（スラッシュ）は閉めの意味


　　　上のように打ち終わったら保存（ファイル　→　上書き保存）しましょう！
　　　上書き保存したら早速どう表示されるか見てましょう
　　　「index.html」をクリックしてみてね　（⌒^⌒)ｂ
　　　壁紙とwelcomeの文字が出ましたか？　表示されればＯＫで～す。　("⌒∇⌒") キャハハかわいい！！！
　　　次はプロフィールのページを作ります

　　　ホームページへ　次へ

ホームページへ トップページを作る プロフィールページを作る リンクページを作る
インターネットで公開する レンタルサーバーを使う テンプレート素材を使う 掲示板

SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送