コンピュータ プレゼンテーション
12.1 ページを作る前に… ホームページとは？
12.1.1 ホームページの正体 Internet Explorerでページを開く http://www.nucba.ac.jp http://www.nucba.ac.jp [表示]メニューの[ソース]を選択
12.1.2 ホームページの仕組み 各自のパソコンでソースを作成 サーバへアップロード ページを閲覧可能に ソース 自分のPC サーバ
12.1.3 ホームページの作成と公開 TextEditを使用してソースを作成 ソースのファイル名を「○×△.html」として保存 Fetchを使用してサーバ(名商大のWebサーバはopinion)へアップロード ソースの書き方(ルール)を覚えよう！
12.1.4 ソースを書く時のルール HTML(Hyper Text Markup Language)を使用 細かな設定を「タグ」で表記(下図の青字がタグ)
12.2 ホームページを作る HTMLの初級
12.2.1 最も基本的なタグ 目標：このようなページを作る
12.2.1 最も基本的なタグ <HTML> <HEAD> HTMLの基本形は、 <TITLE> My HomePage </TITLE> </HEAD> <BODY> 私のホームページです。<BR> よろしくお願いします。<BR> </BODY> </HTML> HTMLの基本形は、 <タグ名>任意の文字列</タグ名> タグはすべて半角文字で入力 大文字と小文字は区別なし（例：<html>と<HTML>は同じ意味）
12.2.1 最も基本的なタグ HTMLファイルは<HTML>で始まり、</HTML>で終了する。 <HEAD>～</HEAD>で囲まれた部分がHTMLファイルのヘッダである。 ヘッダは本文とは違いページに表示されない。 <TITLE>～</TITLE>で囲まれた部分がタイトル。タイトルはページ上には表示されない。ブラウザのウインドウタイトルである。
12.2.1 最も基本的なタグ <BODY>～</BODY>で囲まれた部分がHTMLファイルの本文。この間に記述された内容がブラウザのページ上に表示される。 HTMLでは本文中の改行は無視される。ページ上で改行させたい時は行末に<BR>を記述。
12.2.1 最も基本的なタグ <HTML> <HEAD> <TITLE> My HomePage <BODY> 私のホームページです。<BR> よろしくお願いします。<BR> </BODY> </HTML> ① ② ③ ④ ⑤
12.2.2 HTMLを書く TextEditを起動して下のように書いて見よう。 <HTML> <HEAD> <TITLE> My HomePage </TITLE> </HEAD> <BODY> 私のホームページです。 </BODY> </HTML>
12.2.3 ファイルの保存 [フォーマット]メニューから[標準テキストにする]を選択 [ファイル]メニューからファイル名をindex.htmlとして保存 .txtという拡張子は[追加しない]を選択
12.2.4 ブラウザでの表示 HTMLファイルのアイコンをダブルクリックするか、Internet Explorerのアイコンにドラッグ＆ドロップすることで表示
12.2.5 ファイルの再編集 作成したファイルを閉じた後に再び編集するには TextEditの[ファイル]メニューから[開く]を選択 開きたいHTMLファイルを一覧からクリック [リッチテキストコマンドを無視]にチェックを付けて[開く]ボタンをクリック
練習1 以下のような表示になるようにHTMLファイルを作成し、rensyu1.htmlというファイル名で保存しなさい。また、そのファイルをブラウザで表示してみなさい。
答え <HTML> <HEAD> <TITLE>My HomePage</TITLE> <BODY> 私のホームページです。よろしくお願いします。 </BODY> </HTML>
練習2 以下のような表示になるように練習1で作成したファイルを修正し、rensyu2.htmlというファイル名で保存しなさい。また、そのファイルをブラウザで表示してみなさい。
答え <HTML> <HEAD> <TITLE>My HomePage</TITLE> <BODY> 私のホームページです。<BR> よろしくお願いします。<BR> </BODY> </HTML>
12.3 ファイルのアップロード HTMLファイルをWebサーバにアップロード 名商大のWebサーバ(opinion.nucba.ac.jp) 使用するアプリケーションはFetch Fetchの最新版(Mac OS X対応)はvectorよりダウンロードして入手可能 20200000 ソース public_html 20200001 自分のPC サーバ 20200002
12.3.1 Fetchの使い方 「Fetch 3.0.3j2」のアイコンをダブルクリックし Fetch を起動 画面表示がされるので、下記の通り入力してから「ＯＫ」を クリック ホスト(接続先)： には接続したいサーバ名を入力ここでは「opinion」 ユーザー名： 自分の学籍番号 パスワード： 自分の電子メールパスワード
12.3.1 Fetchの使い方 サーバに接続され次の画面が表示される。 デフォルトのテキスト形式： 生データ(Row data) 最初に使用する場合のみ、「カスタム」メニューから「初期設定...」を選択し、さらに「Upload」のタグを選択して設定 デフォルトのテキスト形式： 生データ(Row data) テキストでないとき： 生データ(Row data) 以下の項目のチェックを外す 「BinHex ファイルに.hqxの拡張子をつける」 「MacBinary II に.binの拡張子をつける」 「テキストファイルに.txtの拡張子をつける」 「ファイル・ディレクトリ名のエンコード」
12.3.1 Fetchの使い方 「public_html」の項目をダブルクリックしてディレクトリを移動(ホームページのデータは必ず「public_html」の ディレクトリの中に登録すること) 登録したいファイルをFetchの画面にドラッグ＆ドロップ 登録したファイルを削除する場合には、ゴミ箱にドラッグ＆ドロップ 詳しくはガイドブックを参照
12.3.2 自分のホームページの閲覧 各自のホームページアドレスは Internet ExplorerでURLを入力して表示 http://opinion.nucba.ac.jp/~2020000/index.html Internet ExplorerでURLを入力して表示 自分の学籍番号
練習3 以下のような表示になるようにHTMLファイルを作成し、index.htmlというファイル名で保存しなさい。また、そのファイルをWebサーバへアップロードしなさい。
答え <HTML> <HEAD> <TITLE>My Homepage</TITLE> <BODY> 目次<BR> 練習1<BR> 練習2<BR> </BODY> </HTML>
まとめ ページを作る前に… ホームページを作る ファイルのアップロード 次回もコンピュータを使用します。 LANケーブルも持ってきて下さい