目次
授業の準備
Microsoft Teamsにログインし、授業の会議に参加してください。
前回の復習
前回の知識問題
- マークアップの説明として正しいものはどれですか
- 文書構造がわかるように、文書に目印をつけていくこと
- 文書の内容をユーザーに伝えること
- Webサイトのデザインをすること
- 見出しを指定すること
- 文書の内容をコンピューターに伝えること
- HTMLの原則として間違っているものはどれですか
- 全角で記述する
- 文書構造を記述する
- デザインは記述しない
- 開始タグと終了タグをセットで記述する
- 文書の内容を記述することはできない
- HTMLで文書に関する情報(メタデータ)を示すのに使用するタグはどれですか
- head
- html
- body
- a
- h1
- HTMLで「段落」を示すのに使用するタグはどれか
- p
- a
- h1
- body
- paragraph
- HTMLで「アンカー」を示すのに使用するタグはどれか
- a
- href
- html
- link
- anchor
良いデザインとは
- 「良いデザイン」とは何かを考えましょう
VS Codeの便利な使い方
- 新規ファイルを作成して、HTMLファイル(index.html)として保存しましょう
- ページ最上部で「!」を押してTabキーを押すと、基本的なHTML文書が出力されます
- 「en」を「ja」に修正しましょう
- <title>Document</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タグ
実際に使われているHTMLタグを学んでいきましょう。
HTMLタグ(順番なしリスト)
- Unordered List
- 同格の情報を並べる(箇条書き)
- 買い物リスト
- ToDo など
<ul> | リスト全体 |
---|---|
<li> | リスト項目 |
- リスト項目1
- リスト項目2
- リスト項目3
HTMLタグ(順番ありリスト)
- Ordered List
- 順番のある情報を並べる
- 手順
- 成績順 など
<ol> | リスト全体 |
---|---|
<li> | リスト項目 |
- リスト項目1
- リスト項目2
- リスト項目3
HTMLタグ(説明リスト/定義リスト)
- Description List/Definition List
- 説明リスト/定義リスト
- 用語の説明
- 項目と内容 など
<dl> | リスト全体 |
---|---|
<dt> | 説明や定義されることば |
<dd> | 説明や定義 |
実践してみよう
以下の内容を自分で考えて、HTMLでマークアップしてみましょう。
- 家族の名前
- 好きな食べ物トップ3
- かんたんな自己紹介(名前、出身、趣味 など)
それぞれどの「リスト」を使えばよいでしょうか?
課題の提出
課題を提出しましょう。
CampusApp

- 「出欠・課題」から提出しましょう
- 課題セクションにある今日の授業の欄から提出できます
知識問題
今日の授業内容を知識問題で復習しましょう。
CampusApp

- CampusAppの「CBT(知識問題)」から、知識問題にチャレンジしましょう
- 100点が取れるまで、繰り返し挑戦しましょう
- 期末の定期試験は知識問題の中から出題します
パソコンの再起動/シャットダウン
授業の終わりに必ずパソコンを再起動(次に他の授業がある場合)、またはシャットダウン(次に他の授業がない場合)してください。