本日のテーマ
HTML記述してみましょう
授業詳細
コーディングの前にサイト全体の構造をつかむ
WEBサイトは2パターン
普通のサイト
コーポレーションサイト、いろんな情報がありナビゲーション（メニューバー）がある
LPサイト
伝えたいことは１つなので、１ページで情報が完結される
コーポレーションサイト
だいたい大きく3つに分かれる
ヘッダーエリア
メインエリア
フッターエリア
WEB業界ではフォルダのことをディレクトリという
WEBサイトを作るとき、半角英数字のみ、全角や日本語、大文字は使わない。記号はアンダーバーとハイフンくらい
テキストコンテンツを作る
Terapad→UTF8N形式→index.htmlでファイルを保存
コードを描くときのお作法
一番最初に書くコード
| コード | 意味 |
| <!DOCTYPE html> | 今からコードが始まりますよの宣言 |
| <html lang=”ja”></html> | ここから日本語（ja）で書いていきますよの宣言 |
| <head></head> | ここはヘッド部です |
| meta 要素（文字コード指定／charset） | コード指定 UTF-8 |
| meta 要素（ページの説明文／description） | ページの説明文 |
| meta 要素（ビューポート／viewport） | 画面のこと、画面の大きさ |
| meta 要素（キーワード／keywords） | 最近は使わない方向 |
| <title></title> | 検索で出てくる名前、タブにも出る |
bodyに書いていくコード
| コード | 意味 |
| <body></body> | ここはbody部です |
| <header></header> | ここはheader部です |
| <main></main> | ここはmain部です |
| <nav></nav> | ここはナビゲーション部です |
| <ul></ul> | uncord listリストリストとセット |
| <li></li> | リスト ulとセット |
| <div></div> | ここはアイキャッチです |
| <h1></h1> | ここは見出し部です ※h1は一回しか使わないh1~h6 |
<section></section> | ここはセクション部です |
tabキーで文頭合わせていくと整理しやすい
成果物
授業の感想
一回でコードを全部覚えられないが、意味は一通りわかった。
どんどん上達したいので、家でも反復して学習していきたい。