■Work①：test.htmlに文字を書いてLive Serverで確認してみましょう。(動画:Live Serverの使い方)

段落など、塊ごとにdivタグで括るようにして、文字を書いていきましょう。
divはdivision（分割）の略です。
<div> ああああああ </div> 改行はbrタグを使います。 <div> ああああああ<br> 12345678<br> いいいいいい </div>

■work②:test.htmlにimagesフォルダにあるtest.pngを挿入してみましょう

画像の表示にはimgタグを使います。（imageの略）
imgタグのsrcという属性にファイルパスを記載します。(srcはsourceの略です)
width属性は幅を設定します。%で指定するとスクリーンに対して何%の幅にするかを指定できます
【書き方】 画像を表示(30%)<br> <img src="./images/testimage.png" width="30%"><br> 画像を表示(40%)<br> <img src="./images/testimage.png" width="40%"><br> ■階層の理解
「./」は同じ階層、「../」は一つ上の階層を意味します。
VSCodeでは「./」や「../」と入力すると、フォルダやファイルの候補が表示されます。
上の例では、編集しているファイル(test.html)はimagesフォルダと同じ階層にあるので、
「./images」と書いているわけです。

xbpフォルダの直下（de12と同じ階層）にも
imagesフォルダがありますが、そのフォルダは「../images」となります。

■「/」は「中の」と読み替えてください。
「/」は「中の」と読み替えてください。
「./images/testimage.png」は「同じ階層の〈中の〉imagesフォルダの〈中の〉testimage.png」
という意味になります。

階層に関する上記のような表現は画像ファイル指定だけでなく、リンクなどhtmlのファイル指定の際に共通的な表現方法です。

■画像の表示倍率

ブラウザの幅の30%にする場合「width="30%"」

ブラウザの幅の40%にする場合「width="40%"」

スマホやデジカメで撮影した写真は綺麗に印刷できるように、すごく解像度が高く、サイズが大きくなっています。
しかし、HPで表示するにはそれほどの大きなサイズは必要なく、むしろサイズが大きいと表示に時間がかかります。
今後写真をGitHubにプッシュする場合は写真のサイズを1MB(1024KB)以下に落としてください。
Macでの写真サイズの変更方法(doyolab)
Windowsでの写真サイズの変更方法(外部サイト)

■work③:test.htmlに何か箇条書きをしてみましょう

番号付きの箇条書きはolタグ(ordered listの略です)
各項目はliタグで括ります（listの略です)
【書き方】 <ol> <li>ああああああ</li> <li>いいいいいい</li> </ol> 【結果】

1. ああああああ
2. いいいいいい

番号なしの箇条書きはulタグ(Unordered listの略です) 【書き方】 <ul> <li>あああああ</li> <li>いいいいいいい</li> </ul> 【結果】

• あああああ
• いいいいいいい

■work④:test.htmlにリンクを作成してみましょう。

リンクを作りたい時はaタグを使います(Anchorの略です)
href属性にリンク先を記載します(hypertext referenceの略です)
target属性に_blankを設定すると新しいタブでリンクが開きます。設定しないと、同じタブ
【書き方】 <a href="./index.html">デザイン演習Ⅰ・Ⅱトップページ</a><br> <a href="../index.html">XBPトップページ</a><br> <a href="https://www.yahoo.co.jp/" target="_blank">Yahoo</a><br> <a href="./files/test.pdf" target="_blank">pdfファイル</a> 【結果】
デザイン演習Ⅰ・Ⅱトップページ→同じ階層（フォルダ）にあるindex.htmlに移動
XBPトップページ→「../」はひとつ上の階層を意味する。
Yahoo→新しいタブでyahooを開く
pdfファイル→filesフォルダのtest.pdfを新しいタブで開く

外部サイトにリンクを貼る場合は自分のサイトではないことを、明記しましょう。

動画ファイルは重いので、絶対にGitHubにプッシュしないでください。最悪、リポジトリが壊れます。
動画を表示したい場合は、動画をYouTubeにアップして、そこにリンクを貼るか、htmlに埋め込むコードを発行して、htmlファイルに貼り付けましょう。
参考：Maho Yamamotoさんのまとめ(XBP２期生)
参考：YouTubeヘルプ

■work⑤:test.htmlのheadの部分のtitleを自分なりのタイトルに変更してみましょう。

【書き方】 <title>XBPのページ</title> 【結果】 ブラウザのタブの表示を確認してください。

cssファイルはhtmlのいろんな書式を決めておいて、それを読み込めばタグごとの書式が反映されるファイルです。
■work⑥:headの部分でcssフォルダにあるstyle.cssをスタイルシートに設定してみましょう。
headの部分に下記のように記述します。

<link rel="stylesheet" href="./css/style.css">
スタイルシートの読み込みがうまくいけば、test.htmlの背景や右側の余白が整うはずです。

【結果】 背景や右側の余白が整うはずです。

GitHubに反映させてくださいここを参考