たまテレ・インターネット

インターネットサービス

ホームページを作ろう

かんたんホームページ

●●●ホームページ作成と公開の概要
●●● Step.1 ホームページをつくる
難しいことを読まずに、今すぐホームページを作りたい!という方は「ファーストステップページを使う」から読みましょう。

ホームページは「html」という規則にしたがって書かれた文書です。
この文書はテキストエディタで作成することができます。
この文書をWebブラウザで表示するとhtmlの規則にしたがってレイアウトやリンクつきで表示されます。

一番基本的なhtml文書を作ってみる
[スタートメニュー]→[プログラム(P)]→[アクセサリ]→[メモ帳] と選択して、メモ帳を起動します。
メモ帳の画面に以下のように入力してください。


メモ帳のメニューから[ファイル(F)]→[名前を付けて保存(A)…]を選択します。
[ファイル名]の入力窓にtest.html と入力して[保存]ボタンを押してください。

保存した場所に、[test.html]というファイルができているので、ダブルクリックして開いてください。
以下のように表示されるはずです。


ふたつの画面を比べてみましょう。


このように入力した内容が反映されています。

html文書では、< >で囲まれている部分を「タグ」と呼びます。
タグはWebブラウザで文書を表示した時には表示されませんが、タグ以外の部分をどのように表示するかなどを設定することができます。

基本の文書で登場したタグをご説明しましょう。

<html> html文書の始まりであるという意味です。
</html> html文書の終わりであるという意味です。
多くのタグはこのように始まりのタグと終わりのタグが組みになっています。
<html>のように始まりを表すタグを「開始タグ」、</html>のように終わりを表すタグを「終了タグ」と呼ぶことがあります。
開始タグと終了タグの間に書かれた内容が、このタグの影響を受けます。

<head> </head>
文書全体の設定などを記載する、「ヘッダ」部分であることを表すタグです。

<title> </title>
この文書のタイトル(題名)を記載します。
上で見たように、Webブラウザの枠の部分などにこのタイトル名が表示されます。

<body> </body>
この間に記載した内容が、本文としてWebブラウザ上に表示されます。

html文書で使用できるタグはこの他にもたくさんあります。
表示する文字の大きさや色を変えたり、絵を表示することもできます。

ファーストステップページを使う
玉テレネットでは、はじめてホームページを作る方向けに、素敵なサンプルホームページをご用意しました。 サンプルをダウンロードして、自分に合わせて書き換えるだけで、簡単にホームページを作成することができます。 →ファーストステップページサンプル

ファーストステップページセットをダウンロードする
それでは、早速ファーストステップページセットをダウンロードしましょう。

■ファーストステップページセット : [ダウンロード]

[ダウンロード]ボタンを右クリックして、対象をファイルに保存を選択して、希望するディレクトリへ移動し、保存ボタンを押してください。 ダウンロードが開始され、指定したディレクトリへファーストステップページセットが保存されます。

ダウンロードしたファイルを展開する
ダウンロードしたファーストステップページは圧縮されていますので、 次に展開する必要があります。展開後に、エディタを使って内容を編集することができます。

  ファイルを展開する方法
  1.エクスプローラーで展開たいデータがあるフォルダーを表示
  2.展開したいファイルを右クリックし、「すべて展開」を選択
  3.展開する場所を指定(任意)
  4.展開されたファイルやフォルダーが表示され展開が完了

自分の作りたいホームページに合わせて変更する
次に、ファーストステップページセットを編集して自分だけのホームページにしてみましょう。
[スタートメニュー]→[プログラム(P)]→[アクセサリ]→[メモ帳] と選択して、メモ帳を起動します。
[ファイル(F)]→[開く(O)..]でファイルを開くウインドウを表示し、[ファイルの種類(T)]を[全てのファイル]を 選択し、先程展開して出来たフォルダ内に移動して、「index.html」というファイルを選択して[開く]ボタンを 左クリックしてください。以下のようにindex.htmlファイルの内容が表示されます。


