up-date 9:34 99/08/28
mark [ HOME PAGE ]

mark HTMLの作法

タグと属性(+属性値)の説明


Webページを作るには、HTML(Hypertext Markup Language)という簡単なマークアップ言語を使用して書きます。


[  できあがりを確認する。  ]


[ 1. HTMLで書くことを宣言します。 ]


タ グ 属 性 説 明
<html>・・・</html> HTMLで書くことを宣言する。


<html>
<head>
<title>ようこそ</title>
</head>
<body bgcolor="#ffffcc" text="#000000" link="#000033" vlink="#000066" alink="#000099">
<center> <h1><font color="#006699">WELCOME</font></h1> </center> <br><br>
<center>
きつねも たぬきも でておいで<br>
たんけんしよう はやしのおくまで
<p> <font size="2" color="#669900">森の宝もの−木の実</font> </p>
</center>
<center>
<table border="1" cellspacing="5" cellpadding="0">
<tr>
<td>
<img src="photoABC.jpg" alt="木の実" width="320" height="240">
</td>
</tr>
</table>
</center>
<br><br> <center> <img src="guide-next.gif" alt="次ページへ" width="60" height="20" border="0"> <a href="tagu.htm"> 「HTMLの作法」</a> </center> <br><br>
<hr>
<center> <a href="mailto:ts0510@pc.highway.ne.jp"><img src="e-mail.gif" alt="メールはこちらへ" width="60" height="30" border="0"> mailto:Toshiyuki Sano</a> </center>
<bgsound src="trau.mid" loop="1">
</body>
</htm>


[ 2. 文書全体に関する情報を書きましょう。 ]


タ グ 属 性 説 明
<head>・・・</head> 文書全体に関する情報を書く


<html>
<head>
<title>ようこそ</title>
</head>
<body bgcolor="#ffffcc" text="#000000" link="#000033" vlink="#000066" alink="#000099">
<center> <h1><font color="#006699">WELCOME</font></h1> </center> <br><br>
<center>
きつねも たぬきも でておいで<br>
たんけんしよう はやしのおくまで
<p> <font size="2" color="#669900">森の宝もの−木の実</font> </p>
</center>
<center>
<table border="1" cellspacing="5" cellpadding="0">
<tr>
<td>
<img src="photoABC.jpg" alt="木の実" width="320" height="240">
</td>
</tr>
</table>
</center>
<br><br> <center> <img src="guide-next.gif" alt="次ページへ" width="60" height="20" border="0"> <a href="tagu.htm"> 「HTMLの作法」</a> </center> <br><br>
<hr>
<center> <a href="mailto:ts0510@pc.highway.ne.jp"><img src="e-mail.gif" alt="メールはこちらへ" width="60" height="30" border="0"> mailto:Toshiyuki Sano</a> </center>
<bgsound src="trau.mid" loop="1">
</body>
</htm>


[ 3. タイトル文字を書きましょう。 ]


タ グ 属 性 説 明
<title>・・・</title> タイトル文字を書く
ここに書いた文字がブラウザの左上に表示されます。
また、ブックマークしたときのタイトルになりなす。


<html>
<head>
<title>ようこそ</title>
</head>
<body bgcolor="#ffffcc" text="#000000" link="#000033" vlink="#000066" alink="#000099">
<center> <h1><font color="#006699">WELCOME</font></h1> </center> <br><br>
<center>
きつねも たぬきも でておいで<br>
たんけんしよう はやしのおくまで
<p> <font size="2" color="#669900">森の宝もの−木の実</font> </p>
</center>
<center>
<table border="1" cellspacing="5" cellpadding="0">
<tr>
<td>
<img src="photoABC.jpg" alt="木の実" width="320" height="240">
</td>
</tr>
</table>
</center>
<br><br> <center> <img src="guide-next.gif" alt="次ページへ" width="60" height="20" border="0"> <a href="tagu.htm"> 「HTMLの作法」</a> </center> <br><br>
<hr>
<center> <a href="mailto:ts0510@pc.highway.ne.jp"><img src="e-mail.gif" alt="メールはこちらへ" width="60" height="30" border="0"> mailto:Toshiyuki Sano</a> </center>
<bgsound src="trau.mid" loop="1">
</body>
</htm>


