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

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

Webサイト作成A
目次

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

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

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

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

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

  • SNSで「1日にちに10万まん円えんもらえる」というポストがありました。これは次つぎのどれですか
    • 犯罪はんざいをさせられる闇やみバイト
    • 留学生りゅうがくせいのためのアルバイト
    • 友達ともだちが紹介しょうかいしてくれたアルバイト
    • 学校がっこうが紹介するしょうかいするアルバイト
    • 日本人にほんじんのためのアルバイト
  • 闇やみバイトの特徴とくちょうとして正しいただしいものはどれですか
    • 面接めんせつがなく、履歴りれき書の提出ていしゅつもない
    • マネージャーとの面接めんせつがある
    • 研修けんしゅうやトレーニングがある
    • 履歴りれき書を必ずかならず提出ていしゅつしなければいけない
    • パスポートや在留ざいりゅうカードを必ずかならず提出ていしゅつしなければいけない
  • アルバイトの給料きゅうりょうについて正しいただしいものはどれですか
    • 1時間にじかんにつき1,000円えん〜の給料きゅうりょうをもらえる
    • 一度いちど働くはたらくだけで、すぐに数万円すうまんえん〜数かず十とお万まん円えんがもらえる
    • お金おかねではなく、商品しょうひんをもらえる
    • 仕事しごとをする前にまえに、先にさきにお金おかねがもらえる
    • マネージャーが金額きんがくを自由じゆうに決めるきめる
  • 闇やみバイトを辞めやめる方法ほうほうとして正しいただしいものはどれですか
    • 闇やみバイトは辞めやめられない
    • 代わりにかわりに働くはたらく人ひとを見つけてから辞めやめる
    • マネージャーに次つぎの仕事しごとを紹介しょうかいしてもらう
    • マネージャーに手紙てがみを書くかく
    • それまで働いたはたらいた分ぶんの給料きゅうりょうを計算けいさんしてから辞めやめる
  • 闇やみバイトの結果けっかとして正しいただしいものはどれですか
    • 警察けいさつに逮捕たいほされる
    • 「知らなかった」といえば警察けいさつに許してゆるしてもらえる
    • たくさんのお金おかねがもらえる
    • 6ヶ月間かげつかん、日本にっぽんから出なければいけない
    • 学校がっこうの友達ともだちや先生せんせいが助けたすけてくれる

中間ちゅうかんテストのレビュー

前回ぜんかいの中間ちゅうかんテストについて

テキストの配布はいふ

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

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

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タグ（アンカー）

  • ＜a＞
  • anchor
  • Webサイトは、ページとページがつながっているから価値かちがある
    • HyperText
      • 文書ぶんしょと文書ぶんしょをお互いにおたがいつなげる仕組みしくみ
      • 情報じょうほうと情報じょうほうとを結むすびびつける、現代げんだいのインターネットの基本きほんとなる考え方かんがえかた
<a>他のほかのページや他のほかのWebサイトとつなぐ​
  • リンクさせる文字もじを＜a＞でマークアップします
    • 例れい）＜a＞リンクさせる文字もじ＜/a＞
  • href属性ぞくせい（HyperText Reference）：リンク先りんくさきの情報じょうほう（URLやファイル名ふぁいるめい）​を書きます
    • 別べつのサーバーの場合ばあい：＜a href=“リンク先りんくさきのURL”＞表示ひょうじするテキスト＜/a＞
    • 同じおなじサーバーの場合ばあい：＜a href=“リンク先りんくさきのファイル名ふぁいるめい”＞表示ひょうじするテキスト＜/a＞

URLとは

  • URL＝Uniform Resource Locator​
    • 日本語にほんごでは「統一とういつ資源しげん位置いち指定子していし」​
  • URLはインターネットにおける場所ばしょをあらわします​
  • URLをブラウザのアドレスバーに入力にゅうりょくすると、目的もくてきのデータにアクセスできる
    • URLによって、世界中せかいじゅうにあるWebサイトの中からなかからひとつのページを指定していできる
  • プロトコル://ドメイン名めい/ディレクトリパス名めい/ファイル名ふぁいるめい​
    • 例れい：https://jue.co.jp/kobe/index.html

CampusAppからHTMLファイル（home.html）をデスクトップにダウンロードしましょう。

復習ふくしゅうで作成さくせいしたHTMLファイル（index.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>日本経済大学</p>
    <p>ホーム</p>
  </body>
</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>日本経済大学</a></p>
    <p><a>ホーム</a></p>
  </body>
</html>

href属性ぞくせいを追加ついかします。

<!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>
  </body>
</html>

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

HTMLタグ（改行かいぎょう）

  • ＜br＞
  • break
<br>改行かいぎょうする
  • テキストエディタで改行かいぎょうをしても、ブラウザからは改行かいぎょうされているように見えません
  • 終了しゅうりょうタグが不要ふようです

段落だんらくタグを追加ついかします。

<!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>日本経済大学は神戸にもキャンパスがあります。
    神戸三宮キャンパスは、神戸市にあります。</p>
  </body>
</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>

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

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

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

CampusApp

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

知識ちしき問題もんだい

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

CampusApp

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

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

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

Webサイト作成A
目次