ホームページ作成手引き

一緒にホームページを作ってみませんか？簡単ですよ！
ホームページ作成のための資料です。サンプルですが参考にして下さい。
作成して見るだけなら、回線接続しないでも出来ます。
もし、間違いまたは質問が有りましたら連絡をください。

目次: T 基礎編　 U フレーム編　 V テクニック編


T 基礎編

@ウェブページの構造
一般にホームページと呼びますが、最初のページをホームページ（トップページ）と言い、それぞれの
ページをウェブページ（Web Page）と言います。また、発信元をウェブサイトと言います。
ウェブページの構造は以下のようになっており、定義に必要なタグ（HTML言語をこう言います）四つで
簡単にウェブページが作れます。

<HTML>
　　<HEAD>
        <TITLE>ページの名前</TITLE>
　　</HEAD>
　　<BODY>
　　　　本文
　　</BODY>
</HTML>

以上の対のタグをメモ帳で記入して保存し、ファイルの種類「ｗｅｂのページ(*.html)」にファイルを変更します。
その後は本文の所（BODY）に文字を入れればその文字が表示されます。簡単でしょ！
なお、作成したhtmlのリソースを見るには、そのファイルを開き、「表示」の「リソース」をクリックすれば、見れるし、変更も出来ます。下のA〜も入力して試して下さい。

A本文の改行
<BR>　　または　　<P>改行させたい文章</P>

B字の大きさ
<H2>見出し文字</H2>　　　　H1（大）〜H7（小）

見出し文字

C色付き拡大文字
<font size=3 color=”990000”>色付き拡大文字</font>　　色コードは"rrggbb"の３原色

赤色の拡大文字　 <font size=3 color=”ff0000”>赤色の拡大文字</font> <font size=3 color=”ffff00”>黄色の拡大文字</font> <font size=3 color=”99ff00”>黄緑色の拡大文字</font> 緑色の拡大文字 <font size=3 color=”00ff00”>緑色の拡大文字</font> <font size=3 color=”00ffff”>空色の拡大文字</font> 青色の拡大文字 <font size=3 color=”0000ff”>青色の拡大文字</font> <font size=3 color=”9900ff”>紫色の拡大文字</font> <font size=3 color=”993333”>茶色の拡大文字</font> 灰色の拡大文字 <font size=3 color=”999999”>灰色の拡大文字</font> <font size=3 color=”ffffff”>白色の拡大文字</font> 黒色の拡大文字 <font size=3 color=”000000”>黒色の拡大文字</font>
D絵（写真）を入れる
<img src=”ファイル名.gif” alt=”絵の名前”>
<img src=”写真.jpg”>

Eページ内リンク
<a href="#abcd" >abcdへ移動</a> 　---「abcdへ移動」などとジャンプ先を表示
<a name="abcd" </a>　　　　　---他からジャンプしてくる所には名前をつける

F空白を入れる
全角（半角は無視されることがある）でスペースを入れる　　または　　<pre>英文</pre>

G左：絵　右：説明
<TABLE border=”0”>
<TR>
    <TD>絵</TD><TD>説明</TD>
</TR>
<TR>
    <TD>絵</TD><TD>説明</TD>
</TR>
注）border=0は線なし、１〜は表になる

H本文にコメント
<!--　説明文　-->　　HTMLのソースにコメントを入れる場合に使用（表示はされない）

I最初に戻るジャンプ
<A HREF="index.html" TARGET="_top"  >最初に戻る</A> 　　最初のページは通常　"index.html"　と決められています。

J色の指定
<BODY BGCOLOR="#33cc33"TEXT="#000000">

K中央揃え
<CENTER>

L段落記号
<OL>　　　　　　　　　結果
<OI>あっち　　　　　　　１．あっち
<OI>こっち　　　　　　　２．こっち
</OL>
　なお、<OL>を<UL>に変更すると、箇条書きとなる

M罫線を入れる
<HR width=50%>

実際にインターネットに接続するには、プロバイダーと契約して接続しなくてはなりませんが、今はホームページ作成のテクニックを勉強しましょう。

先頭に戻る




U　フレーム編

　フレーム形式を取ると管理し易いホームページが出来ます。

　　　　　　（１）フレーム画面の配置例
1)Title
2)Book

 3)Text

