LogoMark.png

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


第2回 HTML

Webデザイン演習/20212020.04.20

AGENDA


CONTENTS




HTMLサンプルの制作

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

1つのHTMLタグについて、その機能を確認するサンプルを1つ作ります。代表的なタグだけでも、20個程度あるので、それぞれ作ると、html_sample_20 ぐらいはできることになります。地味な作業ですが、後の資源になると考えて丁寧に作って下さい。

なお、第3回までは、HTML のみでサンプルを制作します。第4回目以降、CSSを加えたサンプル、さらに、第7回以降で JavaScript を加えます。画像の表示や、動画の埋め込みは次回第3回の演習テーマです。今回までは、画像や動画の埋め込みのないサンプルを作成して下さい。

作業手順の確認

サンプル作成上の留意事項

GitHub の使い方について




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>




LIST

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTML TAG Sample UL/OL/DL</title>
  </head>
  <body>
    <h1>様々なリスト表示</h1>
    <h2>UL:Unordered List</h2>
    <ul>
      <li>項目1</li>
      <li>項目2</li>
      <li>項目3</li>
    </ul>
    <h2>OL:Ordered List</h2>
         : 
         : (略)
         : 
    <h2>DL:Definition List</h2>
      <dl>
         <dt>芸術表現学科</dt>
         <dd>芸術表現学科では・・・・・・・・</dd>
         <dt>写真映像メディア学科</dt>
         <dd>写真映像メディア学科では・・・・・</dd>
         <dt>ソーシャルデザイン学科</dt>
         <dd>ソーシャルデザイン学科では、・・・・</dd>
      </dl>
  </body>
</html>


補足説明

A

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTML TAG Sample A </title>
  </head>
  <body>
    <h1>HOME</h1>
    <h2>SITE NAVIGATION</h2>
    <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="links.html">LINKS</a></li>
    </ul>
       : (以下 略)
  </body>
</html>


links.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTML TAG Sample A </title>
  </head>
  <body>
    <h1>LINKS</h1>
    <h2>SITE NAVIGATION</h2>
    <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="links.html">LINKS</a></li>
    </ul>
    <h2>関連リンク</h2>
    <ul>
      <li><a href="https://www.kyusan-u.ac.jp">九州産業大学</a></li>
      <li><a href="https://www.example.com">EXAMPLE.COM</a></li>
    </ul>
  </body>
</html>


補足説明

時間に余裕があれば、上記の様々なリンク形式をサンプル内に含めて下さい。




PRE

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTML TAG Sample P & BR</title>
  </head>
  <body>
      <pre>
         この文章は、そのままのイメージで表示されます。
         BR(改行)タグが無くても、見た目どおりに改行されます。
      </pre>
  </body>
</html>


補足説明

プログラムのソースコードなどを表示する場合、されに<code>を併用することで、素材のイメージをそのまま表示できるようになります。以下、PREタグ、CODEタグを用いて、CSSのコードを画面に表示する例です。

<pre><code>body{color:red};</code></pre>


応用演習

時間に余裕があれば、これらを使用して、HTMLコードを表示するサンプルを作成して下さい。多分、簡単にはいきません。 HTMLタグを普通に書くと、タグとして処理されてしまうので、表示できません。そこで、特殊な文字に対しては、以下のような「文字参照」表記が必要になります。

タグの < > はそのままではHTMLタグとして処理されてしまいます。
< をそのまま表示するには、&lt; と記述する必要があります。
> をそのまま表示するには、&gt; と記述する必要があります。

HTMLの中に直接書くと、タグや特殊記号として処理されて、その文字そのものが表示されないものがあります。その場合は以下のように「文字参照」を使って表示させます。

文字実体参照  表示  備考
&quot;      "      quotation mark  引用符
&amp;     &      ampersand アンド記号
&apos;     '      apostrophe アポストロフィ
&lt;        <      less-than sign 不等号(小なり)
&gt;       >      greater-than sign 不等号(大なり)
&copy     ©      copyright コピーライト
尚 &lt; という文字そのものを説明のために表示したい場合は、
&記号自体を、&amp; と表記します。
よって、以下のように記載すると表示されます。
&amp;lt;

 
以下、HTMLのコードを表示する例

<pre>
  &lt;!DOCTYPE html&gt;
  &lt;html lang="ja"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;Sample Page1&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;見出しです。本文のタイトルが記入されます。&lt;/h1&gt;
          &lt;P&gt;
             これは本文です。このページのメインとなる内容が書かれています。
          &lt;/P&gt;
      &lt;/body&gt;
  &lt;/html&gt;
</pre>




TABLE

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTML TAG Sample TABLE</title>
  </head>
  <body>
  <h1>表組み</h1>
  <table  border="1" rules="all">
      <thead>
           <tr>
                <th>商品</th>
                <th>価格</th>
           </tr>
      </thead>
      <tfoot>
           <tr>
                <td>合計金額</td>
                <td>250円</td>
           </tr>
      </tfoot>
      <tbody>
           <tr>
                <td>鉛筆</td>
                <td>150円</td>
           </tr>
           <tr>
                <td>消しゴム</td>
                <td>100円</td>
           </tr>
      </tbody>
  </table>
  </body>
</html>


補足説明

本日の成果の確認

学科サイトの氏名/WebSample のページは以下のようになるはずです。ご確認ください。

**HTML
-BasicSample:https : //JohnSmith.github.io/html_sample_01/
-TAG P:https : //JohnSmith.github.io/html_sample_02/
-TAG H:https : //JohnSmith.github.io/html_sample_03/
-TAG LIST:https : //JohnSmith.github.io/html_sample_04/
-TAG A:https : //JohnSmith.github.io/html_sample_05/
-TAG PRE:https : //JohnSmith.github.io/html_sample_06/
-TAG TABLE:https : //JohnSmith.github.io/html_sample_07/
~





以上で、本日の授業は終了です。お疲れさまでした。