数のディジタル化

(1)

４節

コミュニケーションと

ネットワークの活用

３コミュニケーションツールの活用

第３章コミュニケーションとネットワークを探索する

４節コミュニケーションとネットワークの活用

(2)

本日の内容

• 第３章

コミュニケーションとネットワークを探索する

• ４節コミュニケーションとネットワークの活用

3. コミュニケーションツールの活用

第３章 4節コミュニケーションとネットワークの活用コミュニケーションツールの活用

(3)

①Webページの作成

第３章 4節コミュニケーションとネットワークの活用３コミュニケーションツールの活用

(4)

Webページの作成

1. Webページの構成

2. Webページの作成

3. Webページのテスト

4. Webページの転送・公開

5. Webページの評価

6. Webページの保守

第３章 4節コミュニケーションとネットワークの活用コミュニケーションツールの活用

P72 ①Webページの作成

(5)

Webページの作成

• Webページの作り方がわからなくても

• Twitter/Facebook/ブログ/Wiki

• 知っていた方がうまく作れる

第３章 4節コミュニケーションとネットワークの活用コミュニケーションツールの活用

P72 ①Webページの作成

(6)

1.Webページの構成

• 内容・構成・デザインを明確に

• 構成図を用意

• リンク構造

• 現在はどこからでも見られる形が主流

第３章 4節コミュニケーションとネットワークの活用コミュニケーションツールの活用

P72 ①Webページの作成

(7)

2.Webページの作成

• HTMLで作成

• 図・写真・動画・音声の準備

第３章 4節コミュニケーションとネットワークの活用コミュニケーションツールの活用

P72 ①Webページの作成

(8)

3.Webページのテスト

• 内容の点検

• デザインのチェック

• リンクの確認

第３章 4節コミュニケーションとネットワークの活用コミュニケーションツールの活用

P72 ①Webページの作成

(9)

4.Webページの転送・公開

• Webサーバに転送

第３章 4節コミュニケーションとネットワークの活用コミュニケーションツールの活用

(10)

5.Webページの評価

• 使いやすさ

• 使いにくさ

• 改善点

第３章 4節コミュニケーションとネットワークの活用コミュニケーションツールの活用

P72 ①Webページの作成

(11)

6.Webページの保守

• 必要に応じて内容の追加・削除

第３章 4節コミュニケーションとネットワークの活用コミュニケーションツールの活用

(12)

Webページのしくみ

(13)

Webページを作るには

テキストエディタで

ページを作成

１ サーバに保存

２ 作るソフト

見るソフト

インターネット

ブラウザで表示

３

(14)

facebookやmixiなどは

ブラウザで

書き込む

２ サーバに保存

３ インターネット

ブラウザで表示

４

１ サーバが書き込め

るページを表示

(15)

Webページの中身

• Google

は

55940文字

• Yahoo!

は

215563文字

• HTMLで表示する内容

を指定している

立川高校

_{でも16598文字}

(16)

始まりが <div> なら

終わりは </div> になる

HTML

• HyperText Markup Language

• 文章に意味をつける→文書の構造化

• HTMLタグを使ってマークを付けていく

• 始まりが <abcd> なら

• 終わりは </abcd> になる

P146 主なHTMLタグ・スタイルシート

終了タグには

/ が付く

（スラッシュ）

ハイパーテキストマークアップランゲージ

(17)

見えかたと構造

Webページ

Webページはインター

ネットを使って不特定多

数の人に情報を伝達する

手段の一つである。

サイトマップ

複数のWebページから構

成されるWebサイトの構

造を表した図をサイトマッ

プという。

<h2>Webページ</h2>

<p>Webページはインター

ネットを使って不特定多数の

人に情報を伝達する手段の

一つである。</p>

<h2>サイトマップ</h2>

<p>複数のWebページから構

成されているWebサイトの構

造を表した図をサイトマップ

という。</p>

作るソフト

見るソフト

(18)

(19)

テキストエディタ TeraPad

• [スタート]→[すべてのプログラム]

→[TeraPad]→[ TeraPad]とクリック

• [表示]→[編集モード]

→[HTML]とクリック

第３章 4節コミュニケーションとネットワークの活用コミュニケーションツールの活用

P72 ①Webページの作成