（１）フレーム(画面の配置)の設定ページ（index.html）
<HTML>
<HEAD>
<TITLE>北御牧村の観光紹介</TITLE>
</HEAD>
<FRAMESET ROWS="30%,70%"border="1">                ・・・上下３：７に分割
              <FRAMENAME="title" SRC="koif1b.html">   ・・・上段（Title）にKOIF1Bページを表示
        <FRAMESETCOLS="20%,80%">                         ・・・左右１：４に分割
              <FRAME NAME="book" SRC="koif2b.html"> ・・・左（Book）にKOIF2Bページを表示
              <FRAME NAME="txt" SRC="koif3b.html">    ・・・右（Text）にKOIF3Bページを表示
        </FRAMESET>
</FRAMESET>
</HTML>

（２）上段（Title）に表示するページ(koif1b.html)
<HTML>
<HEAD>
<TITLE>ようこそホームページへ</TITLE>
</HEAD>
<BODY BGCOLOR="#77dd00"TEXT="#ff0000">
本文
</BODY>
</HTML>

（３）左側（Book）に表示するページ(koif2b.html)
<HTML>
<HEAD>
<TITLE>koif2b</TITLE>
</HEAD>
<BODY BGCOLOR="#33cc33"TEXT="#000000">
<CENTER>
<H3>北御牧村と<BR>
近辺の紹介</H3> <P><A HREF="koibook1.html" TARGET="txt">
<IMG SRC="bluekaku.gif"BORDER=0> 温泉プール</A><BR>
<P><A HREF="koibook1.html#ONSEN" TARGET="txt">
<IMG SRC="bluekaku.gif" BORDER=0>温泉の紹介 </A><BR>
<P><A HREF="koibook1.html#TIKU" TARGET="txt">
<IMG SRC="bluekaku.gif" BORDER=0> 地区の紹介 </A><BR>
<H3>自己紹介</H3>
</CENTER>
<P><A HREF="koibook2.html#SYUMI1" TARGET="txt">
<IMG SRC="bluekaku.gif" BORDER=0> 趣　味</A><BR>
          ・・・注：bluekaku.gif　はアイコン（）です。
</BODY>
</HTML>

（４）右側（Text）に最初に表示するページ(koif3b.html)
<HTML>
<HEAD>
<TITLE>koif3b</TITLE>
</HEAD>
<BODY BGCOLOR="#33cc33"TEXT="#000000">
ここに本文が表示されます。
</BODY>
</HTML>

（５）左側（Book）から呼び出され、右側に表示されるページ［１］（koibook1.html）
<HTML>
<HEAD>
<TITLE>北御牧の紹介</TITLE>
</HEAD>
<BODY BGCOLOR="#33cc33"TEXT="#000000">
<BODY>
<H3> <IMG SRC="bluekaku.gif" BORDER=0> 温泉プール </H3>
　　　　・<BR>　　　　・<BR>　　　　・<BR><BR>
<A NAME="ONSEN"></A><H3> <IMG SRC="bluekaku.gif" BORDER=0> 温泉の紹介 </H3>
　　　　・<BR>　　　　・<BR>　　　　・<BR><BR>
<A NAME="TIKU"></A><H3> <IMG SRC="bluekaku.gif" BORDER=0> 地区の紹介 </H3>
　　　　・<BR>　　　　・<BR>　　　　・<BR><BR>
<A HREF="index.html" TARGET="_top"   >最初に戻る</A>
</BODY>
</HTML>

（６）左側（Book）から呼び出され、右側に表示されるページ［２］（koibook2.html）
<HTML>
<HEAD>
<TITLE>自己紹介</TITLE>
</HEAD>
<BODY BGCOLOR="#33cc33"TEXT="#000000">
<BODY>
<H3> <IMG SRC="bluekaku.gif" BORDER=0> プロフィール </H3>
　　　　・<BR>　　　　・<BR>　　　　・<BR><BR>
<A NAME="SYUMI"></A><H3> <IMG SRC="bluekaku.gif" BORDER=0> 私の趣味 </H3>
　　　　・<BR>　　　　・<BR>　　　　・<BR><BR>
<A HREF="index.html" TARGET="_top"   >最初に戻る</A>
</BODY>
</HTML>
先頭に戻る



V　テクニック（サンプル）

@閲覧の回数表示
２００２年１１月０１日から
<IMG SRC="/cgi-bin/Count.cgi?df=mimakinikoi_index.html|dd=grnyelo|ft=0"> 　　−−−これはプロバイダにより異なります。
人目の訪問者です。

