-本日のアジェンダ-
1限目
学科 HTML/CSS基礎②
ファイル管理について
20251017_htmlのフォルダに
index.htmlのファイルを作成。
※半角英数字,小文字で
➡開発フォルダ（作業フォルダ）になる
2限目
学科 HTML/CSS基礎②
Webページ制作実践
①head内のmetaタグ
meta charset =”UTF-8″とmeta name =”description”…（HTMLファイルの説明文）部分は必須
他のメタ情報は昔は入れていたが最近は入れなくても良い
②head内タイトルタグ
ウェブサイト開いた時のタブにタイトルの文字が出てくる
③head内linkタグ
今回はまだCSS作成しないのでなくてOK
外部のCSSなどを読み込むときはhead内にlinkタグを入れる
<link href=”reset.css” rel=”stylesheet”>
★headタグ/本のタイトルや出版社情報、著者などの部分にあたる
CTRL R：リロード
ウェブ上で見えている文章は基本的にはbodyタグ内に書く
=CSSも基本bodyタグ内に対してかける
3限目
学科 HTML/CSS基礎②
Webページ制作実践
・ブロックレベル 例：p
改行される、めいいっぱいサイズをとる
・インラインレベル 例：span
改行されない、中身で横幅が変わる
・画像の入れ込み
srcに画像の読み込み元のファイル名、 altに画像の内容を入れる
Google検索時に引っかかるように
目が見えない人の読み上げソフトなどでも分かるように
src=のパスにはhtmlファイルから見たルートを書く
代表的な特殊文字
「”」→「"」、「&」→「&」、「<」→「<」、「>」→「>」、「（スペース）」→「 」、「©」→「©」、「®」→「®」など
よく使うブロックレベル要素の例
| 用途 | 要素名 |
|---|---|
| 見出し | h1〜h6要素 |
| 段落 | p要素 |
| 箇条書き | ul, li要素 |
| 汎用タグ | div要素 |
よく使うインラインレベル要素の例
| 用途 | 要素名 |
|---|---|
| リンク | a要素 |
| 画像 | img要素 |
| 汎用タグ | sp |
4限目
学科 HTML/CSS基礎②
Webページ制作実践
構造化タグ <header></header>、<main></main>、<footer></footer>
見た目上は変わらないが、機械にとってわかりやすいように入れる
グループ化タグ <div></div>
※ただのひとかたまり。デザインがしやすくなるのでCSSを使用するときによく使う
5限目
学科 HTML/CSS基礎②
本日の講義のまとめ
・ウェブページ丸ごとのスクリーンショットの方法
Ctrl Shift P ➡ RUNが出てくる
fullと入力 ➡ 出てきたフルスクリーンショットボタンを押す
ダウンロードに入っている
本日のテーマ
HTML記述してみましょう
本日の課題
Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）
本日学んだこと
HTMLファイルの作成
基本のタグについて
構造化タグ
感想
本日から本格的にHTMLに入りました。HTMLのファイルを作成して基本のhead bodyの構造やタグについて学びました。
写真を入れるimgタグでは<>の中にパスや写真の説明を書くという部分を覚えておきたいです。
演習では忘れていた部分もありましたが、ヒントを見ながらだと思いだすことができました。
cssへのリンクのタグを入れると一気にCSSが適用されてきれいなウェブサイトに変わったためリンクを忘れないようにしようと思いました。
また、リンクを張るためにもファイル整理はより気を付けていかなければならないと感じました。