MENU
日本経済大学
  1. ホーム
  2. Webサイト作成A
  3. Webサイト作成A（第06回）

Webサイト作成A（第06回）

Webサイト作成A
目次

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

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

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

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

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

  • 「地図ちず」はどの基準きじゅんを使って組織化そしきかしていますか
    • LOCATION：位置いち
    • HIERARCHY：階層かいそう
    • CATEGORY：分野ぶんや
    • TIME：時間じかん
    • ALPHABET：アルファベット
  • 「辞書じしょ」はどの基準きじゅんを使って組織化そしきかしていますか
    • ALPHABET：アルファベット
    • LOCATION：位置いち
    • TIME：時間じかん
    • CATEGORY：分野ぶんや
    • HIERARCHY：階層かいそう
  • 「カレンダー」はどの基準きじゅんを使って組織化そしきかしていますか
    • TIME：時間じかん
    • LOCATION：位置いち
    • HIERARCHY：階層かいそう
    • CATEGORY：分野ぶんや
    • ALPHABET：アルファベット
  • 「スーパーマーケット」はどの基準きじゅんを使って組織化そしきかしていますか
    • CATEGORY：分野ぶんや
    • LOCATION：位置いち
    • ALPHABET：アルファベット
    • TIME：時間じかん
    • HIERARCHY：階層かいそう
  • 「新聞しんぶん紙面しめんの構成こうせい」はどの基準きじゅんを使って組織化そしきかしていますか
    • HIERARCHY：階層かいそう
    • LOCATION：位置いち
    • TIME：時間じかん
    • CATEGORY：分野ぶんや
    • ALPHABET：アルファベット

マークアップ

コンピューターは文章ぶんしょうが理解りかいできない

  • 人間にんげんは文書ぶんしょの構造こうぞうも、書いてある内容ないようも理解りかいできます
  • コンピューターは文書ぶんしょの構造こうぞうも、書いてある内容ないようも理解りかいできません

人間にんげんの場合ばあい

  • 自己じこ紹介しょうかい　←　文章ぶんしょうのタイトルかな？
  • グェン・ヴァン・ナム　←　名前なまえかな？
  • 日本経済大学にほんけいざいだいがく商学科しょうがくか1年生ねんせい　←　仕事しごとかな？学校がっこうかな？
  • サッカーが好きすきです　←　趣味しゅみかな？
  • 10CK0000@jue.ac.jp　←　メールアドレスかな？

コンピューターの場合ばあい

  • 自己じこ紹介しょうかい　←　？
  • グェン・ヴァン・ナム　←　？
  • 日本経済大学にほんけいざいだいがく商学科しょうがくか1年生ねんせい　←　？
  • サッカーが好きすきです　←　？
  • 10CK0000@jue.ac.jp　←　？

マークアップとは

人間にんげんだけでなく、コンピューターにも文書ぶんしょ構造こうぞうがわかるように、​文書ぶんしょに目印めじるしをつけていくこと​

文書ぶんしょに目印めじるしをつける

  • <タイトル>自己じこ紹介しょうかい</タイトル>
  • <文章ぶんしょう>グェン・ヴァン・ナム</文章ぶんしょう>
  • <文章ぶんしょう>日本経済大学にほんけいざいだいがく商学科しょうがくか1年生ねんせい</文章ぶんしょう>
  • <文章ぶんしょう>サッカーが好きすきです</文章ぶんしょう>
  • <メールアドレス>10CK0000@jue.ac.jp</メールアドレス>

HTML

HTMLとは

  • HyperText Markup Language​
  • 文書ぶんしょを「<」と「>」に挟まれた「タグ」という記号きごうでマークアップする​
    • タグの例れい：<h1>、<p>、<table>、<body>　など​
    • タグは原則げんそく、決まったきまったものしか使えません
  • HTMLを使うつかうと、コンピューターに文書ぶんしょの情報じょうほう構造こうぞうを教えるおしえることができます

HTMLでマークアップしてみる

  • <h1>自己じこ紹介しょうかい</h1>
  • <p>グェン・ヴァン・ナム</p>
  • <p>日本経済大学にほんけいざいだいがく商学科しょうがくか1年生ねんせい</p>
  • <p>サッカーが好きすきです</p>
  • <a href=”mailto:10CK0000@jue.ac.jp”>10CK0000@jue.ac.jp</a>

実際じっさいのHTMLをみてみよう

  • Google検索けんさくで「日本経済大学にほんけいざいだいがく」のWebサイトを表示ひょうじしてください
  • https://www.jue.ac.jp/
  • ページの背景はいけい（写真しゃしんや文字もじのない白いしろいところ）で右みぎクリックして「ページのソース」を表示ひょうじします