(20)

試しに作ってみよう

• Hello! と入力

• [ファイル]→[名前を付けて保存]

• 場所:デスクトップファイル名：test.html

• TeraPad は閉じない

• 日本語入力はかならずOFFで

• H や ! はを押しながら

Shift

(21)

表示を確認

• デスクトップのtest.htmlを

ダブルクリック

• Hello!が表示される

• TeraPadは作るソフト

Internet Explorerは見るソフト

(22)

確認しながら作ろう

• TeraPadとInternetExploreを並べる

• 確かめながら作ることができる

(23)

確認の仕方

• TeraPad

• Hello! Hello! と書き足す

• Internet Explorer

• 変化なし

• 確認するにはどうするの?

(24)

保存と更新

• TeraPadで [上書き保存]

• Internet Explorerで [最新の状態に

更新]

• 確認ができる

Ctrl

＋

S

F5

作るソフト

見るソフト

(25)

HTMLタグ

タグの使い方と機能を理解しよう

(26)

見出しのタグ - h1

• TeraPad

<h1>Hello!</h1>

と書きなおす

• 大文字は

を押しながら

• < > ! もを押しながら

• Internet Explorerで確認

P146 主なHTMLタグ・スタイルシート

Shift

(27)

見出しのタグ – ｈ1

• hはHeading（見出し）の意味

• h1からh6までの種類がある

• <h1>で始まれば

</h1>で終わる

• 見出しとして使う

P146 主なHTMLタグ・スタイルシート

(28)

段落のタグ - p

• TeraPad

• 次の行に

<p>こんにちは。いい天気ですね。</p>

• と入力

• Internet Explorerで確認

P146 主なHTMLタグ・スタイルシート

先に

<p></p>

だけ打つ

(29)

コピー&ペースト(貼付)

• 範囲選択

• コピー

• 貼り付け

• すべて選択

Ctrl

＋

C

Ctrl

＋

V

Shift

＋

→

← ↑ ↓

Ctrl

＋

A

(30)

段落のタグ - p

• pはParagraph（段落）の略

• 画面上は何の変化もなく表示される

• 今の段階では．．．

• <p>で始まり

</p>で終わる

• 段落（普通の文）を

入力するときに使う

P146 主なHTMLタグ・スタイルシート

(31)

箇条書きのタグ – ul と li

• TeraPad

• 次の行に

<ul>

<li>１番目</li>

<li>２番目</li>

</ul>

• と入力

• Internet Explorerで確認

P146 主なHTMLタグ・スタイルシート

UL(ユーエル)と

LI(エルアイ)

(32)

箇条書きのタグ – ul と li

• ulはUnordered List（順序の無いリスト）

の略

• 箇条書きをする宣言

• li は List Item の略

• 箇条書きの項目を書く

• <ul>

<li>項目１</li>

<li>項目２</li>

<li>項目３</li>

</ul>

• 箇条書きに使う

P146 主なHTMLタグ・スタイルシート

(33)

最後に

</body>

</html>

ページの構造タグ – headとbody

• TeraPad

• 最初に

<html>

<head>

</head>

<body>

• を追加

• Internet Explorerで確認

P146 主なHTMLタグ・スタイルシート

(34)

ページの構造タグ – headとbody

• head は header(見出し)の略

• body は本文

• html は「これからhtmlを書きます」宣言

• 画面上は何の変化もなく表示される

• 今の段階では．．．

• html文書を作る時に必要

P146 主なHTMLタグ・スタイルシート

<html>

</html>

<head>

</head>

<body>

</body>

(35)

タイトルタグ - title

• TeraPad

<head>と</head>の間に

<title>タイトル</title>

と追加

• Internet Explorerで確認

P146 主なHTMLタグ・スタイルシート

どこが

変わった?

(36)

タイトルタグ - title

• title はタイトル

• ページの情報として重要

(37)

タグのまとめ

• 見出し

• <h1>～</h1>

• <h1>から<h6>まで

• 段落

• <p>～</p>

• 箇条書き

• <ul>

<li></li>

</ul>

<html>

<head>

<title>

ページのタイトル

</title>

</head>

<body>

<h1>ページの見出し</h1>

<p>ページの内容</p>

</body>

</html>

