ホームページへの挑戦はじめにホームページへの挑戦のページにようこそ！皆様はインターネットの全世界に数十億ページあると言われているホームページにアクセスし楽しんでおられると思いますが、ご自分ぺーじを創り、持って見ませんか。インターネットが一層楽しくなるのは請け合いです。ホームページは、ＨＴＭＬというホームページの為のプログラミング言語で書かれていますので、素人には出来ないと思い込んでいる方が多いと思いますが、現在ではホームページ作成支援ツールがあり、手ごろの値段で市販されていますので、これを購入して使えば、ワープロ感覚で簡単にＨＴＭＬのホームページが作成できます。これを契約しているインターネット・プロバイダーが無償で提供している個人のホームページのサイトに、ホームページ支援ツールに付属している、ファイル転送ツールで、アップ・ロードすれば、出来上がりです。初めは敷居が高く、とっつきにくい感じですが、我慢して少し続ければ、すぐに出来るようになりますので、挑戦して見ましょう。ホームページの仕組みを理解しておいた方が、進歩が早いので、ここでは基礎的な事項を説明します。先ず準備すべき事項１）ホームページ作成支援ツールを購入ＩＢＭ社の「ホームページ・ビルダー」、Ｍａｃｒｏｍｅｄｉａ社の「Ｄｒｅａｍｗａｖｅｒ」等沢山ありますが、初めての方には、初心者からプロ級の人まで使えるホームページ・ビルダーがお勧めです。（この講座では、ホームページ・ビルダーの例を使って説明します。）２）プロバイダーからサイトスペースの借用プロバイダーのホームページに申し込み方法が出ています。３）テーマ･タイトルを決めましょう海外旅行記、私の写真集、私のペットｅｔｃ作成技術の会得はそんなに難しくない。重要なのは、コンテンツ。第1編：ホームページ作成の基礎１．インターネットの仕組２．インターネットの歴史３．インターネットを構成するエレメント４．WWWサイトとブラウザの関係５．HTMLファイルとブラウザの関係６．ホームページ作成の手順７．ホームページ作成の際の要注意事項８．ホームページ作成に使われるIT用語 WWW(Web) ネットワーク 1.インターネットの仕組み通信規格 TCP/IP 通信プロットコール POP,SMTP メールインターネット規格 Http,Ftp デジタル信号パケット通信 WWWサーバー ICANN（アメリカ） JNNIC（日本） IPアドレスの割当サービス・プロバイダー（ISP） IPアドレス DNS DHCPサーバー DNSサーバー POP：メール受信 SMTP:メール送信電話回線：ダイアルアップ接続 CATV,ADL,光回線：LAN接続 Web サイト FTPファイル転送ローカル・サイト 2 3.インターネットを構成する重要なエレメント１．通信インフラストラクチャー・ネットワーク；電話回線、光回線、マイクロウェーブ回線、衛星通信回線・WWWサーバー；UNIX（OS）、プロバイダー・サーバー・端末PC、OS ；DOS、MAC（Windows、MacOS、リナックス）２．ソフトウェアー；・通信規格；通信プロットコール；TCP/IP インターネットプロットコール； Http；Hyper Text Transfer Protocol FTP；File Transfer Protocol （ァイルを転送）・HTML言語；スイスCERAN（欧州核開発機構） 1989年開発-HTML4.0 ・ブラウザ； 1993年；モザイクMosaic完成マーク・アンドリューセンイリノイ大学学生 ⇒199Netscape 年,Internet Exploror1995年（IE2.0）・メーリングソフト；OE、NN ３．検索エンジン；Google（ロボットエンジン）、Yafoo（手動） 3 年代イベント詳細 1960年代米空軍,ＲａｎｄＣｏｒｐ．にライアビリティに強い、通信ネットワークの研究を委託パケット交換による、通信ネットワークを提案 1973 米国防省先端技術研究所（DAＲＰＡ）：コンピュータＮｅｔｗｏｒｋを構築ソ連との核戦争の生き残り為，研究所等の多数の異機種のコンピュータのネットワーク（DARPA NET）を構築，通信ＰｒｔｏｃｏｌｅとしてTCP/IP開発。ＤＡＰＡＲは、ＡＲＰＡ→ＤＡＲＰＡと名前を変更、開発協力会社は米国ＢＢＮ社 1975 ＡＲＰＡｎｅｔ，ＭＩＬｎｅｔに分離研究用；ＡＲＰＡｎｅｔ，軍用；ＭＩＬｎｅｔパソコン誕生、Ｍ／Ｓ社パソコン用ＯＳＢａｓｉｃマイクロソフト社（ビル・ゲーツ），パソコン用ＯＳＢａｓｉｃ開発開発 1980 ＮＳＦ：ＮＳＦＮＥＴの構築ＮＳＦ（全米科学基金）が，ＮＳＦＮＥＴを構築した。これが現在のＩＮＴＥＲＮＥＴの前身 1981 Ｍ／Ｓ社：ＭＳ－ＤＯＳの開発マイクロソフトが，カナダの会社から技術導入しＯＳを開発，パソコン時代のスタート 1983 Ｍ／Ｓ社：Ｗｉｎｄｏｗｓ開発着手マイクロソフトが，ＧＵＩを使ったＯＳの開発に着手 1984 Ｍａｃ社：Ｍａｃ－ＯＳを開発ＧＵＩの先鞭をつけた 1989 ＣＥＲＮ：ＨＴＭＬを開発ＣＦＲＮ（欧州核実験機構、スイス）が，内部の膨大な資料のコンピュータ管理用として、ＨＴＬＭを開発，ソース・データとともに公開、文字以外の図形、画像等もネットワークで送信可能となり、ＷＷＷの基礎が出来た 1990 国防省：ＡＲＰＡｎｅｔへの援助打切りＮＳＦ（Natinal science Foundation)NETが継承（Ｉｎｔｅｒｎｅｔ） 1990 Ｍ／Ｓ社：ＷｉｎｄｏｗｓＶ３を発売使い勝手の良さから、パソコンブームの切っ掛けとなった 1990 ＡＮＳ社設立Ｍｅｒｉｔ，Ｍｃｉ，ＩＢＭの合弁、ＤＮＳの管理 1993 ＭＯＳＡＩＣ開発米国ＮＣＳＡの学生（マーク・アンドリューｾﾝ）が，ＷＷＷの技術を使いＭＯＳＡＩＣを完成，Ｗｅｂページが容易になった 1994 ネットスケープ社：・ＷＷＷ用Ｂｒｏｗｓｅｒを発売ＳＧＩ社会長ジム・クラークとマーク・アンドリュセンでＭＯＳＡＩＣ社(現ネットスケープ社）を設立，ＮｅｔｓｃａｐｅＮａｖｉｇａｔｅｒ（モザイク＋ＨＴＭＬ言語＋ＵＲＬリンク）を提供、本格的ＷＷＷ時代に突入 1995 ＮＳＦＮＥＴが終結Ｍ／Ｓ社：パソコン通信に参入ＭＳＮサービスを開始Ｍ／Ｓ社：ＩｎｔｅｒｎｅｔＥｘｐｒｏｌｅｒ２．０を開発Ｍ／Ｓ社、パソコン通信から撤退、ＭＳＮをＩｎｔｅｒｎｅｔ事業に切り替え、Ｉ／Ｅを無償配布、サバイバルゲームが始まるＭ／Ｓ社Ｗｉｎ．９５発売パソコンブームを呼ぶ検索サイト、接続プロバイダーの事業参入活発 1998 ＨＴＬＭ４規格制定ダイナミックＨＴＬＭ、スタイルシート対応 M/S社:I/E4.0 配布開始ＯＳとブラウザの一体化による抱き合わせ販売、米国司法省独禁法違反で提訴Ｎ／Ｎ社：Ｎ／Ｎ４．０配布開始Ｍ／Ｓ社に対抗して無料化Ｍ／Ｓ社：Ｗｉｎ．９８発売ＯＳとブラウザを一体化して発売アップル社：ＯＳ８、ｉーＭＡＣの発売Ｍ／Ｓ社独占阻止の生き残り戦略世界ホームページサイト１億ページを越える 1999 M/S社I/E5.0配布開始 4 4.WWWサイトとブラウザの関係ホームページ（Webサイト） HTMLソース、画像、音楽等ファイル http://www.shonan-cc.co.jp/ URL でトップページにアクセス HTML Ver.４．０ W3C Wide Http （World Consortium) Web ブラウザ InternetExploror 6.0 Mozilla Opera7.0 Netscape NavigaterVer7.1 ダウンロードしたHTMLソース、画像ファイル、音楽ファイル等を、HTMソースの指示により、画面を作成・表示する。ブラウザの種類、バージョン、PCの画面サイズ等により表示が変わる。ブラウザの進化により、文字化け、色化けは殆どなくなったが、意図通り表示できないことが多く、製作者泣かせである。 5 5.HTMLファイルとブラウザーの関係 WWWサイト HTML ファイル画像 link1.gif BGM aaa.mid <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>メールアドレス登録会員</TITLE> </HEAD> <BODY> <P><FONT COLOR="#009900" SIZE="4"> <B>メールアドレス登録会員名簿（ABC順） </B></FONT> <IMG SRC="link1.gif" WIDTH="75" HEIGHT="32" BORDER="0" ALIGN="top" <TABLE WIDTH="800"> ＜省略> </TABLE> </BODY> </HTML> ブラウザ側 HTML ファイル画像 Abc.jpg BGM aaa.mid HTMLの記述に従い、ディスプレーに表示する 6 6.ホームページ作成の手順 Cドライブ作成ローカルサイト Tazuki_hp プロバイダーが指定したファイル名通常は Index.html 自動的に HTML ソースが作られている。これがホームページの正体だ新サイト作成ウイザード起動トップページ作成 Index.html Topページ作成白紙のページにコンテンツを入れるテキスト、画像等一部を除いて、 HTML のタグには、属性が決められていその他ソフト Photoshop EL Text Editor アップロードページFTP転送；・サイト転送；HPB自動・ページ転送；転送ツールプロバイダサイト申請１０－５０MB 無料？サイト情報通知； URL FTPアカウントパスワードこれが重要 2ページ目以降名前は自由 WWWサイトプロバイダー 7 7．ホームページ作成注意事項１）フォルダー・ファイル名は、全て半角英数字で、文字の間に空白を入れないこと。日本語を使ったり、空白を入れると、転送不能とか表示のトラブルが起きる可能性が大。本文は自由。２）ホームページから取得した画像等については、著作権問題があるので留意のこと。複写・転載不許可等ページに記載されている注意書きを見ること。３）ホームページのファイルは、サイト・フォルダーの中に保存されている。ホームページ・ビルダーはそれを読み込んで、編集画面に表示しているに過ぎない。ホームページ・ビルダーの中に保管されているわけではない。４）プロバイダーが取り決めている、サイトに対する規定に注意。（プロバイダー・サイトで確認できる）例えば、アクセスカウンターの挿入、とかその他プログラムの挿入とかについて、プロバイダーが準備したものしか利用できないケースが多い。５）ホームページ作成で苦労するのは、位置決め。表枠（枠非表示）を上手く活用する。レアアウト枠を利用する方のもあるが、ブラウザによりレイアウトが変わる可能性もあり。表枠がお勧め。 8 ８）ホームページ作成に使われるIT用語１．Internet ：インターネット；通信プロトコルTCP/IPを用いて全世界のネットワークを相互に接続した巨大なコンピュータネットワーク。２．WWW（W3）＝Web：ワールドワイドウェブ；インターネット標準的に用いられるドキュメントシステム（HTML）にハイパーリンクを埋め込むことにより、巨大なWWW網が出来あがっている。Webは、蜘蛛の巣。３．ブラウザ：browser, web browser：ページ閲覧ソフト IE；Internet Explorer Ver６．０ NN；Netscape Navigator Ver.7.1 etc ４．Webサイト：プロバイダー Webサーバー５．ローカル・サイト：自分のPC ６．規格：１）通信規格・TCP/IP：ティーシーピーアイピーTransmission Control Protocol/Internet Protocol ・SMTP：エスエムティーピー Simple Mail Transfer Protocol ・POP3：ポップスリー Post Office Protocol ２）インターネット規格・HTTP ：エイチティーティーピー HyperText Transfer Protocol ・FTP ：エフティーピー File Transfer Protocol ３）言語・HTML；Hyper Text Markup Laungeage ・JavaScript ジャバスクリプト・JavaApplet ・StyleSheet：CCS2：Cascading Style Sheet Level 2 ホームページ・ビルダーでの用語１．サイト：サイト作成ファイル構造；ディレクトリー、フォルダー、ファイル、パス２．編集画面：ページ編集、HTMLソース、プレビュー３．属性５．付属ツール類；１）ファイル転送・サイト転送；FTPツール２）ウエーブ・デザイナー３）ウエーブ・アニメーター etc ６．HTML言語；Hyper Text Markup Laungeage ７．タグ＜＞で囲む、例えば＜IMAGE＞・・・.JPG＜／IMAGE＞ 9