Microsoft PowerPoint - homepage1910.ppt - 互換モード

Size: px

Start display at page:

Download "Microsoft PowerPoint - homepage1910.ppt - 互換モード"

さみらやがい
4 years ago
Views:

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

1 情報基礎 Web ページ作成コンピュータとネットワークコンピュータネットワークネットワークとネットワークインターネットインターネットインターネット : 元々はネットワークとネットワークを接続したもの狭義には 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: https://www.ecs.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 課題 :Web ページ作成 ( 前半 ) 必要条件 index.html を含めてファイル 2 つ以上作成他人の作成したページに 1 つ以上リンクをはる画像を 1 つ以上表示学内公開課題どんなページを作るか考える ~/public_html/ の下 index.html 後半で OK xxx.html yyy.html zzz.pngなど -xxx,yyy,zzzは好きな名前をつける他人のページへ style.css 課題課題の手順 ( 準備 ) どんなページを作るか考える ( 注 ) 例なのでこのとおりにする必要は全くありません大阪市立大学のホームページ index.html 0. ディレクトリ ( フォルダ )public_html は準備されているすべて public_html 下で行う ( 例 ) プロフィール後半で OK 趣味 profile.html hobby.html イラスト logo.png style.css 課題の手順 ( 準備 ) エディタとブラウザを利用この授業では TeraPad を使います文字コード :UTF-8N 改行コード :CF+LF 課題の手順 1. index.html( トップページ ) の作成 (1) 雛形 (hinagata.html) ファイルをその他のツール - 名前をつけて保存 ( コピーペーストでもよい ) のみファイル名は index.html (2) エディタで <tilte></title> の間にタイトルを書いて保存ブラウザで表示 ( 更新 ) (3) エディタで <body></body> の間に本文を書いて保存ブラウザで表示 ( 更新 ) 以下は基本的には (3) の繰り返し 3

4 最小限必要な記述 <html> <head> <title>( ここにタイトルを書く )</title> </head> <body> ( ここに本文を書く ) </body> </html> の雛形 <!DOCTYPE html> <html lang="ja"> <head> <charset="utf-8"> <title>( ここにタイトルを書く )</title> </head> <body> ( ここに本文を書く ) </body> </html> ファイル (Hyper Text Markup Language) とは WWW 記述言語文章の論理構造を要素 ( タグ ) を使って記述 2 種類 <tag> </tag> <tag> 特徴 : テキストファイルだけで記述できる細かいレイアウトにこだわらなくてよいレイアウトを指定できるが強制はできない注意空白 TABコード改行コードは表示に影響なし大文字と小文字を区別しなくても表示は変わらない見出し <hx> </hx> (x=1,2,3,4,5,6) 段落 <p> </p> 罫線 <hr> 改行 <br> コメント  見たまま表示 <pre> </pre> 4

5 リンク ( アンカー ) <a href= hobby.html > 趣味 </a> <a href= map.gif > 地図 </a> <a href= > 大阪市立大学 </a> <a href= ログイン名 / > ログイン名の人のホームページ </a>( 後半で OK) 画像の表示 <img src= photo.jpg alt= 写真 > <img src= ~ ログイン名 /portrait.png 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> 課題の手順 2. CSS の作成 style.css というファイルを作成 index.html からリンクをはる <title> の下あたり <link rel="stylesheet" href= style.css"> 課題の手順 3. とCSSの動作の確認背景色やフォントの色を変えてみる背景色の場合 (CSS) ( 例 )body background-color: red; 5