(38)

まとめ

• Webページの作成

• 構成→作成→テスト→転送・公開

→評価→保守

• Webページを制作

• テキストエディタで作成→ブラウザで表示

• HTML

• タグで意味をつける

• 見出し・段落・箇条書き・構造

第３章 4節コミュニケーションとネットワークの活用コミュニケーションツールの活用

P72 ①Webページの作成

数のディジタル化

４節

コミュニケーションと

ネットワークの活用

３ コミュニケーションツールの活用

第３章コミュニケーションとネットワークを探索する

４節 コミュニケーションとネットワークの活用

本日の内容

• 第３章

コミュニケーションとネットワークを探索する

• ４節 コミュニケーションとネットワークの活用

3. コミュニケーションツールの活用

第３章 4節 コミュニケーションとネットワークの活用 コミュニケーションツールの活用

①Webページの作成

第３章 4節 コミュニケーションとネットワークの活用 ３ コミュニケーションツールの活用

Webページの作成

1. Webページの構成

2. Webページの作成

3. Webページのテスト

4. Webページの転送・公開

5. Webページの評価

6. Webページの保守

第３章 4節 コミュニケーションとネットワークの活用 コミュニケーションツールの活用

P72 ①Webページの作成

Webページの作成

• Webページの作り方がわからなくても

• Twitter/Facebook/ブログ/Wiki

• 知っていた方がうまく作れる

第３章 4節 コミュニケーションとネットワークの活用 コミュニケーションツールの活用

P72 ①Webページの作成

1.Webページの構成

• 内容・構成・デザインを明確に

• 構成図を用意

• リンク構造

• 現在はどこからでも見られる形が主流

第３章 4節 コミュニケーションとネットワークの活用 コミュニケーションツールの活用

P72 ①Webページの作成

2.Webページの作成

• HTMLで作成

• 図・写真・動画・音声の準備

第３章 4節 コミュニケーションとネットワークの活用 コミュニケーションツールの活用

P72 ①Webページの作成

3.Webページのテスト

• 内容の点検

• デザインのチェック

• リンクの確認

第３章 4節 コミュニケーションとネットワークの活用 コミュニケーションツールの活用

P72 ①Webページの作成

4.Webページの転送・公開

• Webサーバに転送

第３章 4節 コミュニケーションとネットワークの活用 コミュニケーションツールの活用

5.Webページの評価

• 使いやすさ

• 使いにくさ

• 改善点

第３章 4節 コミュニケーションとネットワークの活用 コミュニケーションツールの活用

P72 ①Webページの作成

6.Webページの保守

• 必要に応じて内容の追加・削除

第３章 4節 コミュニケーションとネットワークの活用 コミュニケーションツールの活用

Webページのしくみ

Webページを作るには

テキストエディタで

ページを作成

１

サーバに保存

２

作るソフト

見るソフト

インターネット

ブラウザで表示

３

facebookやmixiなどは

ブラウザで

書き込む

２

サーバに保存

３

インターネット

ブラウザで表示

３コミュニケーションツールの活用

４節コミュニケーションとネットワークの活用

• ４節コミュニケーションとネットワークの活用

第３章 4節コミュニケーションとネットワークの活用コミュニケーションツールの活用

第３章 4節コミュニケーションとネットワークの活用３コミュニケーションツールの活用

第３章 4節コミュニケーションとネットワークの活用コミュニケーションツールの活用

第３章 4節コミュニケーションとネットワークの活用コミュニケーションツールの活用

第３章 4節コミュニケーションとネットワークの活用コミュニケーションツールの活用

第３章 4節コミュニケーションとネットワークの活用コミュニケーションツールの活用

第３章 4節コミュニケーションとネットワークの活用コミュニケーションツールの活用

第３章 4節コミュニケーションとネットワークの活用コミュニケーションツールの活用

第３章 4節コミュニケーションとネットワークの活用コミュニケーションツールの活用

第３章 4節コミュニケーションとネットワークの活用コミュニケーションツールの活用

_{でも16598文字}

ハイパーテキストマークアップランゲージ

第３章 4節コミュニケーションとネットワークの活用コミュニケーションツールの活用

• 場所:デスクトップファイル名：test.html

• H や ! はを押しながら