[ 4. 本文であることを宣言しましょう。 ]


タ グ 属 性 説 明
<body>・・・</body> 本文であることを宣言する。
background 背景にする画像を指定(bgcolorとの併用はできません。)
 例えば、 background="ABC.jpg" と書きます。
bgcolor 背景の色を指定(backgroundとの併用はできません。)
例えば、 bgcolor="#ff0000" と書きます。#ff0000は、色番号です。
色番号は、こちらを参照してください。[  Color Guide  ]
text 本文の文字の色を指定
link まだクリックしていないリンクが張ってある文字の色を指定
vink クリックして既にリンクした文字の色を指定
alink リンクが張ってある文字をクリックした瞬間の色を指定


<html>
<head>
<title>ようこそ</title>
</head>
<body bgcolor="#ffffcc" text="#000000" link="#000033" vlink="#000066" alink="#000099">
<center> <h1><font color="#006699">WELCOME</font></h1> </center> <br><br>
<center>
きつねも たぬきも でておいで<br>
たんけんしよう はやしのおくまで
<p> <font size="2" color="#669900">森の宝もの−木の実</font> </p>
</center>
<center>
<table border="1" cellspacing="5" cellpadding="0">
<tr>
<td>
<img src="photoABC.jpg" alt="木の実" width="320" height="240">
</td>
</tr>
</table>
</center>
<br><br> <center> <img src="guide-next.gif" alt="次ページへ" width="60" height="20" border="0"> <a href="tagu.htm"> 「HTMLの作法」</a> </center> <br><br>
<hr>
<center> <a href="mailto:ts0510@pc.highway.ne.jp"><img src="e-mail.gif" alt="メールはこちらへ" width="60" height="30" border="0"> mailto:Toshiyuki Sano</a> </center>
<bgsound src="trau.mid" loop="1">
</body>
</htm>



[ 5. 改行しましょう。]


タ グ 属 性 説 明
<br> 改行する。
<br><br><br>と繰り返し入力すると、繰り返し入力した回数分(この例では3行分)改行します。
</○○>で閉める必要はありません。


<html>
<head>
<title>ようこそ</title>
</head>
<body bgcolor="#ffffcc" text="#000000" link="#000033" vlink="#000066" alink="#000099">
<center> <h1><font color="#006699">WELCOME</font></h1> </center> <br><br>
<center>
きつねも たぬきも でておいで<br>
たんけんしよう はやしのおくまで
<p> <font size="2" color="#669900">森の宝もの−木の実</font> </p>
</center>
<center>
<table border="1" cellspacing="5" cellpadding="0">
<tr>
<td>
<img src="photoABC.jpg" alt="木の実" width="320" height="240">
</td>
</tr>
</table>
</center>
<br><br> <center> <img src="guide-next.gif" alt="次ページへ" width="60" height="20" border="0"> <a href="tagu.htm"> 「HTMLの作法」</a> </center> <br><br>
<hr>
<center> <a href="mailto:ts0510@pc.highway.ne.jp"><img src="e-mail.gif" alt="メールはこちらへ" width="60" height="30" border="0"> mailto:Toshiyuki Sano</a> </center>
<bgsound src="trau.mid" loop="1">
</body>
</htm>



[ 6. 段落を作りましょう。]


タ グ 属性 説 明
<p>・・・</p> 段落をつくる(改行し、さらに1行分あける。)
<p><p><p>と繰り返し入力しても1行しかあきません。つまり、繰り返し使用はできません。
</○○>を省略できます。


