テキストファイルから作るWebページの作り方

テキストファイルから作るWebページの作り方

－Webページの作成について－

Webページの作成方法は、Webページ作成ソフトを使って作成する方法や､
今回紹介するようなテキストファイルを使って作成する方法などがあります。
しかし､元をたどればすべて『HTML』という言語で書かれたテキストファイルです。
※ホームページとはブラウザを立ち上げたときに表示される
トップページのことを表し､『ホームページ＝Webページ』ではありません。

－HTMLとは－

『HTML』とは『Hyper Text Markup Language』の略で､要するにハイパーリンクを用いた
テキストファイルによる主にWebページで用いられている言語のことです。

－Webページ作成に最小限必要なもの－

テキストエディタ
これは、『メモ帳』(最初からWindowsに付属)でも､『ワードパッド』(最初からWindowsに付属)でも
テキスト形式かHTML形式のファイルが保存できるワープロソフトなら
何でもかまいません。しかし､このテキストエディタを使ってHTML言語を書くと
すべてをタイプする必要がありますが、余分なタグが入ることがなくきわめて正確です。
※ 『一太郎 ver.12』(市販ソフト)や『Word 2002』(市販ソフト)を使ってHTML形式で
保存しても完成することはしますがスタイルシートの影響で『Internet Explorer』以外
のブラウザでは､意図した表示形式にならないことがありますのでお勧めしません。
『ホームページビルダー』(市販ソフト)などのWebページ作成ソフトは手軽で､誰にでも簡単で
意図したようにWebページを作ることができますが､余分なタグが入ったりして､
データ量が増加してしまいページの表示に時間がかかるなどの欠点があります。
ブラウザ
ブラウザとは､作ったWebページを表示するためのソフトです。
これで自分の作ったページの見た目などを確認します｡いくら､テキストファイルで書いても
ページを表示するのはブラウザです｡なので､最終的にはブラウザの見た目を優先します｡
代表的なものに『Netscape Navigator』(Netscape Communications社)や､
『Internet Explorer』(Microsoft社)があります｡
画像処理ソフト
画像処理ソフトは､デジカメでとった写真やスキャナで取り込んだ画像、アイコンなどの編集や作成に必要です。
強いていえば､『ペイント』(最初からWindowsに付属)でもいいですが､画像にいろいろな加工をしたりするなら
『Adobe Photoshop』(市販ソフト)や『Adobe Illustrator』(市販ソフト)､
GIFアニメーションをつくるには、『Animation GIF Maker』(フリーウェア)があります｡
ファイル転送ソフト
ファイル転送ソフトとは、作成したページを誰もが見れるようにサーバーに転送するソフトのことです。
お勧めは､『NextFTP』(シェアウェア試用版もあり)や､『FFFTP』(フリーウェア)です｡
『FTP.exe』(最初からWindowsに付属)でも十分に使うことができます｡

基本編

－Webページ作成の手順－

コンセプトを考える
このページはどんなページにしよう､どんなことをテーマにしようなどというWebページを作る上で1番重要なことです｡
構成を考える
コンセプトは決まったわけですが､コンセプトだけではページは完成しません。
どこにどんな画像を配置したり､どんなことを書くかという構成(デザイン)を考えます｡
実際に作る
これまで考えたコンセプトとデザインをいよいよ具現化します｡コンピュータは自分が思っただけでは完成しません｡
自分の思ったページにするにはいろいろな技術などが必要ですのでこの作業が1番大変です。
公開する
いよいよ苦労して作ったページを公開します｡
公開にはファイル転送ソフトを使って､サーバーに作ったページを転送します｡
そして､有名なポータルサイト(Yahoo!Japan･Infoseek･excite)などに登録します｡

－HTMLファイルを作る－

HTMLファイルを作るには､テキストファイルの拡張子(txt)をhtmlに変更するか､
文章を書いてそれをhtmlファイル形式で保存するだけでいいです｡
(拡張子の変更方法がよく分からない方はこちらをご覧ください｡)

－ファイルの命名の規則－

ファイルの命名に使える文字は､英数字かアルファベット､.(ドット)･_(アンダーバー)・-(ハイフン)のみです。
スペース・ひらがな･カタカナ･漢字などで命名されたファイルは､サーバーのほうが受け付けてくれません。
※すべて記述すると(，(カンマ)は除く)､
a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,
A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,
1,2,3,4,5,6,7,8,9,0,-,.,_です｡

－タグとは－

