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

2026年05月14日

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

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

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

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でマークアップしてみる

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

HTMLマークアップのルール

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

HTMLタグ

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

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

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

<html>	HTML文書ぶんしょの全体ぜんたいを指定していする
<head>	HTML文書ぶんしょの設定せっていを書くかく＊HTMLの「頭あたま」なので
<body>	HTML文書ぶんしょの本体ほんたいを指定していする＊HTMLの「体からだ」なので
<title>	HTML文書ぶんしょの名前なまえを指定していする（headの中になかに書くかく）

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>

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

<html>
  <head>
    <title>ページのタイトル</title>
  </head>
  <body>
  </body>
</html>

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

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

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

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

CampusApp

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

知識ちしき問題もんだい

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

CampusApp

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

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

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

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