Microsoft PowerPoint - homepage.ppt [互換モード]

Size: px

Start display at page:

Download "Microsoft PowerPoint - homepage.ppt [互換モード]"

はないしなみ
5 years ago
Views:

情報基礎ホームページ作成コンピュータとネットワークコンピュータネットワークネットワークとネットワークインターネットインターネットインターネット : 元々はネットワークとネットワークを接続したもの狭義には IP 接続された世界規模のコンピュータネットワーク歴史 1960 年代後半 ARPAnet (Advanced Research Project Agency):

1 情報基礎ホームページ作成コンピュータとネットワークコンピュータネットワークネットワークとネットワークインターネットインターネットインターネット : 元々はネットワークとネットワークを接続したもの狭義には IP 接続された世界規模のコンピュータネットワーク歴史 1960 年代後半 ARPAnet (Advanced Research Project Agency): 米国防総省による軍事研究支援用実験ネットワーク通信プロトコルとして TCP/IP を採用 1980 年代 Ethernet 登場 LAN(Local Area Network) 構築 ~ 現在さらなる高速化発展続ける LAN A LAN C LAN B 分散管理 IP アドレスとドメイン名 IP アドレスの取得 IP アドレス (IP address): ネットワーク上のコンピュータを識別する番号世界中でただ 1 つ例 ) ホスト名 ( コンピュータの名前 )+ ドメイン名 ( 組織の名前 ) 例 )mercury.ecip.osaka-u.ac.jp DNS (Domain Name System): ドメイン名と IP アドレスの対応付け出典 :IPA 教育用画像素材集サイト 1

インターネットを用いた主なサービス電子メール : 電子的な手紙のやりとり電子ニュース : 電子的な掲示板 FTP (File Transfer Protocol): ファイル転送 WWW (World Wide Web): 分散型ハイパーテキスト情報システムただし現在では WWW 上に多様なアプリケーションが構築されているインターネットと WWW(World Wide Web)

インターネット上で分散している情報の場所実験室での各自の URL: http://www.ex.media.osaka-cu.ac.jp/~ ログイン名 / Web ブラウザ :Web の情報にアクセスするためのソフトウエアリンク : ある情報から別の情報への関連付け出典 :IPA 教育用画像素材集サイト http://www2.edu.ipa.go.

2 インターネットを用いた主なサービス電子メール : 電子的な手紙のやりとり電子ニュース : 電子的な掲示板 FTP (File Transfer Protocol): ファイル転送 WWW (World Wide Web): 分散型ハイパーテキスト情報システムただし現在では WWW 上に多様なアプリケーションが構築されているインターネットと WWW(World Wide Web) インターネット WWW; WWW はインターネット上のアプリケーションの一つ分散型ハイパーテキスト情報システム Tim Berners-Lee@Cern( 当時 ), 1990 多様なアプリケーション WWW (Web) Mail News FTP インターネット WWW いくつかの用語 URL の構造 URL(Uniform Resource Locator): インターネット上で分散している情報の場所実験室での各自の URL: ログイン名 / Web ブラウザ :Web の情報にアクセスするためのソフトウエアリンク : ある情報から別の情報への関連付け出典 :IPA 教育用画像素材集サイトドメイン名の構造 WWW ごく簡単なしくみ出典 :IPA 教育用画像素材集サイトこんにちは (^_^) 山田太郎ですブラウザクライアント側 1.URL を指定 2. ファイルを返す 3. ブラウザに整列表示 <html> <head> <title>sample</title> </head> <body> <hr> こんにちは (^_^)<br> 山田太郎です <hr> </body> </html> xxx.html サーバ側 2

3 課題 : ホームページ作成必要条件 index.html を含めてファイル 3 つ以上作成他人の作成したページに 1 つ以上リンクをはる画像を 1 つ以上表示課題 1. どんなページを作るか考える ~/public_html/ の下 index.html zzz.gifまたは xxx.html yyy.html zzz.jpgなど -xxx,yyy,zzzは好きな名前をつける他人のページへ課題 1. どんなページを作るか考える ( 注 ) 例なのでこのとおりにする必要は全くありません ( 例 ) プロフィール趣味 profile.html hobby.html index.html イラスト top.jpg 大阪市立大学のホームページ本学環境上の注意 Windows 上ファイルの保存時に Web 上で表示不可になることがあるパーミッション ( アクセス権 ) の設定不可対策他のアプリケーション ( ブラウザ Mac のブラウザなど ) で保存など Mac のターミナルでパーミッションの設定変更 ( 情報を見るアクセス権変更 ) 課題の手順 ( 準備 ) 0. ディレクトリ ( フォルダ )public_html は準備されているすべて public_html 下で行う課題の手順 ( 準備 ) エディタとブラウザを利用 Mac 上のおすすめエディタ :CotEditor Windows 上のおすすめエディタ : TeraPad ただし文字化け多発 UTF-8 で保存を忘れずに授業では文字コードは UTF-8 を利用慣れたら変更可 3