タグとはそのページを実行するための命令で､作ったHTMLファイルを
HTMLファイルにしているといっても過言ではないほど重要なものです｡
書いた文章の色や書式､画像を引用するとき､表や見出し､
改行など数々のタグがありますが、一度覚えてしまえばとても簡単です。
通常タグは､<>でくくられていて<***>と</***>の二個でワンセットになっています。
例：<u>文に下線をつける</u>→文に下線をつける
先ほど通常のタグは､<***>と</***>でワンセットですが一部のタグは例外もあります｡
ちなみに､それらの例外のタグはエンプティタグと呼ばれています｡
例：改行をするタグ･･･<br> 罫線を引くタグ･･･<hr>

－文章中に使えない文字､記号－

文章中に使えない文字は半角カタカナ()で、
もしこれを使用すると文字化けを起こしたりして正しく表示されません。
記号も特殊な記号()も使用すると文字化けを起こす可能性があります｡

－Enterキーは無視される－

ソースの中でいくらEnterキーを押して100回改行したとしても、ブラウザで見たときには無視されます｡
ブラウザで見るときに改行させたければ､後述しますように<br>を用いてください｡
スペースも2つ以上つなげると､2つ目以降は無視されます｡

－ソースとは－

HTMLは前述しましたように､テキストファイルでかかれています｡
そのテキストファイルはこの方法で表示させることができます｡この表示された日本語と
記号とアルファベットの入り混じった､現在のところ意味不明な文字の羅列
(このページを理解できるようになっているころにはすべてを理解できるでしょう)をソースといいます｡
ソースの表示のさせ方がよく分からない方はこちらをご覧ください｡

－基本タグとは－

下に挙げるのが、Webページを作るには最低限必要な基本的タグです｡

ソース(太字の部分がタグです)

説明

<html>
<title>ここにタイトルが入ります｡</title>
<body>
･････････<br>
･････････<br>
ここに本文がかかれています｡<br>
･････････<br>
･････････<br>
･････････
</body>
</html>

<html>～</html>	このタグでこのファイルがHTMLファイルであることを宣言します｡～の部分にタイトルや本文を書きます｡したがって､これ以前やこれ以後に文章やタグを書いても､ブラウザで見たときは表示されません｡
<title>～</title>	～の部分にこのページのタイトルを入力します｡
<body>～</body>	このタグで､ここから本文が始まり､終わることを宣言します｡～の部分に肝心要の本文を書きます。
<br>	このタグで改行をします。このタグが前述したようにエンプティタグです｡

－基本編のまとめ－

これまでのことをまとめると､下の表になります｡

ソース

ブラウザで表示したとき

<html>
<title>テキストファイルから作るWebページの作り方</title>
<body>
テキストファイルから作るWebページの作り方<br>
･････････<br>
ここに本文がかかれています｡<br>
･････････Enterキーは無
視されます<br>

･･････スペースも2つ以上は無視されます･･･<br>

･････････
</body>

</html>

テキストファイルから作るWebペー... - IE ver.xx

戻る進むホーム再読み込み中止

テキストファイルから作るWebページの作り方
･････････
ここに本文がかかれています｡
･････････Enterキーは無視されます
･･････スペースも2つ以上は無視されます
･････････

文字編

－見出し－

見出しは、<hN>と</hN>で指定します。
この見出しは､相対的な単位ですので時には自分の意図したデザインで
表示されないことがあります。(基本フォントを『小』と指定したのに閲覧者が『大』で見た場合など)
Nには数字を指定してください。(1から6までです数字の値が大きいほど、文字は小さくなります。)
<hN align=a>と</hN>で位置も指定できます。
Aには位置･･･ 左：left 中央：center 右：rightのどれかを指定します。
これらのコマンドは組み合わせて使うことができます。

説明	ソース	ブラウザで見たとき
文字を大きくする(6段階の1 最大)	<h1>6段階の1</h1>	6段階の1
文字を大きくする(6段階の2)	<h2>6段階の2</h2>	6段階の2
文字を大きくする(6段階の3)	<h3>6段階の3</h3>	6段階の3
文字を大きくする(6段階の4)	<h4>6段階の4</h4>	6段階の4
文字を大きくする(6段階の5)	<h5>6段階の5</h5>	6段階の5
文字を大きくする(6段階の6 最小)	<h6>6段階の6</h6>	6段階の6
文字を左に詰める(大きさは自由)	<h3 align=left>左詰</h3>	左詰
文字を中央に詰める(大きさは自由)	<h3 align=center>センタリング</h3>	センタリング
文字を右に詰める(大きさは自由)	<h3 align=right>右詰</h3>	右詰
文字を右に詰める(大きさは6段階の1)	<h1 align=right>右詰</h1>	右詰(6段階の1)

－一行飛ばす段落－

段落は、<p>で指定します。基本的には、<br><br>と同じです。これもエンプティタグです。
<p align=A>と</p>で位置も指定できます。
Aには位置･･･ 左：left 中央：center 右：rightのどれかを指定します。

説明	ソース	ブラウザで見たとき
<p>･･･段落を一つ分つける <p align=left>･･･段落をつけて、さらに左詰をする <p align=center>･･･段落をつけて、さらにセンタリングをする <p align=right>･･･段落をつけて、さらに右詰をする	例<p> 段落をつける(位置は指定しない場合、左詰になります) <p align=left>段落：左詰</p> <p align=center>段落：センタリング</p> <p align=right>段落：右詰</p>	例段落をつける(位置は指定しない場合、左詰になります) 段落：左詰段落：センタリング段落：右詰

説明

ソース

ブラウザで見たとき

<p>･･･段落を一つ分つける

<p align=left>･･･段落をつけて、さらに左詰をする
<p align=center>･･･段落をつけて、さらにセンタリングをする
<p align=right>･･･段落をつけて、さらに右詰をする

例<p>
段落をつける(位置は指定しない場合、左詰になります)
<p align=left>段落：左詰</p>
<p align=center>段落：センタリング</p>
<p align=right>段落：右詰</p>

例

段落をつける(位置は指定しない場合、左詰になります)

段落：左詰

段落：センタリング

段落：右詰

－罫線－

文章に区切りをつけたり。飾りに線を引きたいときは罫線を使います。
罫線は、<hr>で指定します。このタグもエンプティタグです。
<hr size=A>で線の太さを指定できます。
Aには、適当な数字を指定してください。
<hr color=B>で罫線の色を指定できます。
Bには、適当な色を指定してください。
色の指定の仕方は、色を英語で指定するか、16進数で指定します。
詳しい色を指定したいときは、下記のサイトを参考にすると色のイメージがよく分かります。
RGB Color Charts(英語) 色見本の館(日本語) 色見本(日本語)
<hr width=C>で線の長さを指定できます。
Cの部分に適当な数字を指定してください。単位はピクセル(px)かパーセント(%)で指定できます。
パーセントで指定する場合は、数字の末尾に%をつけます。指定しない場合、単位はポイントになります。
<hr align=D>で位置を指定できます。未指定の場合、中央に位置します。
Dには･･･左：left 中央：center 右：right のどれかを指定します。
<hr noshade>で線の内部を塗りつぶすことができます｡

説明	ソース	ブラウザで見たとき
罫線(太さは未指定)	<hr>
罫線(太さは1)	<hr size=1>
罫線(太さは20)	<hr size=10>
罫線(色は赤・16進数の色で指定)	<hr color=ff0000>
罫線(色は青・色名で指定)	<hr color=blue>
罫線(長さは80pt)	<hr width=80>
罫線(長さは45％)	<hr width=45%>
罫線(左詰 ※効果を見るため長さを短くしています)	<hr align=left width=45%>
罫線(中央詰 ※効果を見るため長さを短くしています)	<hr align=center width=45%>
罫線(右詰 ※効果を見るため長さを短くしています)	<hr align=light width=45%>
罫線(影なし)	<hr noshade>
罫線(太さは15・長さは150ポイント・色は青)	<hr size=15 width=150 color=blue>
罫線(太さは5・長さは50%・右詰・影なし)	<hr size=5 width=50% align=right noshade>

－コメントをつける－

コメントは、ではさみます。はさんだ部分は、ブラウザで見ることができなくなります｡

ソース	ブラウザで見たとき
あい<!--コメント-->うえお<br> カキクケ<!--ブラウザでは表示されません-->コ	あいうえおカキクケコ

－書式－

書式は、いろいろな種類があります。(太字･下線･斜体･等幅･打消し...)

説明	ソース	ブラウザで見たとき
太字	<b>太字</b>	太字
斜体	<i>斜体</i>	斜体
下線	<u>下線</u>	下線
取り消し線	<s>取り消し線</s>	~~取り消し線~~
等幅	<tt>等幅</tt>	`等幅`
太字に下線	<b><u>太字に下線</u></b>	太字に下線
斜体に等幅	<tt><i>斜体に等幅</i></tt>	`等幅`
等幅の比較(普通のフォント ※iの数は同じです)	iiiiiiiiiiiiiiiii	iiiiiiiiiiiiiiiii
等幅の比較(等幅のフォント ※iの数は同じです)	<tt>iiiiiiiiiiiiiiiii</tt>	`iiiiiiiiiiiiiiiii`

－文字の大きさ･色･書体を変える－

文字の大きさの変え方は､先ほどの<hn>～</hn>の
方法以外に､<font size=N>～</font>というものがあります｡
Nには、その文字のサイズの大きさを指定します｡単位は未指定の場合ポイント(pt)になります｡
ポイント(pt)は絶対的な単位ですので､基本フォントのサイズによって
大きさが変わることがありません。(※ サイズは1～7までしか指定できません)
ほかにも、Nの部分に＋Xや、-Y(XやYには適当な数字)を使って大きさを指定する方法もあります｡
この場合は相対的な単位で指定されます｡なので、基本フォントのサイズによっては
型崩れを起こすことがあります｡(※ 大きさは-4～+4までしか指定できません)
文字の色の変え方は､ <font color=X>～</font>を入力します。
Xの部分には適当な色名(16進数の色名も可)を指定します。
文字の書体の変え方は､<font face=A>～</font>を入力します。
Aの部分には書体名を指定します。(MS 明朝や、Centuryなど)
(※ 指定したフォントを表示するには、相手も自分が指定したフォントと同じフォント
を持っていることが前提となりますので、自分で追加したり、あまり一般的でないフォントは控えた方がよいです。)
(※2 Centuryなどアルファベットと英数字だけしかサポートしていない
フォントで日本語入力を行うと、文字化けの原因となります。)
以上のタグは組み合わせて使うこともできます。

ソース	ブラウザで見たとき
<font size=3>フォントサイズ＝3</font>	フォントサイズ＝3
<font size=5>フォントサイズ＝5</font>	フォントサイズ＝5
<font size=+3>フォントサイズ＝+3</font>	フォントサイズ＝+3
<font size=-3>フォントサイズ＝-3</font>	フォントサイズ＝-3
<font color=ff0000>字の色は赤(16進数で指定)</font>	字の色は赤(16進数で指定)
<font color=green>字の色は緑(色名で指定)</font>	字の色は緑(色名で指定)
<font face=HG正楷書体-PRO>書体=HG正楷書体-PRO</font>
<font face=HGS創英角ﾎﾟｯﾌﾟ体>書体=HGS創英角ﾎﾟｯﾌﾟ体</font>
<font size=5 color=blue>サイズ=5・色=青</font>	サイズ=5・色=青
<font size=+1 color=EF8F9C>サイズ=+1・色=EF8F9C=ピンク</font>	サイズ=+1・色=EF8F9C=ピンク
<font face=HG丸ｺﾞｼｯｸM-PRO size=4> 書体=HG丸ｺﾞｼｯｸM-PRO・サイズ=4</font>
<font face=HGP創英角ｺﾞｼｯｸUB color=yellow> 書体=HGP創英角ｺﾞｼｯｸUB・色=黄色</font>
<font size=2 color=8C8C8C face=HG正楷書体-PRO> サイズ=2･色=8C8C8C=グレー･書体=HG正楷書-PRO</font>

－文字をスクロールさせる－

文字をスクロールさせるには、<marquee>～</marquee>を入力します。
(※但し、NetscapeNavigatorでは使う事ができません)
(幅や高さの単位は未指定の場合､ピクセル(px)です｡)
スクロールさせたいものを、左右を行き来させるには
<marquee behavior=alternate>～</marquee>を入力します。
スクロールさせたいものを、画面外まで流れさせるには、
(指定しなくても規定なので、指定する必要はなし)
<marquee behavior=scroll>～</marquee>を入力します。
スクロールさせたいものを、画面端で停止させるには、
<marquee behavior=slide>～</marquee>を入力します。
スクロールさせたいものを、右から左へ流したいときは、
<marquee direction=left>～</marquee>を入力します。
スクロールさせたいものを、左から右へ流したいときは、
<marquee direction=right>～</marquee>を入力します。
スクロールさせたいものの､移動速度をドット数で指定するには
<marquee scrollamount=一回に移動するドット数>～</marquee>を入力します。
スクロールさせたいものの､移動速度をミリ･メートル毎秒で指定するには
<marquee scrolldelay=一秒間に移動する速度>～</marquee>を入力します。
スクロールさせたいものの､移動回数を指定するには
<marquee loop=移動回数>～</marquee>を入力します。
スクロールさせたいものの､幅を指定するには
<marquee width=幅>～</marquee>を入力します。
スクロールさせたいものの､高さを指定するには
<marquee height=高さ>～</marquee>を入力します。
スクロールさせたいものの､左右の空白を指定するには
<marquee hspace=左右の空白の幅>～</marquee>を入力します。
スクロールさせたいものの､上下の空白を指定するには
<marquee vspace=上下の空白の幅>～</marquee>を入力します。
スクロールさせたいものの､背景の色を指定するには
<marquee bgcolor=色(色名か16進数の色名で指定)>～</marquee>を入力します。

説明	ソース	ブラウザで見たとき
左右を行き来します	<marquee behavior=alternate>行き来</marquee>	行き来
画面外まで流れます(通常)	<marquee behavior=scroll>通常</marquee>	通常
画面の端で停止	<marquee behavior=slide>端で停止</marquee>	端で停止
左へ流れる(通常)	<marquee direction=left>左へ</marquee>	左へ
右へ流れる	<marquee direction=right>右へ</marquee>	右へ
移動速度をドット数で指定 (移動数はこの場合10)	<marquee scrollamount=10>移動数は10</marquee>	移動数は10
移動速度をm/s(ミリ･メートル毎秒)で指定 (移動速度はこの場合10)	<marquee scrolldelay=10>移動速度は10</marquee>	移動速度は10
スクロールさせる回数を指定 (回数はこの場合20)	<marquee loop=20>回数は20</marquee>	回数は20
スクロールさせる文字などの幅を指定	<marquee width=200>幅は200</marquee>	幅は200
スクロールさせる文字などの高さを指定	<marquee height=30>高さは30</marquee>	高さは30
スクロールさせる文字などの左右の空白を指定	<marquee hspace=80>左右の空白は80</marquee>	左右の空白は80
スクロールさせる文字などの上下の空白を指定	<marquee vspace=15>上下の空白は15</marquee>	上下の空白は15
スクロールさせる文字などの背景色を指定	<marquee bgcolor=yellow>背景=黄色</marquee>	背景=黄色
幅の指定と､左右の空白を指定する違い 1.幅を指定する方	<marquee width=210 bgcolor=red>幅=210・背景=赤</marquee>	幅=210・背景=赤←背景の色の赤い所が文字などのスクロールする範囲(この場合､スクロールする範囲が210ポイントである)
幅の指定と､左右の空白を指定する違い 2.左右の空白を指定する方	<marquee hspace=100 bgcolor=red>左右の空白=100・背景=赤</marquee>	左右の空白=100・背景=赤↑背景の色の赤い所が文字のスクロールする範囲 (この場合､左右の空白があわせて100ポイントである)

－文字を点滅させる－

文字を点滅させるには<blink>～</blink>で指定します(※但し、InternetExplorerでは使う事ができません)

－基本書体･サイズ・色を指定する－

基本とは書いているが､このタグの指定以降の文字に有効(基本)となるので、そのページすべてに反映されるわけではありません｡
表の中で指定すると､その表の中でしか反映されません｡
基本書体を指定するには<basefont face=A>を入力します。
Aには書体名を指定します。(※前述したように特殊なフォントなどは指定しない方が無難です。 )
基本文字色を指定するには<basefont color=B>を入力します。
Bには色を指定します。(色名でも､16進数の色名でもOK)
基本文字サイズを指定するには<basefont size=C>を入力します。
Cにはサイズを指定します。

ソース	ブラウザで見たとき
基本書体を変更するとそれ以<br><basefont face=HG正楷書体-PRO size=5 color=blue>降の文字が変更されます	基本書体を変更するとそれ以

画像編

－画像を表示する－

画像を表示するには、<img src=A>を入力します｡
Aには､ディレクトリと画像名を指定します｡
(この際､指定の仕方が分かりにくいので､分からない方はこちらをご覧下さい｡)

ソース	ブラウザで見たとき
<img src=images/sircle.gif>

－画像に枠をつける－

画像に枠をつけるには､<img src=A border=N>を入力します｡
Nには枠の幅を指定してください｡

説明	ソース	ブラウザで見たとき
枠の幅=0(通常)	<img src=images/sircle.gif border=0>
枠の幅=1	<img src=images/sircle.gif border=1>
枠の幅=2	<img src=images/sircle.gif border=2>
枠の幅=5	<img src=images/sircle.gif border=5>
枠の幅=10	<img src=images/sircle.gif border=10>

－画像にコメントをつける－

表示したい画像が壊れていたり、存在しないのに表示するとInternetExplorerでは、
が表示されたり、画像を表示できないブラウザでは何の画像を表示しているのかわからないので､
その画像にコメントを付けるのがマナーとされています｡
画像にコメントをつけるには､<img src=A alt=B>を入力します｡
Bにはコメントを入力します｡
(画像が正しく表示されていて､コメントをつけると数秒間その画像の上にカーソルをとめておくとコメントが表示されます｡)

説明	ソース	ブラウザで見たとき	カーソルを数秒間乗せたとき
画像が正常に表示されている場合のコメントの表示のされ方	<img src=images/warning.gif alt=これがコメントです>
画像が正常に表示されていない場合のコメントの表示のされ方 (画像は実際には存在しません)	<img src=images/unexist.gif alt=画像が存在しない場合>

－画像の前後の文章の位置を変更する－

標準では<img src=A>の前後に文字を表示させると､
その行の文字はすべて画像の下のラインに合わされますが、
その文字の位置変更したい場合は､<img src=A target=B1>を入力します｡
B1には､topかmiddleかbottomを指定します｡
topで､画像の上の位置に前後の文字が合わされます｡
middleで､画像の中央の位置に前後の文字が合わされます｡
bottomで､画像の下の位置に前後の文字が合わされます｡(標準)

説明	ソース	ブラウザで見たとき
画像上部に文字が移動	！危険につき<img src=images/warning.gif align=top>立入り禁止！	！危険につき立入り禁止！
画像中央部に文字が移動	！危険につき<img src=images/warning.gif align=middle>立入り禁止！	！危険につき立入り禁止！
画像下部に文字が移動(標準)	！危険につき<img src=images/warning.gif align=bottom>立入り禁止！	！危険につき立入り禁止！

－画像を位置を変更する－

画像の位置を変更させるには､<img src=A align=B2>を入力します｡
B2には､leftかrightを指定します｡
leftで､画像が画面左端に移動します。(表の中では､表の左端に移動)
rightで､画像が画面右端に移動します。(表の中では､表の右端に移動)

説明	ソース	ブラウザで見たとき
画像を左端に移動(画像を左端に移動させた場合､その前後の文字は自動的に改行されます｡)	！危険につき<img src=images/warning.gif align=left>立入り禁止！	！危険につき立入り禁止！
画像を右端に移動(画像を右端に移動させた場合､その前後の文字は自動的に改行されます｡)	！危険につき<img src=images/warning.gif align=right>立入り禁止！	！危険につき立入り禁止！

※align=の後に､top，middle，bottomを指定すると文章の位置が、left，rightを指定すると画像の位置が変わります｡

－画像の長さ(幅)､高さ(縦)を指定する－

画像の長さを指定するには､<img src=A width=B>を入力します｡
Bには長さを指定します｡(実際の画像サイズより大きい(小さい)幅の
値を指定すると､その長さに応じて拡大(縮小)されます｡)
画像の高さを指定するには､<img src=A height=C>を入力します｡
Cには高さを指定します｡(実際の画像サイズより大きい(小さい)幅の
値を指定すると､その長さに応じて拡大(縮小)されます｡)
縦と横の長さを両方指定すると縦は縦の長さ､横は横の長さに拡大(縮小)されます｡

説明	ソース	ブラウザで見たとき (右の画像は元の画像)
画像を2.0倍に拡大(横の長さだけを指定) (元のサイズは横X縦＝50X50) ↓ 横X縦＝100X100	<img src=images/sircle.gif width=100>
画像を2.0倍に拡大(縦の長さだけを指定) (元のサイズは横X縦＝50X50) ↓ 横X縦＝100X100	<img src=images/sircle.gif height=100>
画像を縮小(縦と横の長さの両方を指定) (元のサイズは横X縦＝50X50) ↓ 横X縦＝25X20	<img src=images/sircle.gif width=25 height=20>

－画像の周囲(左右と上下)に余白をつける－

画像の左右に余白をつけるには､<img src=A hspace=B1>を入力します｡
B1には、左右の余白の幅を指定します｡
画像の上下に余白をつけるには､<img src=A vspace=B2>を入力します｡
B2には、上下の余白の高さを指定します｡

説明	ソース	ブラウザで見たとき
hspaceを指定すると､左右にそれぞれ50ピクセル空白がつきます	-----左右の空白が50ピクセル----<br> 目が<img src=images/sircle.gif hspace=50>回る<br> -----左右の空白が50ピクセル----	-----左右の空白が50ピクセル---- 目が回る -----左右の空白が50ピクセル----
vspaceを指定すると､上下にそれぞれ50ピクセル空白がつきます	-----上下の空白が50ピクセル----<br> 目が<img src=images/sircle.gif vspace=50>回る<br> -----上下の空白が50ピクセル----	-----上下の空白が50ピクセル---- 目が回る -----上下の空白が50ピクセル----

背景編

－背景を変更する－

背景の色を変更するには､ソースの先頭のあたり書いた<body>を<body bgcolor=A>に入力しなおします｡
Aには色を指定してください｡(色名でも16進数での色名でもOK)
背景に画像を指定するには､ソースの先頭のあたり書いた<body>を<body background=A>に入力しなおします｡
Aには背景に使用したい画像を指定してください｡

説明	ソース	ブラウザで見たとき
背景の色が黄色(yellow)のページ	<html> <title>背景色が黄色です｡</title> <body bgcolor=yellow> 背景色が黄色です｡ </body> </html>	こちらへ移動すると見れます
背景の画像が『warning.gif』のページ	<html> <title>背景画像がwarning.gifです｡</title> <body background=images/warning.gif> 背景画像がwarning.gifです｡ </body> </html>	こちらへ移動すると見れます

リンク編

－リンクとは－

リンクといえば正確には､他の文書や画像などの位置情報のことを指しますが、
最近は､他人の作ったWebページと自分のWebページを関連付けして
結び付けられた(リンクされた)状態の事を指します｡
他人の作ったWebページと自分のWebページを関連付けして
結び付ける動作を『リンクを張る』と言います｡

－リンクの張り方－

リンクを張るには､<a href=A>～</a>を入力します｡
Aにはリンク先(リンクの張られた場所)を入力します｡
～にはリンクボタンとなる文章か画像を指定してください｡
※画像をリンクボタンにした場合､画像に枠が表示されますが､
これは画像の枠の幅を0(border=0)にすると解除できます｡

自分のページのディレクトリ内にリンクを張るときのリンク先の指定方法はこちらを､
他のWebページなどにリンクを張るときのリンク先の指定方法はこちらをご覧下さい｡
<a href=A target=_blank>～</a>を入力すると､そのリンク先は新しいウィンドウで開かれます｡

説明	ソース	ブラウザで見たとき
自分のページのディレクトリ内にリンク (リンク先は､folder.html)	<a href=folder.html>自分のページのディレクトリ内にリンク</a>	自分のページのディレクトリ内にリンク
異なるサーバーのページのディレクトリ内にリンク (リンク先は『Yahoo!Japanのコンピュータ用語辞典』)	<a href=http://computers.yahoo.co.jp/dict/> 異なるページのディレクトリ内にリンク</a>	異なるページのディレクトリ内にリンク
リンク先を新しいウィンドウで開く (リンク先は､folder.html)	<a href=folder.html target=_blank>新しいウィンドウで開く</a>	新しいウィンドウで開く

－HTML文書内の指定した場所にリンクを張る－

HTML文書内の指定した場所を指定するには､目的の文書内の位置に<a name=A>を入力します。
Aには半角英数で自由にキーワードを入力します｡(そのキーワードは後で呼び出すときに使います｡)
(キーワードを一つずつ変えていけば同じ文書中に何個も指定できます｡)
～にはリンクボタンとなる文章か画像を入力してください｡
文書内の指定した場所にリンクを張るには､<a href=B#A>～<a>を入力します｡
Aには先程指定したキーワードを入力します。
Bにはキーワードをつけた文書の名前と位置を指定します｡
～にはリンクボタンとなる文章か画像を入力してください｡

説明	ソース	ブラウザで見たとき
<a name=top>へ移動(<a name=top>の場所は､このページのBodyの先頭に書いてあります｡)	<a href=index.html#top>このページの先頭へ移動</a>	このページの先頭へ移動

－メールを送る－

HTML文書ではメールアドレスへリンクを張る機能もあります｡
そのリンクをクリックするとメーラーが起動します｡
メールアドレスだけでなく､用件を自動で入力させる事もできます｡
メールを送るには､<a href=mailto:A>～</a>を入力します｡
Aにはメールアドレスを入力してください｡
～にはリンクボタンとなる文章か画像を入力してください｡
mailto:Aの後に?subject=B入力すると､Bを用件にする事ができます。
よって､Bには用件にしたい文章を入力してください｡

説明	ソース	ブラウザで見たとき
A@A.co.jpにメールを送る (メールアドレスは架空のものです)	<a href=mailto:A@A.co.jp>メール</a>	メール
B@B.ne.jpにメールを用件は『例の件』で送る (メールアドレスは架空のものです)	<a href=mailto:B@B.ne.jp?subject=例の件>用件=例の件</a>	用件=例の件

表編

－表の作成方法－

表を作るにはまず､<table>～</table>を入力します｡
表の枠の太さを指定するには､<table>を<table border=N>に入力しなおします｡
Nには枠の幅を指定します｡
次に､表の横1行分を<table>～</table>の間に<tr>～</tr>で挟みます｡
そして､表の項目を1つずつ<tr>～</tr>の間に<td>～</td>で挟みます｡
<td>～</td>を<th>～</th>にすると､そこの項目は太字でセンタリングされます｡

以上のことを表にまとめるとこういうことです。(見やすくする為､表の枠の幅を3にしています｡)

ソース

ブラウザで見たとき

1行目の左	1行目の右
2行目の左	2行目の右
3行目の左	3行目の右

－表の枠の太さ･色を変更する－

表の枠の太さを変更するには､前述したように<table border=A>～</table>を入力します｡
Aには､枠の太さを入力してください｡
表の枠の色を変更するには､<table bordercolor=B>を入力します｡
Bには色名を入力します｡(色名でも16進数の色名でもOK)

※枠の色は､事前に枠の太さを指定しないと使えません

説明

ソース

ブラウザで見たとき

枠の太さは10

<table border=10>
<tr><td>枠の太さは10</td></tr>
</table>

枠の太さは10

枠の太さは5､色は赤

<table border=5 bordercolor=red>
<tr><td>枠の色は赤</td></tr>
</table>

枠の色は赤

－表の項目の背景を変える－

表の項目の背景の色を変えるには､<td bgcolor=A1>を入力します｡
A1には背景の色にしたい色名を入力します｡(色名でも､16進数の色名でもOK)
表の項目の背景の画像を変えるには､<td background=A2>を入力します｡
A2には背景の画像にしたい画像の位置と名前を入力します｡

(ファイルの位置と名前の指定方法がよく分からない方はこちらをご覧ください｡)
※ tdをthにして使用することもできます｡

説明

ソース

ブラウザで見たとき

枠の太さが3 背景色が黄色

黄色

枠の太さは3 背景画像がwarning.gif
※見やすくする為に文字のサイズは
20ポイントにしています｡

<table border=3>
<tr><td background=images/warning.gif>
<font size=20pt>背景画像がwarning.gif</font></td></tr>
</table>

背景画像がwarning.gif

－複数の項目と同じ大きさの項目を作る－

同じ行の複数の項目と同じ大きさの項目を作るには､<td colspan=N1>～<td>を入力します。
N1には1つの項目にしたい同じ行の項目の数を指定します｡
同じ列の複数の項目と同じ大きさの項目を作るには､<td rowspan=N2>～<td>を入力します。
N2には1つの項目にしたい同じ列の項目の数を指定します｡

※tdをthにして見出しにする事もできます｡

ソース

ブラウザで見たとき

3列分
2行目の左	2行分	2行目の右
3行目の左	2行分	3行目の右

－表のサイズを指定する(幅・高さ・間隔・太さ)－

表の幅のサイズ(枠を含む)を指定するには<table width=A1>～</table>を指定します｡
A1には幅の長さを指定します｡(単位はピクセル(未指定)か、パーセントです｡)
表の縦のサイズ(枠を含む)を指定するには<table height=A2>～</table>を指定します｡
A2には幅の長さを指定します｡(単位はピクセル(未指定)か、パーセントです｡)
表の項目と枠の間の線の太さを指定するには<table cellspacing=B1>～</table>を指定します｡
B1には､表の項目と枠の間の線の太さを指定します｡(単位はピクセル(未指定)か、パーセントです｡)
表の項目と枠の間の余白の大きさを指定するには<table cellpadding=B2>～</table>を指定します｡
B2には､表の項目と枠の間の余白の大きさを指定します｡(単位はピクセル(未指定)か、パーセントです｡)

※単位は､ピクセルかパーセントで指定できますが､パーセントのほうはNetscapeNavigatorとInternetExplorerとで
解釈の違いがあるため､パーセントでの指定はなるべく避けた方がよいです｡(前者は表の大きさに対する割合の
パーセントと解釈し､後者は画面の大きさに対する割合のパーセントと解釈する｡)

枠を含	めて幅は
100	ピクセル

枠の太さが3､高さが100

枠を含め	て高さは
100	ピクセル

枠の太さは3､幅の長さは150､高さは100

幅は	150
高さは	100

線の太さは3
表の項目と枠の間の線の太さは10

表の項目	と枠の間
の線の太	さは１０

線の太さは3
表の項目と枠の間の余白の大きさは10

表の項目	と枠の間
の余白の	大きさは10

線の太さは3
表の項目と枠の間の線の太さは10
表の項目と枠の間の余白の大きさは20

表の項目	と枠の間
の線の太	さは10
表の項目	と枠の間
の余白の	大きさは20

－項目中で改行させない－

表が画面のサイズより大きくなると､表中の項目が自動的に改行されてしまい見栄えが悪くなります｡
それを改善する為に､指定以外のところで改行させないようにする事ができます｡
しかし､そのタグを指定した場合画面より広がる為､印刷するときには､見栄えが悪くなります｡
<td nowrap>を入力すると､指定以外のところで改行できないようにできます｡
その項目中で改行したい場合には､<br>を入力します｡
<td nowrap width=A>を入力すると､右に字下げをすることができます｡
Aには字下げしたい幅の長さを入力します｡

※ tdをthにして使用することもできます｡

－項目中の文章(画像)の位置の指定－

項目中の文章(画像)の横(左･中･右)の位置を指定をするには､<td align=A1>を入力します｡
A1には文章(画像)の位置､left・center・rightのどれかを指定します｡
leftで文章(画像)の位置が左に移動します｡
centerで文章(画像)の位置が左右の中央に移動します｡
rightで文章(画像)の位置が右に移動します｡
項目中の文章(画像)の縦(上・中・下)の位置を指定をするには､<td valign=A2>を入力します｡
A2には文章(画像)の位置､top・middle・bottomのどれかを指定します｡
topで文章(画像)の位置が上に移動します｡
middleで文章(画像)の位置が上下の中央に移動します｡
bottomで文章(画像)の位置が下に移動します｡

※ tdをthにして使用することもできます｡

ソース
この字の色が表の1段目この字の色が表の2段目この字の色が表の3段目この字の色が表の4段目

ブラウザで見たとき

なし	左 <td align=left>	中 <td align=center>	右 <td align=right>
上 <td valign=top>	左上	中上	右上
中 <td valign=middle>	左中	中中	右中
下 <td valign=bottom>	左下	中下	右下

その他

－ウイルスメールを送られにくくする－

ページ中にメールアドレスにリンクを張っておくとウイルスプログラムが
勝手にメールアドレスを読みとり、ウイルスメールを送りつけてくる事があります｡
それをされにくくする為に数値実体参照(下記)という文字の記述方法を用いてメールアドレスを記述する方法があります｡
※あくまでも､読み取られにくくするだけで数値実体参照を見破るウイルスもあります｡

ブラウザで見たとき	A	B	C	D	E	F	G	H	I	J	K	L	M
ソース数値実体参照	A	B	C	D	E	F	G	H	I	J	K	L	M
ブラウザで見たとき	N	O	P	Q	R	S	T	U	V	W	X	Y	Z
ソース数値実体参照	N	O	P	Q	R	S	T	U	V	W	X	Y	Z
ブラウザで見たとき	a	b	c	d	e	f	g	h	i	j	k	l	m
ソース数値実体参照	a	b	c	d	e	f	g	h	i	j	k	l	m
ブラウザで見たとき	n	o	p	q	r	s	t	u	v	w	x	y	z
ソース数値実体参照	n	o	p	q	r	s	t	u	v	w	x	y	z
ブラウザで見たとき	0	1	2	3	4	5	6	7	8	9
ソース数値実体参照	0	1	2	3	4	5	6	7	8	9
ブラウザで見たとき	-(ハイフン)		.(ドット)		_(アンダーバー)		@(アットマーク)
ソース数値実体参照	-		.		_		@

数値実体参照を用いてメールアドレスを記述するとこうなります｡(メールアドレスは架空のものです)

※同じ色の文字同士が対応しています｡
元のアドレス･･･2718350UNknown@E-mail.com

ソース数値実体参照	ブラウザで見たとき
2718350 UNknown @E-mail .com	2718350 UNknown @E-mail .com

－特殊文字を使う－

Webページの作り方を紹介するページでは､タグを紹介する必要があります｡
ですが､ソース中に直接タグを記述してしまいますと､ブラウザがこれをタグと認識してしまい正しく表示されません｡
そこで､タグをブラウザ上に正しく表示させる為に『ウイルスメールを送られにくくする』ときも使用した､数値実体参照を使います｡
空白も2つ以上繋げると認識されませんが､数値実体参照を使って記述すると2つ以上繋げる事ができます｡

ブラウザで見たとき	"	&	<	>	(空白)	© (著作権マーク)	® (登録商標マーク)	(スペード) (表示できないブラウザあり)	(クローバー) (表示できないブラウザあり)	(ハート) (表示できないブラウザあり)	(ダイヤ) (表示できないブラウザあり)
ソース数値実体参照	"	&	<	>		©	®	♠	♣	♥	♦

参考:正常に表示されないとき	(空白)	.(ドット)	?(疑問符)	(文字化け) (通称:豆腐)

6段階の1

6段階の2

6段階の3

6段階の4

6段階の5

6段階の6

左詰

センタリング

右詰

右詰(6段階の1)