1 情報処理基礎 2006 年 7 月 6 日. 2 本日の学習項目 HTML 文書の基礎知識を習得する。 ホームページ・ビルダーの基本的な使 い方を習得する。 ホームページの作成 自己紹介のためのホームページを作成する。

Presentation on theme: "1 情報処理基礎 2006 年 7 月 6 日. 2 本日の学習項目 HTML 文書の基礎知識を習得する。 ホームページ・ビルダーの基本的な使 い方を習得する。 ホームページの作成 自己紹介のためのホームページを作成する。"— Presentation transcript:

1 1 情報処理基礎 2006 年 7 月 6 日

2 2 本日の学習項目 HTML 文書の基礎知識を習得する。 ホームページ・ビルダーの基本的な使 い方を習得する。 ホームページの作成 自己紹介のためのホームページを作成する。

3 3 HTML の概要 ホームページは HTML (Hyper Text Markup Language) と呼ばれる言語を 使って記述される。 HTML 文書はテキストファイルなのでテ キストエディタで編集可能。 ファイル名の拡張子は.html または.htm 。

4 4 HTML の文法 各種のホームページビルダーでホーム ページを作成可能。 ホームページビルダーで作成したホー ムページには無駄なコードが含まれる 事が多い。 HTML のタグ形式（文法）を理解して修 正等が出来る事が望ましい。

5 5 タグ形式 〜 :html 文 書である事を宣言する。 〜 : 文書情 報を表わすヘッダ。 〜 : タイトル （ブラウザのたいとる バーに表示される）。 〜 : 本文を 記述する。 〜 : タイトルを 記述する。 〜 : パラグラフを 記述する。 その他のタグについては、 5-2 〜 5-16 を参照。

6 6 HTML の歴史 HTML2.0(RFC1866) ： 1995 年 11 月に発表。基本的な タグを定義。 Netscape Navigator 1.0 〜 2.0 ：タグの追加。 FONT 等 。 Internet Explorer ：タグの追加。 HTML3.2 ： W3C （ World Wide Web Consortium ）が 勧告化。 HTML4.0 ： 1997 年 12 月 18 日、 Netscape Navigator や Internet Explorer で実装されたタグを取り込み勧告化 。（ 1999 年 12 月 24 日版の HTML4.01 が最新仕様） i-mode ： NTT ドコモの携帯電話で使用することを目 的とした「 Compact HTML 」規格。 HTML4.0 のサブ セット。

7 7 簡単なホームページ 簡単なホームページ（ sample_hp.txt ）をダウンロード。（ブラウザ上で 右クリック、リンクをディスクにダウンロードする。） ワードパッド（すべてのプログラム → アクセサリ → ワードパッド）でファ イルを自由にエディット。 拡張子を txt から html に変えて保存、ブラウザで眺める。（ブラウザ上にド ラッグアンドドロップ。） 本文の一番上に、 学籍番号 氏名 を記入してブラウザで眺め、 変化を確認する。 注意 html 文書内に「 」の 記号は書けない。「 」は「 > 」と 記述する。 lt = less than gt = greater than この他； & は & " は "

8 8 ホームページ・ビルダーを用いた 自己紹介 HP の作成 IBM ホームページ・ビルダー 10 で自己 紹介のホームページを作成する。 作成したファイルを確認し、サーバへ アップロードする。

9 9 自己紹介 HP の作成 1 1.IBM ホームページ・ビルダーを起動。 2. 「ファイル」 → 「ようこそダイアグ ラム」を開く。 3. 「かんたん」を選択。 1. ウィンドウ左上の「スタート」アイ コンをクリック。 2. 「ページを作成する」をクリック。

10 10 自己紹介 HP の作成 2 1. 「かんたんページ作成」を選択 1. 「入門用 PC ページ」を選択

11 11 自己紹介 HP の作成 3 1. 「標準モード」を選択 1. 「単数ページ」、「パーソナル」を 選択

12 12 自己紹介 HP の作成 4 1. 自分の好きな「テーマ」を選択。 2. レイアウトからは「自己紹介 01 」を選択 1. 自分の好きなページのタイトルを決 定。

13 13 自己紹介 HP の作成 5 1. 自分の好きな「ページの色や壁 紙を」を選択。 1. 自分の好きなアイコンを選択。

14 14 自己紹介 HP の作成 6 1. 自己紹介用に撮影した自分の写 真を挿入（「ファイルから」の ボタンをクリック、ファイルを 選択する） 1. 文章 1 〜 9 に、自分の自己紹介を記入。 （ Word で作った自己紹介分を、コ ピーして挿入）

15 15 自己紹介 HP の作成 7 1. 自分の好きな、区切り線（上下 に有る）を選択。 1. メールアドレスを設定。（自分の メールアドレスを記入）

16 16 自己紹介 HP の作成 8 1. 完了をクリック。 1. 後でホームページをエディットする 際の必要となる情報が表示される。

17 17 自己紹介 HP の作成 9 1. 「ページの保存」をクリック。 2. 「名前を付けて保存」を選択。 1. 適当な場所に新しいフォルダを作成 し、そのフォルダを選択。 2. ファイル名を「 index.html 」として保 存。

18 18 ホームページの Web サーバへのアップロード 1 1.FFFTP を起動 2. ホストの設定 基本タブ ホストの設定名：自由 ホスト名： www.ced.is.utsunomiya-u.ac.jp ユーザ名：自分のアカウント パスワード：自分のパスワード 拡張タブ PASV モードを使うのチェックを外す。 1. 接続をクリック

19 19 ホームページの Web サーバへのアップロード 2 /: ルートに居る 事 必要なファイル （全ファイル）を 選択 アップロード

20 20 ホームページの Web サーバへのアップロード 3 アップロード後、 Web ブラウザで確認する。 URL http://www.ced.is.utsunomiya-u.ac.jp/~ ユーザ名 で確認する

21 21 出席票・宿題 出席票 簡単なホームページ（本資料 7 ページ）に自分の名前、 学籍番号を入れ、ブラウザから印刷して提出の事。 宿題 自己紹介のホームページを完成させ、 FFFTP で Web サー バにアップロードし、ブラウザから印刷して提出の事。