ｈｔｍｌタグを覚えよう！
(初級編)
htmlタグとはＨＰを見せるためのプログラムの様なものです。
馴れないうちは大変ですが、がんばって覚えましょう！
・ＨＰ構成タグ
・文書構成タグ
・文字修飾タグ
・リンクタグ
〜ＨＰ構成タグ〜
そのページの基本的な情報を打ち込むタグです。
※ゲイトシティ等のgaiax系統のＨＰには必要ありません。
<html>
〜〜〜
</html>
〜〜〜
の間部分には"htmlタグを使います"というタグです。
文の最初に、最後にを入力しましょう。
<head><title>
〜〜〜
</title></head>
そのページのタイトルを決めるタグです。
〜〜〜
の部分にページのタイトルを入力しましょう。
ドリームキャストだとタイトルは画面の下に出てますね。
<body
〜〜〜
>
〜〜〜
</body>
"ここからが本文ですよ〜"というタグです。
〜〜〜
の間部分に本文が入ります。
〜〜〜
の部分に、以下の項目を追加することが出来ます。
text="色コード"
本文の文字の色を設定します。
link="色コード"
リンクしている所の色を設定します。
alink="色コード"
リンク部分にカーソルを合わせた時の色設定です。
vlink="色コード"
一度行った事のあるリンク先の色を設定をします。
bgcolor="色コード"
ページの背景色を設定します。
※追加する項目の間には必ず半角スペースを入れましょう。
※色のコードについては
こちら
を参照にして下さい。
こんなふうに入力しよう！
<html><head><title>Ｍｙ Ｈｏｍｅｐａｇｅ</title></head><br> <body text="#0000ee" link="ff0000" alink="#ffff00" vlink="#ff0088" bgcolor="#33ff33"><br> ・<br> ・<br> ずらーーっと本文 <br> ・<br> ・<br> </body></html>
例えば↑のように入力すると・・・
背景色が緑
、
文字の色が青
、
リンク部分が赤で
、
そこにカーソルを合わせると黄色に
、
一度行ったことのある場所は桃色
にタイトルは"Ｍｙ Ｈｏｍｅｐａｇｅ"それぞれなります。
〜文章構成タグ〜
文章レイアウトに必要なタグです。改行・中央寄せ等のがあります。
<br>
改行のタグです。改行する所に<br>を置きましょう。
例えば↓のように入力すると・・・
ここで→<br>←改行！！
ここで→
←改行！！
<hr
〜〜〜
>
水平線を引くタグです。内容を上下で区切る時になんか使えます。
〜〜〜
の部分に以下の項目を追加することが出来ます。
width="ピクセル数or％"
線の幅を設定します。
size="ピクセル数or％"
線の太さを設定します。
例えば↓のように入力すると・・・
<hr width="400" size="7">
※追加する項目の間には必ず半角スペースを入れましょう。
※ピクセル数と％については
こちら
を参照にして下さい。
<center>
〜〜〜
</center>
中央寄せのタグです。
〜〜〜
の間が中央寄せになります。
例えば↓のように入力すると・・・
<center>真ん中が好きなの</center>
真ん中が好きなの
<div align=
〜〜〜
>
〜〜〜
</div>
左右寄せのタグです。
〜〜〜
の部分に
"left"
を入れると左寄せに、
"right"
を入れると右寄せになります。
例えば↓のように入力すると・・・
<div align="right">右端がなんか落ち着く</div>
右端がなんか落ち着く
〜文字修飾タグ〜
文字に線を引いたり、色を変えたり大きさを変えたりのタグです。
<b>
〜〜〜
</b>
〜〜〜
の部分を太字にするタグです。
例えば↓のように入力すると・・・
<b>太くしちゃお〜うと！</b>
太くしちゃお〜うと！
<u>
〜〜〜
</u>
〜〜〜
の部分に下線を付けるタグです。
例えば↓のように入力すると・・・
<u>文字の下に線が出る〜！</u>
文字の下に線が出る〜！
<s>
〜〜〜
</s>
〜〜〜
の部分に削除線を付けるタグです。
例えば↓のように入力すると・・・
<s>あっ、間違えた！</s>
あっ、間違えた！
<font
〜〜〜
>
〜〜〜
</font>
〜〜〜
部分の文字サイズや色を変えるタグです。
〜〜〜
の部分に以下の項目を追加します。
color="色コード"
文字の色を変えます。
size="数値"
文字のサイズを変えます。
例えば↓のように入力すると・・・
<font color="#ff3300" size="5">ドリームキャスト!</font>
ドリームキャスト!
※追加する項目の間には必ず半角スペースを入れましょう。
※色のコードと文字サイズついては
こちら
を参照にして下さい。
<blink>
〜〜〜
</blink>
〜〜〜
部分の文字を点滅させるタグです。
例えば↓のように入力すると・・・
<blink>ニュース速報！</blink>
ニュース速報！
こんなふうに入力しよう！
例えば↓のように入力すると・・・
<center><font color="#ff3300" size="4"><b>ドリームキャスト<b></font><br><u>ド リームキャスト</u>はセガが開発した最新の<s>ケヌキマシーン</s><br>ゲームマシーンで す。<blink><br><font color="#00ff33">インターネットも出来ます</font><br></blink>。 </center>
ドリームキャスト
ドリームキャスト
はセガが開発した最新の
ケヌキマシーン
ゲームマシーンです。
インターネットも出来ます
。
〜リンクタグ〜
他のページやファイルにジャンプするタグです。
<a href="
ＵＲＬorファイル名"
>
〜〜〜
</a>
〜〜〜
の部分をクリックすると
指定した場所
にジャンプするタグです。
例えば↓のように入力すると・・・
<a href="http://www.yahoo.co.jp/">検索する？</a>
検索する？
<a href="#
〜〜〜
>
〜〜〜
<a name="
〜〜〜
>
同じページ内の場所にジャンプするタグです。
<a name="
〜〜〜
">を置いた場所に<a href="#
〜〜〜
>で飛びます。
〜〜〜
には自分の好きな名前(半角英数字)を入れましょう。
例えば↓のように入力すると・・・
<a href="#link">リンクタグの場所</a>
リンクタグの場所
※リンクタグの所に
が置いてあります。
<a href="mailto:
メールアドレス"
>
〜〜〜
</a>
〜〜〜
の部分で
指定したアドレスに
にメール送るタグです。
例えば↓のように入力すると・・・
<a href="mailto:macha-@eos.dricas.com">ｍａｃｈａにメールを送ろう！</a>
ｍａｃｈａにメールを送ろう！
ホームページ制作に関する質問・疑問・意見等は
または
まで気軽にどうぞ。
・ｈｔｍｌタグを覚えよう中級編へ
・ＤＣでＨＰを作ろう！に戻る
・ワールドマップに戻る