4 課題の手順 1. index.html( トップページ ) の作成 (1) 雛形 (hinagata.html) をコピー & ペースト & 保存またはダウンロード & 保存ファイル名は index.html とする (2) エディタで <tilte></title> の間にタイトルを書いて保存ブラウザで表示 ( 更新 ) (3) エディタで <body></body> の間に本文を書いて保存ブラウザで表示 ( 更新 ) 以下は基本的には (3) の繰り返し課題の手順 2. ブラウザで index.html の表示の確認 file: 他の人から見えているとは限らないログイン名 / 外部から見えている外部から見えるようにアクセス権の変更 MAC の場合は情報を見るで everyone を読み出しのみ最小限必要な記述 <html> <head> <title>( ここにタイトルを書く )</title> </head> <body> ( ここに本文を書く ) </body> </html> ファイルと CSS 今回は 4.01 Transitional を使います 5 で作成したい方は 5 でも OK ただしほとんど自力で調べてもらうことになります授業の後半で推奨されない ( または廃止された ) 要素をCSSに置き換えます最初からCSSで作成したい方はCSSでも OK ただしほとんど自力で調べてもらうことになりますと CSS 今回 :4.01 Transitional 授業の後半 :4.01 Transitional + CSS2( 予定 ) ( 余裕のある人 ) 5 + CSS3 雛形 (4.01) <!DOCTYPE PUBLIC "-//W3C//DTD 4.01 Transitional//EN" " <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>( ここにタイトルを書く )</title> </head> <body> ( ここに本文を書く ) </body> </html> 4

5 参考 5 だとこうなります <!DOCTYPE html> <html lang="ja"> <head> <charset="utf-8"> <title>( ここにタイトルを書く )</title> </head> <body> ( ここに本文を書く ) </body> </html> 課題の手順 3. リンクをはる <a href= URL > リンク先ページの説明 </a> ( 例 )<a href= > 大阪市立大学 </a> 4. 画像の表示 <img src= URL alt= 画像の説明 > ( 例 )<img src= top.jpg alt= イラスト > 課題の手順 5. 新しいファイルの作成編集 index.html を別名で保存して編集すると楽 ( 例 ) エディタで内容を編集して profile.html という名前で保存 6. ファイル同士でリンクをはる ( 例 )index.html から profile.html へのリンク <a href= profile.html > プロフィール </a> ( 例 )profile.html から index.html へのリンク <a href= index.html > トップ </a> 課題の手順 7. 新しいファイル (3 つ目 ) の作成編集 5, 6 と同様 (Hyper Text Markup Language) とは WWW 記述言語文章の論理構造を要素 ( タグ ) を使って記述 2 種類 <tag> </tag> <tag> 特徴 : テキストファイルだけで記述できる細かいレイアウトにこだわらなくてよいレイアウトを指定できるが強制はできない注意空白 TABコード改行コードは表示に影響なし大文字と小文字を区別しなくても表示は変わらない (4.01では小文字が望ましい ) 5

6 見出し <hx> </hx> (x=1,2,3,4,5,6) 段落 <p> </p> 罫線 <hr> 改行 <br> コメント  フォント <font> </font> 注 )<font> 要素の中に別の要素をいれないこと 5 では廃止中央揃え <center> </center> 5 では廃止見たまま表示 <pre> </pre> リンク ( アンカー ) <a href= hobby.html > 趣味 </A> <a href= map.gif > 地図 </a> <a href= > 大阪市立大学 </a> <a href= ログイン名 / > ログイン名の人のホームページ </a> 画像の表示 <img src= photo.jpg alt= 写真 > <img src= ~ ログイン名 /portrait.jpg alt= 似顔絵 > 箇条書き <ul> <ul> <li> りんご </li> <li> みかん </li> </ul> <ol> <ol> <li> りんご </li> <li> みかん </li> </ol> りんごみかん 1. りんご 2. みかん表 ( 簡単な例 ) <table> <tr><td>.</td><td> </td></tr> 2 列の場合 </table> 6

7 画像の利用画像を表示 <img src= gazo.gif alt= 画像の説明 > 注 )alt を忘れないボタン画像をアンカーで利用 <a href= xxx.html ><img src= gazo.gif border= 0 alt= ボタンなど ></a> 画像の利用背景画像を指定 <body background= xxx.gif > 5 では廃止背景色を指定 <body bgcolor= #ffffff > 5 では廃止注 : <body> は 1 つだけ!(2 つ以上かかない ) コメントアウトで切り替えると便利参考 URL Web ページを作ろうとほほのホームページ入門クイックレファレンス W3C(WWW 標準化団体 ) 諸注意ファイル名のつけ方半角英数字例 )index.html, link.html 日本語や特殊記号 (# とか ) や空白を含まない種類に応じた拡張子を付ける例 )index.html, memo.txt, photo.gif ファイルプレーンテキストとして作成ファイルの場所 /~ 自分のログイン名 /public_html/ の下に置く諸注意大文字と小文字タグについては大文字でも小文字でも OK( 例 <html> と <>)( 注 : 小文字が望ましい ) 他のファイルにリンクを貼るときは大文字と小文字を間違えない例 ) picture.gif に対して <IMG SRC= picture.gif > としないイメージデータ形式 GIF や JPEG 形式など大きなデータ大きすぎるデータは極力おかないおく場合はデータサイズを書いておくと親切法的問題一般的他人の著作物を著作権者の許諾なしに複製してはならない Web 上に掲載してはいけない他人の名誉を傷付けたり誹謗中傷してはならない内容については責任をもたなければならない実験室他人の権利を害する恐れがあったり良識上好ましくない内容があると判断した場合修正削除を指示することがある販売活動をしてはいけない 7

8 Web で情報を探すためには求める情報のURLがわかればよいしかし情報のURLは多くの場合わからないそこでさまざまな検索サービスがうまれた検索エンジン ( キーワードとURLをコンピュータが結びつける ) Google, Yahoo!, Bingなど 8

Microsoft PowerPoint - homepage 互換モード

Microsoft PowerPoint - homepage 互換モード情報基礎ホームページ作成コンピュータとネットワークコンピュータネットワークネットワークとネットワーク 1 2 インターネットインターネットインターネット : 元々はネットワークとネットワークを接続したもの狭義には IP 接続された世界規模のコンピュータネットワーク歴史 1960 年代後半 ARPAnet (Advanced Research Project Agency): 米国防総省による軍事研究支援用実験ネットワーク