HTML簡単講座

・　　ホームページやオークションの説明文を作るのに、
　　　こんなページがあるといいなーと言う気持ちで作りました。
　　　少しでも役に立てばと思っております。当ページは、あくまでも参考に！！　

●メモ帳を使って作りましょう●	●HTMLの簡単なタグ(文字の色・大きさ）●
●ページ全体の文字と背景の設定	●リンク文字の色設定●
●色の法則●	●枠を入れる方法●
●音楽を入れる方法●	●画像の貼り付けとリンク方法●
●rowspan と colspan●	●cellspacing と cellpadding●
●背景の画像を固定する方法●	●ちょっと変化させる方法●
●ＨＴＭＬ文法チェックが出来るサイトのご紹介●

・

　　● メモ帳を使って作りましょう ●　　Top

メモ帳及びテキスト文書を、出す方法は！
　その１：デスクトップ画面で、マウスを右クリック　下記の画面が出ます

① Windows 98 の場合
98画像

② Windows XP の場合
XP画像

《新規作成》→《テキスト》で、デスクトップ画面上に、
メモ帳（新規テキスト）が出来ます。
右クリックし、メモ帳を開き、このページのタグを参考に作ってみましょう

メモ帳を出す方法！
　　その２：　《スタート》→《（すべての）プログラム》→《アクセサリ》
　　　→《メモ帳》でも出ます

メモ帳を使って HTML タグを打ち、最後に名前を付けて保存する
名前は任意で、0000（任意）.html　と保存します
※ ドットhtml は、拡張子です

Internet Explorer の場合、次のようなアイコンとなります
拡張子の表示をしている場合は、⇒ 　となります
拡張子の表示をしていない場合は、⇒ 　となります

拡張子の表示方法は、こちらをご覧下さい　拡張子の表示方法
※ （Windows XP の場合）

・

　　● HTMLの簡単なタグを色々 ●　　Top

タグの種類	タ　グ	表　示
改行タグ	<br>	改行されます
文字を太く	<strong>あつぼん</strong>	あつぼん
文字を斜め	<em>あつぼん</em>	あつぼん
アンダーライン	<u>あつぼん</u>	あつぼん
文字の大きさ	標準が　⇒	この大きさ
文字の大きさ 5	<font size="5">大きさ</font>	この大きさ
文字の色	<font color="#ffff00">色</font>	この色に
真ん中へ配置	<center>真ん中</center>	真ん中に

・

　　● ページ全体の文字と背景（色又は画像）の設定 ●　　　Top

ページ全体の文字の色の指定	text="#ffffff"	文字の色
ページ全体の背景色の指定	bgcolor="#dcdcdc"	背景色
背景を画像にする場合	background="bc2.gif"

・

　　● リンク文字の色設定 ●　　Top

リンク文字の色（クリック前）	link="#00FFFF"	（この場合はこの色）
リンクの文字の色（クリック中）	aLink="#FFFFFF"	（この場合はこの色）
リンクの文字の色（クリック後）	vlink="#FFFF00"	（この場合はこの色）

・

　　● 色の法則 ●　　　　　Top

　bgcolor="#FFFFFF"
　# の後の FFFFFF のところを 1 ～ 9 A ～ F　で配色出来ます。
　下記の表を参考にして下さい　↓↓↓
　　　色の表1

★　基　本　１　６　色　★
色の表2

色の表3

・

　　● 枠を入れる方法 ●　　　　Top

あつぼんのHTML簡単講座

　上記は　外枠を付ける場合（border="1"となります）
　<table width="190" height="40" bgcolor="#ffffff" border="1">
　<tr>
　　<td>あつぼんのHTML簡単講座</td>
　</tr></table>

あつぼんのHTML簡単講座

　上記は　内枠の色がグレーにしたい場合（bgcolor="#dcdcdc"になります）
　<table width="190" height="40" border="1">
　<tr>
　　<td bgcolor="#dcdcdc">あつぼんのHTML簡単講座</td>
　</tr></table>

あつぼんのHTML簡単講座

　上記は　外枠の線の太さ5の場合（border="5"となります）
　<table width="190" height="40" bgcolor="#ffffff" border="5">
　<tr>
　　<td>あつぼんのHTML簡単講座</td>
　</tr></table>

・

　　● 音楽を入れる方法 ●　　　　Top

◎音楽を入れるタグ

◎音楽を停止・再生するボタンを設置方法
<embed name="oto1" src="001.mid" hidden="true" autostart="true" loop="true">
<input type="button" value="音楽を再生" onClick="document.oto1.play()">
<input type="button" value="音楽を停止" onClick="document.oto1.stop()">

　　　001.mid ファイルを同じディレクトリー内（同フォルダ）に置く　　　

　※： <embed> は Mozilla、MSIE または doti 用のタグですので、
　　　ヴァージョンによってや他のブラウザでは、×！の場合も！
　　　ＨＴＭＬ文法チェックに、引っ掛かりますが、強引に。。。（＾＾!!）

・

　　● 画像の貼り付けとリンクのタグ ●　　　Top

画像の貼り付け方法（拡張子 JPG だったら )
<img src="http://atubon.hp.infoseek.co.jp/画像名.jpg">
上記の、<img src=" が、画像の呼出のタグとなります

