Webサイト作成さくせいA（第だい05回かい）

授業じゅぎょうの準備じゅんび

Microsoft Teamsにログインし、授業じゅぎょうの会議かいぎに参加さんかしてください。

前回ぜんかいの復習ふくしゅう

Webサイト作成さくせいA（第だい04回かい）

前回ぜんかいの知識ちしき問題もんだい

• 拡張子かくちょうしとは何でなんですか
  • ファイルの種類しゅるいを表すあらわすために使われる文字もじのこと
  • 動画どうがや画像がぞうのこと
  • HTMLのこと
  • ファイルの名前なまえのこと
  • ファイルを保存ほぞんすること
• 「.txt」は何なんの拡張子かくちょうしですか
  • テキストファイル
  • 文書ぶんしょファイル
  • 画像がぞうファイル
  • アプリケーションファイル
  • 動画どうがファイル
• 「.pdf」は何なんの拡張子かくちょうしですか
  • 文書ぶんしょファイル
  • 音声おんせいファイル
  • 圧縮あっしゅくファイル
  • 画像がぞうファイル
  • 動画どうがファイル
• 「.jpg」「.png」「.gif」は何なんの拡張子かくちょうしですか
  • 画像がぞうファイル
  • 動画どうがファイル
  • アプリケーションファイル
  • テキストファイル
  • 圧縮あっしゅくファイル
• 「.mp4」は何なんの拡張子かくちょうしですか
  • 動画どうがファイル
  • 音声おんせいファイル
  • アプリケーションファイル
  • テキストファイル
  • 文書ぶんしょファイル
• 「.mp3」は何なんの拡張子かくちょうしですか
  • 音声おんせいファイル
  • 動画どうがファイル
  • テキストファイル
  • 画像がぞうファイル
  • 圧縮あっしゅくファイル
• 「.exe」は何なんの拡張子かくちょうしですか
  • アプリケーションファイル
  • 圧縮あっしゅくファイル
  • 画像がぞうファイル
  • テキストファイル
  • HTMLファイル
• 「.zip」は何なんの拡張子かくちょうしですか
  • 圧縮あっしゅくファイル
  • アプリケーションファイル
  • 音声おんせいファイル
  • 動画どうがファイル
  • 文書ぶんしょファイル
• テキストエディタとは何でなんですか
  • テキストファイルを編集へんしゅうするアプリケーション
  • ファイルの種類しゅるいを表すあらわすために使われる文字もじ
  • HTML
  • Visual Studio Code
  • 文書ぶんしょファイル
• 「John Smith」という名前なまえをカタカナで書くかくのに最ももっとも適切てきせつなのは
  • ジョン・スミス
  • ジョン　スミス
  • ジョンスミス
  • ジョン／スミス
  • ジョン＝スミス

テキストの配布はいふ

本日ほんじつのテキストを配りくばります。

• テキストを受け取ったら、学籍番号がくせきばんごうと名前なまえを書いてください 
• テキストは捨てすててはいけません。次回じかい以降いこうも持ってきてください

文書ぶんしょの構造こうぞう

HTMLでは、主におもに文書ぶんしょ（document）をマークアップします。

文書ぶんしょは、「見出しみだし」や「段落だんらく」など、いくつかのパーツ（要素ようそ）で構成こうせいされています。

タイトル（Title）	文書ぶんしょ全体ぜんたいの名前なまえ
見出しみだし（Heading）	すぐ後にあとに続くつづく「段落だんらく」や「リスト」、「表ひょう」の名前なまえ
段落だんらく（Paragraph）	いくつかの文ぶんをまとめたもの
リスト（List）	短いみじかい文ぶんを並べたならべたもの
表ひょう（Table)	短いみじかい文ぶんやデータを縦たて横よこにまとめたもの

この5つのパーツ（要素ようそ）はこれから何度なんども出てきますので、覚えるおぼえるようにしましょう。

文書ぶんしょのサンプル

文書ぶんしょ内でどのように使われるか

タイトルの詳細しょうさい

• 文書ぶんしょ全体ぜんたいの内容ないようを予測よそくさせるもの 
• 短いみじかい文ぶんです
• 文書ぶんしょの中でなかで一度いちどだけ使われます

見出しみだしの詳細しょうさい