HTMLマークアップの原則げんそく

  • HTMLでは「文書ぶんしょの構造こうぞう」を記述きじゅつします
    • どこが見出しみだしで、どこが段落だんらくで、どこが画像がぞうなのか
  • HTMLでは「文書ぶんしょの内容ないよう」は記述きじゅつしません
    • 「何なにが書いてあるのか」は記述きじゅつできません
  • HTMLでは「文書ぶんしょのデザイン」は記述きじゅつしません
    • 文字もじの色いろや大きさおおきさなどは記述きじゅつできません
  • 原則げんそく、「開始かいしタグ」と「終了しゅうりょうタグ」をセットで使います
    • 例れい）<h1>タイトル</h1>
  • 「半角はんかく」で記述きじゅつします
    • NG（全角ぜんかく）：＜ｈ１＞
    • OK（半角はんかく）：<h1>

HTMLタグ

実際じっさいに使われているHTMLタグを学んでまなんでいきましょう。

Visual Studio Codeから「新しいあたらしいテキストファイル」を作成さくせいします。

HTMLタグ（基本きほん構造こうぞう）

<html>HTMLの文書ぶんしょ全体ぜんたいを​指定していする
<head>HTML文書ぶんしょのメタ情報じょうほう（設定せってい情報じょうほう）​を書くかく
＊HTMLの「頭あたま」に相当そうとうするから
<body>HTML文書ぶんしょの本体ほんたいであること​指定していする
＊HTMLの「体からだ」に相当そうとうするから
<title>HTML文書ぶんしょの名前なまえを指定していする（必ずかならずheadの中になかに書くかく）
<html>
  <head>
    <title>ページのタイトル</title>
  </head>
  <body>
  </body>
</html>

HTML文書ぶんしょを保存ほぞんする

  • 文書ぶんしょを保存ほぞんするとき、​これまでは「プレーンテキスト」でしたが、​今度こんどから「HTML形式けいしき」で保存ほぞんします​
  • ファイル名ふぁいるめいは「index.html」として、​デスクトップに保存ほぞん​してください

HTMLタグ（見出しみだし）

  • heading
<h1>1番ばん目めに大きなおおきな見出しみだしを​指定していする
<h2>2番ばん目めに大きなおおきな見出しみだしを​指定していする
<h3>3番ばん目めに大きなおおきな見出しみだしを​指定していする
<h4>4番ばん目めに大きなおおきな見出しみだしを​指定していする
<h5>5番ばん目めに大きなおおきな見出しみだしを​指定していする
<h6>6番ばん目めに大きなおおきな見出しみだしを​指定していする
<html>
  <head>
    <title>ページのタイトル</title>
  </head>
  <body>
    <h1>見出しみだし1</h1>
    <h2>見出しみだし2</h2>
    <h3>見出しみだし3</h3>
    <h4>見出しみだし4</h4>
    <h5>見出しみだし5</h5>
    <h6>見出しみだし6</h6>
  </body>
</html>

HTMLタグ（段落だんらく）

  • paragraph
<p>段落だんらく（文ぶんのまとまり）を​指定していする
<html>
  <head>
    <title>ページのタイトル</title>
  </head>
  <body>
    <h1>見出しみだし1</h1>
    <h2>見出しみだし2</h2>
    <h3>見出しみだし3</h3>
    <h4>見出しみだし4</h4>
    <h5>見出しみだし5</h5>
    <h6>見出しみだし6</h6>
    <p>段落だんらくです。</p>
  </body>
</html>

HTMLタグ（アンカー）

  • anchor
<a>他のほかのページやほかのWebサイトとつなぐ​
  • Webサイトはページ同士どうしがつながってこそ意義いぎがあります
  • href（HyperText Reference）＝参照さんしょう先さきの情報じょうほう​
  • <a href=”リンク先さきのURL”>表示ひょうじするテキスト</a>

URLとは

  • URL：Uniform Resource Locator​
  • 日本語にほんごでは「統一とういつ資源しげん位置いち指定子していし」​
  • URLはインターネットにおける場所ばしょをあらわします​
  • プロトコル://ドメイン名めい/ディレクトリパス名めい/ファイル名ふぁいるめい​
    • 例れい：https://jue.co.jp/kobe/M1/20240520.txt​
<html>
  <head>
    <title>ページのタイトル</title>
  </head>
  <body>
    <h1>見出しみだし1</h1>
    <h1>見出しみだし1</h1>
    <h2>見出しみだし2</h2>
    <h3>見出しみだし3</h3>
    <h4>見出しみだし4</h4>
    <h5>見出しみだし5</h5>
    <h6>見出しみだし6</h6>
    <p>段落だんらくです。</p>
    <p><a href="https://jue.ac.jp/">日本経済大学にほんけいざいだいがく</a></p>
  </body>
</html>

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

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

CampusApp

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

知識ちしき問題もんだい

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

CampusApp

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

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

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

Webサイト作成A
目次