<html>
<head>
<title>ようこそ</title>
</head>
<body bgcolor="#ffffcc" text="#000000" link="#000033" vlink="#000066" alink="#000099">
<center> <h1><font color="#006699">WELCOME</font></h1> </center> <br><br>
<center>
きつねも たぬきも でておいで<br>
たんけんしよう はやしのおくまで
<p> <font size="2" color="#669900">森の宝もの−木の実</font> </p>
</center>
<center>
<table border="1" cellspacing="5" cellpadding="0">
<tr>
<td>
<img src="photoABC.jpg" alt="木の実" width="320" height="240">
</td>
</tr>
</table>
</center>
<br><br> <center> <img src="guide-next.gif" alt="次ページへ" width="60" height="20" border="0"> <a href="tagu.htm"> 「HTMLの作法」</a> </center> <br><br>
<hr>
<center> <a href="mailto:ts0510@pc.highway.ne.jp"><img src="e-mail.gif" alt="メールはこちらへ" width="60" height="30" border="0"> mailto:Toshiyuki Sano</a> </center>
<bgsound src="trau.mid" loop="1">
</body>
</htm>



[ 7. 見出しをつけましょう。]


タ グ 属 性 説 明
<h1>・・・</h1> 見出しをつける。
h1 〜 h6 まで、第1レベルの見出しから第6レベルの見出しまであります。
数字が大きくなるほど文字が小さくなります。
hx は、見出しを表すタグですので、フォントサイズの代わりに使うのは間違いです。


<html>
<head>
<title>ようこそ</title>
</head>
<body bgcolor="#ffffcc" text="#000000" link="#000033" vlink="#000066" alink="#000099">
<center> <h1><font color="#006699">WELCOME</font></h1> </center> <br><br>
<center>
きつねも たぬきも でておいで<br>
たんけんしよう はやしのおくまで
<p> <font size="2" color="#669900">森の宝もの−木の実</font> </p>
</center>
<center>
<table border="1" cellspacing="5" cellpadding="0">
<tr>
<td>
<img src="photoABC.jpg" alt="木の実" width="320" height="240">
</td>
</tr>
</table>
</center>
<br><br> <center> <img src="guide-next.gif" alt="次ページへ" width="60" height="20" border="0"> <a href="tagu.htm"> 「HTMLの作法」</a> </center> <br><br>
<hr>
<center> <a href="mailto:ts0510@pc.highway.ne.jp"><img src="e-mail.gif" alt="メールはこちらへ" width="60" height="30" border="0"> mailto:Toshiyuki Sano</a> </center>
<bgsound src="trau.mid" loop="1">
</body>
</htm>



[ 8. 中央そろえ(センタリング)にしましょう。]


タ グ 属 性 説 明
<center>・・・</center> 見出しや文章をセンタリングする。


<html>
<head>
<title>ようこそ</title>
</head>
<body bgcolor="#ffffcc" text="#000000" link="#000033" vlink="#000066" alink="#000099">
<center> <h1><font color="#006699">WELCOME</font></h1> </center> <br><br>
<center>
きつねも たぬきも でておいで<br>
たんけんしよう はやしのおくまで
<p> <font size="2" color="#669900">森の宝もの−木の実</font> </p>
</center>
<center>
<table border="1" cellspacing="5" cellpadding="0">
<tr>
<td>
<img src="photoABC.jpg" alt="木の実" width="320" height="240">
</td>
</tr>
</table>
</center>
<br><br> <center> <img src="guide-next.gif" alt="次ページへ" width="60" height="20" border="0"> <a href="tagu.htm"> 「HTMLの作法」</a> </center> <br><br>
<hr>
<center> <a href="mailto:ts0510@pc.highway.ne.jp"><img src="e-mail.gif" alt="メールはこちらへ" width="60" height="30" border="0"> mailto:Toshiyuki Sano</a> </center>
<bgsound src="trau.mid" loop="1">
</body>
</htm>



[ 9. 文字の大きさや、色を指定しましょう。]


タ グ 属 性 説 明
<font>・・・</font> 文中の任意の箇所の色や文字の大きさを指定します。
color="色番号(#RRGGBB)" 文中の任意の箇所の色を指定します。
色番号は、[ Color Guide ]を参照してください。
size="フォントサイズ(1-7)" 文字の大きさを数字で指定します。1〜7まで有り数字が大きくなるほど文字が大きくなります。