A日時の計算
<FORM NAME="MyForm">
西暦２００３年まであと
<INPUT TYPE="text" NAME="day" SIZE=3>
日        現在の日本時間は
<SCRIPT LANGUAGE="JavaScript">
              var y=2003,m=1,d=1;
              var today=new Date();
              var day2003=new Date(y,m-1,d);
              n=(day2003.getTime()-today.getTime())/(24*60*60*1000);
              document.MyForm.day.value=Math.ceil(n);
    document.write("<DIV ALIGN=right>",t,"</DIV>");
</SCRIPT>

B時間帯により挨拶を変える
「おはよう」、「こんにちは」、「こんばんは」を使い分ける

<SCRIPT LANGUAGE="JavaScript">
var t=new Date();
var h=t.getHours();

document.write("<CENTER>");
if (4<h && h<10){
              document.write("<FONT SIZE=4>おはようございます。</FONT>");
}
if (10<=h && h<=17){
              document.write("<FONT SIZE=4>こんにちは。</FONT>");
}
if (h>17){
              document.write("<FONT SIZE=4>こんばんは。</FONT>");
}
if (4>=h){
              document.write("<FONT SIZE=4>こんばんは。</FONT>");
}
document.write("<FONT SIZE=4>　私のホームページに有り難うございます！ </FONT>");
document.write("</CENTER>");
</SCRIPT>

C絵・写真の呼び出し
<H3>［案内図］</H3>
<P><IMG SRC="map.jpg" width="566" height="378" align="BOTTOM" NATURALSIZEFLAG="3">

D Cが呼び出すページ（額縁付き）
<HTML>
<HEAD>
　      <TITLE>案内地図</TITLE>
</HEAD>
<BODY BGCOLOR="#00FF00" TEXT="#000000">
<!-- (Homepage So-zai Project 1997 by HIG) [title5]-->
<center>
<table border="5"><tr>
<td>
<table border="3"><tr><td>
        <table border="3"><tr><td></td></tr></table>
</td></tr></table>
</td>
<th><font size="4" color="#000000">
<!-- ↓　この下にタイトルを書きます　↓　 lang=EN-US>-->
案内地図
</font>
</th>
<td>
<table border="3"><tr><td>
        <table border="3"><tr><td></td></tr></table>
</td></tr></table>
</td>
</tr>
</table>
<!-- (Homepage So-zai Project 1997 by HIG) [gakubuchi]-->
<table><tr bgcolor="aa8844"><td> <table border="5" cellspacing="2"><tr><td>
<table border="1" cellspacing="2"><tr><td>

<img src="map.jpg"> <!-- ←ここに絵のファイル名を入れる -->

</td></tr></table>
</td></tr></table>
</td></tr></table>
<BR>
<A HREF="index.html" TARGET="_top">戻る
</center>
</BODY>
</HTML>

EＢＧＭ
<P><EMBED src="presen.mid" autostart="true" hidden="true" loop="false"></P>

F写真と自己紹介
<TABLE>
<A NAME="SYUMI1"><BR>
  <TBODY>
    <TR>
      <TD><IMG src="koi55.jpg" width="133" height="133" border="0"></TD>
      <TD>小泉です。私のホームページにありがとうございます！</A><BR>
      <A NAME="SYUMI1">少しでも皆様のお役に立てればと思い、ホームページを作りました。<BR>
      これからも少しづつ更新していきたいと思いますので、<BR>
      ご意見をお聞かせください。</A></TD>
    </TR>
    <TR>
      <TD><A HREF="koiaisatu.wav">私の挨拶（音声）</A></TD>
      <TD></TD>
    </TR>
  </TBODY>
</TABLE>

Gメール連絡
　メールアドレスは個人のアドレスとは別にした方が良いと思います。（プロバイダーによりアドレス等変更必要）
<H3>連絡先</H3>
感想、連絡は、ここでお願いします
<FORM METHOD="POST"ACTION="http://www1.plala.or.jp/cgi-bin5/mailsend.cgi"><INPUT TYPE="hidden"NAME="to"VALUE="aaakoi@navy.plala.or.jp"><INPUT TYPE="hidden"NAME="subject"VALUE="ホームページ感想">
<CENTER></CENTER>
<TABLE>
 
    <TR>
      <TD>お名前</TD>
      <TD><INPUT TYPE="text"NAME="name"SIZE=30></TD>
    </TR>
    <TR>
      <TD>メールアドレス(必須)</TD>
      <TD><INPUT TYPE="text"NAME="from"SIZE=30></TD>
    </TR>
    <TR>
      <TD>コメント</TD>
      <TD><TEXTAREA NAME="comment"ROWS=4 COLS=32></TEXTAREA></TD>
    </TR>
    <TR>
      <TD><INPUT TYPE="submit"VALUE="送信"></TD>
      <TD><INPUT TYPE="reset"VALUE="クリア"></TD>
    </TR>
 
