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」という名前なまえをカタカナで書くかくのに最ももっとも適切てきせつなのは
    • ジョン・スミス
    • ジョン スミス
    • ジョンスミス
    • ジョン/スミス
    • ジョン=スミス

テキストの配布はいふ

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

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

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

文書ぶんしょ(document)とは、ぶんだけでなく、画像がぞうやイラストなども使って情報じょうほうを残し、他のほかのひと伝えるつたえるためのものです。HTMLでは、主におもに文書ぶんしょをマークアップします。

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

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

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

文書ぶんしょのサンプル

タイトルのサンプル(文書ぶんしょのタイトル)

見出しみだしのサンプル(段落だんらく説明せつめいする見出しみだし

これは段落だんらくのサンプルです。これは段落だんらくのサンプルです。これは段落だんらくのサンプルです。これは段落だんらくのサンプルです。これは段落だんらくのサンプルです。これは段落だんらくのサンプルです。これは段落だんらくのサンプルです。

見出しみだしのサンプル(リストを説明せつめいする見出しみだし

  • リストのサンプル
  • リストのサンプル

見出しみだしのサンプル(ひょう説明せつめいする見出しみだし

ひょうのサンプルひょうのサンプル
ひょうのサンプルひょうのサンプル

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

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

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

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

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

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

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

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

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

  • 順番じゅんばんのないぶん並べたならべたもの
  • 短いみじかいぶんです
  • 文書ぶんしょ中でなかで何度なんども使われます
  • 見出しみだし」と一緒いっしょに使われることが多いおおいです
好きすきなフルーツ
  • リンゴ
  • バナナ
  • レモン

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

  • 順番じゅんばんのあるぶん並べたならべたもの
  • 短いみじかいぶんです
  • 文書ぶんしょ中でなかで何度なんども使われます
  • 見出しみだし」と一緒いっしょに使われることが多いおおいです
たまごを料理りょうりする
  1. たまごを割るわる
  2. たまごを混ぜるまぜる
  3. たまごを焼くやく

ひょう詳細しょうさい

  • データやぶん内容ないよう合わせあわせたてよこ並べたならべたもの
  • 短いみじかいぶん数字すうじです
  • ひょう見出しみだし」と「ひょうのデータ」があります

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

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

文書ぶんしょ文字もじ」や「記号きごう」を追加ついかして、コンピューターに文書ぶんしょ構造こうぞう伝えるつたえることを「マークアップ」といいます。

教材きょうざいのダウンロード

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

圧縮あっしゅくファイル

「text_structure.zip」は圧縮あっしゅくファイルです。
デスクトップに展開てんかい圧縮あっしゅくしたファイルをもとに戻すもどすこと)しましょう。

圧縮あっしゅくファイルの展開てんかい方法ほうほう

ダウンロードした圧縮あっしゅくファイルをみぎクリックして「すべて展開てんかい」を選びます。
展開てんかいできたら、圧縮あっしゅくファイルはゴミはこに入れましょう。

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

ファイル「text_structure_a.txt」をみぎクリック→プログラムから開くひらく→Visual Studio Code
Visual Studio Codeの「表示ひょうじ」メニューから「みぎはしでの折り返しおりかえし」をしましょう。

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

とつけましょう。(全角ぜんかく入力にゅうりょく

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

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

ファイル「text_structure_b.txt」をみぎクリック→プログラムから開くひらく→Visual Studio Code
Visual Studio Codeの「表示ひょうじ」メニューから「みぎはしでの折り返しおりかえし」をしましょう。

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

というふうに範囲はんい指定していしましょう。(全角ぜんかく入力にゅうりょく

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

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

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

CampusApp

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

知識ちしき問題もんだい

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

CampusApp

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

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

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

目次