1 / 27

ホームページ ?

ホームページ ?. Home page The home page is the URL that automatically loads when a web browser starts or when the browser’s “home” button is pressed. (*) “ ホームページ ” とは、 Web ブラウザを起動したとき、または “ ホーム ” ボタンを押したときに、自動的に表示されるページ。 Web page

apu
Download Presentation

ホームページ ?

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ホームページ? • Home page • The home page is the URL that automatically loads when a web browser starts or when the browser’s “home” button is pressed. (*) • “ホームページ”とは、Webブラウザを起動したとき、または“ホーム”ボタンを押したときに、自動的に表示されるページ。 • Web page • A web page is a document that is suitable for the World Wide Web and can be accessed through a web browser. (*) • “ウェブページ”とは、Webブラウザからアクセスされるドキュメント。 (*) 英語版Wikipediaより

  2. URL URL http://www.kantei.go.jp/jp/kan/meibo/index.html スキーム (プロトコル) ホスト名 パス (ファイル名) ① HTTPというプロトコルを使って ② www.kantei.go.jpというサーバから ③/jp/kan/meibo/index.htmlというファイルを取得する

  3. HTTP • Hypertext Transfer Protocol • WebブラウザとWebサーバ間でコンテンツの送受信を行うプロトコル /jp/kan/meibo/index.html をください Webブラウザ Webサーバ HTTP要求 HTTP応答 /jp/kan/meibo/index.html を送り返す www.kantei.go.jp

  4. 簡単に言えば・・・ • ファイルを作って • Webサーバに置くと • Webブラウザで見られるようになる

  5. Webページの構成 • HTMLという言語で文書構造を記述 • CSSで見た目を記述 HTML ① HTMLを読み込む 読み込むCSSの指定 CSS ③ HTMLとCSSを組み合わせて表示する ② HTML中で指定されたCSSを読み込む

  6. 文書構造とは・・・ これは中見出し • 森本の自己紹介 • 略歴 • 昭和52年生まれ。徳島県出身。・・・うんぬんかんぬん・・・。現在、放送大学で勤務しています。 • 所属学会 • 日本教育工学会 • 電子情報通信学会 • 教育システム情報学会 • 千葉市美浜区若葉2-11 • 放送大学ICT活用・遠隔教育センター これは大見出し これは中見出し これは1つの段落 これはリスト これは連絡先

  7. HTMLで書くと・・・ <h1>森本の自己紹介</h1> <h2>略歴</h2> <p>昭和52年生まれ。徳島県出身。・・・うんぬんかんぬん・・・。現在、放送大学で勤務しています。</p> <h2>所属学会</h2> <ul> <li>日本教育工学会</li> <li>電子情報通信学会</li> <li>教育システム情報学会</li> </ul> <address>千葉市美浜区若葉2-11 放送大学ICT活用・遠隔教育センター</address>

  8. 基本的な用語 • h1は大見出しを表す • 文章にタグ付け(マークアップ)することにより、HTML文書を記述 h1要素 • <h1>森本の自己紹介</h1> 開始タグ h1要素の内容 終了タグ

  9. CSSの例 h1 { background-color: lemonchiffon; color: green; } 大見出し(h1)の背景色(background-color)をレモンシフォン色(lemonchiffon)にして、文字色(color)を緑(green)にする

  10. ファイルの準備 • Moodleから“Webページ製作用ファイル”をダウンロードして、展開 • 含まれるファイル • index.html: トップページ (編集) • ouj.html: 放送大学の紹介 • rakuda.jpg: 写真 • style.css: スタイルシート (編集) 右クリックして “すべて展開”

  11. HTMLファイルの編集準備 • index.htmlを Webブラウザ と メモ帳 両方で開く • ダブルクリックすれば Webブラウザ で開く • 右クリック → プログラムから開く → Notepad で メモ帳 で開く

  12. HTMLの基本的な構造 ファイル自体の情報 全体がhtml要素 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html> head要素 body要素 Webブラウザに表示する内容

  13. タグ付けの方法 • 開始タグは <要素名> • 例: <h1> • 終了タグは </要素名> • 例: </h1> • 開始タグと終了タグで囲った部分が要素の内容となる • 例: <h1>森本の自己紹介</h1>

  14. 注意点 • タグは半角で入力する • <h1>・・・ ○ • ＜ｈ１＞ ・・・ × • 半角スペースは、いくつ連続して入力しても1つ分 • 「略 歴」と「略 歴」は同じ • 改行は無視される • index.htmlの中身とWebブラウザでの表示を見比べる

  15. body要素内のテキストにタグ付け <h1>森本の自己紹介</h1> <h2>略歴</h2> <p>昭和52年生まれ。徳島県出身。・・・うんぬんかんぬん・・・。現在、放送大学で勤務しています。</p> <h2>所属学会</h2> <ul> <li>日本教育工学会</li> <li>電子情報通信学会</li> <li>教育システム情報学会</li> </ul> <address>千葉市美浜区若葉2-11 放送大学ICT活用・遠隔教育センター</address>

  16. index.htmlで使っているタグ • h1～ h6 : 見出し • h1が第1レベル, h2が第2レベル, ... • p : 段落 • 1つの段落を <p> と </p> で囲う • ul, li : リスト • 全体を ul で囲い、各アイテムを liで囲う • ulの代わりに ol を使うと、番号付きリストになる • address : アドレス (連絡先) <ul> <li>アイテム1</li> <li>アイテム2</li> <li>アイテム3</li> </ul>

  17. head要素 • ファイル自体の情報を記述 • 最初から書いてあるのは • そのページで使う文字コードの指定 • 読み込むスタイルシートの指定 • title要素で、タイトルを指定 • Webブラウザのタイトルバーなどに表示 ① ② ③ • <head> • <meta http-equiv="content-type" • content="text/html; charset=utf-8">① • <link rel="stylesheet" href="style.css">② • <title>○○の自己紹介</title>③ • </head>

  18. 画像の表示 • imgタグを使用 • src属性で、画像ファイル名を指定 • 終了タグなし 属性 <imgsrc="画像ファイル名"> 属性名 属性値 <p><imgsrc="rakuda.jpg"></p>

  19. リンク • aタグを使用 • href属性でリンク先を指定 <a href="リンク先">アンカーテキスト</a> <a href="ouj.html">放送大学</a> <a href="http://www.chiba-u.jp/">千葉大学</a>

  20. CSS @charset "utf-8"; body { background-color: #ffffff; color: #000000; } 文字コード の指定 背景色を白、文字色を黒にする指定 セレクタ { 属性1: 値1; 属性2: 値2; }

  21. style.cssに追加 h1 { background-color: lemonchiffon; color: green; } h2 { border-left: 9px double crimson; }

  22. 色の指定 • background-color: 背景色; • color: 文字色; • これまで出てきた色 • lemonchiffon, green, crimson : カラーネーム • #ffffff, #000000 : カラーコード

  23. カラーコード • 光の三原色である赤(Red)・緑(Green)・青(Blue) の強さで指定 • 16進数で 00(一番弱い) ～ ff(一番強い) 最初に “#” 緑の強さ #xxxxxx 赤の強さ 青の強さ

  24. カラーコードとカラーネーム #000000 black #ffffff white #808080 gray #ff0000 red #00ff00 lime #0000ff blue #800000 maroon #008000 green #000080 navy #ffff00 yellow #ff00ff fuchsia #00ffff aqua #fffacd lemonchiffon #dc143c crimson #990000 ?

  25. border属性 (1) • 書式 ・・・ { border: 太さスタイル色; } • 太さ • ○○px(ピクセル) • スタイル • solid : 実線 • double : 2重線 • dashed : 破線 • dotted : 点線 • groove, ridge, inset,... • 色 • カラーコード (推奨) • カラーネーム

  26. border属性 (2) • border-top: 上だけ • border-right: 右だけ • border-bottom: 下だけ • border-left: 左だけ h2 { border-left: 9px double crimson; } h2の 左に 9ピクセルの 2重線を クリムゾン色で

  27. ファイルのアップロード • 通常は ftp や sftpなどにより、Webサーバへアップロード • ここの環境は特殊 (以下のスライドは削除)

More Related