</TABLE>
</FORM>

Hリンク（有益なサイトのＵＲＬを表示）
<H3>長野県関係ホームページの紹介</H3>
長野県全体：<A HREF="http://www.pref.nagano.jp/index.htm" TARGET="_top" >長野県ホームページ</A>、<A HREF="http://www.localinfo.nagano-idc.com/" TARGET="_top" >いいまち長野</A><BR>
鉄道の関係：<A HREF="http://ekimae.toshiba.co.jp/" TARGET="_top" >駅前探検倶楽部</A>、<A HREF="http://www.jreast.co.jp/" TARGET="_top" >ＪＲ東日本</A>、<A HREF="http://www.shinanorailway.co.jp/" TARGET="_top" >しなの鉄道</A>、<A HREF="http://www.tabi.eki-net.com/" TARGET="_top" >えきNET</A><BR>
道路の関係：<A HREF="http://www.jaf.or.jp" TARGET="_top" >ＪＡＦ</A><BR>
航空の関係：<A HREF="http://www.jal.co.jp" TARGET="_top" >日本航空、</A>
<A HREF="http://www.jas.co.jp" TARGET="_top" >ＪＡＳ、</A>
<A HREF="http://www.ana.co.jp" TARGET="_top" >全日空</A><BR>
地区の銀行：<A HREF="http://www.82bank.co.jp" TARGET="_top" >八十二銀行</A><BR>
地区の新聞：<A HREF="http://www.shinmai.co.jp/" TARGET="_top" >信濃毎日新聞、</A>
<A HREF="http://www.yomiuri.co.jp" TARGET="_top" >讀賣新聞、</A>
<A HREF="http://www.nikkei.co.jp" TARGET="_top" >NIKKEI NET</A><BR>
地図の検索：<A HREF="http://www.mapion.co.jp" TARGET="_top" >Ｍａｐｉｏｎ</A><BR>
電話の関係：<A HREF="http://itp.ne.jp/servlet/jp.ne.itp.sear.SCMSVTop" TARGET="_top" >タウンページ</A><BR>
宿泊の予約：<A HREF="http://www.jtb.co.jp/sp/" TARGET="_top" >ＪＴＢ</A>、<A HREF="http://www.nikkanren.or.jp/" TARGET="_top" >やど日本</A><BR>
スポーツ系：<A HREF="http://ski.joy.ne.jp" TARGET="_top" >ＳＵＦ＆ＳＮＯＷ</A>
<BR>
その他一般：<A HREF="http://www.yahoo.co.jp" TARGET="_top" >YAHOO! JAPAN、</A>
<A HREF="http://www.goo.ne.jp" TARGET="_top" >goo「グー」、</A>
<A HREF="http://www.infoseek.co.jp" TARGET="_top" >インフォシーク、</A><BR>
<A HREF="http://www.fresheye.com" TARGET="_top" >       フレッシュアイ、</A>
<A HREF="http://www.msn.co.jp/home.htm" TARGET="_top" >msn japan</A>

I回転するバラの花
<BODY>
<DIV style="top : 25px;left : 350px;
  position : absolute;
  z-index : 1;
" id="Layer1"><IMG src="a001ani.gif" width="32" height="32" border="0"></DIV>
</BODY>

回線接続しなくても作成して見れます。お試しください！

J点滅文字（scrollamountとwidthの値は同じにし、文字列の長さに合わせて決めます）
　ブリンクもどき
<marquee scrolldelay="300" scrollamount="100" width="100"> 　ブリンクもどき</marquee><br> Kフォント指定して、おしゃれな文字
Welcome to My homepage!
<font face="Comic Sans MS,Times New Roman,ARIAL">Welcome to My homepage!</font><br> Lロゴ風見出しの作成
Welcome to My Homepage!
<span style="font-family:Arial Black;font-size:24pt;color:FFFF00; background:A0D0FF">Welcome to My Homepage!</span><br> MEメールを組み込む時（件名も指定）
メール下さい <a href="mailto:aaakoi@navy.plala.or.jp?subject=申込みの件">メール下さい</a>
先頭に戻る

ホームページへ