Post on 08-Jan-2020
©2014 Yoshihiro Sato All rights reserved
4節 コミュニケーションと ネットワークの活用
3 コミュニケーションツールの活用
第3章コミュニケーションとネットワークを探索する 4節 コミュニケーションとネットワークの活用
©2014 Yoshihiro Sato All rights reserved
本日の内容
•第3章 コミュニケーションとネットワークを探索する • 4節 コミュニケーションとネットワークの活用 3. コミュニケーションツールの活用
第3章 4節 コミュニケーションとネットワークの活用 コミュニケーションツールの活用
©2014 Yoshihiro Sato All rights reserved
①Webページの作成
第3章 4節 コミュニケーションとネットワークの活用 3 コミュニケーションツールの活用
P72 ①Webページの作成
©2014 Yoshihiro Sato All rights reserved
Webページの作成
1. Webページの構成
2. Webページの作成
3. Webページのテスト
4. Webページの転送・公開
5. Webページの評価
6. Webページの保守
第3章 4節 コミュニケーションとネットワークの活用 コミュニケーションツールの活用
P72 ①Webページの作成
©2014 Yoshihiro Sato All rights reserved
Webページの作成
•Webページの作り方がわからなくても • Twitter/Facebook/ブログ/Wiki
•知っていた方がうまく作れる
第3章 4節 コミュニケーションとネットワークの活用 コミュニケーションツールの活用
P72 ①Webページの作成
©2014 Yoshihiro Sato All rights reserved
1.Webページの構成
•内容・構成・デザインを明確に
•構成図を用意
•リンク構造 •現在はどこからでも見られる形が主流
第3章 4節 コミュニケーションとネットワークの活用 コミュニケーションツールの活用
P72 ①Webページの作成
©2014 Yoshihiro Sato All rights reserved
2.Webページの作成
•HTMLで作成
•図・写真・動画・音声の準備
第3章 4節 コミュニケーションとネットワークの活用 コミュニケーションツールの活用
P72 ①Webページの作成
©2014 Yoshihiro Sato All rights reserved
3.Webページのテスト
•内容の点検
•デザインのチェック
•リンクの確認
第3章 4節 コミュニケーションとネットワークの活用 コミュニケーションツールの活用
P72 ①Webページの作成
©2014 Yoshihiro Sato All rights reserved
4.Webページの転送・公開
•Webサーバに転送
第3章 4節 コミュニケーションとネットワークの活用 コミュニケーションツールの活用
P72 ①Webページの作成
©2014 Yoshihiro Sato All rights reserved
5.Webページの評価
•使いやすさ
•使いにくさ
•改善点
第3章 4節 コミュニケーションとネットワークの活用 コミュニケーションツールの活用
P72 ①Webページの作成
©2014 Yoshihiro Sato All rights reserved
6.Webページの保守
•必要に応じて内容の追加・削除
第3章 4節 コミュニケーションとネットワークの活用 コミュニケーションツールの活用
P72 ①Webページの作成
©2014 Yoshihiro Sato All rights reserved
Webページのしくみ
しくみを理解しよう
©2014 Yoshihiro Sato All rights reserved
Webページを作るには
テキストエディタで ページを作成
1
サーバに保存 2
作るソフト 見るソフト
インターネット
ブラウザで表示 3
©2014 Yoshihiro Sato All rights reserved
facebookやmixiなどは
ブラウザで 書き込む
2
サーバに保存 3
インターネット
ブラウザで表示 4
1 サーバが書き込めるページを表示
©2014 Yoshihiro Sato All rights reserved
Webページの中身
• Googleは 55940文字
• Yahoo!は 215563文字
• HTMLで表示する内容を指定している
立川高校でも16598文字
©2014 Yoshihiro Sato All rights reserved
始まりが <div> なら 終わりは </div> になる
HTML
•HyperText Markup Language
•文章に意味をつける→文書の構造化
•HTMLタグを使ってマークを付けていく •始まりが <abcd> なら •終わりは </abcd> になる
P146 主なHTMLタグ・スタイルシート
終了タグには / が付く
(スラッシュ)
ハイパー テキスト マークアップ ランゲージ
©2014 Yoshihiro Sato All rights reserved
見えかたと構造
Webページ Webページはインターネットを使って不特定多数の人に情報を伝達する手段の一つである。
サイトマップ 複数のWebページから構成されるWebサイトの構造を表した図をサイトマップという。
<h2>Webページ</h2>
<p>Webページはインターネットを使って不特定多数の人に情報を伝達する手段の一つである。</p>
<h2>サイトマップ</h2>
<p>複数のWebページから構成されているWebサイトの構造を表した図をサイトマップという。</p>
作るソフト 見るソフト
©2014 Yoshihiro Sato All rights reserved
Webページの制作手順
©2014 Yoshihiro Sato All rights reserved
テキストエディタ TeraPad
• [スタート]→[すべてのプログラム] →[TeraPad]→[ TeraPad]とクリック
• [表示]→[編集モード] →[HTML]とクリック
第3章 4節 コミュニケーションとネットワークの活用 コミュニケーションツールの活用
P72 ①Webページの作成
©2014 Yoshihiro Sato All rights reserved
試しに作ってみよう
•Hello! と入力
• [ファイル]→[名前を付けて保存] •場所:デスクトップ ファイル名:test.html
•TeraPad は閉じない
• 日本語入力はかならずOFFで
• H や ! は を押しながら Shift
©2014 Yoshihiro Sato All rights reserved
表示を確認
•デスクトップのtest.htmlを ダブルクリック • Hello!が表示される
•TeraPadは作るソフト Internet Explorerは見るソフト
©2014 Yoshihiro Sato All rights reserved
確認しながら作ろう
•TeraPadとInternetExploreを並べる
•確かめながら作ることができる
©2014 Yoshihiro Sato All rights reserved
確認の仕方
•TeraPad • Hello! Hello! と書き足す
• Internet Explorer •変化なし
•確認するにはどうするの?
©2014 Yoshihiro Sato All rights reserved
保存と更新
•TeraPadで [上書き保存]
• Internet Explorerで [最新の状態に更新]
•確認ができる
Ctrl S +
F5
作るソフト
見るソフト
©2014 Yoshihiro Sato All rights reserved
HTMLタグ
タグの使い方と機能を理解しよう
P146 主なHTMLタグ・スタイルシート
©2014 Yoshihiro Sato All rights reserved
見出しのタグ - h1
•TeraPad <h1>Hello!</h1> と書きなおす
•大文字は を押しながら
• < > ! も を押しながら
• Internet Explorerで確認
P146 主なHTMLタグ・スタイルシート
Shift
Shift
©2014 Yoshihiro Sato All rights reserved
見出しのタグ – h1
•hはHeading(見出し)の意味 • h1からh6までの種類がある • <h1>で始まれば </h1>で終わる
•見出しとして使う
P146 主なHTMLタグ・スタイルシート
©2014 Yoshihiro Sato All rights reserved
段落のタグ - p
•TeraPad •次の行に <p>こんにちは。いい天気ですね。</p> •と入力
• Internet Explorerで確認
P146 主なHTMLタグ・スタイルシート
先に<p></p> だけ打つ
©2014 Yoshihiro Sato All rights reserved
コピー&ペースト(貼付)
•範囲選択
•コピー
•貼り付け
•すべて選択
Ctrl C +
Ctrl V +
Shift → + ← ↑ ↓
Ctrl A +
©2014 Yoshihiro Sato All rights reserved
段落のタグ - p
• pはParagraph(段落)の略 •画面上は何の変化もなく表示される
• 今の段階では...
• <p>で始まり </p>で終わる
•段落(普通の文)を 入力するときに使う
P146 主なHTMLタグ・スタイルシート
©2014 Yoshihiro Sato All rights reserved
箇条書きのタグ – ul と li
•TeraPad •次の行に <ul> <li>1番目</li> <li>2番目</li> </ul> •と入力
• Internet Explorerで確認
P146 主なHTMLタグ・スタイルシート
UL(ユーエル)と LI(エルアイ)
©2014 Yoshihiro Sato All rights reserved
箇条書きのタグ – ul と li
•ulはUnordered List(順序の無いリスト)の略 •箇条書きをする宣言
• li は List Item の略 •箇条書きの項目を書く • <ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul>
•箇条書きに使う P146 主なHTMLタグ・スタイルシート
©2014 Yoshihiro Sato All rights reserved
最後に </body> </html>
ページの構造タグ – headとbody
•TeraPad •最初に <html> <head> </head> <body> •を追加
• Internet Explorerで確認
P146 主なHTMLタグ・スタイルシート
©2014 Yoshihiro Sato All rights reserved
ページの構造タグ – headとbody
•head は header(見出し)の略
• body は 本文
•html は「これからhtmlを書きます」宣言 •画面上は何の変化もなく表示される
• 今の段階では...
•html文書を作る時に必要
P146 主なHTMLタグ・スタイルシート
<html>
</html>
<head>
</head>
<body>
</body>
©2014 Yoshihiro Sato All rights reserved
タイトルタグ - title
•TeraPad <head>と</head>の間に <title>タイトル</title> と追加
• Internet Explorerで確認
P146 主なHTMLタグ・スタイルシート
どこが 変わった?
©2014 Yoshihiro Sato All rights reserved
タイトルタグ - title
• title は タイトル
•ページの情報として重要
P146 主なHTMLタグ・スタイルシート
©2014 Yoshihiro Sato All rights reserved
タグのまとめ
• 見出し • <h1>~</h1>
• <h1>から<h6>まで
• 段落 • <p>~</p>
• 箇条書き • <ul>
<li></li> <li></li> </ul>
<html>
<head>
<title>
ページのタイトル
</title>
</head>
<body>
<h1>ページの見出し</h1>
<p>ページの内容</p>
</body>
</html>
©2014 Yoshihiro Sato All rights reserved
まとめ
•Webページの作成 •構成→作成→テスト→転送・公開 →評価→保守
•Webページを制作 •テキストエディタで作成→ブラウザで表示
•HTML •タグで意味をつける •見出し・段落・箇条書き・構造
第3章 4節 コミュニケーションとネットワークの活用 コミュニケーションツールの活用
P72 ①Webページの作成