<html>
<head>
<title>ようこそ</title>
</head>
<body bgcolor="#ffffcc" text="#000000" link="#000033" vlink="#000066" alink="#000099">
<center> <h1><font color="#006699">WELCOME</font></h1> </center> <br><br>
<center>
きつねも たぬきも でておいで<br>
たんけんしよう はやしのおくまで
<p> <font size="2" color="#669900">森の宝もの−木の実</font> </p>
</center>
<center>
<table border="1" cellspacing="5" cellpadding="0">
<tr>
<td>
<img src="photoABC.jpg" alt="木の実" width="320" height="240">
</td>
</tr>
</table>
</center>
<br><br> <center> <img src="guide-next.gif" alt="次ページへ" width="60" height="20" border="0"> <a href="tagu.htm"> 「HTMLの作法」</a> </center> <br><br>
<hr>
<center> <a href="mailto:ts0510@pc.highway.ne.jp"><img src="e-mail.gif" alt="メールはこちらへ" width="60" height="30" border="0"> mailto:Toshiyuki Sano</a> </center>
<bgsound src="trau.mid" loop="1">
</body>
</htm>



[ 10. 横線をひきましょう。]


タ グ 属 性 説 明
<hr> 横線をひく
属性(アトリビュート)を使わず単独でも使えます。
細かく指定したいときは、属性を使いましょう。
width="○○○" 線の長さ
<hr width="50%" size="2" align="left">
標準を 100% として、その半分なら 50%
size="○○○" 線の太さ
<hr width="70%" size="4" align="center">
標準の太さは 2 、2倍の太さにするなら 4
align="○○○" 線の位置
<hr width="100%" size="6" align="right">
左寄りは left 、中央は center 、
右寄りは right


<html>
<head>
<title>ようこそ</title>
</head>
<body bgcolor="#ffffcc" text="#000000" link="#000033" vlink="#000066" alink="#000099">
<center> <h1><font color="#006699">WELCOME</font></h1> </center> <br><br>
<center>
きつねも たぬきも でておいで<br>
たんけんしよう はやしのおくまで
<p> <font size="2" color="#669900">森の宝もの−木の実</font> </p>
</center>
<center>
<table border="1" cellspacing="5" cellpadding="0">
<tr>
<td>
<img src="photoABC.jpg" alt="木の実" width="320" height="240">
</td>
</tr>
</table>
</center>
<br><br> <center> <img src="guide-next.gif" alt="次ページへ" width="60" height="20" border="0"> <a href="tagu.htm"> 「HTMLの作法」</a> </center> <br><br>
<hr>
<center> <a href="mailto:ts0510@pc.highway.ne.jp"><img src="e-mail.gif" alt="メールはこちらへ" width="60" height="30" border="0"> mailto:Toshiyuki Sano</a> </center>
<bgsound src="trau.mid" loop="1">
</body>
</htm>



[ 11. テーブルを組みましょう。]


タ グ 属 性 説 明
<table>・・・</table> 表を作るタグです。いわゆるテーブルタグ
表内の情報全体の前後を<table>と終了を表すタグ</table>ではさみます。
border="1" テーブルの外枠の線の太さを指定するタグです。
border を書かないとテーブルの枠線は表示されません。(枠表示無しとなります。)
数字が大きくなるほど外枠の線が太くなります。
cellspacing="5" 表の中の罫線すべての太さを指定します。
数字が大きくなるほど太くなります。
cellpadding="0" 表の枠と枠内のテキストや絵などとの間隔を調整します。
数字が大きくなるほど間隔が広がります。
<td>・・・</td> 列を表すタグです。
列の開始を表す<td> と 列の終了を表すタグ</td> で列内に表示する文章とか絵などをはさみます。)
<td>・・・</td>の繰り返し回数が列の数になります。
<tr>・・・</tr> 行を表すタグです。
行の開始を表す<tr> と 行の終了を表すタグ</tr> で列の情報をはさみます。
<tr>・・・</tr>の繰り返し回数が行の数になります。


