HTMLとは？
インターネットの表示ファイル方式です。
いつも我々はインターネットブラウズするときはこのファイルをみているのです。
Hyper Text Markup Languageの略で「テキストを超越した文書」という訳なのだそう
どういうところが超越したのかといえば、画像や他の文献（リンク）を提示できたり、
文字の大きさをタグを使って指定できたりします。スパイのコードワードみたいな感じでしょう？
タグについて
ここではそんなタグについてを文字の大きさで説明します。
例えば下記のように記述した場合、文字は見出しとしての「意味」を持ち、
それに適した文字の大きさになります。
<![CDATA[
■<h1>見出し１</h1> 大見出し
■<h2>見出し2</h2> 中見出し
■<h3>見出し3</h3> 小出し
]]>
【見え方】
見出し１
見出し２
見出し２
＜出典、参考リンク＞
XBP；htmlに関して①>
編集について
Work①文字を書く
段落など、塊ごとにdivタグで括るようにして、文字を書いていく。
divはdivision（分割）の略。
<![CDATA[
<div>
マツダは神、これはゆるぎない事実。
</div>
]]>
改行はbrタグを使う。
<![CDATA[
<div>
東洋工業<br>
2002/02/24<br>
きゅきゅきゅきゅ
</div>
]]>
Work②画像の挿入
画像の表示にはimgタグを使う。（imageの略）
imgタグのsrcという属性にファイルパスを記載します。(srcはsourceの略)
width属性は幅を設定します。%で指定するとスクリーンに対して何%の幅にするかを指定できる。
【書き方】
<![CDATA[
画像を表示(30%)<br>
<img src="images/testimage.png" width="30%"><br>
画像を表示(40%)<br>
<img src="images/testimage.png" width="40%"><br>
]]>
画像を表示(30%)
画像を表示(40%)
画像サイズに関する注意
スマホやデジカメで撮影した写真は解像度が高く、サイズが大きい。
よって写真をGitHubにプッシュする場合は写真のサイズを1MB(1024KB)以下に落とさなければならない。
Macでの写真サイズの変更方法(
doyolab)
Windowsでの写真サイズの変更方法(
外部サイト)
Work③箇条書き
■work③:test.htmlに何か箇条書きをしてみましょう
番号付きの箇条書きはolタグ(ordered listの略です)
各項目はliタグで括ります（listの略です)
【書き方】
<![CDATA[
<ol>
<li>もとじーぴー</li>
<li>えふわんさんせん</li>
</ol>
]]>
【結果】
- もとじーぴ―
- えふわんさんせん
番号なしの箇条書きはulタグ(Unordered listの略)
【書き方】
<![CDATA[
<ul>
<li>たけもとぴあの</li>
<li>みんなまあるく</li>
</ul>
]]>
【結果】
Work④リンク
リンクを作りたい時はaタグを使う(Anchorの略)
href属性にリンク先を記載します(hypertext referenceの略)
target属性に_blankを設定すると新しいタブでリンクが開く。設定しないと、同じタブになる。
【書き方】
<![CDATA[
<a href="index.html">デザイン演習Ⅰ・Ⅱトップページ</a><br>
<a href="../index.html">XBPトップページ</a><br>
<a href="https://www.mazda.co.jp/" target="_blank">Mazda</a><br>
<a href="files/test.pdf" target="_blank">pdfファイル</a>
]]>
【結果】
デザイン演習Ⅰ・Ⅱトップページ→同じ階層（フォルダ）にあるindex.htmlに移動
XBPトップページ→「../」はひとつ上の階層を意味する。
Mazda→新しいタブでyahooを開く
pdfファイル→filesフォルダのtest.pdfを新しいタブで開く
外部サイトに関して
外部サイトにリンクを貼る場合は自分のサイトではないことを、明記！！！
動画に関して
動画ファイルは重いので、絶対にGitHubにプッシュしないこと。リポジトリが壊れる。
動画を表示したい場合は、動画をYouTubeにアップして、そこにリンクを貼るか、htmlに埋め込むコードを発行して、htmlファイルに貼り付けましょう。
参考：
YouTubeヘルプ
Work⑤タイトル
■work⑤:test.htmlのheadの部分のtitleを自分なりのタイトルに変更してみましょう。
【書き方】
<![CDATA[
<title>XBPのページ</title>
]]>
【結果】
ブラウザのタブの表示を確認！
デザイン演習Ⅰ・Ⅱトップページ
XBPトップページ
