MENU
日本経済大学
  1. ホーム
  2. Webサイト作成A
  3. Webサイト作成さくせいA（第だい10回かい）

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

Webサイト作成A
目次

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

  • ヘッドホンやイヤホンは耳みみからはずしてください
  • ペットボトル以外いがいの飲み物のみものを教室きょうしつに持ち込むこむことはできません
  • Microsoft Teamsにログインし、授業じゅぎょうの会議かいぎに参加さんかしてください。
  • CampusAppにログインしておきましょう

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

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

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

  • HTMLタグ「アンカー」の正しいただしい使い方つかいかたはどれですか
    • ＜a href=”リンク先りんくさきの情報じょうほう“＞リンクされる文字もじ＜/a＞
    • ＜a hypertext=”リンク先りんくさきの情報じょうほう“＞リンクされる文字もじ＜/a＞
    • ＜a url=”リンク先りんくさきの情報じょうほう“＞リンクされる文字もじ＜/a＞
    • ＜a=”リンク先りんくさきの情報じょうほう“＞リンクされる文字もじ＜/a＞
    • ＜a link=”リンク先りんくさきの情報じょうほう“＞リンクされる文字もじ＜/a＞
  • 「URL」の説明せつめいで間違ってまちがっているものはどれですか
    • URLは同じおなじものがいくつか存在そんざいします
    • URLは「Uniform Resource Locator」です
    • URLは「統一とういつ資源しげん位置いち指定子していし」です
    • URLはインターネットにおける場所ばしょをあらわします
    • URLをブラウザのアドレスバーに入力にゅうりょくすると、目的もくてきのデータにアクセスできます
  • HTMLタグ「改行かいぎょう」について正しいただしいものはどれですか
    • ＜br＞は終了しゅうりょうタグが不要ふようです
    • ＜br＞は終了しゅうりょうタグが必要ひつようです
    • ＜br＞は表示ひょうじに影響えいきょうを与えあたえません
    • テキストエディタで改行かいぎょうすると、自動じどうで＜br＞が適用てきようされます
    • 「br」は「bring」の略りゃくです
  • Visual Studio Codeで基本的きほんてきなHTMLを表示ひょうじする方法ほうほうはどれですか
    • HTMLファイルを保存ほぞんして、「!」を入力にゅうりょくした後あと、Tabキーを押すおす
    • 「!」を入力にゅうりょくした後あと、Tabキーを押して、HTMLファイルを保存ほぞんする
    • HTMLファイルを保存ほぞんして、Tabキーを押した後あと、「!」を入力にゅうりょくする
    • Tabキーを押した後あと、HTMLファイルを保存ほぞんして、「!」を入力にゅうりょくする
    • Tabキーを押した後あと、「!」を入力にゅうりょくして、HTMLファイルを保存ほぞんする
  • HyperTextについて、間違ってまちがっているものはどれですか
    • HyperTextは他のほかのWebサイトにリンクします
    • HyperTextは文書ぶんしょと文書ぶんしょがお互いにおたがいつながる仕組みしくみです
    • HyperTextは情報じょうほうと情報じょうほうを結むすびびつける、現代げんだいのインターネットの基本きほんとなる考え方かんがえかたです
    • Webサイトはページとページがつながっているから価値かちがあります
    • HTMLは「HyperText Markup Language」の略りゃくです

テキストの配布はいふ

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

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

VS Codeの便利べんりな使い方つかいかた（復習ふくしゅう）

HTMLの基本的きほんてきな構造こうぞうを、Visual Studio Codeを使って表示ひょうじします。

  1. 「新しいあたらしいテキストファイルを作成さくせい」して、何もなにも書かずにHTMLファイル（index.html）として保存ほぞん​しましょう
  2. キーボードで「!」を入力にゅうりょくして、その後あと「Tabキー」を押すおすと、HTMLが表示ひょうじされます
    • これはHTMLの基本的きほんてきな構造こうぞうです
  3. 対象たいしょうとなる言語げんごを変更へんこうします
    • 「en」を「ja」に修正しゅうせいしましょう​
  4. タイトルを変更へんこうします
    • ＜title＞Document＜/title＞を＜title＞自分じぶんの学籍番号がくせきばんごう＜/title＞に修正しゅうせい​しましょう

完成かんせい例れい

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10CK0000</title>
  </head>
  <body>
    
  </body>
</html>

作成さくせいしたHTMLファイル（index.html）は後あとで使います。

HTMLの情報じょうほう構造こうぞう

HTMLの情報じょうほう構造こうぞうについて学びまなびます。

親おや子こ構造こうぞう、階層かいそう構造こうぞう、ツリー構造こうぞう

親おや子こ構造こうぞう：「親おや」の中になかに「子こ」、「子こ」の中になかに「孫まご」が含まれるふくまれるような情報じょうほう構造こうぞう

親おや子こ構造こうぞうを図ずにすると、ピラミッドのように階段かいだんのような構造こうぞうになっています。
このような情報じょうほう構造こうぞうを「階層かいそう構造こうぞう」ともいいます。

階層かいそう構造こうぞう：ひとつのデータから複数ふくすうのデータに分かれわかれていく情報じょうほう構造こうぞう

さらに、親おや子こ構造こうぞうや階層かいそう構造こうぞうは、木き（tree）を逆ささかさまにしたような形かたちをしているので、「ツリー構造こうぞう」ともよばれます。

ツリー構造こうぞう：親おや子こ構造こうぞうや階層かいそう構造こうぞうのように、上うえから下したに広がるひろがる構造こうぞう

親おや子こ構造こうぞう＝階層かいそう構造こうぞう＝ツリー構造こうぞう

