◆通所訓練（25/10/17）
講師：小谷省吾先生
カリキュラム資料：なし
1限目
学科 HTML/CSS基礎②
ファイル管理について
2限目
学科 HTML/CSS基礎②
Webページ制作実践
3限目
学科 HTML/CSS基礎②
Webページ制作実践
4限目
学科 HTML/CSS基礎②
Webページ制作実践
5限目
学科 HTML/CSS基礎②
本日の講義のまとめ
◆本日のテーマ
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の投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）
◆本日の気付き・メモ
授業でHTML言語を聞いている時には分かったつもりだったが、training-1課題で実際に入力してみると、早とちりしてしまった。
地図画像＝「img」と考え、入力したが画像が出てこない。
「画像ファイルがtraining-1課題フォルダ内にない！どこにあるんだ？どう入力するんだ？」と一人悩む。
その直後、質問されていた久保さんに話を聞き、解答をよく見てみると「」となっていて、私の思い込みによる勘違いだった。
更に、入力は正しくても更新が適切に出来ていないと画面に表示されない、という現象にも遭遇。
ほんのちょっとした入力違い、操作違いで起きる現象に一喜一憂している段階だが、徐々に慣れて経験を積まないと…と思った。
コメントを残す