• すぐ後にあとに続くつづく段落だんらくやリスト、表ひょうの内容ないようを予測よそくさせるもの 
• 短いみじかい文ぶんです
• 文書ぶんしょの中でなかで何度なんども使われます
• 見出しみだしが示すしめす範囲はんいによって、いくつか種類しゅるいがあります
  • 見出しみだし1〜見出しみだし6

段落だんらくの詳細しょうさい

• 文脈ぶんみゃく（context）が同じおなじいくつかの文ぶんをまとめたもの 
• 長いながい文ぶんです
• 文書ぶんしょの中でなかで何度なんども使われます

リストの詳細しょうさい（2種類しゅるい）

順番じゅんばんのないリスト

• 順番じゅんばんのない文ぶんを並べたならべたもの 
• 短いみじかい文ぶんです
• 文書ぶんしょの中でなかで何度なんども使われます

• リンゴ
• バナナ
• レモン

順番じゅんばんのあるリスト

• 順番じゅんばんのある文ぶんを並べたならべたもの 
• 短いみじかい文ぶんです
• 文書ぶんしょの中でなかで何度なんども使われます

1. たまごを割るわる
2. たまごを混ぜるまぜる
3. たまごを焼くやく

表ひょう

• データや文ぶんを縦たてと横よこに並べたならべたもの 
• 短いみじかい文ぶんや数字すうじです
• 「表ひょうの見出しみだし」と「表ひょうのデータ」があります

文書ぶんしょの構造こうぞうとマークアップ

CampusAppから、今日きょうの教材きょうざいをダウンロードしましょう。

「文書ぶんしょの構造こうぞう.zip」は圧縮あっしゅくファイルです。
デスクトップに解凍（圧縮あっしゅくしたファイルをもとに戻すもどすこと）しましょう。

文書ぶんしょをマークアップする

テキストファイル（.txt）に「文字もじ」や「記号きごう」を追加ついかして、コンピュータに文書ぶんしょの構造こうぞうを伝えます。 

文書ぶんしょの構造こうぞう：A

Visual Studio Codeで「text_structure_a.txt」を開きます。

• タイトルには　タイトル：
• 見出しみだしには　見出しみだし：
• 段落だんらくには　段落だんらく：

とつけましょう。

作業さぎょうが完了かんりょうしたら、ファイルを保存ほぞんして、閉じます。

文書ぶんしょの構造こうぞう：B

Visual Studio Codeで「text_structure_b.txt」を開きます。

• タイトルは　＜タイトル＞　と　＜／タイトル＞
• 見出しみだしは　＜見出しみだし＞　と　＜／見出しみだし＞
• 段落だんらくは　＜段落だんらく＞　と　＜／段落だんらく＞

というふうに範囲はんいを指定していしましょう。

作業さぎょうが完了かんりょうしたら、ファイルを保存ほぞんして、閉じます。

文書ぶんしょの構造こうぞう：C

Visual Studio Codeで「text_structure_c.txt」を開きます。

• タイトルは　<title>　と　</title>
• 見出しみだしは　<h1>　と　</h1>
• 段落だんらくには　<p>　と　</p>

というふうに範囲はんいを指定していしましょう。

---

作業さぎょうが完了かんりょうしたら、ファイルを保存ほぞんして、閉じます。
今日きょうの課題かだいとして、「text_structure_c.txt」を提出ていしゅつします。

課題かだいの提出ていしゅつ

課題かだいを提出ていしゅつしましょう。

CampusApp

• 「出欠しゅっけつ・課題かだい」から提出ていしゅつしましょう
• 課題かだいセクションにある今日きょうの授業じゅぎょうの欄らんから提出ていしゅつできます

知識ちしき問題もんだい

今日きょうの授業じゅぎょう内容ないようを知識ちしき問題もんだいで復習ふくしゅうしましょう。

CampusApp

• CampusAppの「CBT（知識ちしき問題もんだい）」から、知識ちしき問題もんだいにチャレンジしましょう
• 100点てんが取れるとれるまで、繰り返しくりかえし挑戦ちょうせんしましょう
• 期末きまつの定期ていき試験しけんは知識ちしき問題もんだいの中からなかから出題しゅつだいします

パソコンの再起動さいきどう／シャットダウン

授業じゅぎょうの終わりおわりに必ずかならずパソコンを再起動さいきどう（次つぎに他のほかの授業じゅぎょうがある場合ばあい）、またはシャットダウン（次つぎに他のほかの授業じゅぎょうがない場合ばあい）してください。