リンクのタグ
<a href="http://atubon.hp.infoseek.co.jp/">ここに文字を入れる</a>
上記の、<a href= がリンクのタグとなります
文字の所をクリックすると、他のページへリンクします
※ 文字の終わりに、</a>を忘れないように！

応用編
<a href="http://atubon.hp.infoseek.co.jp/">
<img src="http://atubon.hp.infoseek.co.jp/atubon.gif"></a>
と書きますと、⇒⇒⇒ 　になります

※１ border="0" 画像の周りの枠が無くなります
※２ width="横" height="縦"　画像のサイズを指定しておくと良い
※３ alt="画像説明"　マウスを画像にあてる画像の説明文表示されます

・

　　● rowspan と colspan の使用方法 ●　　　Top

rowspan　と　colspan の使用方法の例

１泊２日
一般キャンプ　定員５名	１１５０円
	２５００円
オートキャンプ　定員５名	Ａサイト	３２００円（電源 ×）
	Ｂサイト	４２００円（電源 ○）
ケビン利用　定員４名	タイプ１	９８００円
	タイプ２	１２０００円
	中２階	１５０００円
ケビン利用　定員８名	８人用	２２０００円

rowspan の使用方法　（縦のセルを結合）

一般キャンプ	１１５０円
	２５００円

上記の場合は、
<table border="1">
　<tr>
　　<td rowspan="2">一般キャンプ</td>
　　<td>１１５０円</td></tr>
　<tr>
　　<td>２５００円</td></tr>
</table>

colspan の使用方法　（横のセルを結合）

１泊２日
一般キャンプ　定員５名	１１５０円

上記の場合は、
<table border="1">
　<tr>
　　<td colspan="2">１泊２日</td></tr>
　<tr>
　　<td>一般キャンプ　定員５名</td>
　　<td>１１５０円</td></tr>
</table>

・

　　● cellspacing と cellpadding の使用方法 ●　　　Top

cellspacing の使用例　（セルとセルの間の太さの可変）

１泊２日
一般キャンプ　定員５名	１１５０円
	２５００円
オートキャンプ　定員５名	Ａサイト	３２００円（電源 ×）
	Ｂサイト	４２００円（電源 ○）
ケビン利用　定員４名	タイプ１	９８００円
	タイプ２	１２０００円
	中２階	１５０００円
ケビン利用　定員８名	８人用	２２０００円

cellpadding の使用例　（セル内の文字との間を可変）

１泊２日
一般キャンプ　定員５名	１１５０円
	２５００円
オートキャンプ　定員５名	Ａサイト	３２００円（電源 ×）
	Ｂサイト	４２００円（電源 ○）
ケビン利用　定員４名	タイプ１	９８００円
	タイプ２	１２０００円
	中２階	１５０００円
ケビン利用　定員８名	８人用	２２０００円

cellspacing の使用方法

１泊２日
一般キャンプ　定員５名	１１５０円

上記の場合は、
<table border="1" cellspacing="10">
　<tr>
　　<td colspan="2">１泊２日</td></tr>
　<tr>
　　<td>一般キャンプ　定員５名</td>
　　<td>１１５０円</td></tr>
</table>

cellpadding の使用方法

１泊２日
一般キャンプ　定員５名	１１５０円

上記の場合は、
<table border="1" cellpadding="10">
　<tr>
　　<td colspan="2">１泊２日</td></tr>
　<tr>
　　<td>一般キャンプ　定員５名</td>
　　<td>１１５０円</td></tr>
</table>

・

　　● 背景の画像を固定する方法 ●　　Top

<HEAD>　から　</HEAD>　までの間に下記タグを入れてください。
背景の画像が固定されます。（スクロールされません）

・

　　● ちょっと変化させる方法 ●　　　Top

　文字を右から左へ動かすタグ
　<marquee>こんにちは、あつぼんのほ－むぺーじへようこそ！</marquee>
　と入れると、右から左へ動きます

　※： <marquee> は Mozilla、MSIE または doti 用のタグですので、
　　　ヴァージョンによってや他のブラウザでは、×！の場合も！
　　　ＨＴＭＬ文法チェックに、引っ掛かりますので、ここでは、タグのみ、ご紹介（＾＾）

　更新状況等を表示するテキストエリアを入れるタグ
　<textarea cols="58" rows="5">
　最新更新日　2007. 2
　★　下記の" "の間の数字を任意で入れ、枠の大きさ変えます
　★　rows="5"は縦の幅です（今回の場合は5行程表示されます）
　★　cols="58"は横の幅です
　</textarea>と入れると下記のようになります

・

　　● ＨＴＭＬ文法チェック ●　　　Top

自分が作成したＨＴＭＬタグが、間違えが無いか確認が出来ます。

Another HTML-lint 様サイトで確認が出来ます

ＨＴＭＬ文法チェックページは、　↓↓↓
　http://openlab.ring.gr.jp/k16/htmllint/htmllintl.html

当ページを、ご覧頂き誠に有難う御座いました。
ご質問などある方は、ＢＢＳ（掲示板）& メールフォームもありますので
当方がわかる範囲の回答で宜しければ、ご利用ください　(*^Ｏ^*)。
メールフォーム