HTML演習：ホームページをつくる

■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/test/testimage.png" width="30%"><br> 画像を表示(40%)<br> <img src="./images/test/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"> 【結果】 背景や右側の余白が整うはずです。

次回授業までの宿題
■1.htmlというファイルを作ってください（test.htmlをコピーすると簡単です。)
■1.htmlに一回目の授業のポイントを画像やリンクなどを交えて、自分なりにできるだけ詳細&良いデザインでまとめてください。
（やったことは必ず忘れるので、自分で見返してわかるように）
■de12フォルダの直下にあるindex.htmlの演習ノートの下に番号なし箇条書きで、「第1回」と記述し、1.htmlにリンクさせてください。
イメージはこのような感じです。

■GitHubにプッシュしてください。
■余裕のある人は、インターネットなどを調べてデザインを自分なりのものに変更してみてください。
ただし、みなさんの課題を見つけられなくなるので、デザイン演習Ⅰ・Ⅱのトップページは今回の宿題のような箇条書きで各回のページに飛ぶようにしてください。
皆さんのまとめたものを見つけられないと成績をつけられません。