数のディジタル化

Size: px

Start display at page:

Download "数のディジタル化"

ありかつちゅうか
5 years ago
Views:

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

2 第 3 章 4 節コミュニケーションとネットワークの活用コミュニケーションツールの活用本日の内容第 3 章コミュニケーションとネットワークを探索する 4 節コミュニケーションとネットワークの活用 3. コミュニケーションツールの活用

3 第 3 章 4 節コミュニケーションとネットワークの活用 P72 1Web ページの作成 3 コミュニケーションツールの活用 1Web ページの作成

4 第 3 章 4 節コミュニケーションとネットワークの活用 P72 1Web ページの作成コミュニケーションツールの活用 Web ページの作成 1. Webページの構成 2. Webページの作成 3. Webページのテスト 4. Webページの転送公開 5. Webページの評価 6. Webページの保守

5 第 3 章 4 節コミュニケーションとネットワークの活用 P72 1Web ページの作成コミュニケーションツールの活用 Web ページの作成 Web ページの作り方がわからなくても Twitter/Facebook/ ブログ /Wiki 知っていた方がうまく作れる

6 第 3 章 4 節コミュニケーションとネットワークの活用 P72 1Web ページの作成コミュニケーションツールの活用 1.Web ページの構成内容構成デザインを明確に構成図を用意リンク構造現在はどこからでも見られる形が主流

7 第 3 章 4 節コミュニケーションとネットワークの活用 P72 1Web ページの作成コミュニケーションツールの活用 2.Web ページの作成 HTML で作成図写真動画音声の準備

8 第 3 章 4 節コミュニケーションとネットワークの活用 P72 1Web ページの作成コミュニケーションツールの活用 3.Web ページのテスト内容の点検デザインのチェックリンクの確認

9 第 3 章 4 節コミュニケーションとネットワークの活用 P72 1Web ページの作成コミュニケーションツールの活用 4.Web ページの転送公開 Web サーバに転送

10 第 3 章 4 節コミュニケーションとネットワークの活用 P72 1Web ページの作成コミュニケーションツールの活用 5.Web ページの評価使いやすさ使いにくさ改善点

11 第 3 章 4 節コミュニケーションとネットワークの活用 P72 1Web ページの作成コミュニケーションツールの活用 6.Web ページの保守必要に応じて内容の追加削除

12 Web ページのしくみしくみを理解しよう

13 Web ページを作るには 2 サーバに保存インターネット作るソフト 1 テキストエディタでページを作成 3 見るソフトブラウザで表示

14 facebook や mixi などはインターネット 1 サーバが書き込めるページを表示 3 サーバに保存 2 ブラウザで書き込む 4 ブラウザで表示

15 Web ページの中身 Google は文字 Yahoo! は文字 HTML で表示する内容を指定している立川高校でも文字

16 P146 主な HTML タグスタイルシート HTML ハイパーテキストマークアップランゲージ HyperText Markup Language 文章に意味をつける文書の構造化 HTML タグを使ってマークを付けていく始まりが <abcd> なら終わりは </abcd> になる終了タグには / が付く ( スラッシュ ) 始まりが <div> なら終わりは </div> になる

17 見えかたと構造 Web ページ Web ページはインターネットを使って不特定多数の人に情報を伝達する手段の一つであるサイトマップ複数の Web ページから構成される Web サイトの構造を表した図をサイトマップという <h2>web ページ </h2> <p>web ページはインターネットを使って不特定多数の人に情報を伝達する手段の一つである </p> <h2> サイトマップ </h2> <p> 複数の Web ページから構成されている Web サイトの構造を表した図をサイトマップという </p> 見るソフト作るソフト

18 Web ページの制作手順

19 第 3 章 4 節コミュニケーションとネットワークの活用 P72 1Web ページの作成コミュニケーションツールの活用テキストエディタ TeraPad [ スタート ] [ すべてのプログラム ] [TeraPad] [ TeraPad] とクリック [ 表示 ] [ 編集モード ] [HTML] とクリック

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 保存と更新作るソフト Ctrl + TeraPad で [ 上書き保存 ] S 見るソフト Internet Explorerで更新 ] F5 [ 最新の状態に確認ができる

25 P146 主な HTML タグスタイルシート HTML タグタグの使い方と機能を理解しよう

26 P146 主な HTML タグスタイルシート見出しのタグ - h1 TeraPad <h1>hello!</h1> と書きなおす大文字はを押しながら < >! も Shift Shift を押しながら Internet Explorer で確認

27 P146 主な HTML タグスタイルシート見出しのタグ h1 h は Heading( 見出し ) の意味 h1 から h6 までの種類がある <h1> で始まれば </h1> で終わる見出しとして使う

28 P146 主な HTML タグスタイルシート段落のタグ - p TeraPad 次の行に <p> こんにちはいい天気ですね </p> と入力先に <p></p> だけ打つ Internet Explorer で確認

29 コピー & ペースト ( 貼付 ) 範囲選択 Shift + コピー Ctrl + C 貼り付け Ctrl + V すべて選択 Ctrl + A

30 P146 主な HTML タグスタイルシート段落のタグ - p p は Paragraph( 段落 ) の略画面上は何の変化もなく表示される今の段階では... <p> で始まり </p> で終わる段落 ( 普通の文 ) を入力するときに使う

31 P146 主な HTML タグスタイルシート箇条書きのタグ ul と li TeraPad 次の行に <ul> <li>1 番目 </li> <li>2 番目 </li> </ul> と入力 UL( ユーエル ) と LI( エルアイ ) Internet Explorer で確認

32 P146 主な HTML タグスタイルシート箇条書きのタグ ul と li ul は Unordered List( 順序の無いリスト ) の略箇条書きをする宣言 li は List Item の略箇条書きの項目を書く <ul> <li> 項目 1</li> <li> 項目 2</li> <li> 項目 3</li> </ul> 箇条書きに使う

33 P146 主な HTML タグスタイルシートページの構造タグ head と body TeraPad 最初に <html> <head> </head> <body> を追加最後に </body> </html> Internet Explorer で確認

34 ページの構造タグ head と body head は header( 見出し ) の略 body は本文 html はこれから html を書きます宣言画面上は何の変化もなく表示される今の段階では... <html> <head> html 文書を作る時に必要 </head> <body> P146 主な HTML タグスタイルシート </body> </html>

35 P146 主な HTML タグスタイルシートタイトルタグ - title TeraPad <head> と </head> の間に <title> タイトル </title> と追加 Internet Explorer で確認どこが変わった?

36 P146 主な HTML タグスタイルシートタイトルタグ - title title はタイトルページの情報として重要

37 タグのまとめ見出し <h1>~</h1> <h1> から <h6> まで段落 <p>~</p> 箇条書き <ul> <li></li> <li></li> </ul> <html> <head> <title> ページのタイトル </title> </head> <body> <h1> ページの見出し </h1> <p> ページの内容 </p> </body> </html>

38 第 3 章 4 節コミュニケーションとネットワークの活用 P72 1Web ページの作成コミュニケーションツールの活用まとめ Web ページの作成構成作成テスト転送公開評価保守 Web ページを制作テキストエディタで作成ブラウザで表示 HTML タグで意味をつける見出し段落箇条書き構造

prg.indb

prg.indb II HTML Web HTML HTML 章 Webコンテンツは主に HTMLで書かれます部体験編 Ⅱ HTMLってなに Web コンテンツを制作するときには HTML と呼ばれる形式でドキュメント文書を記述するのが一般的です HTML は Hyper Text Markup Language の略称でありテキスト文書を記述するための言語の一種です HTMLドキュメントは