ＣＮＫネット｜ホームページを作ろう



	▼インターネットサービス
	インターネット接続のご案内
	・サービス紹介
	・利用料金
	・加入約款 / 禁止事項
	▼ニュース&トピックス
	たまテレネットの情報や話題
	・お知らせ
	▼サポート
	CNKネットサポート情報
	・ホームページを作ろう
	・各種設定
	・トラブル相談の前に
	・よくある質問（FAQ）
	・サポートフォーム
	・各種変更申込

●●● ホームページ作成と公開の概要

●●● 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文書で使用できるタグはこの他にもたくさんあります。
表示する文字の大きさや色を変えたり、絵を表示することもできます。

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

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

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

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

● ダウンロードしたファイルを解凍する
ダウンロードしたファーストステップページは圧縮されていますので、次に解凍ソフトを使って解凍する必要があります。解凍後に、エディタを使って、内容を編集することができます。代表的な解凍ソフトを使った解凍の仕方を説明します。

■圧縮解凍ソフト「Lhaz」

「Lhaz」は，ZIP形式のファイルを簡単に圧縮・解凍ができる優れたソフトです。上記サイトにアクセスして、最新のLhazをダウンロードしてください。ダウンロードしたファイルをダブルクリックするとインストーラが起動しますので指示に従ってインストールを進めてください。インストールが終わったら、Lhazを起動し、[ファイル(F)]→[書庫を開く(O)]でファイルを開くのウインドウを出して、[ファイルの種類(T)]を[ZIPファイル(*.zip)]に切り替えて先程ダウンロードしたファーストステップページセットを選択してください。すると、解凍後のファイルが一覧で表示されますので、[編集(E)]→[解凍(E)]→[このフォルダに解凍(H)]を選択してください。これにより、ダウンロードしたファーストステップセットページと同じディレクトリにファイルが解凍されます。

● 自分の作りたいホームページに合わせて変更する
次に、ファーストステップページセットを編集して自分だけのホームページにしてみましょう。
[スタートメニュー]→[プログラム(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が表示されます。

<a> </a>
指定したアドレスにリンクを張ります。
<a href="http://www.cnknet.jp">ＣＮＫネットのページ</a>のように指定すると、
ＣＮＫネットのページとなり、他のホームページへのリンクを張ることができます。

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

たとえば、次のように入力すると、下の図のように表示されます。

	Ａさん	Ｂさん
国語	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)	www.cnknet.jp
ホスト名(アドレス)(T)	www.cnknet.jp
ユーザ名(U)	会員証記載のアカウント
パスワード/パスフレーズ(P)	会員証記載のパスワード
ローカルの初期フォルダ(L)	作成したHTMLファイルがあるフォルダ
ホストの初期フォルダ(R)	public_html

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

● Webブラウザを使って実際にホームページの公開を確認する
ホームページファイルの転送が終わったら、いよいよ実際にホームページが世界に公開できているかを確認しましょう。インターネットエクスプローラを開いて、アドレス欄に以下のように入力します。

http://www.cnknet.jp/~会員証のアカウント名/転送したホームページファイル名

例えば、あなたのアカウント名が、cnknetで転送したファイル名がindex.htmlであった場合、 http://www.cnknet.jp/~cnknet/index.htmlと入力します。
入力が終わったら、Enterキーを押すことで先程転送したホームページが見れるようになります。

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

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

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

■ホームページ作成無料リンク集

また、ＣＮＫネットでは、みんなのホームページにてユーザ様のホームページを紹介しておりますので、リンクをご希望の方は、 support@cnknet.jpまでお気軽にご連絡下さい。それでは、楽しいホームページが作れますように！

玉島テレビ放送(株)会社概要｜会社案内地図｜ＣＮＫ｜お問合せ