ＨＴＭＬを使ってホームページをつくる Ⅱ


　　　次にプロフィールのページをを作ってみましょう
　　　ここからは素材を取り入れながら作っていきますよ（⌒^⌒)ｂ
　　　やっとタグが少し理解できましたか？
　　　それじゃ、タグを利用しながら画面に変化を付けていきましょうね
　　　シンプレストさんのところでタグ付きの素材を提供してくれてますので、
　　　ここを参考にしていきます

　　　　　　　　　　　　 　　　　

★プロフィールのページを作りましょう★



　①「index.html」　の上にカーソルを合わせて右クリックしましょう
　　コピーっていうのがあるので、これを左クリックします




　②何も無い所でもう一度右クリックしてください
　　貼り付けがあるので、それを左クリックしましょう




　③index.htmlのコピーが出来ましたね　（⌒^⌒)ｂ
　　これを右クリックして「名前を変更」しておきましょう
　　名前は　「profile.html」　がいいかなぁ～。

　　④メモ帳を開いて「profile.html」ドキュメントをドラッグしましょう
　　さっき「index.html」に書き込んだのと同じタグがすでに書かれていますねぇ
 　　・・・・・って当たり前か！コピーなんだから・・　　つ・次行ってみよう！（〃゜▽゜；Aアセアセ・・・

　　⑤シンプレスト　のメニューの中でプロフィールから好きな素材を選びます
　　※上のほうにメニューがあるので一覧を左クリックすると色んな種類が見れますよ

