• 凡例・・・・・・
  • 使用例
  • ソースコード

ホームぺージの作成と公開まで

ホームページの作成から公開までの流れを簡単に紹介します。流れのみ理解しておいてください。

ホームページは、HTMLで書かれた文書です。

HTML（ハイパーテキストマークアップ言語）は、WEB用の標準言語です。

ハイパーテキスト・・文書と文書を関連づける事ができる（クリックすると他の文書が開く）

マークアップ・・・文書の構造をタグと呼ばれるマークで表現する

HTML文書の例

ホームページにあるテキストの例

＜ブラウザによる画面への表示＞

画面の表示例です。

このように外部リンク　YHOO! JAPAN　を貼ります。（新しいウィンドウを開き、ＹＨＯＯ！ＪＡＰＡＮを表示する）

この3行をＨＴＭＬではこのように記述します。

<h4>＜ブラウザによる画面への表示＞</h4>
<p>画面の表示例です。</p>
<p>このように外部リンク　<span class="newWindow_link" onclick="window.open('http://www.yahoo.co.jp/')">YHOO! JAPAN</span>　を貼ります。（新しいウィンドウを開き、ＹＨＯＯ！ＪＡＰＡＮを表示する）</p>

＜説明＞

<　>・・・タグです。中に入れる文字（予約されています）で、テキストの意味等を表します。

1行目　<h4>・・・</h4>　　見出し４（h4タグ）でマークアップされています。

2行目　<p>・・・</p>　　　　標準段落（pタグ）でマークアップされています。

3行目　pタグでマークアップされた中に"このように外部リンク<span class=・・・・・・>YAHOO!JAPAN</span>・・・を表示する）"がマークアップされています。<span>もタグです。

文字列"YHOO!JAPAN”をクリックすると、YAHOOが開きます。

HTML文書の作成は面倒ですので、編集用ソフトを使います。

タグをメモ帳等で記述してHTML文書を作ることは可能ですが、面倒・ミスが多いなどから、編集用ソフト（オーサリングツール）を使うのが普通です。

本サイトでは、よく利用されているホームページビルダー（HPB　14,000円程度）を利用します。

HPBを購入するとテキストが付属していますので、全体を理解するためには、そのテキストで自習してください。（ご注意・・・このソフトにも色々な多くの機能がありますが、古い機能で現在では推奨されない多くのものが含まれています。一通り目を通したら、テキストは処分してください。）

HTML文書では、次の制約があります。

ファイル名

ファイル名は、半角小文字英数字にしてください。最初は英字に。記号の一部（　−　ハイフンや　_　アンダーバー）も使えます。

カタカナと環境依存文字

カタカナは全角にしてください。半角のカタカナと環境依存文字（記号その他）は使用しないようにしてください。（環境依存文字・・・パソコンの機種に依存した文字で、通常、かな漢字変換時に表示されます）

ホームページは、サーバにアップして閲覧できるようになります

自宅のパソコンで編集したHTML文書をインターネットで公開するためには、サーバにアップロード（自宅のパソコンからサーバーに移す）する必要があります。

サーバ
多数のユーザーからの24時間同時利用に耐えられる信頼性の高いコンピュータ

アップロード手順は、以下の通りです。

サーバを契約する

自宅のパソコンをサーバにすることは大変（経済的に・時間的に）です。通常以下の方法で使うサーバを決めます。

契約しているプロバイダが準備しているサーバを使う

プロバイダーに問い合わせると、その利用方法がわかります。

ホームページのドメイン名（URI　http://以下のアドレス）は、プロバイダに指定されたものを使います。（通常、少々長いアドレスです）

ドメイン名
ドメイン名はインターネット上の住所です。住所は、単独・唯一のものです。勝手につけることはできません。

無料のレンタルサーバを使う

無料で利用できる沢山のサーバがあります。　無料レンタルサーバ　通常広告が表示されます。

ホームページのドメイン名（URI　http://以下のアドレス）は、プロバイダに指定されたものを使います。（通常、少々長いアドレスです）

有料のレンタルサーバを使う

有料のレンタルサーバも沢山あります。　レンタルサーバ比較

レンタルサーバーを利用するためには、独自のドメイン名（URI・・・例　http://www.sturnus.net/）を契約します。数多くの種類（.jp、.com、.net、.tvなどなど）がありますが、すでに使われているものもあります。

契約可能なドメイン名を確認し契約しましょう。　ドメイン名のチェック・契約

ドメイン名を契約後、レンタルサーバを契約します。ドメイン名を契約した会社のサーバを契約すると簡単です。（別の会社でも可能です）

有料レンタルサーバのメリット

  • 独自のドメイン名が設定できますので、ホームページの紹介等簡単です。
  • アクセスカウンタ、独自のメールアドレスの設定、商用サイトの準備など、多くの機能が使えます。
  • 丁寧でわかりやすいヘルプが準備されていますので、簡単に利用できます。