ここで「Step.1 ホームページをつくる」の内容にもあったtitleタグの内容を編集してみましょう。
3行目に、<title>ひまわり日和 - 俳句と写真サイト</title>となっている箇所があると思いますが、
ここを、<title>私のホームページ</title>と変更してみてください。
次に、もう一つbodyタグ内の一部を変更してみましょう。
19行目の、<td height="49" valign="bottom" class="title">ひまわり日和</td>
<td height="49" valign="bottom" class="title">ようこそ私のホームページへ</td>のように変更してみてください。
変更が終わったら、[ファイル(F)]→[上書き保存(S)]でファイルを上書き保存してください。

すると、以下のようにページが反映されます。


このように、ファーストステップページセットの各ファイルの文章内容を変更するだけで、簡単に自分の好きな内容のホームページ を製作することができます。これらを使用して、自分の好きなホームページを作成してみてください。

ファーストステップページで使用されているタグの説明
ここでは、「Step.1 ホームページをつくる」で説明したタグ以外で、ファーストステップページ内で使用されている代表的なタグについて説明します。

<font> </font>
文字の大きさや、色を指定します。
<font size="5">こんにちは</font>のように指定すると、
こんにちはと表示されます。
また、<font color="red">こんにちは</font>のように指定すると、
こんにちはと表示されます。 これらのオプションを組み合わせて、
<font size="5" color="red">こんにちわ</font>のように指定すると、

こんにちはと表示することができます。

<img>
指定した画像ファイルを表示します。
<img src="表示したい画像ファイル名">のように指定します。
例えば、同一フォルダ内に、usagi.jpgというファイルが存在する場合、
<img src="usagi.jpg">のように指定すると、下のように指定したusagi.jpgが表示されます。

usagi.jpg
<a> </a>
指定したアドレスにリンクを張ります。
<a href="http://www.tamashima.tv">玉島テレビ放送のページ</a>のように指定すると、
玉島テレビ放送のページとなり、他のホームページへの リンクを張ることができます。

<table> </table>、 <tr> </tr>、 <td> </td>
テーブルを作ります。テーブルとは簡単に言うと表のことです。
<table>と</table>で囲んだところがテーブルになります。
<tr>と</tr>で囲んだところが横1行になり、<td>と</td>で囲んだところが1マスになります。

たとえば、次のように入力すると、下の図のように表示されます。
<table>
<tr><td> </td><td>Aさん</td><td>Bさん</td></tr>
<tr><td>国語</td><td>100点</td><td>20点</td></tr>
<tr><td>理科</td><td>50点</td><td>100点</td></tr>
<tr><td>社会</td><td>80点</td><td>90点</td></tr>
</table>

  Aさん Bさん
国語 100点 20点
理科 50点 100点
社会 80点 90点

<br>
改行です。文章を改行したい場合に使います。

ファーストステップページで使用している主なタグは以上です。 各タグにはもっと細かく設定を指定できるオプションがありますし、 もっとたくさんの種類のタグも存在します。 慣れてきたら、いろんなタグについてホームページや本を使って調べてみましょう。 タグを多く利用することでデザイン性の高いホームページにすることができますので、いろいろ挑戦してみてください。

●●● Step.2 ホームページをサーバに転送する
Step.1までで自分のホームページを作成することができたと思います。 作成したホームページは、現在は、自分のパソコンの中に保存されているだけで、自分のパソコンでしか見ることができません。 このホームページを玉テレネットのWebサーバに転送すれば、Webブラウザを使って全世界からこのページを見ることができるようになります。

ファイル転送ソフトを使ってファイルをサーバに転送する。
Webサーバにホームページのファイルを転送するためには、ファイル転送ソフトを使います。
ここでは、有名なFFFTPというソフトを使った転送方法を説明します。
まずは、下記サイトからFFFTPを入手してください。

