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

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

Webサイト作成A
目次

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

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

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

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

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

  • 「親おや子こ構造こうぞう」の説明せつめいで正しいただしいものはどれですか
    • 「親おや」の中になかに「子こ」、「子こ」の中になかに「孫まご」が含まれるふくまれるような情報じょうほう構造こうぞう
    • 「子こ」の中になかに「親おや」、「親おや」の中になかに「孫まご」が含まれるふくまれるような情報じょうほう構造こうぞう
    • 「孫まご」の中になかに「子こ」、「子こ」の中になかに「親おや」が含まれるふくまれるような情報じょうほう構造こうぞう
    • 「親おや」の中になかに「孫まご」、「孫まご」の中になかに「子こ」が含まれるふくまれるような情報じょうほう構造こうぞう
    • 「孫まご」の中になかに「親おや」、「親おや」の中になかに「子こ」が含まれるふくまれるような情報じょうほう構造こうぞう
  • 「階層かいそう構造こうぞう」の説明せつめいで正しいただしいものはどれですか
    • ひとつのデータから複数ふくすうのデータに分かれわかれていく情報じょうほう構造こうぞう
    • 同じおなじ情報じょうほうが複数ふくすう並なみんだ情報じょうほう構造こうぞう
    • 時間にじかんに沿ってそって並なみべられた情報じょうほう構造こうぞう
    • 大きさおおきさや強きょうさによって並なみべられた情報じょうほう構造こうぞう
    • 内側うちがわから外側そとがわに広がっていく情報じょうほう構造こうぞう
  • HTMLタグ「順番じゅんばんなしリスト」で使うつかうタグの組み合わせくみあわせはどれですか
    • ＜ul＞と＜li＞
    • ＜ul＞と＜ol＞
    • ＜dl＞と＜li＞
    • ＜ul＞と＜dl＞
    • ＜dl＞と＜dd＞
  • HTMLタグ「順番じゅんばんありリスト」で使うつかうタグの組み合わせくみあわせはどれですか
    • ＜ol＞と＜li＞
    • ＜ul＞と＜li＞
    • ＜dl＞と＜li＞
    • ＜dl＞と＜dt＞
    • ＜ol＞と＜dd＞
  • HTMLタグ「説明せつめいリスト」で使うつかうタグの組み合わせくみあわせはどれですか
    • ＜dl＞と＜dt＞と＜dd＞
    • ＜ul＞と＜li＞
    • ＜ol＞と＜li＞
    • ＜dl＞と＜dt＞
    • ＜dl＞と＜dd＞

テキストの配布はいふ

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

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

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）は削除さくじょしてください。

表ひょう

表ひょう（table）の説明せつめいに必要ひつようなことばを学びまなびます。

  • 表ひょうとは：データや文ぶんを内容ないように合わせあわせて縦たてと横よこに並べたならべたもの
  • 行ぎょうと列れつ：表ひょうでは、横よこのデータのまとまりを「行ぎょう」、縦たてのデータのまとまりを「列れつ」と呼びます
  • セル：表ひょうで、データ（見出しみだしや内容ないよう）が入っている部屋へや

HTMLタグ

CampusAppから「index.html」をダウンロードします。

HTMLタグ（表ひょう）

  • ＜table＞、＜tr＞、＜th＞、＜td＞
  • HTMLで表ひょうを作りつくります
  • 表ひょうの親おや子こ構造こうぞう：tableが親おや、trが子こ、thとtdが孫まご
<table>表ひょうの全体ぜんたいを指定していする
<tr>table row、表ひょうの「行ぎょう」を指定していする
<th>table header、表ひょうの「セル（見出しみだし）」を指定していする
<td>table data、表ひょうの「セル（内容ないよう）」を指定していする
<!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>
      <table>​
      <tr>​
        <th>大学名</th>​
        <td>日本経済大学</td>​
      </tr>​
      <tr>​
        <th>場所</th>​
        <td>神戸</td>​
      </tr>​
      </table>​
  </body>
</html>

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

別べつの表ひょうに挑戦ちょうせんしましょう。
1行ぎょうの中になかに含まれるふくまれるセルの数かずも3個こに増えています。

<!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>
      <table>​
      <tr>​
        <th>大学名</th>​
        <td>日本経済大学</td>​
      </tr>​
      <tr>​
        <th>場所</th>​
        <td>神戸</td>​
      </tr>​
      </table>​
      <table>​
      <tr>​
        <th>学部</th>​
            <th>学科</th>​
            <th>学年</th>​
      </tr>​
      <tr>​
            <td>経済学部</td>​
        <td>商学科</td>​
        <td>1年</td>​
      </tr>​
      </table>​
  </body>
</html>

練習れんしゅう問題もんだい

次つぎの表ひょうのHTMLを考えかんがえてみましょう。

日本語にほんご情報じょうほう経済けいざい
学生がくせいA758080
学生がくせいB1008560
学生がくせいC1005060

STEP1：表ひょうを追加ついか（table）

<table>
</table>

STEP2：行ぎょうを追加ついか（tr）

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

STEP3：セルを追加ついか（見出しみだし、th）

<table>
  <tr>
    <th></th><th></th><th></th><th></th>
  </tr>
  <tr>
    <th></th>
  </tr>
  <tr>
    <th></th>
  </tr>
  <tr>
    <th></th>
  </tr>
</table>

STEP4：セルを追加ついか（データ、td）

<table>
  <tr>
    <th></th><th></th><th></th><th></th>
  </tr>
  <tr>
    <th></th><td></td><td></td><td></td>
  </tr>
  <tr>
    <th></th><td></td><td></td><td></td>
  </tr>
  <tr>
    <th></th><td></td><td></td><td></td>
  </tr>
</table>

STEP5：内容ないようを追加ついか

<table>
  <tr>
    <th></th><th>日本語</th><th>情報</th><th>経済</th>
  </tr>
  <tr>
    <th>学生A</th><td>75</td><td>80</td><td>80</td>
  </tr>
  <tr>
    <th>学生B</th><td>100</td><td>85</td><td>60</td>
  </tr>
  <tr>
    <th>学生C</th><td>100</td><td>50</td><td>60</td>
  </tr>
</table>

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

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

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

CampusApp

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

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

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

CampusApp

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

カウントダウンタイマー

10:00

知識ちしき問題もんだい

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

CampusApp

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

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

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

Webサイト作成A
目次