本格的にホームページを公開していく場合には、有料のサーバがおすすめです。（年間１万円以下で利用できます）

このサイトでは、初心者用のサーバ　ロリポップ　を利用しています。

作成した文書をサーバにアップする

サーバの契約が終わったら、作成したページ（htmlファイルや使用している写真など）をアップします。

アップ方法・・・FTP（File Transfer Protocol　ファイル　トランスファー　プロトコル）と呼ばれる転送プログラムを使います。

無料のFTPプログラムが沢山あります。　例　FFFTP

本サイトでは、簡単に使えるHPB付属のソフト　ファイル転送ツール　を紹介します。

アップしたホームページを確認する

アップしたホームページをブラウザで確認してください。（URI　をブラウザのアドレスバーに入力）

閲覧用ソフト　ブラウザ・・・代表例　IE6・IE7・IE8・Firefox・Opera・Google Chrome・Safariその他数多くのブラウザがあります。ブラウザにより、表示が異なる場合があります。

少なくとも、最新のインターネットエクスプローラ（バージョン9）とFirefox（ファイア　フォックス）で確認してください。インターネットエクスプローラはwindowsパソコンには標準で装備されています。　Firefoxは　FireFox　からダウンロードし、インストールしてください。

よく使われているIEは、多くの問題点を持ったブラウザで、ようやく最新のバージョン9になって、多くのものが改善されました。しかし、IE9にバージョンアップできないユーザー（例　　Windows2000はIE6しか使えません）も多く悩ましい問題です。

ホームページビルダーは、毎年改訂されています。2011年10月に最新のバージョン16（V16）が発売されました。

以下、V16で説明します。

ホームページビルダー（HPB）のインストール

インストールＣＤをパソコンにセットすると自動的にインストールが始まります。標準でＯＫです。

インストールが終わったら、デスクトップにあるアイコンをクリック。ホームページビルダーが立ち上がります。

なお、インストールするといくつかのアイコンがデスクトップにできますが、このアイコンのみ残して、削除してください。

バージョンアップ版の利用・・・ホームページビルダ―V12以降にはバージョンアップ版が利用できますが、（株）ジャストシステムへのユーザー登録が必要です。

立ち上げ時のダイアログを表示しないよう設定

HPBを立ち上げると「ようこそ」ダイアログが表示されます。このダイアログを次回から表示させないようにします。

［次回から起動時にこのダイアログを表示しない］　にチェックを入れて［閉じる］ボタンをクリック

編集用画面の表示設定

HPBが立ち上がると編集用画面が表示されます。

この画面で編集すると、いろいろ問題点があります。（手間もかかります）

不要なツールバーを非表示にする

メニューバー「表示」をクリックしてください。

表示

設定の変更
  • 「かんたんナビ」のチェックを外す。
  • ツールバーをクリックして、「標準」のみにチェックを残す。（そのほかはすべてoffにする）

ビューの整理

編集画面の右側に、「ビュー」が縦のタブで表示されます。以下のタブを表示してください。（不要なタブは、右クリック　→　非表示にしてください）

ページ一覧素材フォルダサイト属性タグ一覧

スタイルエキスプレス

オプションの設定

メニューバー「ツール」　→　「オプション」で、以下に設定してください。

V14・V15 ・V16 では、ほぼ初期設定で問題ありませんが、念のため確認してください。

［一般］タブ・・・確認してください

オプション一般タブ

一般・・・　どちらもチェックを外してください。

ページ作成モード・・・「標準モード」に設定（どこでも配置は使用しません）

［編集］タブ・・・確認してください

改行で段落　改行キーにチェックを入れる

この設定で、Enterキーで段落を作成し、改行します。（新規段落を作成せずに改行する場合には、Shiftキー＋Enter　です）

［表示］タブ・・・V13以下の場合（V14・V15・V16では確認のみ）

フォント・・・ホームページビルダの編集画面の既定フォント。ブラウザで表示されるフォントではありません。

フォントサイズ・・・12に設定

［ファイル］タブ・・・ V13以下の場合（V14・V15・V16 では一部設定）

オプションファイルタブ

新規ファイルを作成する場合のフォーマット・・・XHTML1.0にチェック

［DOCTYPEを出力する］

V14・V15･V16　プルダウンメニューから選択してください。

以下、どちらでもOKでが、最新のルールの方が望ましいようです。（本サイトは、最新ルールにしています）

厳密に、最新のルールに準拠して作成する場合

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

従来からのルールも使用する場合

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

V13以下・・・上記をコピーして、貼り付けてください。

HTMLソースにGENERATOR を組み込む・・・offに

保存オプション・・・「バックアップファイルを作成する」を除いてonにしてください。

［ソース編集］タブ・・・V13以下の場合（V14・V15・V16では確認のみ）

オプション

出力文字・・・タグ、属性ともに、小文字に設定してください。

文字下げ・・・0に

以上でHPBの設定は終わりました。これだけでも面倒ですね。お疲れさまでした。