-本日のアジェンダ-
1限目
学科 HTML基礎②
HTMLの基本構造について
2限目
学科 HTML基礎②
HTMLの文書情報について
3限目
学科 HTML基礎②
セクション分類タグについて
4限目
学科 HTML基礎②
コンテンツ分類タグについて
5限目
学科 HTML基礎②
本日の講義のまとめ
本日のテーマ
HTMLの基本構造を理解しましょう
【まとめサイト】
- HTMLとCSSの基礎をまとめたサイト
https://samplesdl.me/training_html-css/
【動画】
- HTMLとCSSのリファレンスサイトとタグチェッカー
https://youtu.be/cqKRlqgMwW0(11分20秒)
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 要素(アサイド)
参考サイト
- HTMLをセクション分けするタグの使い方!divタグとの違いも解説
- sectionタグとは?使い方やarticleタグとの違いを徹底解説
- sectionやarticleの使い分け!セクショニング要素とは?
ワンポイントアドバイス
見出し(h1~h6)要素でh1タグ以外は、特に使用回数に制限はありません。h2やh3などは大きな見出しとなることが多いためたくさん使われると思います。「h1タグは1ページで一回の使用で抑え、数字の順序をしっかり守ること」これを守っていれば使用になんら問題はありません。ただ、html5の場合は、sectionタグやarticleタグと組み合わせることで1ページに複数のh1タグを記述することができます。
参考サイト
コンテンツ分類タグについて
- p 要素(段落(パラグラフ))
- hr 要素(区切り)
- ul/li 要素(順序のないリスト)
- ol/li 要素(順序のあるリスト)
- dl/dt/dd 要素(定義・説明リスト)
- div 要素(ひとつのかたまりの範囲)
- main 要素(メインコンテンツ)
ワンポイントアドバイス
マークアップに悩んだらとにかく「p」にしましょう。
本日のテーマ②
ここからは補足資料になります。
情報収集など手を動かしながらの視聴でも構いません。
もしくはお時間のある時にご自身で視聴ください。
紙のポートフォリオは面接の時に利用しましょう
まずはポートフォリオサイトに日々の学びと多くの作品をまとめておきましょう。
そして、面接が決まったら「紙のポートフォリオ」も用意して企業さんへの手土産として持参しましょう。
【動画】
おさらい ポートフォリオ・ポートフォリオサイトとは?(11:07)
https://youtu.be/LyZ3pObfsOA
紙ポートフォリオとWebポートフォリオサイトの違い (7:30)
2
https://youtu.be/1Pbw-0-2_OQ
面接のお話 (6:12)
https://youtu.be/uyhcUvp5mRU
紙のポートフォリオ作成のためのコツと抑えるべき基本 (6:40)
https://youtu.be/ZLMAYfizybw
ポートフォリオを作る5つの要素 (10:40)
https://youtu.be/vE7fiugNxnI
ポートフォリオを作る5つの要素~まとめ (8:58)
https://youtu.be/yDKBqf5EMZA
参考サイト
授業ノート
□memo
・すべてのブラウザで使えるタグを選ぶことが重要
・タグチェッカーで必ず確認する(とじタグや空白など機械でチェックしてくれる)
【タグの基本】↓↓↓
<h1>桃太郎</h1>
開始タグ、要素、終了タグ
・半角英数で記載すること
・tabキーで一段下げる直すときはshift+tabキー
・テラパッドは文字改行コード指定保存で文字コードをUTF-8N、ファイル名はindex.htmlにして保存する
・半角全角の切り替えが手間なので先にテキストを全部入れてからマークアップすると良い
・ビューポート・・・スマホ対応の際に必要
・メインは1ページに1回しか使えない
・sectionには必ず見出しが必要、見出しがないのに使うと間違いになる
・<aside>=文章メインコンテンツ
・<p>=段落
・<br>=改行・・・空要素なのでとじタグはいらない
・<ul>=箇条書き
・会社概要などは<ul>を使うことが多い
・<li>=箇条書きの中身
・<ol>=順序のあるリスト(ランキングなど)
・<dl>=リスト
・<dt>=説明文
・<dd>=詳細説明
・<nav>=ナビゲーション(リンクタグになりジャンプする)
・<div>=切り替え線
コメントを残す