学科 HTML/CSS基礎②

-本日のアジェンダ-

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

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

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

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

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

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかくグラフィックソフトを使うHTMLとCSSの理解
内容1：HTMLとCSSについて
内容2：HTMLとCSSについて
内容3：
課題：練習問題提出
【注記】
・HTML/CSS基礎①で学んだ内容を実践します。
・「本日の課題」のためにWebページのフルスクリーンキャプチャの取得方法（検証ツール）を説明してください。

本日のテーマ

HTML記述してみましょう

ファイル管理について【復習】

Webサイト開発時には、HTMLファイル、CSSファイル、JavaScriptファイル、画像ファイルなど多くのファイルを使用します。また、各ファイルは随時変更されるので適切なバックアップも必要です。

フォルダ名やファイル名の命名規則やフォルダ構成などを決めて管理しておかないと、どのファイルが、どこにあるのかわからないという状況になってしまいます。また、作業時には理解していても後日に確認すると「わからない！」というのは良くある話です。

本サイトの右側にある「ファイル管理について」などを確認して適切なファイル管理ができるようになりましょう。

ファイルのパス指定について【復習】

ファイルを指定するためには、絶対パスでの指定方法と相対パスでの指定方法があります。それぞれの特徴を理解して使い分けましょう。

参考サイト

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

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

よく使うブロックレベル要素の例

用途要素名
見出しh1〜h6要素
段落p要素
箇条書きul, li要素
汎用タグdiv要素

よく使うインラインレベル要素の例

用途要素名
リンクa要素
画像img要素
汎用タグspan要素

Webページ制作実践①

実際にhtmlファイルを作成して、Webページ制作の手順を確認していきましょう。

①HTMLの基本構造について

ファイルを新規で作成し、HTMLの基本構造を記述してみましょう。

<!doctype html>
<html>
    <head>
        文書のヘッダ情報（メタデータ）を記述する場所
    </head>
    <body>
        文書の本体情報を記述する場所
    </body>
</html>

ここまでできたら、htmlファイルを保存しましょう。
保存の際、文字コードと、htmlの拡張子（.html）指定を忘れずに！

②文書のヘッダ情報について

参考元を確認し、文章のヘッダ情報を記述していきましょう。
htmlファイルを一冊の本に例えると、ヘッダ情報は本のタイトルや、出版社情報、著者情報などにあたります。本体情報は本の中身にあたります。

③本体情報について

文章の本体情報を、タグを使って記述していきましょう。
htmlファイルを一冊の本に例えると、文書の本体情報は本の中身にあたります。

④構造化タグにグループ化タグについて

それぞれのタグを使って、文章のまとまりを作ってみましょう。

構造化タグ　<header>、<main>、<footer>

グループ化タグ　<div>

ここまでできたら、htmlファイルを保存し、該当のファイルをChromeで開いてみましょう。

⑤htmlで画像を表示させる

imgタグを使って該当画像のパスを指定し、htmlで画像を表示させてみましょう。

⑥htmlで特殊文字を表示させる

htmlで特殊文字を表示させてみましょう。

トレーニング-１

実際のWebページを作成しましょう。

トレーニング用ファイルのダウンロードおよび解凍を行ってトレーニングを実施してください。トレーニングの実施方法は、解凍したフォルダに格納されている「readme.pdf」を参照してください。

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

下記のファイルをダウンロードしましょう。
「training-1.zip」　

本日の課題

Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）