簡単にＨＰを作って見ましょう。
(メモ帳でも立派に作る事が出来ます。)

　このＨＰは、もちろんＷＩＮ付属のメモ帳で作りました。
　このページはホームページを作る方の手助けに成ればと、作成しました。
　間違い個所も、有るかもしれませんが、可愛がって下さい。
　間違いを見つけた方は、メールを、お送り、頂ければ幸いに思います。
　

　ｉｎｄｅｘ　　　下の表から行きたい所をクリツクして下さい。　　
　　ＩＥ４＆５だとマウスカーソルが行きたいところに、ポインタが行くと色が変わります。
HTML説明 基本タグ HTML基本 文字の加工 画像を入れる 検索を付ける
リストを使う 改　行 表を作る 横線を引く 文字を流す Mallを開く
リンクしたい ジャバ(Java) スタイルシート　 タグ一覧 カラ 一覧 ftp html (転送)
スパム等の迷惑ロボットから ＨＰ内メール・掲示板内メールを守る方法 　 　

　　さあー作って見ましょう

　(Ⅰ)まずメモ帳等でHTML文を書きます　(下からそのままコピーして使用できます)

　(Ⅱ)出来たら、とりあえず(index.html)と言う名前で適当な所に保存します。
　　　 ※ 出来上がったＨＴＭは　半角の小文字で保存します。
　　　　　( *.html & *.htm どちらでもかまいませんがプロバイダーにより選択します)

　(Ⅲ)次に、先ほど保存した(index.html)をエクスプローラー等で、探しダブルクリツクします。
　　　インターネットエクスプローラー(ＩＥ)・ネットスケープ(ネスケ)等が起動して表示されるはずです。
　　　表示されたら内容をよーく確かめます。
　　　間違いが有ったら、そのソースを選択、するとメモ帳が起動しますので、それを編集します。
　　　間違いが有れば何度でも上書き保存をして、ＩＥ・ネスケの更新をクリツクします。
　　　良ければ、それを保存しておきます。違うページを作るときは、上記の要領で何枚も作ります。

　(Ⅳ)次にリンクを貼りテストします。カウンターもぜひ付けましょう。(見に来た回数が見れます)

　(Ⅴ)良ければ次にWWWサーバにＷＳ－ＦＴＰ９５等を使ってＨＰをアップロードします。(転送)

　(Ⅵ)アップロードが終わったらブラウザで閲覧してみます。

　(Ⅶ)表示されれば成功です。おめでとうございます。
　　　リンクなども隅々までチェックして見ましょう、
　　　間違いが有ってもくじけずに、やりましょう。
　　　もし不幸にも表示されない様ですと、転送が間違っているかアドレスが違っているか
　　　名前が違っているかです。
　　　プロバイダーによってはwalcam.htmlでないと駄目な所が有るようです。

　(Ⅷ)全部良ければ友達などに閲覧して見て、いただきましょう。

　(Ⅸ)次にＨＰを検索ページに登録して宣伝しましょう。
　　　後は毎日アクセスをチェックしましょう。

　(Ⅹ)落ち着いたらＪＡＶＡ・ＣＧＩなどもトライしてみましょう。
　上へ　

　このページのタグ（表示内容）文をコピー、ペーストして使用出来ます。

「ページをコピーしただけでは、使えないタグも有ります」　　　(^_^;)　

　又このページ内でマウスを右クリックし、(ソースの表示)を選択、　　
ファイルを名前をつけて保存(****.htm)を選択、メモ帳などを起動し、
必要な所を編集(コピー、削除、ペースト)して、使用頂けます。　　　　　

　メモ帳・エディタ・ワードパッド・ワープロ・ＨＴＭＬエディタ　等がベスト。
　

　ホームページを作成するには、タグをを使います、[　< から　(コマンドを括る)　> まで　]
　　「 [ < ] = 始まりタグー　　[ > ] = 終わりタグー　」

　タグは半角の大文字(ABC)でも、小文字(abc)でも良いです、

　タグを使用した場合は最後にタグを閉じなければ、いけません、

　閉じる時は</ コマンド　>を使います。閉じないとその後が変になる事が有ります。

　タグは必ず閉じましょう。

　閉じなくても、いいタグも有ります。　<hr>　<br>　<p> 等などが有ります、
　ブラザーによっては閉じないと表示がおかしくなる時も有ります。
　

　

　出来上がったＨＴＭは　半角の小文字で保存します。

　例　（　index.htm　又は　index.html　）等　で保存。　 　
　上へ　

基本　タグ