<html>
<head>
<title>ようこそ</title>
</head>
<body bgcolor="#ffffcc" text="#000000" link="#000033" vlink="#000066" alink="#000099">
<center> <h1><font color="#006699">WELCOME</font></h1> </center> <br><br>
<center>
きつねも たぬきも でておいで<br>
たんけんしよう はやしのおくまで
<p> <font size="2" color="#669900">森の宝もの−木の実</font> </p>
</center>
<center>
<table border="1" cellspacing="5" cellpadding="0">
<tr>
<td>
<img src="photoABC.jpg" alt="木の実" width="320" height="240">
</td>
</tr>
</table>
</center>
<br><br> <center> <img src="guide-next.gif" alt="次ページへ" width="60" height="20" border="0"> <a href="tagu.htm"> 「HTMLの作法」</a> </center> <br><br>
<hr>
<center> <a href="mailto:ts0510@pc.highway.ne.jp"><img src="e-mail.gif" alt="メールはこちらへ" width="60" height="30" border="0"> mailto:Toshiyuki Sano</a> </center>
<bgsound src="trau.mid" loop="1">
</body>
</htm>



[ 12. 絵を入れましょう。]


タ グ 属 性 説 明
<img src="○○○"> 画像を入れる。
○○○は、表示したい画像のファイル名を拡張子と共に書きます。たとえば、drive01.jpg とか email03.gif とか
alt="○○○" 絵の代わりになるテキストを書きます。
例えば、<img src="photoABC.jpg" alt="木の実" width="150" height="100"> とか
width="○○○" 画像の表示する大きさ(ヨコ幅)を指定します。
<img src="photoABC.jpg" alt="木の実" width="○○○" height="100">
○○○は、ピクセル数(100とか150とか)またはウィンドウに対するパーセンテージ(標準を100%として、その半分なら50%)
height="○○○" 画像の表示する大きさ(タテ幅)を指定します。
<img src="photoABC.jpg" alt="木の実" width="150" height="○○○">
○○○は、ピクセル数(100とか150とか)またはウィンドウに対するパーセンテージ(標準を100%として、その半分なら50%)


<html>
<head>
<title>ようこそ</title>
</head>
<body bgcolor="#ffffcc" text="#000000" link="#000033" vlink="#000066" alink="#000099">
<center> <h1><font color="#006699">WELCOME</font></h1> </center> <br><br>
<center>
きつねも たぬきも でておいで<br>
たんけんしよう はやしのおくまで
<p> <font size="2" color="#669900">森の宝もの−木の実</font> </p>
</center>
<center>
<table border="1" cellspacing="5" cellpadding="0">
<tr>
<td>
<img src="photoABC.jpg" alt="木の実" width="320" height="240">
</td>
</tr>
</table>
</center>
<br><br> <center> <img src="guide-next.gif" alt="次ページへ" width="60" height="20" border="0"> <a href="tagu.htm"> 「HTMLの作法」</a> </center> <br><br>
<hr>
<center> <a href="mailto:ts0510@pc.highway.ne.jp"><img src="e-mail.gif" alt="メールはこちらへ" width="60" height="30" border="0"> mailto:Toshiyuki Sano</a> </center>
<bgsound src="trau.mid" loop="1">
</body>
</htm>



[ 13. 自分の中の他のWebページにリンクをはりましょう。]


