4節コミュニケーションとネットワークの活用hs-joho.net/14c/2/205/14c2051.pdf ·...

©2014 Yoshihiro Sato All rights reserved

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

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

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


本日の内容

•第３章コミュニケーションとネットワークを探索する • ４節コミュニケーションとネットワークの活用 3. コミュニケーションツールの活用

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


①Webページの作成

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

P72 ①Webページの作成


Webページの作成

1. Webページの構成

2. Webページの作成

3. Webページのテスト

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

5. Webページの評価

6. Webページの保守




Webページの作成

•Webページの作り方がわからなくても • Twitter/Facebook/ブログ/Wiki

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




1.Webページの構成

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

•構成図を用意

•リンク構造 •現在はどこからでも見られる形が主流




2.Webページの作成

•HTMLで作成

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




3.Webページのテスト

•内容の点検

•デザインのチェック

•リンクの確認




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

•Webサーバに転送




5.Webページの評価

•使いやすさ

•使いにくさ

•改善点




6.Webページの保守

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




Webページのしくみ

しくみを理解しよう


Webページを作るには

テキストエディタでページを作成

１

サーバに保存２

作るソフト見るソフト

インターネット

ブラウザで表示３


facebookやmixiなどは

ブラウザで書き込む

２

サーバに保存３

インターネット

ブラウザで表示４

１サーバが書き込めるページを表示


Webページの中身

• Googleは 55940文字

• Yahoo!は 215563文字

• HTMLで表示する内容を指定している

立川高校でも16598文字

http://www.google.co.jp/

http://www.yahoo.co.jp/

http://www.tachikawa-h.metro.tokyo.jp/mysite1/index.html


始まりが <div> なら終わりは </div> になる

HTML

•HyperText Markup Language

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

•HTMLタグを使ってマークを付けていく •始まりが <abcd> なら •終わりは </abcd> になる

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

終了タグには / が付く

（スラッシュ）

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


見えかたと構造

Webページ Webページはインターネットを使って不特定多数の人に情報を伝達する手段の一つである。

サイトマップ複数のWebページから構成されるWebサイトの構造を表した図をサイトマップという。

<h2>Webページ</h2>

<p>Webページはインターネットを使って不特定多数の人に情報を伝達する手段の一つである。</p>

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

<p>複数のWebページから構成されているWebサイトの構造を表した図をサイトマップという。</p>

作るソフト見るソフト


Webページの制作手順


テキストエディタ TeraPad

• [スタート]→[すべてのプログラム] →[TeraPad]→[ TeraPad]とクリック

• [表示]→[編集モード] →[HTML]とクリック




試しに作ってみよう

•Hello! と入力

• [ファイル]→[名前を付けて保存] •場所:デスクトップファイル名：test.html

•TeraPad は閉じない

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

• H や ! はを押しながら Shift


表示を確認

•デスクトップのtest.htmlをダブルクリック • Hello!が表示される

•TeraPadは作るソフト Internet Explorerは見るソフト


確認しながら作ろう

•TeraPadとInternetExploreを並べる

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


確認の仕方

•TeraPad • Hello! Hello! と書き足す

• Internet Explorer •変化なし

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


保存と更新

•TeraPadで [上書き保存]

• Internet Explorerで [最新の状態に更新]

•確認ができる

Ctrl S ＋

F5

作るソフト

見るソフト


HTMLタグ

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



見出しのタグ - h1

•TeraPad <h1>Hello!</h1> と書きなおす

•大文字はを押しながら

• < > ! もを押しながら

• Internet Explorerで確認


Shift

Shift


見出しのタグ – ｈ1

•hはHeading（見出し）の意味 • h1からh6までの種類がある • <h1>で始まれば </h1>で終わる

•見出しとして使う



段落のタグ - p

•TeraPad •次の行に <p>こんにちは。いい天気ですね。</p> •と入力



先に<p></p> だけ打つ


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

•範囲選択

•コピー

•貼り付け

•すべて選択

Ctrl C ＋

Ctrl V ＋

Shift → ＋ ← ↑ ↓

Ctrl A ＋


段落のタグ - p

• pはParagraph（段落）の略 •画面上は何の変化もなく表示される

• 今の段階では．．．

• <p>で始まり </p>で終わる

•段落（普通の文）を入力するときに使う



箇条書きのタグ – ul と li

•TeraPad •次の行に <ul> <li>１番目</li> <li>２番目</li> </ul> •と入力



UL(ユーエル)と LI(エルアイ)


箇条書きのタグ – ul と li

•ulはUnordered List（順序の無いリスト）の略 •箇条書きをする宣言

• li は List Item の略 •箇条書きの項目を書く • <ul> <li>項目１</li> <li>項目２</li> <li>項目３</li> </ul>

•箇条書きに使う P146 主なHTMLタグ・スタイルシート


最後に </body> </html>

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

•TeraPad •最初に <html> <head> </head> <body> •を追加




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

•head は header(見出し)の略

• body は本文

•html は「これからhtmlを書きます」宣言 •画面上は何の変化もなく表示される

• 今の段階では．．．

•html文書を作る時に必要


<html>

</html>

<head>

</head>

<body>

</body>


タイトルタグ - title

•TeraPad <head>と</head>の間に <title>タイトル</title> と追加



どこが変わった?


タイトルタグ - title

• title はタイトル

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



タグのまとめ

• 見出し • <h1>～</h1>

• <h1>から<h6>まで

• 段落 • <p>～</p>

• 箇条書き • <ul>

<li></li> <li></li> </ul>

<html>

<head>

<title>

ページのタイトル

</title>

</head>

<body>

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

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

</body>

</html>


まとめ

•Webページの作成 •構成→作成→テスト→転送・公開 →評価→保守

•Webページを制作 •テキストエディタで作成→ブラウザで表示

•HTML •タグで意味をつける •見出し・段落・箇条書き・構造



4節 コミュニケーションと ネットワークの活用hs-joho.net/14c/2/205/14c2051.pdf ·...

Documents

4節コミュニケーションとネットワークの活用hs-joho.net/14c/2/205/14c2051.pdf ·...