6 課題の手順 4. 新しいファイルの作成編集 index.html を別名で保存して編集すると楽 ( 例 ) エディタで内容を編集して profile.html という名前で保存 5. ファイル同士でリンクをはる ( 例 )index.html から profile.html へのリンク <a href= profile.html > プロフィール </a> ( 例 )profile.html から index.html へのリンク <a href= index.html > トップ </a> CSS とは Cascading Style Sheet の省略表記シーエスエスと読む Web ページのレイアウト ( 視覚的構造 ) を定義するスタイルシートの規格の一つ Web の標準化団体である W3C(World Wide Web Consortium) によって標準化 W3C で推奨される考え方論理構造 : マークアップ言語, X, XML などレイアウト ( 見た目 ): スタイルシート言語 CSS など CSS のメリットの例 New という文字列の色を赤から黄色にかえたい場合 100 ページ (100 個のファイル ) の Web サイト +CSS で記述 <span class= attention >New</span> attention( 名前は自由 ) という class を設定 100 個のファイルは変更不要 CSS( 別ファイル ).attention color: yellow; CSS の基本セレクタ { プロパティ : プロパティ値 ;} ( 例 ) p {color: #ff0000; } <p> 要素の色を赤に設定 1 個の CSS ファイルにおいて attention の色を red から yellow に変更 6

7 CSS よく使われる例背景色 background-color: 色 ; 背景画像 background-image: url( ファイルへのパス ); フォントの色やサイズ color: 色 ; font-size: サイズ ; CSS よく使われる例中央揃え ( ボックス ) margin: 上下幅 auto; 中央揃え ( 文字列 ) text-align: center; 左揃え ( 文字列 ) text-align: left; 幅 ( ボックス ) width: 幅 ; CSS よく使われる例下線 border-bottom: 種類太さ色 ; 上の罫線 border-top: 種類太さ色 ; article section main header footer nav など +CSS ブロックレベル要素とインライン要素ブロックレベル要素文書や段落を構成する基本要素例 ) 見出し要素 div 要素インライン要素特定の部分に何らかの役割を持たせる要素中にブロック要素を含むことができない例 ) アンカー要素 span 要素 id id と class 要素に固有の ( 一つしかない )identifier( 名前 ) をつける 1ページに1 回しか出現できない class 要素にクラス ( 分類 ) をつける 1ページに2 回以上出現できる 7

8 見本のレイアウト ( トップページ ) <div id= container > <header> <div id= photo > 見本のレイアウト (2 ページ目 ) <div id= container > <header> <nav id= menu2 > <nav id= menu > <div id= page > <div class= description > <footer> <footer> margin と padding padding border margin 要素の中身 margin と padding の記述方法 margin: 0; 上下左右が 0 margin: 0 auto; 上下が 0 左右は中央揃え margin: ; 上右下左が 0 個別に指定するときは margin-left, margin-right, margin-top, margin-bottom 例 ) margin-left: 100; パーミッションディレクトリ ( フォルダ ) やファイルのアクセス権 d: directory; r: readable; w: writable; x: executable パーミッション他人に公開フォルダファイルのプロパティ Other: 読み取りと実行を可能とする d r w x r w x r w x Owner Group Other - r w - r - - r - - ( 例 ) このファイルは自分 ( オーナー ) は読み書き可能他人は読むことができるだけ 8

9 ファイル等が表示できないときファイル名空白を含むファイル名日本語等のファイル名は画像ファイルの形式 (PNG, JPG, GIF) ファイルが壊れていないかパス名 file: ではファイルの置き場所 public_html に下にあるか指定された場所にあるかパーミッションが読めない設定になっていないかファイル等が表示できないとき ( 文字化け ) <meta> で指定された文字コードと実際のファイルの文字コードが合っているかファイルを文字化け状態で保存していないか見本 5+CSS2 以下 index.html, profile.html css/style.css image/photo.gif コピーして使用してもよい注 )5 の IE 対策はしていない諸注意ファイル名のつけ方半角英数字例 )index.html, link.html 日本語や特殊記号 (# とか ) や空白を含まない種類に応じた拡張子を付ける例 )index.html, memo.txt, photo.gif /CSSファイルプレーンテキストとして作成ファイルの場所 /~ 自分のログイン名 /public_html/ の下に置く諸注意大文字と小文字タグについては大文字でも小文字でも OK( 例 <html> と <>) 他のファイルにリンクを貼るときは大文字と小文字を間違えない例 ) picture.gif に対して <IMG SRC= picture.gif > としないイメージデータ形式 PNG, JPEG, GIF 形式など大きなデータ大きすぎるデータは極力おかないおく場合はデータサイズを書いておくと親切法的問題一般的他人の著作物を著作権者の許諾なしに複製してはならない Web 上に掲載してはいけない他人の名誉を傷付けたり誹謗中傷してはならない内容については責任をもたなければならない実験室他人の権利を害する恐れがあったり良識上好ましくない内容があると判断した場合修正削除を指示することがある販売活動をしてはいけない 9

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

Microsoft PowerPoint - homepage 互換モード

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