〜ファイルを作る〜




知識だけつけても仕方ない!
ということでレンタルしているホームページスペースから
ファイルを作成してみましょう。
基本となるタグに慣れるのが目的です。
ホームページスペース
index.html






   


index.html
<html>
<head>
<title>あなたのホームページ</title>
</head>
<body>
<p>ホームページ作成中。頑張ります!</p>
</body>
</html>
あなたのホームページ - Internet Explorer
ファイル(F) 編集(E) 表示(V) お気に入り(A) ツール(T) 

ホームページ作成中。頑張ります!



上記ソースを打ち込むと次のように表示されます。
作成したファイル名は「〜.html」もしくは「〜.htm」として保存しましょう。
今は最初のファイルとして玄関を作成するので「index.html」として保存します。

<p></p>で段落を作ります。まとめるのに便利です。
   →段落としてまとめる
















〜文字サイズ・色を変更〜



文字サイズや文字色を指定して見やすくまとめます

ホームページスペース
index.html






   


index.html
<html>
<head>
<title>あなたのホームページ</title>
</head>
<body>
<p>
<font size="4">
ホームページ作成中。頑張ります!
</font>
<font color="#ff0000">
訪問ありがとうございます
</font>

</p>
</body>
</html>
あなたのホームページ - Internet Explorer
ファイル(F) 編集(E) 表示(V) お気に入り(A) ツール(T) 

ホームページ作成中。頑張ります!訪問ありがとうございます



先ほどのindex.htmlを上記ソースに変更します。

<font size="★"></font>で文字サイズを指定します。
★には「1〜7」の数字を入れます。
<font color="◆"></font>で文字色を指定します。
◆にはカラーコードを入れます。
   →文字サイズを指定
   →文字色を指定
















〜改行する〜




ごちゃごちゃと並んでいると見難くて仕方がないので
改行させてすっきりさせます
ホームページスペース
index.html






   


index.html
<html>
<head>
<title>あなたのホームページ</title>
</head>
<body>
<p>
<font size="4">
ホームページ作成中。頑張ります!
</font>
<BR>
<BR>
<font color="#ff0000">
訪問ありがとうございます
</font>
</p>
</body>
</html>
あなたのホームページ - Internet Explorer
ファイル(F) 編集(E) 表示(V) お気に入り(A) ツール(T) 

ホームページ作成中。頑張ります!

訪問ありがとうございます


index.htmlを上記ソースに変更します。

<BR>で改行します。
   →改行する













〜中央に寄せる〜




中央によせてすっきりさせます。



ホームページスペース
index.html






   


index.html
<html>
<head>
<title>あなたのホームページ</title>
</head>
<body>
<center>
<p><font size="4">
ホームページ作成中。頑張ります!
</font>
<BR>
<BR>
<font color="#ff0000">
訪問ありがとうございます
</font></p>
</center>
</body>
</html>
あなたのホームページ - Internet Explorer
ファイル(F) 編集(E) 表示(V) お気に入り(A) ツール(T) 

ホームページ作成中。頑張ります!

訪問ありがとうございます

index.htmlを上記ソースに変更します。

<center></center>で中央に揃えます。正しくは<div 〜〜〜となるのですが
詳しくは下のHTMLのページからどうぞ。
   →左・右・中央に揃える
















〜背景色を変える〜




背景色を変えて見栄えを良くします。
デザインセンスが問われますよ。
ホームページスペース
index.html






   


index.html
<html>
<head>
<title>あなたのホームページ</title>
</head>
<body bgcolor="#e3f0fb">
<center>
<p><font size="4">
ホームページ作成中。頑張ります!
</font>
<BR>
<BR>
<font color="#ff0000">
訪問ありがとうございます
</font></p>
</center>
</body>
</html>
あなたのホームページ - Internet Explorer
ファイル(F) 編集(E) 表示(V) お気に入り(A) ツール(T) 

ホームページ作成中。頑張ります!

訪問ありがとうございます

index.htmlを上記ソースに変更します。
<body>を<body bgcolor="#e3f0fb">としました。

<body bgcolor="◆">で背景色を指定します
◆にはカラーコードを入れます。
   →背景色の指定















〜リンクを貼る〜




ホームページとして成り立たせるためには
複数ページの使用は欠かせません。
リンクでつなげて一つのサイトとします。
ホームページスペース
index.html
game.html





   


game.html
<html>
<head>
<title>ゲームのページ</title>
</head>
<body>
<P>ここはゲームの部屋です!</P>
</body>
</html>
ゲームのページ - Internet Explorer
ファイル(F) 編集(E) 表示(V) お気に入り(A) ツール(T) 

ここはゲームの部屋です!
index.htmlを作成した手順と同じように別のファイルを作成します。
作成したファイル名は「〜.html」もしくは「〜.htm」として保存しましょう。

index.html
<html>
<head>
<title>あなたのホームページ</title>
</head>
<body bgcolor="#e3f0fb">
<center>
<p><font size="4">
ホームページ作成中。頑張ります!
</font>
<BR><BR>
<font color="#ff0000">
訪問ありがとうございます
</font>
<BR><BR>
<a href="game.html">ゲームの紹介</a>
</p>
</center>
</body>
</html>
あなたのホームページ - Internet Explorer
ファイル(F) 編集(E) 表示(V) お気に入り(A) ツール(T) 

ホームページ作成中。頑張ります!

訪問ありがとうございます



ゲームの紹介

作成したファイルを「index.html」からリンクします。

<a href="★.html">〜〜〜。</a>でリンクします。
   →リンクする
※リンクについて詳しくはサイトを作るの項目を参照して下さい。
















〜画像を置く〜



画像を置いて見栄えのあるHPに!









ホームページスペース
index.html
game.html
hana.gif




   


index.html
<html>
<head>
<title>あなたのホームページ</title>
</head>
<body bgcolor="#e3f0fb">
<center>
<p><font size="4">
ホームページ作成中。頑張ります!
</font>
<BR><BR>
<font color="#ff0000">
訪問ありがとうございます
</font>
<BR><BR>
<a href="game.html">ゲームの紹介</a>
</p>
</center>
<img src="hana.gif">

</body>
</html>
あなたのホームページ - Internet Explorer
ファイル(F) 編集(E) 表示(V) お気に入り(A) ツール(T) 

ホームページ作成中。頑張ります!

訪問ありがとうございます



ゲームの紹介


表示したい画像をホームページスペースに置き(アップロードといいます)、
index.htmlファイルに表示させました。
ここではhana.gifをアップロードし、花の画像を表示しています。


↓↓↓解り易く理解するなら↓↓↓
ホームページスペースはあなたの土地です、ホームページはです。
土地を植えて(画像をアップロードして)、土地からを摘んで来て家内に飾ります。

<img src="画像URL">で画像を表示します。
   →画像を表示
















〜ちょっと休憩〜



ここまでの知識でこんなホームページが作れます。



あなたのホームページ - Internet Explorer
ファイル(F) 編集(E) 表示(V) お気に入り(A) ツール(T) 




タグの絵本
訪問ありがとうございます


――――――コンテンツ一覧―――――

HTML CSS JS CGI テンプレート

―――――――――――――――――



     〜サイトマップ〜
    目で見るホームページ作成サイト
    リンクはhttp://www.site-html.com/へお願いします^^




















Copyright (C) 2007 タグの絵本 All rights reserved.
index「タグの絵本」