Download presentation
Presentation is loading. Please wait.
1
コンピュータ プレゼンテーション
2
12.1 ページを作る前に… ホームページとは？
3
12.1.1 ホームページの正体 Internet Explorerでページを開く http://www.nucba.ac.jp
[表示]メニューの[ソース]を選択
4
ホームページの仕組み 各自のパソコンでソースを作成 サーバへアップロード ページを閲覧可能に ソース 自分のPC サーバ
5
12.1.3 ホームページの作成と公開 TextEditを使用してソースを作成
ソースのファイル名を「○×△.html」として保存 Fetchを使用してサーバ(名商大のWebサーバはopinion)へアップロード ソースの書き方(ルール)を覚えよう！
6
12.1.4 ソースを書く時のルール HTML(Hyper Text Markup Language)を使用
細かな設定を「タグ」で表記(下図の青字がタグ)
7
12.2 ホームページを作る HTMLの初級
8
最も基本的なタグ 目標：このようなページを作る
9
12.2.1 最も基本的なタグ <HTML> <HEAD> HTMLの基本形は、 <TITLE>
My HomePage </TITLE> </HEAD> <BODY> 私のホームページです。<BR> よろしくお願いします。<BR> </BODY> </HTML> HTMLの基本形は、 <タグ名>任意の文字列</タグ名> タグはすべて半角文字で入力 大文字と小文字は区別なし（例：<html>と<HTML>は同じ意味）
10
12.2.1 最も基本的なタグ HTMLファイルは<HTML>で始まり、</HTML>で終了する。
<HEAD>～</HEAD>で囲まれた部分がHTMLファイルのヘッダである。 ヘッダは本文とは違いページに表示されない。 <TITLE>～</TITLE>で囲まれた部分がタイトル。タイトルはページ上には表示されない。ブラウザのウインドウタイトルである。
11
最も基本的なタグ <BODY>～</BODY>で囲まれた部分がHTMLファイルの本文。この間に記述された内容がブラウザのページ上に表示される。 HTMLでは本文中の改行は無視される。ページ上で改行させたい時は行末に<BR>を記述。
12
12.2.1 最も基本的なタグ <HTML> <HEAD> <TITLE> My HomePage
<BODY> 私のホームページです。<BR> よろしくお願いします。<BR> </BODY> </HTML> ① ② ③ ④ ⑤
13
12.2.2 HTMLを書く TextEditを起動して下のように書いて見よう。 <HTML> <HEAD>
<TITLE> My HomePage </TITLE> </HEAD> <BODY> 私のホームページです。 </BODY> </HTML>
14
12.2.3 ファイルの保存 [フォーマット]メニューから[標準テキストにする]を選択
[ファイル]メニューからファイル名をindex.htmlとして保存 .txtという拡張子は[追加しない]を選択
![ファイルの保存 [フォーマット]メニューから[標準テキストにする]を選択](http://slidesplayer.net/slide/16361700/95/images/14/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BF%9D%E5%AD%98+%5B%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88%5D%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%8B%E3%82%89%5B%E6%A8%99%E6%BA%96%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AB%E3%81%99%E3%82%8B%5D%E3%82%92%E9%81%B8%E6%8A%9E.jpg "[ファイル]メニューからファイル名をindex.htmlとして保存. .txtという拡張子は[追加しない]を選択.")
15
ブラウザでの表示 HTMLファイルのアイコンをダブルクリックするか、Internet Explorerのアイコンにドラッグ＆ドロップすることで表示
16
12.2.5 ファイルの再編集 作成したファイルを閉じた後に再び編集するには TextEditの[ファイル]メニューから[開く]を選択
開きたいHTMLファイルを一覧からクリック [リッチテキストコマンドを無視]にチェックを付けて[開く]ボタンをクリック
![ファイルの再編集 作成したファイルを閉じた後に再び編集するには TextEditの[ファイル]メニューから[開く]を選択](http://slidesplayer.net/slide/16361700/95/images/16/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E5%86%8D%E7%B7%A8%E9%9B%86+%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E9%96%89%E3%81%98%E3%81%9F%E5%BE%8C%E3%81%AB%E5%86%8D%E3%81%B3%E7%B7%A8%E9%9B%86%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF+TextEdit%E3%81%AE%5B%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%5D%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%8B%E3%82%89%5B%E9%96%8B%E3%81%8F%5D%E3%82%92%E9%81%B8%E6%8A%9E.jpg "開きたいHTMLファイルを一覧からクリック. [リッチテキストコマンドを無視]にチェックを付けて[開く]ボタンをクリック.")
17
練習1 以下のような表示になるようにHTMLファイルを作成し、rensyu1.htmlというファイル名で保存しなさい。また、そのファイルをブラウザで表示してみなさい。
18
答え <HTML> <HEAD> <TITLE>My HomePage</TITLE>
<BODY> 私のホームページです。よろしくお願いします。 </BODY> </HTML>
19
練習2 以下のような表示になるように練習1で作成したファイルを修正し、rensyu2.htmlというファイル名で保存しなさい。また、そのファイルをブラウザで表示してみなさい。
20
答え <HTML> <HEAD> <TITLE>My HomePage</TITLE>
<BODY> 私のホームページです。<BR> よろしくお願いします。<BR> </BODY> </HTML>
21
12.3 ファイルのアップロード HTMLファイルをWebサーバにアップロード
名商大のWebサーバ(opinion.nucba.ac.jp) 使用するアプリケーションはFetch Fetchの最新版(Mac OS X対応)はvectorよりダウンロードして入手可能 ソース public_html 自分のPC サーバ
22
12.3.1 Fetchの使い方 「Fetch 3.0.3j2」のアイコンをダブルクリックし Fetch を起動
画面表示がされるので、下記の通り入力してから「ＯＫ」を クリック ホスト(接続先)： には接続したいサーバ名を入力ここでは「opinion」 ユーザー名： 自分の学籍番号 パスワード： 自分の電子メールパスワード
23
12.3.1 Fetchの使い方 サーバに接続され次の画面が表示される。 デフォルトのテキスト形式： 生データ(Row data)
最初に使用する場合のみ、「カスタム」メニューから「初期設定...」を選択し、さらに「Upload」のタグを選択して設定 デフォルトのテキスト形式： 生データ(Row data) テキストでないとき： 生データ(Row data) 以下の項目のチェックを外す 「BinHex ファイルに.hqxの拡張子をつける」 「MacBinary II に.binの拡張子をつける」 「テキストファイルに.txtの拡張子をつける」 「ファイル・ディレクトリ名のエンコード」
24
Fetchの使い方 「public_html」の項目をダブルクリックしてディレクトリを移動(ホームページのデータは必ず「public_html」の ディレクトリの中に登録すること) 登録したいファイルをFetchの画面にドラッグ＆ドロップ 登録したファイルを削除する場合には、ゴミ箱にドラッグ＆ドロップ 詳しくはガイドブックを参照
25
12.3.2 自分のホームページの閲覧 各自のホームページアドレスは Internet ExplorerでURLを入力して表示
Internet ExplorerでURLを入力して表示 自分の学籍番号
26
練習3 以下のような表示になるようにHTMLファイルを作成し、index.htmlというファイル名で保存しなさい。また、そのファイルをWebサーバへアップロードしなさい。
27
答え <HTML> <HEAD> <TITLE>My Homepage</TITLE>
<BODY> 目次<BR> 練習1<BR> 練習2<BR> </BODY> </HTML>
28
まとめ ページを作る前に… ホームページを作る ファイルのアップロード 次回もコンピュータを使用します。 LANケーブルも持ってきて下さい
Similar presentations
![コンピュータ基礎実習 ( 上級 ) 第二回 ウェブページの作成について 清水淳紀. ウェブページとは ウェブ (Web) は正式名称を World Wide Web という。 文字や画像、動画等を簡単に扱うことができる。 [ リンク ] を介してページ同士がつながっているのが 特徴。 ページは.](/39/11010578/big_thumb.jpg "コンピュータ基礎実習 ( 上級 ) 第二回 ウェブページの作成について 清水淳紀. ウェブページとは ウェブ (Web) は正式名称を World Wide Web という。 文字や画像、動画等を簡単に扱うことができる。 [ リンク ] を介してページ同士がつながっているのが 特徴。 ページは.>")
![Microsoft PowerPoint98 Netscape Communicator 4.06[ja]](/61/11249017/big_thumb.jpg "Microsoft PowerPoint98 Netscape Communicator 4.06[ja]>")
![Microsoft PowerPoint98 Netscape Communicator 4.06[ja]](/61/11249018/big_thumb.jpg "Microsoft PowerPoint98 Netscape Communicator 4.06[ja]>")
