|
ホームページの作り方1
-
最低限必要なタグ
もっとも基本的なタグの使い方です。
sample1
<html>
<head>
<title>ここにホームページのタイトルを書く</title>
</head>
<body>
ここに本文を書く
</body>
</html>
上の例を使って説明すると <html> と </html> で一組になっています。
<html> が開始タグ、開始タグの前に"/"をつけた </html> が終了タグになります。
これは、<html>〜</html>までが、「htmlで書かれた文書です。」という指定です。
同様に<head>〜</head>が、ヘッダー、<body>〜</body>がボディです。
<title>〜</title>の間にこれから作るホームページのタイトルを書きます。
ここに書いた文字がブラウザの左上のところに表示されます。
また、タイトルは、ヘッダーの中に書くことになっています。
これは、こういう決まりなので、こういうものだと思ってください(^^;
ボディの部分に、ホームページの内容を書いていきます。
ここが、普段皆さんが見ている部分です。
とりあえず、上記の枠の中の<html>〜</html>までをコピーしてメモ帳に貼り付けてください。
それを、index.htmという名前で保存します。
保存する場所は、好きなところでかまいませんが、ここでは「作成前に必要な知識と準備」で作った、デスクトップのHPの作成というフォルダに保存することを前提に説明していきます。
保存をしたらそのファイルをダブルクリックするとブラウザが立ち上がり今作ったものが表示されます。
こちらをクリックするとsample1が表示されます。ここをクリック
同じになっていればOKです。
次から、このindex.htmを修正していきます。
-
見出しをつける
見出しをつけましょう。
見出しとタイトルは、同じにしておくのがいいです。
sample2
<html>
<head>
<title>ネットで稼ごう！</title>
</head>
<body>
<h1>ネットで稼ごう！</h1>
ここに本文を書く
</body>
</html>
sample1.htm を少し変更してsample2.htm を作ってみましょう。
赤い文字で書いてあるところを追加してください。
これ
が見出しです。
見出しは、<ｈn>タグ を使用します。
n には数字が入ります。
<h1>から<h6>まであり数字が大きくなるほど文字は小さくなります。
<h1>見出し</h1>
<h2>見出し</h2>
<h3>見出し</h3>
<h4>見出し</h4>
<h5>見出し</h5>
<h6>見出し</h6>
このように表示されます。
見出しは、<h1>から<h6>まであり数字が大きくなるほど文字は小さくなります。
ただし、<hn>タグは字の大きさを指定するためのものではありません。
あくまで見出しをあらわす為のタグです。
字の大きさを指定する方法は、後で説明します。
見出しと合わせてタイトルも変更しました。
こちらをクリックするとsample2が表示されます。ここをクリック
-
本文を書く
次は、本文を書いていきましょう。
sample3
<html>
<head>
<title>ネットで稼ごう！</title>
</head>
<body>
<h1>ネットで稼ごう！</h1>
<p>こんにちは！<br>
ここは、ネットでお小遣いを稼ぐ方法を紹介しています。<br>
</p>
OPT-Club
<p>登録して、メールを受信していれば、何もしなくてもポイントが貯まっていきます。<br>
1通10円と単価が高いので、ぜひ登録しておきましょう。</p>
</body>
</html>
まず、<p>タグは、段落の指定です。
<p>から</p>で囲まれたところが一つの段落になります。
<br>は、改行の指定です。
<br>を入れないと、改行して書いたつもりでも、表示されたときには一行に表示されてしまいます。
こちらをクリックするとsample3が表示されます。ここをクリック
文字の大きさと色を指定します。
sample4
<html>
<head>
<title>ネットで稼ごう！</title>
</head>
<body>
<h1>ネットで稼ごう！</h1>
<p>こんにちは！<br>
ここは、ネットでお小遣いを稼ぐ方法を紹介しています。<br>
</p>
<font size="4">OPT-Club </font>
<p>登録して、メールを受信していれば、 <font color="#ff0000">何もしなくてもポイントが貯まっていきます </font>。<br>
1通10円と単価が高いので、ぜひ登録しておきましょう。</p>
</body>
</html>
文字の大きさや、色を変えるには<font>タグを使用します。
大きさを変えるには、<font>タグのsizeという属性で
<font size="n">
のように指定します。
ｎ には1〜７の数字が入り数字が大きいほど文字が大きくなります。
標準のサイズは、3 になります。
sample4のように<font size="4">OPT-Club</font>とすると<font>で囲まれたOPT-Clubの文字が少し大きくなります
また、現在のサイズから相対的にサイズを指定する方法もあります。
標準のサイズが 3 のとき、
<font size="+1">OPT-Club</font>のように書いても同じ意味になります。
文字の色を変えるには、color属性で<font color="色">のように指定します。
"色"の部分は、カラーコードを16進数で表したものが入ります。
#RRGGBBという形式で表し、R-赤、G-緑、B-青を、0〜255の数値で表します。
この数値を16進数で表すと、00〜ｆｆになります。
例をあげると、
<font color="#ff0000">赤</font>
<font color="#00ff00">緑</font>
<font color="#0000ff">青</font>
のようになります。
また、
<font color="red">赤</font>
<font color="green">緑</font>
<font color="blue">青</font>
のように直接色をしてする方法もあります。
こちらをクリックするとsample4が表示されます。ここをクリック
-
リンクのしかた
リンクというのは、画面の絵や文字をクリックすると、他のページを表示する機能のことです。
普通にサイトを見ていればみなさんやっていますよね(^^;
でも、自分で作る場合にはいちいちどこをクリックしたら、どのページを表示するかということを書いてあげないといけません。
他のページを作りながらリンクの方法を説明していきます。
プロフィールのページと連絡先用にメール、掲示板あたりを作ってみましょう。
sample5
<html>
<head>
<title>ネットで稼ごう！</title>
</head>
<body>
<h1>ネットで稼ごう！</h1>
<p>こんにちは！<br>
ここは、ネットでお小遣いを稼ぐ方法を紹介しています。<br>
</p>
<font size="4">OPT-Club</font>
<p>登録して、メールを受信していれば、<font color="#ff0000">何もしなくてもポイントが貯まっていきます</font>。<br>
1通10円と単価が高いので、ぜひ登録しておきましょう。<br>
<br>
<a href="prof.htm">プロフィール </a> <a href="あなたのメールフォームのURL" target="_blank>メール </a> <a href="あなたの掲示板のURL">掲示板 </a>
</p>
</body>
</html>
リンクをするには<a>タグを使います。<a>タグの中にhref=と書き表示したいファイル名を書きます。
よそのサイトを表示したいときには、URLを、http://〜書けばそのサイトが表示されるようになります。
<a href="ファイル名" target="_blank">のように target="_blank"をつけるとクリックしたときに当たらしブラウザが立ち上がって表示するようになります。
こちらをクリックするとsample5が表示されます。ここをクリック
-
メールと掲示板
メールは、直接アドレスを書く方法もあるのですがメールフォームを使うと、自分のメールアドレスを公開するこもないのでメールフォームを作ったほうがいいでしょう。
メールフォームや掲示板は、フリーで利用できるものがあるので、そういうものを利用しましょう。
FC2でのメールフォームの作り方を紹介していますのでこちらの「FC2メールフォームの作成方法」をご覧下さい。
作ったもののURLをメールと掲示板のところに記入してください。
|
