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