　ホームページの基本タグ　(タグは必ず閉じる)(閉じなくても、いいタグも有ります)

　[　タグ一覧　]

　<html>～</html>　これはＨＴＭＬで記述されたファイルです、という意味。
　<head>～</head>　先頭に書きますが、通常は本文に表示しません。
　<title>　画面の一番上のバーに表示されるタイトルを書きます。</title>
　<meta 　"この中に書きます"　>　通常は本文に表示しませ、また記載する必要は有りません。
　　以下例　　　　　　　　　　　　　　<head>～</head>　の間に記載するのが一般的
　<meta http-　="　" content="text/html; charset=x-sjis">　ＨＴＭ・制作異語等
　<meta name="kemura">　作者名
　<meta name="　　" content="notbuk">　制作エデタ・会社名等
　<meta name="creatim" content="00:00:00">　制作時
　<meta name="build" content="1900/00/00">　制作日
　<meta name="　" content="　">　その他
　　このタグーは何項でも記載（使用）出来ます。
　　タグーは閉じる必要は有りませんが、「 > 」の後に文字を続けると表示してしまいます（注意）。(^_^;)
　　ロボット型検索などの検索備考等にも使用できます、ヒット率が格段に向上します。
　　このタグーで書くと本文には表示されませんが、ロボット型検索には有効の様です。
　画面全体(バック カラー)の色を変えたい。　１６進法で指定します。
　<body bgcolor="#色ナンバを記載">～</bgcolor>（ffffff＝白色）
　文字に色を付けたい。　１６進法で指定します。
　<body bgcolor="#色番号" text="#色番号" link="#色番号" vlink="#色番号" alink="#色番号">　と記載　

　bgcolor="#色番号" ････････　背景色　
　text="#色番号" 　 ････････　基準のテキストの色　
　link="#色番号"　　････････　リンクの文字の色　
　vlink="#色番号"　 ････････　すでに読み込んだリンクの文字の色　
　alink="#色番号"　 ････････　読み込み中のリンクの文字の色　
　 　背景(壁紙)にイメージを入れたい　
　<body background="使用する画像">　　背景(壁紙)に入れたい画像を記載　
　文字に色を付けたい。
　<font color=#付けたい色>～</font>　文字に色を　１６進法で指定します。　

　<body>～</body>この中にホームページの本文を記入します。

　上へ　

ホームページの基本構造

　 　ホームページ(ＨＴＭＬ)　構造の基本　(コピーして使用できます。)　　
　上へ　
文字の加工
文字を中央に表示したい

<center>～</center>タグに
挟まれたテキスト・表・画像などが、

画面の中央に表示されます。


文字を右に表示したい

<div align=right>～</div>タグに
挟まれたテキスト・表・画像などが、

画面の右に表示されます。


　字の大きさを変えたい　

字の大きさを指定します。(ｈ１)

　<h1>～</h1>　ｈ１～６までサイズがあり、１が最大です。タイトル用に使われ、強制的に改行されます。

　

　見出しを目立たせる　

　<h3 dingbat="folder">
　見出しを目立たせるために　見出しの前に飾りっを付ける。

　物理的スタイルタグ　

　<i>　書体がイタリック（斜）体になります。
　<b>　ポールド（太字）体です
　<tt>　固定幅フォント
　<s>　取消し線
　<u>　下線
　<sup>　上付き文字
　<sub>　下付き文字
　<big>　標準フォントより１ポイント大きい。
　<small>　標準フォントより１ポイント小さい
　論理的スタイルタグ　

　<em>　強調
　<strong> <em>　よりも強い強調
　<dfn>　定義される文字を強調表示
　<samp>　例を表すテキスト
　<var>　変数名、又は任意の値に置き換えるべきテキスト
　<cite>　引用文、
　<kbd>　ユーザに入力してもらうべき文字
　<vcode>　コンピュータ　コード
　文字を加工したい　

　<blink> テキストを点滅　（点滅しないブラザが有ります。）

　<font size="値数">　テキストにサイズを指定できます。
　１～７まで指定できます。小さい　１＜７　大きい　　　字字字字字字字

　<basefont size="値数"> ベースフォントがここから下は指定したデフォルトサイズで設定されます。

　
　さらにフォントを変えたい時　

<font size="+1"> 指定より大きい
<font size="-1"> 指定より小さい

　
　書いた内容をそのまま表示したい　
　<pre> 書いた内容をそのまま表示


　い　　　　　　い　の　　　　　　か

　い　　　　　い　　　の　　　　　　か

　い　　　　い　　　　　の　　　　　　か

