（０）「ＨＴＭＬ」は最もベーシックなＨＰ言語です。 @「ＨＴＭＬ」は最もベーシックなＨＰ言語です。 Aホームページビルダーなどのソフトを使っても、自動的にＨＴＭＬ言語に翻訳されます。 Bソフトを使ってのファイルには、やたらと訳の分からない「タグ」が並びます。 C従って、同一ソフトを使わないとメンテナンスが出来ません。 D「ＨＴＭＬ」で直接書けば、メンテは簡単だし、別の人がメンテすることも容易です。 Eまた「ＨＴＭＬ」はベーシックなので、ソフトの取り込みなど応用が自由自在です。 ※まだ「ＨＴＭＬ」直接作成の経験のない方にも、この際学習されることをお勧めします。 （１）「貴ＨＰアドレス（ＵＲＬ）」を取得して下さい。 「ＨＰ開設学習会」へご参加の皆さんこんにちは。 当学習会の座長を務めさせて頂く杉原健児です。 この度は「ＨＰ開設学習会」にご参加頂きありがとうございます。 早速、学習を始めます。 以下は、皆さんの「プロバイダー名」「公式ＨＰ」「問合わせ先電話番号」です。 @nifty http://www.nifty.com/ TEL 0120-21-1915 alpha-web http://www.alpha-web.ne.jp/ T 0035-055-555 AOL http://www.jp.aol.com/ TEL 0120-265-265 BEKKOAME http://www.bekkoame.jp/ TEL 03-5459-0900 BIGLOBE http://www.biglobe.ne.jp/ TEL 0120-71-0962 CTY-NET http://www.cty-net.ne.jp/ TEL 0120-30-6500 DION http://www.dion.ne.jp/ TEL 0120-22-0077 iTSCOM http://www.itscom.net/ TEL 0120-109199 J-COM http://www.jcom.co.jp/ TEL 0120-999-000 OCN http://www.ocn.ne.jp/ TEL 0120-506506 ぷらら http://www.plala.or.jp/ TEL 009192-33 so-net http://www.so-net.ne.jp/ TEL 03-3513-6200 T-com http://www.t-com.ne.jp/ TEL 0120-805-633 yahoo! http://www.yahoo.co.jp/ TEL 不明？ 上記「ＨＰ」から「貴ＨＰアドレス」を取得して下さい。 「ＨＰアドレス取得」で不明な点は、各自のプロバイダーに電話でお訊ね下さい。 各プロバイダーの「問合わせ先電話番号」は、各「プロバイダーの公式ＨＰ」に掲載されています。 ＜無料ＨＰプロバイダー＞ NextFTP http://www.toxsoft.com/nextftp/hpkoukai/ FC2 http://fc2.com/ http://www.fc2web.com/ FC2WEB http://web.fc2.com/ KTNET http://kt.fc2.com/ ★【重要】 ユーザーネームは出来るだけ短く「英小文字２〜３文字」をお勧めします。 http://homepage3.nifty.com/ne/ の「ne/」の部分が nifty での杉原のユーザーネームです。 実際のＨＰアドレスは、 http://homepage3.nifty.com/ne/kk/ 北かんもん北九州ファンクラブ http://homepage3.nifty.com/ne/fu/ 福岡県人会 http://homepage3.nifty.com/ne/ta/ 全国ふるさと大使連絡会議 のように枝番「kk/」「fu/」「ta/」 等を付けて複数のＨＰに使い分けます。 そのために、ユーザーネームは出来るだけ短く、ニュートラルなネームがベターです。 ★【重要】 「貴ＨＰアドレス」を取得後、プロバイダーから登録確認のメールが来ますが、 そのメールに記された「ホストアドレス」「ユーザーＩＤ」「パスワード」等は、 後ほど使う重要なデータですので、大切に保存下さい。 ※皆さんのＨＰ開設学習の進捗状況を適宜お知らせ下さい。 （２）「Homepage Manager」をインストールして下さい。作成：070331 「Homepage Manager」は、タグ挿入式ＨＴＭＬファイル作成支援ツール（ソフト）です。 http://www.vector.co.jp/soft/dl/win95/net/se077898.html を開き、 この頁の中ほどの Homepage Manager1.43 hpman143.lzh / 921,616Bytes / 2005.9.19 の左下の「ＨＴＴＰでダウンロード」をクリックします。 Homepage Manager 1.43 現在、hpman143.lzh をダウンロードしています。 ファイルサイズ： 921,616Bytes ■しばらく待ってもダウンロードが始まらない場合は → ここをクリックしてください この案内に従い「ここをクリックしてください」をクリック下さい。 次は「実行」をクリック下さい。 次は「実行する」をクリック下さい。 次は「以下のフォルダに解凍します」の下の窓の「アドレス」をメモしておき、 「ＯＫ」をクリック下さい。 後は、案内メッセージに従って操作して下さい。 (注)各種環境により、上記と異なった表示の場合があるかも知れませんが、 その折は臨機応変に対応して下さい。 インストールが終われば、 デスクトップに「Homepage Manager」の「アイコン」が出ますので、 それをダブルクリックして開き、インストールされたことをご確認下さい。 ＜参考@＞ インストール出来ない場合の参考です。 圧縮・解凍ソフトはインストールされていますか？ 心当たりがない場合は、例えば下記ソフトを使用して解凍して下さい。 http://www.vector.co.jp/soft/dl/win95/util/se169348.html 解凍ソフトがインストール済みの場合はファイルサイズを見て、 正しくダウンロードされているか確認して下さい（921,616Bytes）。 サイズが違う場合は再度ダウンロードして下さい。 ＜解決例＞ 解凍ソフトインストールでき、「hpman143」のフォルダーもデスクトップ上に表示され、 フォルダー内のhpman.excもクリックし、画面表示までたどり着きました。OKかと思います。 有難うございました。 ＜参考A＞ ショートカットの「HomepageManage」rが現れず「hpman143」のファイルで出てきた場合の参考です。 この場合は、デスクトップに直接のショートカットを作る必要があります。 @ デスクトップの「ｈｐｍaｎ１４３[1]」をダブルクリックすると、 フォルダ「ｈｐｍaｎ１４３[1]」が出ます。 Aこのフォルダの中のフォルダ「ｈｐｍaｎ１４３[1]」をダブルクリックします。 B更に、この「ｈｐｍaｎ１４３[1]」フォルダの中のファイル「Hpman」（1736KB アプリケーション）に カーソルを持って行き、右クリック→「ショートカットの作成」をクリックします。 C最下段にファイル「Hpman へのショートカット」（1KB ショートカット）が出ますので、 右クリック→「コピー」をクリックし、 Dカーソルをデスクトップへ持って行き、右クリック→「貼り付け」をクリックします。 これで、デスクトップに「Hpmanのショートカット」が出ます。 Eこの「ショートカット」をダブルクリックすると「HomepageManager」が立ち上がります。 （３）「NextFTP」をインストールして下さい。 070324 「NextFTP」は自分のパソコンで作った「ＨＴＭＬファイル」を、 「プロバイダーのＨＰサイトにアップロード」するためのソフトです。 以下のＨＰを開いて下さい。 http://www.toxsoft.com/nextftp/index.html ・NXFTP470.EXE ↑ 無料ダウンロードは、ここをクリックして「開く」または「実行」を選択してください。 ウィルスチェック済みで安全ですので、セキュリティ警告が表示されても、 そのまま続行してください。 上記「NXFTP470.EXE」をクリック下さい。 「実行」をクリック下さい。 「実行する」をクリック下さい。 「次へ」をクリック下さい。 NextFTP Ver4.7 の セットアップを開始します。 「はい」をクリックします。 しばらくするとインストールが完了します。 (注)各種環境により、上記と異なった表示の場合があるかも知れませんが、 その折は臨機応変に対応して下さい。 インストールが終われば、 デスクトップに「NextFTP」の「アイコン」が出ますので、 それをクリックして、インストールされたことをご確認下さい。 （４）参考書「ＨＴＭＬタグ辞典」を購入して下さい。 070324 (注１)ＨＴＭＬ(hypertext markup language)とは、ＨＰファイルを記述するための言語。 (注２)「タグ」とは、ＨＰ表現したい文書構造をコンピュータに理解させるための記号。 以下の参考書の購入お願いします。 『ＨＴＭＬタグ辞典』(単行本)／潟Aンク(著)／翔泳社刊／価格：￥1,575（税込） http://www.seshop.com/detail.asp?pid=2473 http://www.amazon.co.jp/HTML%E3%82%BF%E3%82%B0%E8%BE%9E%E5%85%B8-% E3%82%A2%E3%83%B3%E3%82%AF/dp/4798102423 『ＨＴＭＬタグ辞典』は、ヨドバシカメラ等パソコンを売っている量販店には必ずあります。 少し大きな一般書店にも置いていると思います。 この本は、各種「ＨＴＭＬタグ」の「機能」や「応用例」を要領よくまとめられた「辞典」です。 従って、最初の頁から読み始めるのではなく、適宜必要なページを開いてご参照下さい。 初心者から上級者まで長く使える参考書です。ご愛用下さい。 また、本書「索引」もご活用下さい。 （５）「Homepage Manager」を使って、フォルダ「hp」を作りましょう。 デスクトップのアイコン(絵文字)「Hpman へのショートカット」をダブルクリックして、 「Homepage Manager」画面を開くと、画面上部に以下のメニューが表示されています。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー タイトルバー ：Homepage Manager Ver 1.43 ＿ □ × 一般メニュー ：ファイル／編集／タグ／拡張タグ／書式／…（以下略） （初期画面は、上記メニューと少々異なります） 編集メニュー ：新規作成／プロジェクトを開く／HTML文書を開く／上書き保存／…（略） タグメニュー@：検索／切り取り／コピー／貼り付け／元に戻す／スタイル／フォント ／サイズ／太字／斜体／下線／打ち消し線／…／色／… ／左寄せ／センタリング／右寄せ／…（以下略） タグメニューA：基本タグ／表／拡張タグ。 タグメニューB：改行／リンクを挿入／ラインを挿入／画像挿入／…／アンカー挿入。 テキスト選択 ：テキスト／WYSIWYG。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー (注１)上記タグメニュー各アイコンにカーソルをそっとを持っていくと説明文が出ます。 (注２)上記「太字」は、以下の説明で使うメニューです。 上記３段目の「編集メニュー」の左から３番目の「HTML文書を開く」をクリックします。 「ファイルを開く」のダイアログボックスが出ます。 最上段は「ファイルの場所」「現フォルダー名」が表示されており、 その右にアイコンが左から順に、「直前に表示したフォルダへ移動」 「一つ上のフォルダへ」「新しいフォルダの作成」「表示メニュー」と並んでいます。 カーソルをアイコンの上にそっと持って行くと、アイコンの意味が表示されます。 真中の「広い窓」には「一つ下のフォルダ」が並んでいます。 その下に「ファイル名」、右に「窓」、 最下段に「ファイルの種類」、右に「窓」が表示されています。 「一つ上のフォルダへ」と「一つ下のフォルダ」のクリックにより、 「ファイルの場所」に「ローカルディスク(C:)」を表示させます。 その右から２番目のアイコン「新しいフォルダの作成」をクリックすると 「新しいフォルダ」が、真中の「広い窓」に出来ます。 この「新しいフォルダ」を右クリックし、「名前の変更」をクリックすると、 「新しいフォルダ」の文字が反転されます。 そのまま、キーボードの「Delete」キーを押し、空白の中に hp と書き入れます。 これで、フォルダ「ローカルディスク(C:)」の中に、フォルダ「hp」が出来ました。 フォルダ「hp」をダブルクリックすると、ファイルの場所「hp」のダイアログボックスが出て、 真中の「広い窓」の中には何もありません。 ※このフォルダ「hp」の中に、あなたの作る全てのＨＰファイルとフォルダを入れます。 【注意！】 このフォルダ「hp」の中以外のファイルやフォルダは絶対に変更等をしないで下さい。 重要なファイルやフォルダが入っていますので、システムが壊れる場合があります。 （６）フォルダ「hp」の中に「HTMLファイル」を作ってみましょう。 (注)＜＞は全角文字となっています。ＨＴＭＬでは半角文字に直して使用下さい。 デスクトップのアイコン(絵文字)「Hpman へのショートカット」をダブルクリックして、 「Homepage Manager」画面を開くと、画面上部に以下のメニューが表示されています。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー タイトルバー ：Homepage Manager Ver 1.43-[HTML Editor] ＿ □ × 一般メニュー ：ファイル／編集／タグ／拡張タグ／書式／…（以下略） 編集メニュー ：新規作成／プロジェクトを開く／HTML文書を開く／上書き保存／…（略） タグメニュー@：検索／切り取り／コピー／貼り付け／元に戻す／スタイル／フォント ／サイズ／太字／斜体／下線／打ち消し線／…／色／… ／左寄せ／センタリング／右寄せ／…（以下略） タグメニューA：基本タグ／表／拡張タグ。 タグメニューB：改行／リンクを挿入／ラインを挿入／画像挿入／…／アンカー挿入。 テキスト選択 ：テキスト／WYSIWYG。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー (注１)上記タグメニュー各アイコンにカーソルをそっとを持っていくと説明文が出ます。 (注２)上記「太字」は、以下の説明で使うメニューです。 上記「編集メニュー」の１番目の「新規作成」をクリックし、 ＜BODY＞と＜/BODY＞の間に 田中真紀子 と書き込みます。 ＜BODY＞ 田中真紀子 ＜/BODY＞ 次に、一般メニューの「ファイル」→「名前を付けて保存」をクリックします。 「一つ上のフォルダへ」と広い窓の中の「一つ下のフォルダ」のクリックにより、 「ファイルの場所」に「hp」（フォルダ）を表示させます。 下から２段目の「ファイル名」の右の「窓」の中の文字を「tanaka」と書き変え、 その右の「保存」をクリックします。 「編集メニュー」の「HTML文書を開く」をクリックし、ファイルの場所のフォルダ「hp」 の中にある、ファイル「tanaka」をダブルクリックすると、 「tanaka」の「HTMLファイル」が出ます。 画面上で右クリックし、最上段の「プレビュー」をクリックして、 （「一般メニュー」の２番目「編集」→「プレビュー」をクリックしても同じ） Internet Explorerの画面に、「田中真紀子」と表示された「ＨＰ画面」が出ます。 これが、今作った「tanaka」という名前の付いた「HTMLファイル」の「ＨＰ画面」です。 「tanaka」という名前の付いた「HTMLファイル」の中の ＜BODY＞ と ＜/BODY＞ の間に文字をいろいろと追加書き込み、 「編集メニュー」の左から４番目の「上書き保存」をクリックし、 画面上で右クリック→最上段の「プレビュー」で追加変更を確かめて下さい。 上記と同様に 上記「編集メニュー」の１番目の「新規作成」をクリックし、 ＜BODY＞と＜/BODY＞の間に 小泉純一郎 と書き込みます。 ＜BODY＞ 小泉純一郎 ＜/BODY＞ 「ファイル」→「名前を付けて保存」→「ファイル名」を「koizumi」と書き変え、 その右の「保存」をクリックします。 （７）「NextFTP」を使って「公開サイト」にアップロードしましょう。 デスクトップのアイコン(絵文字)「NextFTP」をダブルクリックして、 「NextFTP」画面を開くと、画面上部に以下のメニューが表示されています。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー タイトルバー：未接続 - NextFTP4 ＿ □ × メニューバー：ホスト／フォルダ／コマンド／…／ウインドウ／…（以下略） ツールバー ：ホストに接続／簡易接続／ホストから切断／…（以下略） ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー (注)上記ツールバー各アイコンにカーソルそっとを持っていくと「説明文」が出ます。 「ツールバー」左端の「ホストに接続」をクリックします。 「ホストに接続-NextFTP」の画面の フォルダ「個人用」をクリックし、文字を反転させます。 右側に並んでいる最上段の「新規ホスト」をクリックします。 「プロバイダの選択-ホストの設定」の画面の 左欄の「プロバイダ」から当該プロバイダをクリックし、 右欄の「ホストアドレス」から当該アドレスをクリックし、「ＯＫ」を押します。 「ホストの設定」の画面の空欄に、プロバイダーから送られて来た、 「ホストアドレス」「ホスト開始フォルダ」「ユーザＩＤ」「パスワード」等を入力します。 ※以下の名称はプロバイダーにより微妙に異なります。カッコ内はその例です。 （左欄） 「ホスト名」←←←「プロバイダー名またはホスト名」を自由に入力下さい。 「ホストアドレス」←←←自動的に表示されます。（FTPサーバー名／FTPホスト名） 「ホスト開始フォルダ」←←←自動的に表示されます。（homepage、homeなど） ※「ホスト開始フォルダ」が不明な場合は、 「homepage」「home」または「ブランク」でトライしてみてください。 「ローカル開始フォルダ」←←←「C:\hp」と入力します。 （右欄） 「ユーザＩＤ」←←←「ユーザＩＤ」を入力します。 （ユーザー名／FTPアカウント／FTPのユーザーＩＤ） 「パスワード」←←←「パスワード」を入力します。（FTPのパスワード） 上記入力後、最下段の「ＯＫ」をクリックします。 （参考例）杉原が契約しているＨＰ掲載用ホスト→以下の例をヒントにトライして下さい。 ＨＰアドレス（ＵＲＬ） ホストアドレス ホスト開始フォルダ ユーザＩＤ http://homepage3.nifty.com/ne/ ftp42.nifty.com homepage hd293020 http://syashin.fc2web.com/ fc2web.com home syashin http://hp2.kt.fc2.com/ ftp1.kt.fc2.com home hp2 http://www.nextftp.com/hp3/ www.nextftp.com home hp3 http://hp66.web.fc2.com/ hp66.web.fc2.com (ブランク) sugihara-k@nifty.com 「ホストに接続-NextFTP」の画面の最下段の「接続」をクリックします。 ※＜ホストに接続できませんでした＞のメッセージが出た場合は、 「キャンセル」をクリックして、最初の画面に戻します。 再び「ツールバー」の「ホストに接続」をクリックします。 先ほど作った「プロバイダー名またはホスト名」をクリックし（文字を反転し）、 今度は、右側上から２番目の「編集」をクリックして、画面上の入力に間違いが ないかをチェックし、必要な修正をして、最下段の「ＯＫ」をクリックします。 再び「ホストに接続-NextFTP」の画面の最下段の「接続」をクリックします。 画面下から２行目に＜ホストに接続しました＞と表示され、 タイトルに「ホスト名」が表示された以下の画面が出れば、ホストへの接続成功です。 左欄「ローカル：'C:\hp'」の下に「hp」。ファイル名に「tanaka」が表示されている。 右欄「ホスト：'(ホスト開始フォルダ)'」の下に「(ホスト開始フォルダ)」。 最初は、ホストには無名のフォルダが一つあるだけで、ファイルの無い状態です。 「メニューバー」の右から２番目の「ウインドウ」をクリックして、 「左右に分割」の頭の「●」を確認します。（クリックで変わります） 左欄（ローカル側）のファイル「tanaka」を右欄にドラック＆ドロップします。 （左欄のファイル「tanaka」をクリックしたまま右欄に持って行きクリックを離す） ※２回目からはダイアログボックスが出ますので、最下段の「ＯＫ」をクリックします。 右欄（ホスト側）に、ファイル「tanaka」がコピーされます。 ２回目以降の右欄に「tanaka」がある時のドラック＆ドロップは「上書き」となります。 ※プロバイダーにより異なりますが、右欄のフォルダをダブルクリックした後に、 ドラック＆ドロップする必要がある場合があります。 「Internet Explorer」で「（あなたのＨＰアドレス）/tanaka.html」を開いてみて下さい。 公開上の「ＨＰ画面」に「田中真紀子」が表示されていることを確認して下さい。 これで、あなたが作ったHTMLファイル「tanaka」が公開ＨＰにアップされました。 おめでとうございます！ ※多少異なる手順もあるかも知れませんが、臨機応変に対応下さい。 ※上記手順で、一度「ホスト接続」が成功した後は、次の接続の時には、 「新規ホスト」や「編集」の手順は不要となります。いきなり、 「ホストに接続-NextFTP」の画面の最下段の「接続」をクリックするとホストに接続されます。 （８）「HTMLファイル」作成テクニック（文字の修飾） 「Homepage Manager」の「編集メニュー」の左から３番目の「HTMLファイルを開く」 をクリックし、「hp」フォルダの中の「tanaka」のファイルを開き、 ＜BODY＞と＜/BODY＞の間にいろいろと書き込むことで学習します。 田中真紀子＜BR＞ 田中真紀子＜BR＞ を縦に数個作ります。 田中真紀子＜BR＞ 「田中真紀子」の一つを指定し（指定文字の部分の色が変わる）、 （「田中真紀子」の左端にカーソルを持って行きクリックしたまま右端で離す） 「タグメニュー@」の「太字」をクリックし、「上書き保存」します。 画面を右クリック→「プレビュー」をクリックして、ＨＰ画面で確認下さい。 （例）田中真紀子（太字） 「サイズ」「斜体」「下線」「打ち消し線」…「色」…「センタリング」など についてもトライして見て下さい。 （例）田中真紀子（サイズ：FONT SIZE="4"） 田中真紀子（斜体） 田中真紀子（下線）田中真紀子（打ち消し線） 田中真紀子（色：red）田中真紀子（センタリング）※「改行」＜BR＞は、「タグメニューB」左端の「改行」をクリック下さい。 ※「水平罫線」は、同左から３番目の「ラインを挿入」→「ＯＫ」をクリック下さい。 ※書き損じた文字を元に戻すには、 「タグメニュー@」左から５番目の「元に戻す」をクリック下さい。 （画面上で右クリック→「元に戻す」をクリックしても同じことが出来ます） ※表（テーブル）を作るには、 「一般メニュー」左から３番目の「タグ」→「表」をクリックする。 ダイアログボックスの「行数」と「列数」をセットして、「適用」をクリックする。 一連のタグ群の中の＜TD＞と＜/TD＞の間に文字を入れると「表」が出来ます。 BORDER=(枠線の幅) CELLPADDING=(セル内の間隔) CELLSPACING=(セルの間隔) （９）「HTMLファイル」作成テクニック（画像の挿入） 下左の「桜」の画像の上を右クリックし、「名前を付けて画像を保存」をクリックし、 「ダイアログボックス」で「保存する場所」を「hp」に持って行き、 右下の「保存」をクリックします。 フォルダ「hp」の中に、ファイル「sakura」があることを確認して下さい。桜(sakura)
四季(shiki) 次に、「Homepage Manager」の「HTMLファイルを開く」→「tanaka」のファイルを開き、 画像を配置したい場所にカーソルを持って行き、 「タグメニューB」左から４番目の「画像を挿入」をクリックし、 「参照」をクリックし、「sakura」をダブルクリックし、「ＯＫ」をクリックします。 「編集メニュー」の左から４番目の「上書き保存」をクリックし、 画面上を右クリック→「プレビュー」をクリックし、ＨＰ画面で確認下さい。 ※ＨＴＭＬファイル修正の度に、この操作を繰り返して下さい。 右の「四季」の画像も同様トライし、ＨＰ画面で確認して下さい。 ※同様、手持ちの画像(写真)ファイルを「hp」フォルダに入れ、表示して見て下さい。 大きい画像は、ダイアログボックスで幅・高さを調節して表示下さい。 （例）