■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>

画像を表示(30%)

画像を表示(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ファイルに貼り付けましょう。
参考：YouTubeヘルプ

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

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

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

h1.htmlからある行をコピペしてくればOKです

スタイルシートの読み込みがうまくいけば、test.htmlの背景や右側の余白が整うはずです。

<link rel="stylesheet" href="css/style.css"> 【結果】 背景や右側の余白が整うはずです。

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