　の
　<xme>と<pre>は、まったく同じ働きをします。
　<listing> 基本的に<pre>とまったく同じ働きをします、しかし、フォントサイズ、スタイルの設定タグが<listing>の中にいると働きません。


　コメントを書きたい　

　<! --　　　　コメント　　　-->　ソースにコメントを記入できる。(ブラザウスに表示しません)

　
　特殊文字を表示したい　

　 <"&"〒";">　(" "で括る)　特殊文字を表示

　上へ　
横にせんを引きたい

　<hr> 線を引きます。
　<hr size="値数">でサイズを指定できます。

　<size="太さはピクセル数" width="長さはピクセル数">

　<hr size="%"width="%"> ウインドウの幅に対するパーセントで表示します。
　<hr size="%"width="%" align="right"> ウインドウの右によせます。
　<hr color="色ナンバ値数">　線のデザインを変えてしまう。(カラーコード)
　上記の組み合わせ　<hr color="00ffff" size="20"width="500">

　上へ　
　改行　

　<br>　改行
　<p> 強制的に段落
　<nobr> 改行をしてほしくない時に使用　右に長がーーーーーーーーーーーーーーーーーーーーーーーーーーーー ーーーーーーーーく、なります。

　 改行をしてほしくない時の、中で改行したい時　<br>　　　右に長がーーーーーーーーーーーーーーーーーーーー　
折れます、 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーく、なります。

　上へ　
リストを使って表示したい

　<dl> 定義リストを作る。
　項目
　<dt> <dd> スペースを開ける。
　<dl compact> コンパクトな定義リストを作る。
　項目
　<dt> <dd> スペースを開ける。
　番号付きリストを作る　
    　<ol> 番号付きリスト
  1. 　<li>項目
  2. 　<li>項目
  3. 　<li>項目

　

    　<ol start="値数"> 途中からスタートの番号付きリストを作る。
  1. 　<li>項目
  2. 　<li>項目
  3. 　<li>項目

　

    行の途中からスタートの番号付きリストを作る。
  1. 　<li>項目
  2. 　<li>項目
  3. 　<li value="値数"> 途中からスタートの番号付きリストを作る。
  4. 　<li>項目

　番号付きリストが中断しても、次の前のリストの続きとして、番号を始めてくれるリストを作る。
　現在、対応しないブラザウス有り。

  1. 　<li>項目
  2. 　<li>項目
注釈　エトセトラ
    　
  1. 　<li>項目
  2. 　<li>項目
  3. 　<li skip="値数"> 途中からスタートの番号付きリストを作る。
  4. 　<li>項目
  5. 　<li>項目
  6. 　<li>項目

　
　リストのマークを変える　

　　リストのマークを変える　

　リストのマークを変える　

　上へ　
　文字を横に流す　
　右から文字が出て、左でとまります。
　<marquee bgcolor="#000000" behavior="slide" border="0" loop="1">
　右から文字が出て、左でとまります。・・・・・・・・・・・・

　右から左に文字が流れます。
　<marquee bgcolor="#ffffff" direction="scroll" width=80% height=4% scrollamount=5><流す内容</marquee>br>

・・・・・・右から左に文字が流れます。・・・・・・・

　左端から右に文字が流れます。
　<marquee direction="right" behavior="scroll">流す内容</marquee>

・・・・・。すまれ流が字文に右らか端左・・・・・

　バックに色を付けて流す。
　<　　　　bgcolor="#00ff00">流す内容</marquee>

バックに色を付けて流す。


　スクロール範囲の上下左右にスペースを設ける。
　<marquee behavior="scroll" bgcolor="#00ff00" height="高さ" width="幅" hspace="左右の余白" vspace="上下の余白"align="txet範囲">流す内容</marquee>
スクロール範囲の上下左右にスペースを設ける。

　こんな事も出来ます。（上の組み合わせ） (^_^;) レレ’’’’’●Ｖ●’’’’’’’’◎Ｖ◎’’’’’’’’○Ｖ○’’’’アア

　上へ　
　文書の途中へ飛びたい　

　<a href="#行き先名">　説明文　</a>　　<a name="飛び先名">　

　　行き先名　説明文　

　　飛び先名　説明文　
　リンクしたい　

　リンクしたい　(別のユニットにジャンプしたい)　(ホームページなどへ)

　リンクを張ります　<a href="行き先ＵＲＬ"> リンク文　</a>　リンク先はファイル名かＵＲＬで指定します。

　リンクの下線を表示させない　<a HEAD="http://　　" STYLE="text-decoration:none;">リンク</a>