　　⑥選んだらその素材の下にあるタグの部分を左クリックするとタグ全体が青に変わりましたねぇ
　　それから、その上のコピーを押します 　　下のようにメモ帳の赤字の部分に貼り付けましょう
　　　　めんどくさかったら、今は取りあえず下の赤字の部分を　コピー　→　貼り付けましょう　(;^_^A

<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>






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




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

<!--＊　はじめ　＊-->
<table cellspacing="1" cellpadding="3" style="background:#197bff;font-size:13px;color:#197bff"><tr>
<td colspan="2" style="border-width:3px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;text-align:center">
<span style="color:#fff">
　･*････*････*････*････*････*････*････*････*････*････*･　</span><br>
ＰＲＯＦＩＬＥ
<br><span style="color:#fff">
　･*････*････*････*････*････*････*････*････*････*････*･　</span>
</td></tr><tr>
<td style="border-width:3px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;text-align:center">
<span style="color:#fff">･･*･　</span>
ＨＮ
<span style="color:#fff">　･*･･</span>
</td>
<td style="background:#fff;vertical-align:top">
<span style="color:#777">＊ここにプロフィールを書いてください＊</span>
</td></tr><tr>
<td style="border-width:3px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;text-align:center">
<span style="color:#fff">･･*･　</span>
職業/学校
<span style="color:#fff">　･*･･</span>
</td>
<td style="background:#fff;vertical-align:top">
<span style="color:#777">＊ここにプロフィールを書いてください＊</span>
</td></tr><tr>
<td style="border-width:3px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;text-align:center">
<span style="color:#fff">･･*･　</span>
住んでるとこ
<span style="color:#fff">　･*･･</span>
</td>
<td style="background:#fff;vertical-align:top">
<span style="color:#777">＊ここにプロフィールを書いてください＊</span>
</td></tr><tr>
<td style="border-width:3px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;text-align:center">
<span style="color:#fff">･･*･　</span>
スキなもの
<span style="color:#fff">　･*･･</span>
</td><td style="background:#fff;vertical-align:top">
<span style="color:#777">＊ここにプロフィールを書いてください＊</span>
</td></tr><tr>
<td style="border-width:3px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;text-align:center">
<span style="color:#fff">･･*･　</span>
キライなもの
<span style="color:#fff">　･*･･</span>
</td>
<td style="background:#fff;vertical-align:top">
<span style="color:#777">＊ここにプロフィールを書いてください＊</span>
</td></tr><tr>
<td style="border-width:3px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;text-align:center">
<span style="color:#fff">･･*･　</span>
年齢
<span style="color:#fff">　･*･･</span>
</td><td style="background:#fff;vertical-align:top">
<span style="color:#777">＊ここにプロフィールを書いてください＊</span>
</td></tr><tr>
<td style="border-width:3px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;text-align:center">
<span style="color:#fff">･･*･　</span>
性別
<span style="color:#fff">　･*･･</span>
</td>
<td style="background:#fff;vertical-align:top">
<span style="color:#777">＊ここにプロフィールを書いてください＊</span>
</td></tr><tr>
<td style="border-width:3px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;text-align:center">
<span style="color:#fff">･･*･　</span>
趣味
<span style="color:#fff">　･*･･</span>
</td><td style="background:#fff;vertical-align:top">
<span style="color:#777">＊ここにプロフィールを書いてください＊</span>
</td></tr><tr>
<td style="border-width:3px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;text-align:center">
<span style="color:#fff">･･*･　</span>
血液型
<span style="color:#fff">　･*･･</span>
</td><td style="background:#fff;vertical-align:top">
<span style="color:#777">＊ここにプロフィールを書いてください＊</span>
</td></tr><tr>
<td style="border-width:3px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;text-align:center">
<span style="color:#fff">･･*･　</span>
星座
<span style="color:#fff">　･*･･</span>
</td><td style="background:#fff;vertical-align:top">
<span style="color:#777">＊ここにプロフィールを書いてください＊</span>
</td></tr></table>
<!--＊　おわり　＊-->


　　　　　　　　　　　
<br>

</body>

</html>

　　↑これだけ見るとなんだかわかんないぞ～～！って感じなんだけど
　　画面で見るとかなりいい感じなんで確認してね（*＾.＾*）エヘッ

☆　タグ説明　☆
　<!--＊　はじめ　＊--> ＝この　<!--＊　★　＊-->の★ところに書いた文字は画像では見えません
　　　　　　　　　　　　　　　　だから、覚え書きにタグのところどころで使うととても便利です
　<table>　</table>　＝ 枠を表示するタグです。この間に書いた文字は枠内に表示されます
　cellspacing　　　＝　枠の太さを表します。数字を増やすと枠が太くなります
　cellpadding　　　＝　枠と文字の間隔を表します。数字を増やすと枠と文字の空白が大きくなります
　style="background＝　このセル全体の背景になるスタイル
　<span>　</span>＝　この間に書かれたものを１つのグループとするタグです



　　⑦それでは「ここにプロフィールを書いてください」のところに入力していきましょう
　　　　　　　　　　　　　　　　　　　　　　ekuboはこんな感じ　↓
<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>






私の記念すべき１ページです←（ここも変えて置きましょう。私のプロフィール紹介なんてどうかな？）




                     
<!--＊　はじめ　＊-->
<table cellspacing="1" cellpadding="3" style="background:#197bff;font-size:13px;color:#197bff"><tr>
<td colspan="2" style="border-width:3px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;text-align:center">
<span style="color:#fff">
　･*････*････*････*････*････*････*････*････*････*････*･　</span><br>
ＰＲＯＦＩＬＥ
<br><span style="color:#fff">
　･*････*････*････*････*････*････*････*････*････*････*･　</span>
</td></tr><tr>
<td style="border-width:3px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;text-align:center">
<span style="color:#fff">･･*･　</span>
ＨＮ
<span style="color:#fff">　･*･･</span>
</td>
<td style="background:#fff;vertical-align:top">
<span style="color:#777">  ekubo　</span>
</td></tr><tr>　　　　　　　↑（ここに書き込みます）
<td style="border-width:3px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;text-align:center">
<span style="color:#fff">･･*･　</span>
職業/学校　←このような日本語で書いてある部分は自由に変えれます。この字を消して新しい項目を書いてね
<span style="color:#fff">　･*･･</span>
</td>
<td style="background:#fff;vertical-align:top">
<span style="color:#777">  病　院　関　係　者　</span>
</td></tr><tr>
<td style="border-width:3px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;text-align:center">
<span style="color:#fff">･･*･　</span>
住んでるとこ
<span style="color:#fff">　･*･･</span>
</td>
<td style="background:#fff;vertical-align:top">
<span style="color:#777">  兵　庫　県　</span>
</td></tr><tr>
<td style="border-width:3px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;text-align:center">
<span style="color:#fff">･･*･　</span>
スキなもの
<span style="color:#fff">　･*･･</span>
</td><td style="background:#fff;vertical-align:top">
<span style="color:#777">  プリンとシュークリーム　</span>
</td></tr><tr>
<td style="border-width:3px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;text-align:center">
<span style="color:#fff">･･*･　</span>
キライなもの
<span style="color:#fff">　･*･･</span>
</td>
<td style="background:#fff;vertical-align:top">
<span style="color:#777">  匂いのきついものと騒音　</span>
</td></tr><tr>
<td style="border-width:3px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;text-align:center">
<span style="color:#fff">･･*･　</span>
年齢
<span style="color:#fff">　･*･･</span>
</td><td style="background:#fff;vertical-align:top">
<span style="color:#777"> 1956年9月7日生まれ　</span>
</td></tr><tr>
<td style="border-width:3px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;text-align:center">
<span style="color:#fff">･･*･　</span>
性別
<span style="color:#fff">　･*･･</span>
</td>
<td style="background:#fff;vertical-align:top">
<span style="color:#777">  オンナ　</span>
</td></tr><tr>
<td style="border-width:3px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;text-align:center">
<span style="color:#fff">･･*･　</span>
趣味
<span style="color:#fff">　･*･･</span>
</td><td style="background:#fff;vertical-align:top">
<span style="color:#777">  映画鑑賞とPCで遊ぶこと　</span>
</td></tr><tr>
<td style="border-width:3px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;text-align:center">
<span style="color:#fff">･･*･　</span>
血液型
<span style="color:#fff">　･*･･</span>
</td><td style="background:#fff;vertical-align:top">
<span style="color:#777"> O　型　</span>
</td></tr><tr>
<td style="border-width:3px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;text-align:center">
<span style="color:#fff">･･*･　</span>
星座
<span style="color:#fff">　･*･･</span>
</td><td style="background:#fff;vertical-align:top">
<span style="color:#777">  お　と　め　座　</span>
</td></tr></table>
<!--＊　おわり　＊-->


　　　　　　　　　　　
<br>

</body>

</html>


　　　どうですか？書けましたか？難しいタグもタグ付きで配布しているサイトさんに行けば意外と簡単でしょ！(*＾Ｏ＾*)v　ピース♪
　　　日本語で指示されたところだけを消して（Back Speceキーで）書き込んでいくだけです
　　　さて、どんな風に見えるのか確認しましょう　o(*°∀°)o ワクワク
　　　次はリンクページを作りましょう

　　　戻る　次へ

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

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