LogoMark.png

Webデザイン演習/2021/0420 のバックアップ(No.2)


第2回 HTML

Webデザイン演習/20212020.04.28

第2回目の展開と要件

HTMLサンプルの制作

前回の html_sample_01 は、HTMLの基本構造そのものでしたが、以降、HTMLの様々なタグの機能を理解するための、小さなサンプルを作っていきます。

1つのHTMLタグについて、その機能を確認するサンプルを1つ作ります。代表的なタグだけでも、20個程度あるので、それぞれ作ると、html_sample_20 ぐらいはできることになります。

演習:P と BR

以下事例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTML TAG Sample P & BR</title>
  </head>
  <body>
    <h1>PとBR(改行の違い)</h1>
    <h2>brなし</h2>
    <P>
      本文|適当に文章を書いて下さい。
      本文|適当に文章を書いて下さい。
    </P>
    <h2>brあり</h2>
    <P>
      本文|適当に文章を書いて下さい。<br>
      本文|適当に文章を書いて下さい。<br>
    </P>
  </body>
</html>


演習:H1-H6

以下事例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTML TAG Sample H1 - H6</title>
  </head>
  <body>
    <h1>H1</h1>
    <h2>H2</h2>
    <h3>H3</h3>
    <h4>H4</h4>
    <h5>H5</h5>
    <h6>H6</h6>
  </body>
</html>