1限目
学科 HTML/CSS基礎②
ファイル管理について

2限目
学科 HTML/CSS基礎②
Webページ制作実践

3限目
学科 HTML/CSS基礎②
Webページ制作実践

4限目
学科 HTML/CSS基礎②
Webページ制作実践

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

ファイル管理

名前の徹底

日付_fail形式
名前は基本半角英数字

https://samplesdl.me/training_html-css/sample-body.html

半角と全角のスペースはエラーに繋がるので入力は必ず半角で行う。
設定は以下

半角に印が入る。
今回は全角表示にする

保存
上の段→8N
下の段→何もせず
保存

デスクトップの新しく作ったファイルに保存

fここまで書いたらデスクトップのフォルダに保存

htmlのファイルとなり青字になる。

右クリック→プログラムから開く

タブで3-8行までTABキーで動かす
(タブを揃える)

マック・ウィンドウズ共通でUTF-8で保存
テラパッドはUTF-8Nで保存する

4行目に

<meta name=”description” content=”説明文”>
5行j目に

セーブしてないと*つく

なぜTabキーを打つか?→開始タグと閉じタグで囲われているところは入れ子構造になっているから。親と子、孫で区別するため。
→インデントをそろえる、と言う。

タイトル→

本文

BODYの中を作っていく

■順序のないリスト

インデントを揃えて


■順序のあるリスト

ul →unorder line
ol → oder line

↑これは先生のMACのファイル(見本)

DIV→WPでいうブロック

P→段落
DIVタグの補足→Pタグ

H1タグ→1つのサイトで1つのみ
H2タグ→1つのサイトで複数ある場合もある

意味→H1タグで属性はクラス、属性値は””

★親子関係
①HTML(親)
②headとbodyタグはHTMLから見て同じ階層=(子)(兄弟という)
③metaタグ・ULはHTMLから見て孫タグ

HTML=検索エンジン=パトロールしているbotのため
なので適切に使われたタグやルールを正しく記載しないとGoogle上で順が下がる。順位に直接関わる。
CSS=見た目(カラーや装飾、レイアウト)=見やすい方が人が訪れるが検索順位にはHTMLほど重要ではない。(見た目は相対的に感覚の違いがあるため)

HTMLの構成は歴史的に論文の構造を模倣している。
見出し、補足のパラグラフ、リストなどの構造も同じ。
→書籍や新聞やウィキペディアの構造も同じ

リセットCSS
その論文から引き継いだ構造をいったん崩してカスタマイズするための作業がリセットCSSという。

→27にも授業で扱っているのでそちらも参照★