本日のアジェンダ
1限目
学科 HTML/CSS基礎②
ファイル管理について
2限目
学科 HTML/CSS基礎②
Webページ制作実践
3限目
学科 HTML/CSS基礎②
Webページ制作実践
4限目
学科 HTML/CSS基礎②
Webページ制作実践
5限目
学科 HTML/CSS基礎②
本日の講義のまとめ
本日のテーマ
HTML記述してみましょう
本日のレポート
ファイル管理
ファイル名の注意事項
半角英数字・ハイフン（-）・アンダーバー（_）のみ。
全角は文字化けを起こすため、絶対に使わないこと。
ファイル管理について
Webサイト開発時には、HTMLファイル、CSSファイル、JavaScriptファイル、画像ファイルなど多くのファイルを使用します。また、各ファイルは随時変更されるので適切なバックアップも必要です。
フォルダ名やファイル名の命名規則やフォルダ構成などを決めて管理しておかないと、どのファイルが、どこにあるのかわからないという状況になってしまいます。
例えば、画像を入れるフォルダなら「images」「image」「img」など。
「絶対パス」と「相対パス」
絶対パスと相対パスは、それぞれコンピュータ上のファイルの居場所を指すものです。
絶対パスは「https://」もしくは「http://」の後に、最上位のディレクトリからファイルまでの道筋を表記します。
相対パスは、現在の居場所から目的のファイルまでの道筋を表記するパスです。
TeraPad操作方法（初期設定）
表示オプションの設定
- 表示タブ→マーク→全項目にチェック
- 基本タブ→タブの文字数→「4」
- 文字コードタブ→初期文字コード→「UTF-8N」
- 拡張子タブ→「HTML」編集→「*.html」に編集→更新
- 表示バー→80桁で折り返し
- ルーラー/行番号タブ→論理行で行番号を表示するにチェック
- ファイルバー→文字/改行コード指定保存→名前を付けて保存→「名前：index」「拡張子HTML」
画像（img）挿入のルール
【例】
<img src=”images/event_mother.png” alt=”2024年5月12日 日曜日” width=”150″ height=”150″>
- src=リンク先（「images」フォルダ外から、「images」フォルダ内の「event_mother.png」を呼ぶ）
- alt=画像が表示できない場合に代わりに表示されるテキスト
- width=画像を挿入する場所の横幅（px)
- height=画像を挿入する場所の縦幅（px）
制作物（本日までの途中経過）
感想
はじめてHTMLの記述を行った。
構造を理解して書くと結構楽しく作業することができた。