タ グ 属 性 説 明
<a href="○○○">△△△</a> リンクをはる。
○○○は、リンク先のファイル名を拡張子付きで書きます。
△△△は、Webページの見出しなどリンク先の案内文を書きます。
<html>
<head>
<title>ようこそ</title>
</head>
<body bgcolor="#ffffcc" text="#000000" link="#000033" vlink="#000066" alink="#000099">
<center> <h1><font color="#006699">WELCOME</font></h1> </center> <br><br>
<center>
きつねも たぬきも でておいで<br>
たんけんしよう はやしのおくまで
<p> <font size="2" color="#669900">森の宝もの−木の実</font> </p>
</center>
<center>
<table border="1" cellspacing="5" cellpadding="0">
<tr>
<td>
<img src="photoABC.jpg" alt="木の実" width="320" height="240">
</td>
</tr>
</table>
</center>
<br><br> <center> <img src="guide-next.gif" alt="次ページへ" width="60" height="20" border="0"> <a href="tagu.htm"> 「HTMLの作法」</a> </center> <br><br>
<hr>
<center> <a href="mailto:ts0510@pc.highway.ne.jp"><img src="e-mail.gif" alt="メールはこちらへ" width="60" height="30" border="0"> mailto:Toshiyuki Sano</a> </center>
<bgsound src="trau.mid" loop="1">
</body>
</htm>



[ 14. 自分あての返信メールを仕掛けましょう。]


タ グ 属 性 説 明
<a href="mailto:自分のメールアドレス"><img src="適当なメールアイコン" alt="アイコンのテキスト" width="表示サイズ" height="表示サイズ" border="0">mailto:自分の名前など</a> 自分あての返信メール
青色の文字の部分はオプションです。記述しなくともOKです。
<html>
<head>
<title>ようこそ</title>
</head>
<body bgcolor="#ffffcc" text="#000000" link="#000033" vlink="#000066" alink="#000099">
<center> <h1><font color="#006699">WELCOME</font></h1> </center> <br><br>
<center>
きつねも たぬきも でておいで<br>
たんけんしよう はやしのおくまで
<p> <font size="2" color="#669900">森の宝もの−木の実</font> </p>
</center>
<center>
<table border="1" cellspacing="5" cellpadding="0">
<tr>
<td>
<img src="photoABC.jpg" alt="木の実" width="320" height="240">
</td>
</tr>
</table>
</center>
<br><br> <center> <img src="guide-next.gif" alt="次ページへ" width="60" height="20" border="0"> <a href="tagu.htm"> 「HTMLの作法」</a> </center> <br><br>
<hr>
<center> <a href="mailto:ts0510@pc.highway.ne.jp"><img src="e-mail.gif" alt="メールはこちらへ" width="60" height="30" border="0"> mailto:Toshiyuki Sano</a> </center>
<bgsound src="trau.mid" loop="1">
</body>
</htm>



[ 15. 音楽が流れるようにしましょう。 ]


タ グ 属 性 説 明
<bgsound src="サウンドファイル"> このタグは、マイクロソフトのインターネットエクスプローラー用です。
ネットスケープでは、鳴りません。
loop="1" 青色の文字の部分は、曲の繰り返し回数を表します。
たとえば、”1”は曲を1回繰り返すの意味です。
<html>
<head>
<title>ようこそ</title>
</head>
<body bgcolor="#ffffcc" text="#000000" link="#000033" vlink="#000066" alink="#000099">
<center> <h1><font color="#006699">WELCOME</font></h1> </center> <br><br>
<center>
きつねも たぬきも でておいで<br>
たんけんしよう はやしのおくまで
<p> <font size="2" color="#669900">森の宝もの−木の実</font> </p>
</center>
<center>
<table border="1" cellspacing="5" cellpadding="0">
<tr>
<td>
<img src="photoABC.jpg" alt="木の実" width="320" height="240">
</td>
</tr>
</table>
</center>
<br><br> <center> <img src="guide-next.gif" alt="次ページへ" width="60" height="20" border="0"> <a href="tagu.htm"> 「HTMLの作法」</a> </center> <br><br>
<hr>
<center> <a href="mailto:ts0510@pc.highway.ne.jp"><img src="e-mail.gif" alt="メールはこちらへ" width="60" height="30" border="0"> mailto:Toshiyuki Sano</a> </center>
<bgsound src="trau.mid" loop="1">
</body>
</htm>



mark [ HOME PAGE ]