　自分のホームページの迷子をさせない　

　自分のホームページの迷子をさせない、２枚目に　リンク先を表示させる。　

　　ホームページの迷子をさせない、　<a href="行き先ＵＲＬ"target="参考文"> </a>　　

　上へ　
　メールを送ってもらいたい　

　メールを戴くために、メーラーを開かせたい。

　表題名を書く　<a href="mailto:メールアドレス">表題名</a> メールとメーラーが開きます。

　例　<a href="mailto:tst@c.or.jp> TSTメール

　画像付きでメーラーを開かせたい　

　画像のリンクも同じ要領です　
　　　　　　<a href="mailto:メールアドレス"><img src="画像" >表題名</a>
　　　　　　(画像だけにしたい場合は[表題名]無しにする)
　　画像枠付き　メール　画像＆キーワードをクリックするとメーラーが開きます。
　　キワードなし画像メール　画像をクリックするとメーラーが開きます。

　　　　　　<a href="mailto:tst@c.or.jp"><img src="画像" border="0"></a>　
　　　　　　(border="0")をつけておくと、リンクの青い枠が表示されません。
　　画像枠無し　メール　画像＆キーワードをクリックするとメーラーが開きます。

　上へ　
　検索をさせたい　

　[ Ｙａｈｏｏ！ＪＡＰＡＮ ]
　<a href="http://www.yahoo.com/">表題名</a>ヤフーJAPANの検索が開きます。

Yahoo!


　画像、検索入力付き　ヤフーの検索



　上記の　ソース
　<a href="http://www.yahoo.co.jp">
　<img src="./yahoo.gif" alt="Yahoo!" border=0 align="left"></a>
　<form method=get action="http://search.yahoo.co.jp/bin/search"><br>
　<br>　画像、検索入力付き　ヤフーの検索<br><br><br>
　<input type=reset value="クリア">
　</form>
　上へ　
絵(画像)を入れたい
　図形を入れる　
　<img src="画像"> ( fig /fig ) 図形用のタグも同じ使い方です
<img src="画像">（*.gifまたは*.ipg）を表示します。border="0"をつけておくと、リンクの青い枠が表示されません。

　例　<img src="POST.GIF">
　絵の大きさを指定して入れたい　
　(テキストの読み込みが早く成ります)
　<img src="ファイル名" width="横幅" height="縦幅">　(ピクセル数で指定)　

　画像でも<br> <p>エンドタグ・階行 が必要

　絵と並んでいる文字の位置を指定したい　
　　<img src="画像" align="">　

　<img src="" align="top">画像の上に文字
　<img src="" align="middle">画像の中央に文字
　<img src="" align="bottom">画像の下に文字
　絵の横に複数のテキストを入れたい　
　　<img src="画像" align="left(右) right(左)"> どちらかを入れる　


　画像の横に複数の文字を入れたい
　・・・・・・・・・・・・・・、

　・・・・・・・・・・・・・・、

　・・・・・・・・・・・・・・。

　テキストの両側に絵を入れたい　

　 　<img src=" 画像左" align="left">
　<img src=" 画像右" align="right">
　<center>　テキスト </center>

　画像の横に複数の文字を入れたい
　・・・・・・・・・・・・・・、

　・・・・・・・・・・・・・・、
　・・・・・・・・・・・・・・。
　画像の周りに余白をとりたい　
　　<img src="画像" align="left"" bspace="" hspace="">

　画像の周りに余白をとりたい・・

　・・・・・・・・・・・・・・、

　・・・・・・・・・・・・・・、

　・・・・・・・・・・・・・・。

　画像の横の文字の回り込みを途中でカットしたい　
　　<br clear="all">

　画像の横の文字の回り込みをカット　
　画像の横の文字の回り込みをカットできたかな？
　画像の周りに線を付けたい　
　　<img src="画像" border="数値">
　

　画像の名前・説明を入れたい　
　　<img src="画像" alt="ファイル名等を表示します。">　これを入ておくと親切です

ファイル名等を表示します。 テキストプラザ用のファイル名等、マウスカーソルで名前等を表示　
　大きい画像を表示したい　
　　最初に小さい画像を表示し、その後大きい画像をロードする　
　　２個の画像が必要です。　<img lowsrc="小さい画像" src="大きい画像">　


　

　スタイルシートでページを飾ってみましょう。　
　ジャバ(Ｊａｖａ)でページを飾ってみましょう。　
　上へ　



　更新日2008/03/13
　　Copyright (C) 1997/4