HTMLは親おや子こ構造こうぞう／階層かいそう構造こうぞう／ツリー構造こうぞうです。
前回ぜんかい作成さくせいしたHTMLを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10CK0000</title>
  </head>
  <body>
    <h1>見出し1</h1>
    <p><a href="https://jue.ac.jp/">日本経済大学</a></p>
    <p><a href="home.html">ホーム</a></p>
    <p>日本経済大学は神戸にもキャンパスがあります。<br>
    神戸三宮キャンパスは、神戸市にあります。</p>
  </body>
</html>

HTMLの情報じょうほう構造こうぞうは、親おや子こ構造こうぞう（階層かいそう構造こうぞう／ツリー構造こうぞう）になっています。

html
┣head
┃┣meta
┃┗title
┗body
　┣h1
　┣p
　┃┗a
　┣p
　┃┗a
　┗p
　

復習ふくしゅう）＜html＞は、文書ぶんしょのルート（根ね）である

HTMLタグ

これまでのHTMLタグ（見出しみだし、段落だんらく、アンカー、改行かいぎょう　など）にはなかった、親おや子こ構造こうぞうを持ったHTMLタグを学びまなびます。

HTMLタグ（順番じゅんばんなしリスト）

  • ＜ul＞、＜li＞
  • Unordered List
  • 順番じゅんばんのない文ぶんを並べるならべる（箇条書きかじょうがき）
    • 買い物かいものリスト
    • ToDoリスト　など
<ul>順番じゅんばんなしリスト全体ぜんたい
<li>リスト項目こうもく

順番じゅんばんなしリストの親おや子こ構造こうぞう：ulが親おや、liが子こ

<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ul>

HTMLを書いてみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10CK0000</title>
  </head>
  <body>
      <h1>かいものリスト</h1>
    <ul>
      <li>とりにく</li>
      <li>たまご</li>
      <li>こめ</li>
    </ul>
  </body>
</html>

保存ほぞんして、ブラウザから確認かくにんしてみましょう。

HTMLタグ（順番じゅんばんありリスト）

  • ＜ol＞、＜li＞
  • Ordered List
  • 順番じゅんばんのある文ぶんを並べるならべる
    • 料理りょうりの手順てじゅん
    • テストの成績せいせき順じゅん　など
<ol>順番じゅんばんありリスト全体ぜんたい
<li>リスト項目こうもく

順番じゅんばんありリストの親おや子こ構造こうぞう：olが親おや、liが子こ

<ol>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ol>

HTMLを書いてみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10CK0000</title>
  </head>
  <body>
      <h1>かいものリスト</h1>
    <ul>
      <li>とりにく</li>
      <li>たまご</li>
      <li>こめ</li>
    </ul>
      <h1>おやこどんのつくりかた</h1>
    <ol>
      <li>とりにくをきる</li>
      <li>とりにくとたまごをにる</li>
      <li>ごはんにのせる</li>
    </ol>
  </body>
</html>

保存ほぞんして、ブラウザから確認かくにんしてみましょう。

HTMLタグ（説明せつめいリスト）

  • ＜dl＞、＜dt＞、＜dd＞
  • Description List
  • ことばを説明せつめいしたり、情報じょうほうをまとめる
    • ことばの説明せつめい
    • 項目こうもくと内容ないよう　など
<dl>説明せつめいリスト全体ぜんたい
<dt>説明せつめいされることば
<dd>説明せつめいの内容ないよう

説明せつめいリストの親おや子こ構造こうぞう：dlが親おや、dtとddが子こ

dtとddはセットで、ひとつのdtに対してたいして1個こ以上のいじょうのddを組み合わせるくみあわせることができます。

<dl>
  <dt>ことば1</dt>
  <dd>ことば1の説明</dd>
  <dt>ことば2</dt>
  <dd>ことば2の説明</dd>
  <dd>ことば2の説明</dd>
</dl>

HTMLを書いてみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10CK0000</title>
  </head>
  <body>
      <h1>かいものリスト</h1>
    <ul>
      <li>とりにく</li>
      <li>たまご</li>
      <li>こめ</li>
    </ul>
      <h1>おやこどんのつくりかた</h1>
    <ol>
      <li>とりにくをきる</li>
      <li>とりにくとたまごをにる</li>
      <li>ごはんにのせる</li>
    </ol>
      <h1>レシピのポイント</h1>
    <dl>
      <dt>ごはん</dt>
      <dd>かためにする</dd>
      <dt>とりにくとたまご</dt>
      <dd>しんせんなものをつかう</dd>
      <dd>かたくならないようにする</dd>
    </dl>
  </body>
</html>

保存ほぞんして、ブラウザから確認かくにんしてみましょう。

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

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

CampusApp

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

タイピング練習れんしゅう

キーボードで日本語にほんごを入力にゅうりょくする練習れんしゅうをしましょう。

CampusApp

  • CampusAppの「CBT（タイピング練習れんしゅう）」から、タイピング練習れんしゅうをしましょう
  • 約やく10分間ふんかん、タイピングの時間じかんを設けもうけます
  • 1回かい3分間ふんかんなので、少なすくなくとも3回かいは練習れんしゅうできます
  • 点数てんすうや回数かいすうは記録きろくされますので、評価ひょうかの対象たいしょうとします
  • 授業じゅぎょう時間じかん以外にもいがいにも繰り返しくりかえし練習れんしゅうして、正確せいかくに速くタイピングできるようになりましょう

カウントダウンタイマー

10:00

知識ちしき問題もんだい

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

CampusApp

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

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

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

Webサイト作成A
目次