HTML基本構造2024/01/13

by amisaitoin 訓練日誌on 投稿日:

-本日のアジェンダ-

1限目
学科 HTML基礎②
HTMLの基本構造について

2限目
学科 HTML基礎②
HTMLの文書情報について

3限目
学科 HTML基礎②
セクション分類タグについて

4限目
学科 HTML基礎②
コンテンツ分類タグについて

5限目
学科 HTML基礎②
本日の講義のまとめ

本日のテーマ

HTMLの基本構造を理解しましょう

【まとめサイト】

【動画】

HTMLの基本構造について

<!DOCTYPE html>
<html lang=”ja”>
<head>
　　（文書の情報を記述）
</head>
<body>
　　（文書の本体を記述）
</body>
</html>

  • !DOCTYPE 宣言（ドキュメントタイプ宣言）
  • html 要素（HTML の文書）
  • head 要素（文書情報）
  • body 要素（文書本文）

文書情報について

  • title 要素（ページタイトル）
  • meta 要素（文字コード指定/charset）
  • meta 要素（ページの説明文/description）
  • meta 要素（ページのキーワード/keywords）
  • meta 要素（ページの作者情報/author）
  • meta 要素（ビューポート/viewport）
  • link要素（外部 CSS ファイルの紐付け）
  • link要素（ファビコンファイルの紐付け）

文書本文について

  • セクション分類タグ
  • コンテンツ分類タグ
  • テキスト分類タグ
  • コンテンツ埋め込みタグ
  • テーブルタグ
  • フォームタグ

参考サイト

ブロックレベル要素とインライン要素について

要素の多くは、ブロックレベル要素とインライン要素に分類されます。
ただし、HTML5ではブロックレベル要素とインライン要素という考え方はなくなっていますので、あくまでも性質を持っていると考えておきましょう。

参考サイト

セクション分類タグについて

  • h1～h6 要素（見出し）
  • article 要素（アーティクル）
  • section 要素（セクション）
  • header 要素（ヘッダー）
  • footer 要素（フッター）
  • nav 要素（ナビ）
  • aside 要素（アサイド）

参考サイト

ワンポイントアドバイス

見出し（h1～h6）要素でh1タグ以外は、特に使用回数に制限はありません。h2やh3などは大きな見出しとなることが多いためたくさん使われると思います。「h1タグは1ページで一回の使用で抑え、数字の順序をしっかり守ること」これを守っていれば使用になんら問題はありません。ただ、html5の場合は、sectionタグやarticleタグと組み合わせることで1ページに複数のh1タグを記述することができます。

参考サイト

コンテンツ分類タグについて

  • p 要素（段落（パラグラフ））
  • hr 要素（区切り）
  • ul/li 要素（順序のないリスト）
  • ol/li 要素（順序のあるリスト）
  • dl/dt/dd 要素（定義・説明リスト）
  • div 要素（ひとつのかたまりの範囲）
  • main 要素（メインコンテンツ）

ワンポイントアドバイス

マークアップに悩んだらとにかく「p」にしましょう。

本日の課題

本日学んだ内容を復習して整理しておきましょう。
ポートフォリオサイトの投稿ページ作成が出来る方は投稿ページにまとめておくと良いです。

本日のテーマ②

ここからは補足資料になります。
情報収集など手を動かしながらの視聴でも構いません。
もしくはお時間のある時にご自身で視聴ください。

pdfを活用してみましょう！

みなさんこれから企業さん用の応募書類（データ）を作成していきますので、pdfを上手く活用し、また使い方の理解も高めて、しっかりと就活に向けた準備を進めていきましょう。

【資料】

カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/

下記のファイルをダウンロードしましょう。
「技術pdfについて.pdf」　

【動画】

pdfとは？ (9:43)
https://youtu.be/T3WMz7yfH-E

PDFとHTML (6:45)
https://youtu.be/mMNNOhdvxsY

ポートフォリオサイトでのpdfのご利用方法について1-2 (7:46)
https://youtu.be/YJMLYhnJePc

ポートフォリオサイトでのpdfのご利用方法について3 (15:59)
https://youtu.be/RlIq4poare8

押さえておきたいpdfの技術3選 (8:44)
https://youtu.be/qcf5H_oN3hM

参考サイト「PDFをパスワードで保護する」

参考サイト「様々なソフトからpdf化出来る」

メモ