FFFTPソフトのダウンロードページ [Sota's Web Page]

ダウンロードして展開後 FFFTP.EXE を起動し、[接続(F)]→[接続(C)..]→[新規ホスト(N)]で、玉テレネットの会員証を参考に、下記の情報を記入欄に入力し、[OK]ボタンを押してください。

ホストの設定名(T) ftp.tamatele.ne.jp
ホスト名(アドレス)(T) ftp.tamatele.ne.jp
ユーザ名(U) 会員証記載のアカウント
パスワード/パスフレーズ(P) 会員証記載のパスワード
ローカルの初期フォルダ(L) 作成したHTMLファイルがあるフォルダ
ホストの初期フォルダ(R) .public_html

[OK]ボタンを押すと、ホスト一覧の中に「ftp.tamatele.ne.jp」が出来ていますので、選択して[接続(S)]ボタンを 押してください。玉テレのWebサーバに接続され、左側にパソコン内で作成したホームページのファイルが表示されます。 ここで転送したいファイルをマウスで選択して、ツールバーにある青色の上矢印の[アップロード]ボタンを押してください。 すると、右側のWebサーバにファイルが転送されます。転送したいファイルを全て転送し終わったら、ツールバーにある コンセントにバツマークがついた[切断]ボタンを押してWebサーバとの接続を切断します。



Webブラウザを使って実際にホームページの公開を確認する
ホームページファイルの転送が終わったら、いよいよ実際にホームページが世界に公開できているか を確認しましょう。インターネットエクスプローラを開いて、アドレス欄に以下のように入力します。
https://www.tamatele.ne.jp/~会員証のアカウント名/転送したホームページファイル名
例えば、あなたのアカウント名が、tamateleで転送したファイル名がindex.htmlであった場合、 https://www.tamatele.ne.jp/~tamatele/index.htmlと入力します。
入力が終わったら、Enterキーを押すことで先程転送したホームページが見れるようになります。

いかがでしょう。あなたのホームページは上手く世界に公開できましたか? 早速、お友達にあなたのホームページアドレスを伝えて自慢しましょう。

●●● Step.3 ワンスランク上の利用方法
あなたのホームページに何人の人が見に来てくれているのか気になったら、 ページにアクセスカウンターを設置することができます。 詳しくは、カウンター設置方法のページをご覧下さい。

●●● Step.4 さらに素敵なホームページにするためのリンク集
最後に、ホームページを作成する上で参考になるサイトをまとめた、とても良質なリンク集のページをご紹介します。 ホームページの作り方や、タグの説明、無料で使えるHP用の画像や、無料で使えるレンタル掲示板などホームページを 作る上でとても役に立つ情報サイトを集めたサイトです。一度アクセスしてみてください。 きっとあなたのホームページがよりすばらしいものなるでしょう。

ホームページ作成無料リンク集
また、たまテレでは、みんなのホームページ にてユーザ様のホームページを紹介しておりますので、リンクをご希望の方は、 ttc@mx1.tamatele.ne.jpまでお気軽にご連絡下さい。 それでは、楽しいホームページが作れますように!

カウンターの設置方法

●●●カウンターの設置方法

ホームページの中の、カウンターを設置する場所に以下のように書き込んでください。
<img src="/cgi-bin/Count.cgi?df=アカウント名.dat&カウンターごとの記載">

例・アカウントがsample、設置するカウンターは (1) 標準の数字スタイル、フレームなし、の場合
<img src="/cgi-bin/Count.cgi?df=sample.dat&ft=0">

※カウンターは上記の記載をしたファイルをサーバに転送し、サーバ上のファイルを表示させると動作します。サーバに転送する前に、パソコンの中のファイルを表示してもカウンターは正常に表示されませんのでご注意ください。
※カウンターのリセットをご希望の場合は、玉島テレビ放送までご連絡ください

●●●カウンターサンプル
sampleを、ご自分のアカウント名に書き換えてご使用ください。
sampleの記載がないものについては、そのままでご使用いただけます。

カウンターの数字スタイルを変更するには→
透過色を設定するには→
フレームの太さを指定するには→
フレームの色を指定するには→
数字の色を指定するには→
数字に 3桁ごとにカンマを入れるには→
カウンターを回転させるには→
表示せずにカウントするには→
画像に重ねてカウンターを表示するには→
アクセスカウンター以外の利用方法→
  • 標準の数字スタイル、フレームなし

    <img src="/cgi-bin/Count.cgi?df=sample.dat&ft=0">

  • 数字スタイル B

    <img src="/cgi-bin/Count.cgi?df=sample.dat&dd=B">

  • 数字スタイル C 、3桁ごとにカンマを入れる

    <img src="/cgi-bin/Count.cgi?df=sample.dat&dd=C&comma=T">

  • 数字スタイル D

    <img src="/cgi-bin/Count.cgi?ft=3&df=sample.dat&dd=D">

  • 数字スタイル E 、白を透過色に設定

    <img src="/cgi-bin/Count.cgi?trgb=ffffff&df=sample.dat&dd=E">

    透過色とは
    gif画像の中で、色を表示せずに透過させる設定です。
    透過色に設定した色については、その色は表示せずに背景の画像や文字が表示されます

  • 緑を透過色に設定

    <img src="/cgi-bin/Count.cgi?df=sample.dat&trgb=00ff00">

    透過色とは
    gif画像の中で、色を表示せずに透過させる設定です。
    透過色に設定した色については、その色は表示せずに背景の画像や文字が表示されます

  • 黒を透過色に設定

    <img src="/cgi-bin/Count.cgi?df=sample.dat&trgb=000000">

    透過色とは
    gif画像の中で、色を表示せずに透過させる設定です。
    透過色に設定した色については、その色は表示せずに背景の画像や文字が表示されます

  • フレームカラーは標準で、太さを 4pixcel に指定

    <img src="/cgi-bin/Count.cgi?df=sample.dat&ft=4">

  • フレームカラーを指定。フレームの太さは標準

    <img src="/cgi-bin/Count.cgi?df=sample.dat&frgb=ff0000">

  • フレームカラーを、赤、緑、青の三色の組み合わせで指定

    <img src="/cgi-bin/Count.cgi?ft=4&lit=0123456&frgb=0;0;255">

    注意
    この例では、lit=0123456として「0123456」という数字を表示するように指定しています。lit=0123456 の変わりに df=アカウント名.datと記載すれば、通常のカウンターとして動作します。

  • フレームカラーを16進数で指定

    <img src="/cgi-bin/Count.cgi?ft=4&lit=0123456&frgb=0000ff">

    注意
    この例では、lit=0123456として「0123456」という数字を表示するように指定しています。lit=0123456 の変わりに df=アカウント名.datと記載すれば、通常のカウンターとして動作します。

  • フレームカラーを色の名前で指定

    <img src="/cgi-bin/Count.cgi?ft=4&lit=0123456&frgb=Gray">

    注意
    この例では、lit=0123456として「0123456」という数字を表示するように指定しています。lit=0123456 の変わりに df=アカウント名.datと記載すれば、通常のカウンターとして動作します。

  • 数字の色を変更

    <img src="/cgi-bin/Count.cgi?lit=1234567&chcolor=T">

    注意
    この例では、lit=0123456として「0123456」という数字を表示するように指定しています。lit=0123456 の変わりに df=アカウント名.datと記載すれば、通常のカウンターとして動作します。

  • 数字の色を変更。緑色を黄色に変更するよう指定

    <img src="/cgi-bin/Count.cgi?lit=1234567&srgb=00ff00&prgb=ffff00">

    注意
    この例では、lit=0123456として「0123456」という数字を表示するように指定しています。lit=0123456 の変わりに df=アカウント名.datと記載すれば、通常のカウンターとして動作します。

  • 3桁ごとにカンマを入れる

    <img src="/cgi-bin/Count.cgi?lit=94032048040320&comma=T&dd=D&ft=2">

    注意
    この例では、lit=94032048040320 として「94032048040320」という数字を表示するように指定しています。lit=94032048040320 の変わりに df=アカウント名.datと記載すれば、通常のカウンターとして動作します。

  • カウンターを回転して表示する

    <img src="/cgi-bin/Count.cgi?ft=0&df=sample.dat&rotate=T&dd=D">

  • カウンターを180度回転して表示する

    <img src="/cgi-bin/Count.cgi?ft=0&df=sample.dat&dd=D&degrees=180">

  • カウンターを90度回転して表示する

    <img src="/cgi-bin/Count.cgi?ft=0&df=sample.dat&degrees=90&dd=D&prgb=ffff00">

  • アクセス数を表示しないカウンター

    <img src="/cgi-bin/Count.cgi?df=sample.dat&sh=F">

    注意
    このカウンターだけを設置するとアクセス数を確認できません。
    別のページで、数字表示をするタイプのカウンターを設置して、アクセス数をご確認ください。

  • 画像だけを表示し、アクセス数を表示しない

    <img src="/cgi-bin/Count.cgi?display=image&dd=D&image=lenna.gif&df=sample.dat&incr=T&frgb=8B6508&ft=20">

    注意
    このカウンターだけを設置するとアクセス数を確認できません。
    別のページで、数字表示をするタイプのカウンターを設置して、アクセス数をご確認ください。

  • 画像に重ねてカウンターを表示

    <img src="/cgi-bin/Count.cgi?image=foo.gif&dd=E&comma=T&df=sample.dat&align=bottomcenter&tr=T&trgb=ffffff">

    align=bottomcenter で画像とカウンターの上下左右の並べ方を指定します。この指定で、上下方向は下揃え、左右方向は中央で整列されます。trgb=ffffff で白を透過色に指定しています。
    透過色とは
    gif画像の中で、色を表示せずに透過させる設定です。透過色に設定した色については、その色は表示せずに背景の画像や文字が表示されます

  • 画像に重ねてカウンターを表示

    <img src="/cgi-bin/Count.cgi?image=yeehaw.gif&dd=A&df=sample.dat&comma=T&align=topcenter&offset=5&ft=4">

    align=topcenter で画像とカウンターの上下左右の並べ方を指定します。この指定で、上下方向は上揃え、左右方向は中央で整列されます。offset=5 で、画像の上端からの距離を設定します。この指定で、画像の上端から 5pixcel の場所にカウンターを表示します。

  • 画像に重ねてカウンターを表示

    <img src="/cgi-bin/Count.cgi?image=peng.gif&dd=A&df=sample.dat&comma=T&align=bottomcenter&offset=40&trgb=000000&ft=0">

  • 時間を表示する。12時間形式

    <img src="/cgi-bin/Count.cgi?display=clock">

  • 時間を表示する。時間に0を補完しない

    <img src="/cgi-bin/Count.cgi?display=clock&pad=F">

  • 時間を表示する。24時間形式

    <img src="/cgi-bin/Count.cgi?display=clock&tformat=24">

  • グリニッジ標準時を表示

    <img src="/cgi-bin/Count.cgi?display=clock&timezone=GMT+0000">

  • 日付を表示 (MM-DD-YY)

    <img src="/cgi-bin/Count.cgi?display=date&dd=cdr">

  • 日付を表示 (DD-MM-YY)

    <img src="/cgi-bin/Count.cgi?display=date&dformat=ddmmyy">

  • 日付を表示 (DD-MM-YYYY) use YYYY to show full year

    <img src="/cgi-bin/Count.cgi?display=date&fy=T&dd=cd&dformat=ddmmyyyy">

  • 特定の日付からのカウントダウン表示

    2000年2月1日 8:00AMからの例
    <img src="/cgi-bin/Count.cgi?cdt=2000;2;1;8;0;0&sfd=T&dd=cdd&ft=2">

  • カウントダウン表示

    1998年2月1日 8:00AMからの例
    <img src="/cgi-bin/Count.cgi?cdt=1998;2;1;8;0;0&sfd=T&dd=cd&ft=2&negate=T">

  • 日付間の日数と時間を表示

    1999年7月16日 10:00PM 〜 1999年7月17日 10:00AM の例
    <img src="/cgi-bin/Count.cgi?cdf=1999;7;16;22;0;0&cdt=1999;7;17;10;0;0">

  • データファイルを指定していない場合、ランダムな数字を表示

    <img src="/cgi-bin/Count.cgi?ft=0">

  • Count.cgiのバージョンを表示

    <img src="/cgi-bin/Count.cgi?display=version">