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

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

Webサイト作成A
目次

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

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

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

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

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

  • 文書ぶんしょの要素ようそ「タイトル」について、正しいただしいのはどれですか
    • 文書ぶんしょ全体ぜんたいの内容ないようを知らせるしらせるもの
    • すぐ後にあとに続くつづく段落だんらくやリスト、表ひょうの内容ないようを知らせるしらせるもの
    • 文脈ぶんみゃくが同じおなじいくつかの文ぶんをまとめたもの
    • 順番じゅんばんのない／順番じゅんばんのある文ぶんを並べたならべたもの
    • データや文ぶんを内容ないように合わせあわせて縦たてと横よこに並べたならべたもの
  • 文書ぶんしょの要素ようそ「見出しみだし」について、正しいただしいのはどれですか
    • すぐ後にあとに続くつづく段落だんらくやリスト、表ひょうの内容ないようを知らせるしらせるもの
    • 文書ぶんしょ全体ぜんたいの内容ないようを知らせるしらせるもの
    • 文脈ぶんみゃくが同じおなじいくつかの文ぶんをまとめたもの
    • 順番じゅんばんのない／順番じゅんばんのある文ぶんを並べたならべたもの
    • データや文ぶんを内容ないように合わせあわせて縦たてと横よこに並べたならべたもの
  • 文書ぶんしょの要素ようそ「段落だんらく」について、正しいただしいのはどれですか
    • 文脈ぶんみゃくが同じおなじいくつかの文ぶんをまとめたもの
    • 文書ぶんしょ全体ぜんたいの内容ないようを知らせるしらせるもの
    • すぐ後にあとに続くつづく段落だんらくやリスト、表ひょうの内容ないようを知らせるしらせるもの
    • 順番じゅんばんのない／順番じゅんばんのある文ぶんを並べたならべたもの
    • データや文ぶんを内容ないように合わせあわせて縦たてと横よこに並べたならべたもの
  • 文書ぶんしょの要素ようそ「リスト」について、正しいただしいのはどれですか
    • 順番じゅんばんのない／順番じゅんばんのある文ぶんを並べたならべたもの
    • 文書ぶんしょ全体ぜんたいの内容ないようを知らせるしらせるもの
    • すぐ後にあとに続くつづく段落だんらくやリスト、表ひょうの内容ないようを知らせるしらせるもの
    • 文脈ぶんみゃくが同じおなじいくつかの文ぶんをまとめたもの
    • データや文ぶんを内容ないように合わせあわせて縦たてと横よこに並べたならべたもの
  • 文書ぶんしょの要素ようそ「表ひょう」について、正しいただしいのはどれですか
    • データや文ぶんを内容ないように合わせあわせて縦たてと横よこに並べたならべたもの
    • 文書ぶんしょ全体ぜんたいの内容ないようを知らせるしらせるもの
    • すぐ後にあとに続くつづく段落だんらくやリスト、表ひょうの内容ないようを知らせるしらせるもの
    • 文脈ぶんみゃくが同じおなじいくつかの文ぶんをまとめたもの
    • 順番じゅんばんのない／順番じゅんばんのある文ぶんを並べたならべたもの

テキストの配布はいふ

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

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

マークアップ

コンピューターは文書ぶんしょがわからない

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

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

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

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

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

マークアップとは

コンピューターにも文書ぶんしょの構造こうぞうや内容ないようがわかるように、​マークをつけていくこと​

文書ぶんしょにマークをつける

  • <タイトル>自己紹介</タイトル>
  • <見出し>グェン・ヴァン・アイン</見出し>
  • <段落>日本経済大学商学科1年生</段落>
  • <段落>サッカーが好きです</段落>
  • <段落>10CK0000@jue.ac.jp</段落>

HTML

HTMLとは

  • HTML：HyperText Markup Language​
  • HTMLは、文書ぶんしょをWebサイト用ようにマークアップする言語げんごです
  • HTMLでは、文書を「<」と「>」にはさまれた「タグ（HTMLタグ）」という記号でマークアップします​
    • 「<」や「>」は「アングルブラケット（angle bracket）」や「山括弧（やまかっこ）」と呼ばれています
    • タグの例れい：<title>、<h1>、<p>、<table>　など​
  • HTMLタグは決めきめられたものしか使えません
    • タグは約やく100個こあり、そのうち約やく30個こを使います

HTMLでマークアップ

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

HTMLタグのルール

  • HTMLタグのルール1：HTMLタグでは「文書ぶんしょの構造こうぞう」を書きます
    • どこが見出しみだしで、どこが段落だんらくで、どこが画像がぞうなのかを書きます
  • HTMLタグのルール2：HTMLタグでは「文書ぶんしょの内容ないよう」は書きません
    • 文書ぶんしょに「何がなにが書いてあるのか」は書きません
  • HTMLタグのルール3：HTMLタグでは「文書ぶんしょのデザイン」は書きません
    • 文字もじの大きさおおきさや色いろ、背景はいけいの色いろなどは書きません
  • HTMLタグのルール4：HTMLタグは「開始かいしタグ」と「終了しゅうりょうタグ」をセットで使います
    • 例れい）<h1>見出しみだし</h1>
    • このルールから外れるはずれるタグもあります
    • 例れい）<hr>
  • HTMLタグのルール5：HTMLタグはかならず「半角はんかく」で書きます
    • BAD（全角ぜんかく）：＜ｈ１＞
    • GOOD（半角はんかく）：<h1>
    • いつも、半角はんかくと全角ぜんかくを意識いしきしましょう

HTMLタグ

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

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

<html>文書ぶんしょのルート（一番いちばん上のうえの構造こうぞう）
＊他のほかのタグはすべて、htmlの中になかに書くかく
<head>文書ぶんしょの設定せってい
＊HTMLの設定せっていなので、外からそとからは見えません
<body>文書ぶんしょのコンテンツ
＊見出しみだし、段落だんらくなどを書くかく場所ばしょ
<title>文書ぶんしょのタイトル
＊headの中になかに書くかく

HTMLを一緒いっしょに書きましょう

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

htmlタグ

<html></html>

headタグ（htmlタグの中になかに書くかく）

<html>
<head></head>
</html>

bodyタグ（htmlタグの中になかに書くかく）

<html>
<head></head>
<body></body>
</html>

titleタグ（headタグの中になかに書くかく）

<html>
<head>
<title></title>
</head>
<body></body>
</html>

titleに学籍番号がくせきばんごうを、bodyに名前なまえを入力にゅうりょくします

<html>
<head>
<title>10CK0000</title>
</head>
<body>グェン・ヴァン・アイン</body>
</html>

「Tabキー」で調整ちょうせい（見た目めを調整ちょうせいする）

Tabキーを使うつかうと、「インデント」で見た目めを調整ちょうせいできます。

<html>
  <head>
    <title>10CK0000</title>
  </head>
  <body>グェン・ヴァン・アイン</body>
</html>

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

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

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

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

CampusApp

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

知識ちしき問題もんだい

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

CampusApp

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

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

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

Webサイト作成A
目次