はじめての XHTML Chapter 1 WEB 作成の基礎知識 WEB ページを作成するための基礎的な知識を確認しましょう。 我々が日頃閲覧している WEB ページが、いかなる仕組みで見え ているのかを、初歩的な WEB 製作者の視点から確認してみまし ょう。 既に WEB 制作の経験のある方なら読み飛ばしていただいても構 いません。 また、概論だけで実際の操作はありませんので、長期講座の一 部に組み込まれている場合、必要な箇所だけ拾っていただけれ ば結構です。 データ配布時のご注意！ データをメールで配布する場合は“圧縮して添付ファイルとして送信”して下さい。 Outlook などマイクロソフト製のメールソフトでソースを送信した場合、後でリンク が動作しないというトラブルが発生する場合があります。 また圧縮せずに添付ファイルとした場合は、各ファイルの 1 行目に、メールで 送信した旨のコメントが入ってしまいますので、その 1 行目を削除する必要があり ます。 1 1. WEB ページと WEB サイト まず、世間一般で「ホームページ」と呼ばれている言葉がありますが、これは正しくは「WEB ページ」 のことを指しています。そのため、このテキストでは全て「WEB ページ」という言葉を使うことを了解 下さい。 インターネット上に WEB ページを公開する場合、通常は複数ページをまとめて「WEB サイト」として 公開します。 WEB ページ同士はリンクされ、相互に行き来できるような仕組みになっています。 また、WEB サイトの入り口にあたるページのことを、一般的に「トップページ」と呼びます。 WEB サイト トップページ フラワーアレンジメントスクール 受講者の作品集 お問い合わせ先 お問い合わせ先 2 WEB ページ 受講者の作品集 はじめての XHTML 2. WEB ページの構成を知る WEB ページは、ページの構造を示した「XHTML ファイル（ソースとも呼ぶ）」とデザインやレイアウト を指定した「CSS ファイル」、画像やアニメーションなどで構成されています。 XHTML ファイル CSS ファイル ブラウザーでの表示 XHTML XHTML は WEB ページを記述するマークアップ 言語のひとつです。比較的新しい言語で、これま で使われてきた HTML に代わって多く使われるよ うになりました。詳しくは第 2 章で学習します。 CSS CSS は WEB ページをデザインするスタイルシー ト言語のひとつです。XHTML や HTML 言語で作 成されたファイルを修飾する場合に利用されま す。 CSS については、3 章で学習します。 3 3. WEB サイトを公開する意味 企業や商店などにとって WEB サイトを公開することにはどんな意味があるのでしょうか。また WEB サイトにどんな役割をもたせたいのでしょうか。サイトを作成する前にまずこれらを確認する必要があ ります。 自社の会社案内（アピール）に新規顧客の開拓 企業の WEB サイトが急速に発展した理由の一つが、自社アピールによる新規顧客の開拓です。営 業力が低い、または全く無い中小零細企業がコストをかけずに、その製品やサービスをアピールで きるというメリットがあります。事実、あらゆる分野で WEB をきっかけにして伸びた企業は少なくあり ません。 企業価値（ブランド）の向上、維持 顧客や株主が必要する情報やサービスを提供することは、企業がその価値を向上・または維持する ために必要です。 コスト削減、サービスの迅速化 取引に向けて広告やパンフレットを作成するには、膨大なコストがかかります。しかし、WEB を利用 すれば世界中のどこからでも自社の製品やサービスを、非常に低コストで紹介できます。また、顧客 からの問い合わせやサポートなども WEB に統合することにより通信費や人件費を大幅に削減でき ます。 ネット店舗 実店舗では確保できない遠方の顧客にアピールでき、また販売員もいらず在庫管理や受発注にか かる作業まで一連して自動化しておれば極めて効率的な運用が可能です。大企業の直営ネット店舗 から、中小零細企業の店舗までまちまちですが、事業者によっては非常に魅力的な仕組みです。 ネット店舗の代表例 4 ソニースタイル 楽天市場 アマゾン メーカー直販 多店舗ショッピングモール 大規模ネット店舗 はじめての XHTML 4. WEB サイト公開に必要な手順 公開先の確保 WEB サイトを公開するには、「WWW サーバー（WEB サーバー）」と呼ばれる、公開用のコンピュー ターの確保（契約）が必要です。 公開用 WWW サーバー（WEB サーバー）の種類は主に 3 つに分けられます。 レンタル WWW サーバー 企業利用では最も一般的な方法で、データセンターから WWW サーバーの部分領域を借りる （レンタル）することによって WEB サイトを公開します。各種の機能も一通り揃っているケースが 多く、費用も自社 WWW サーバーに比べて大幅に少なくてすみます。 また、自社取得のドメイン名を割り当てることもできますので、外部からは自社の WWW サーバ ーとして見られますので信用度も高くなります。 自社 WWW サーバー 企業が自ら管理する WWW サーバーのことです。技術力の高い専門の担当者が必要なため、 大企業や IT 関係企業中心に利用されています。 自社の状況に合わせた設定や運用が可能な反面、費用や手間もかかります。 プロバイダの WWW サーバー 個人ユーザ中心の利用方法で、インターネットへの接続業者であるプロバイダ（ISP）から割り当 てられた WWW サーバー領域を利用します。企業 WEB サイトに必要な機能が使えないことも 多く、そもそも商用利用を許可していないケースも多々あります。 このテキストでは、一般的なレンタルサーバーを想定して進めていきます。 5 レンタルサーバーの契約 インターネットに接続できる環境があれば、「レンタルサーバー」のキーワードで簡単に事業者・サービス を検索できます。ビジネス系雑誌や書籍なども参考になります。自社の規模や必要とするサービスを複数 社で比較して選択しましょう。 チェック項目 ・ WWW サーバーの速度（通信速度や処理速度、同時接続数） ・ WWW サーバーの容量 ・ メールアカウントの数（1～無限大まで希望に合わせて 多いほうが無難） ・ ウィルス対策やスパムメールフィルターなどのセキュリティ機能の有無 ・ Peｒl や PHP、SQL など WEB アプリケーションの構築に必要な環境が揃っているか など 参考情報 WEB アプリケーションと CGI・SQL インターネットショッピングサイトを始め、ブログ（日記）や電子掲示板などの情報発信や、銀行のオン ラインバンクや証券会社のオンライントレードなど、インターネット上で動く、対話型のプログラムを “WEB アプリケーション”と呼びます。 この WEB アプリケーションは、Perl や PHP と呼ばれるプログラム言語や SQL と呼ばれるデータベ ースが動作する環境が必要です。 つまり、WEB サイト上で、さまざまなサービスを利用者に提供するためは、単にレンタルサーバーだ けでなく、上記のような言語やデータベースが動作する環境もパッケージとして用意する（用意しても らう）必要があります。 ショッピングサイト ブログを利用したサイト 6 はじめての XHTML ドメイン名の取得 ドメイン名とは www.example.co.jp のように表記される、インターネット上の住所や名前のようなもので、独自の WEB サイトを構築する 場合に、企業名やサービス・商品名を表すドメイン名を取得するのが一般的です。 なお、その場合は専門事業者に任せるのが簡単でしょう。 代表的なサービスとしては「お名前.com」（GMO インターネットグループ） 「http://www.onamae.com/」などがありますが、契約しているホスティング事業者や ISP などでも申 請が可能な場合がほとんどです。 また、ドメイン名は先に申し込んだ方が優先のため、自分が利用したいドメイン名を必ず取得できる とは限りません。 さらに、ドメイン名には「年間更新料」も必要ですので、その費用も勘案しましょう。 7 5. WEB サイトの設計 WEB サイトの目的 このテキストは、中小零細企業や店舗の WEB サイトを意識しており、業種としては「フラワーアレンジメント スクール」を取り扱っています。 そのため、「店舗（スクール）情報の公開・広告」「問い合わせ窓口として」「受講者募集」「既存受講者への情 報提供」などを目的としています。 サイト構成の検討 WEB サイトの構成は、トップページから他のページへリンクされるタイプのものが一般的です。 今回は、小規模なサイトのため複雑な構成は取らず、トップページからのツリー構造のサイトを構築 します。 ファイル名の検討 第一に、「半角英数字小文字のみ」で名前を付けるということを覚えてください。 日本語のファイルは、WWW サーバーによっては正しく認識できない場合があります。 また、大文字・小文字の区別もしますので管理が簡単になるよう、全て小文字に統一しておきます。 ファイル名のルール設定 WEB ページを初めて作成される方が悩むのが、ファイル名そのものです。 場当たり的に名前を決めてしまいますと、ファイル名の統一性がなく、何のファイルかがわかりにくくなっ てしまいます。小規模な WEB サイトであれば以下のように統一してしまうのも一つの手です。 ・ XHTML ファイルの拡張子は、「html」 例：index.html info.html ・ 画像ファイルは「XHTML ファイル名＋img+番号」、全ページ共通なら「img+番号」 例：index_img_01 これらはあくまで一例であって、全てのサイトに適用されるものではありません。 作成される方が、サイトの構成に応じて適切なルールをお考えください。 8 はじめての XHTML フォルダー構成の検討 まず重要なのが、ローカル（自分のパソコン）とホスト（公開先のサーバー）のフォルダー構成は完全 に一致させておく必要があるということです。 フォルダー構成が異なると、「参照先の画像ファイルが正しく表示されない」「リンクが動作しない」な ど WEB サイトとして致命的な状況に陥ります。 また、WEB サイト上のファイル数が増えてきた場合、作成している本人もファイルの場所が把握でき にくくなるため、フォルダーごとに分けて管理することをお勧めします。 今回のフラワーアレンジメントスクールの場合であれば以下のようになります。 fleurs XHTML ファイル index.html arrangement.html lesson.html qa.html info.html 画像ファイル images その他画像ファイル arg1.jpg css CSS ファイル fleurs.css 9 10 はじめての XHTML Chapter 2 XHTML の基本 まずは、基本となる XHTML ファイルについて学びましょう。 過去に、HTML ファイルを作成した経験のある方なら部分的に知 識を追加するだけに済みます。 初めての方でも、作成するうちに基本的な知識が身に付きますの で、あまり構える必要はないでしょう。 データ配布時のご注意！ データをメールで配布する場合は“圧縮して添付ファイルとして送信”して下さい。 Outlook などマイクロソフト製のメールソフトでソースを送信した場合、後でリンク が動作しないというトラブルが発生する場合があります。 また圧縮せずに添付ファイルとした場合は、各ファイルの 1 行目に、メールで 送信した旨のコメントが入ってしまいますので、その 1 行目を削除する必要があり ます。 11
© Copyright 2024 Paperzz
