LogoMark.png

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


#author("2021-04-19T18:47:55+09:00;2021-04-12T17:50:54+09:00","default:inoue.ko","inoue.ko")
#author("2021-04-20T15:40:14+09:00","default:inoue.ko","inoue.ko")
*第2回 HTML
[[Webデザイン演習/2021]]|''2020.04.20''
~

***AGENDA
-以下名簿が表示されます。出欠確認・座席記録をお願いします。
&fontawesome(far fa-hand-point-right); [[出欠確認・座席記録>https://docs.google.com/spreadsheets/d/1ScHlDi6BIENwpzkQrhjeudhcu1uQT2feJJfFvBeu0B8/edit?usp=sharing]] &color(red){当日中にチェックして下さい。};
-授業の進行
--対面参加の方:解説を聞いて下さい。
--遠隔参加の方:このページを読んで下さい。
-HTMLのサンプルを作成し、成果物を学科サイトにリンク掲載して下さい。
&fontawesome(far fa-hand-point-right); [[ソーシャルデザイン学科>Webデザイン演習>https://design.kyusan-u.ac.jp/socialdesign/?Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92]]

~

***CONTENTS
#contents2_1
~
~

**HTMLサンプルの制作

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

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

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

***作業手順の確認

-1. HTMLサンプルを作成する
手元にフォルダを作成して、各フォルダごとに index.html を投入する形でサンプルを作成
手元にフォルダを作成して、''各フォルダごとに index.html'' を投入する形でサンプルを作成
--html_sample_02:P と BR
--html_sample_03:H1-H6
--html_sample_04:LIST(ul, ol, dl の3種類のサンプル)
--html_sample_05:Aタグによる外部リンクと内部リンクの動作確認
&small(index.html と links.html 他2つ以上のファイルを作って、相互に行き来できるように);
--html_sample_06:PREタグによる整形済みテキストの表示
&small(HTMLのソースコード自体の表示に挑戦して下さい);
--html_sample_07:TABLE タグによる表組み

-2. GitHub にアップして公開
手元のファイルとブラウザで十分動作確認をした後・・
手元のファイルをブラウザで動作確認した後・・
--GitHub にそれぞれリポジトリを作成してファイルをアップ。
--各リポジトリを GitHubPages として公開アドレスを取得。

-3. 学科サイトの各自のページで成果を公開
--各自の WebSample のページから閲覧できるようにリンク掲載。
~

***サンプル作成上の留意事項
-これが「何のサンプルなのか」がわかるよう、HAED内 の TITLEタグ、またBODY内の H1タグを使って見出しを記載して下さい。
-サンプルは今後のWebプロジェクトでの再利用を前提としています。各タグの役割をシンプルに実現したサンプルにして下さい。
-同じタグで複数の活用方法がある場合は、それらの事例を H2 タグで見出しをつけつつ列挙して下さい。
-''サンプルのHTML構造にエラーがないか確認して下さい(重要)''
--Firefoxでページを開いて、右クリック>ソースを表示
--タグが赤字で表示されている場合は、ソースの構造に問題があります。開始タグと終了タグの関係が正しく記載されているか確認して下さい。 
-ソースコード上のインデント(字下げ)は非常に重要です。
TABによる字下げではなく、半角2スペースを推奨します。
-しつこいようですが、Webサイトには ''index.html'' が必要です。
--home.html, top.html, index2.html などの名称は推奨できません。
~

***GitHub の使い方について
-GitHub を使う本来の目的は、リモートリポジトリ上のマスターデータを共同編集することにあります。GitHub上のデータがマスターで、手元のファイルはクローンに過ぎない・・とするのが本来の使い方ですが、初心者のうちは、とりあえず、「手元でhtmlファイルを作成>アップロード>公開」というイメージでご利用ください。
-回が進んで、GitHubに慣れたところで、GitHub上のデータと、手元のローカルを連動させる方法を紹介しますが、はじめのうちは、編集作業は、手元のPC上で ATOM 等のエディタを使って行い、これを GitHubにアップする・・という方法で進めて下さい。
-もちろん、GitHub上でソースを直接編集することも可能なので、
 GitHub上で編集・更新 > これを手元にダウンロードして予備として保管
という作業方法でも構いません。

~
~

**P と BR
-<p>:段落と BR による改行の違いを確認するサンプルを作成
-フォルダ html_sample_02 に index.html 1つを入れるかたちで作成
-GitHub に、html_sample_02 というリポジトリを作ります。
-フォルダの中身(つまりindex.html)をアップして下さい。
-GitHubページとして公開して下さい。
-学科サイトの WebSample のページで、リンク公開して下さい。

''以下事例''
 <!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
-見出し <h1> - <h6> の違いを確認するサンプルを作成
-フォルダ html_sample_03 に index.html 1つを入れるかたちで作成
-GitHub に、html_sample_03 というリポジトリを作ります。
-フォルダの中身(つまりindex.html)をアップして下さい。
-GitHubページとして公開して下さい。
-学科サイトの WebSample のページで、リンク公開して下さい。

''以下事例''
 <!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
-UL/OL/DL 3種類のリスト表示を確認するサンプルを作成して下さい。
-''html_sample_04'' フォルダ内に、index.html を作成して下さい。
-GitHub 上に、リポジトリ ''html_sample_04'' を作成して、index.html をアップして下さい。
- ''html_sample_04''  をGitHubPages として公開して下さい。
-学科サイトの WebSample のページで、リンク公開して下さい。
~

***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>
~

***補足説明
-ul:番号なし箇条書きリスト
-ol:番号つき箇条書きリスト
--li:箇条書き項目(単体では使わず、必ず ul か ol の中で使います)
-dl : description list(説明リストのフレーム)
--dt : description term(説明される言葉:単語)
--dd : description, definition(説明、定義:文章)
~
~

**A
-Aタグによる、外部リンク、内部リンクのサンプルを作成して下さい。
 <a href="リンク先" target="リンクを開くウインドウ">文字列等</a>
尚、内部リンクの動作を確認するには、サイトフォルダ内に2つ以上のHTMLファイルが必要です。
-''html_sample_05 フォルダ内に、index.html と links.html 他、2つ以上のHTMLファイルを作成して下さい。''
-GitHub 上に、リポジトリ ''html_sample_05'' を作成して、HTMLファイルをアップして下さい。
- ''html_sample_05''  をGitHubPages として公開して下さい。
-学科サイトの WebSample のページで、リンク公開して下さい。
~

***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>
~

***補足説明
-href属性には以下のような設定ができます
--外部リンク href = "http://www.kyusan-u.ac.jp"
--内部リンク(同一サイト内の他のファイル) href = "gallery.html"
--ダウンロードリンク href = "sample.zip"
ブラウザで表示できないファイルは、ダウンロードの対象になります。
 <a href="sample.zip">DOWNLOAD</a>
--メールの宛先を指定してメールソフトを起動 href = "mailto:xxx@xxx.xx"
--ページ内のアンカーへのリンク href = "#ID名" → <p id = "ID名">
-target属性には以下のものがあります
--_self:自分自身のウィンドウを上書きして表示します(デフォルト)。
--_blank:新規のウィンドウを開いて、そこに表示します。

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

~
~



**PRE
-PREタグを用いて、整形済みテキストを表示するサンプルを作成して下さい。
 <pre>
   この文章は、そのままのイメージで表示されます。
   BR(改行)タグが無くても、見た目どおりに改行されます。
 </pre>
-''html_sample_06'' フォルダ内に、index.html を作成して下さい。
-GitHub 上に、リポジトリ ''html_sample_06'' を作成して、index.html ををアップして下さい。
- ''html_sample_06''  をGitHubPages として公開して下さい。
-学科サイトの WebSample のページで、リンク公開して下さい。
~

***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>
~

***補足説明
-PREタグは、半角スペースや改行をそのまま表示する際に使用します。
-これは、今後のサンプル作りで必要になる技術で、とても重要です。

プログラムのソースコードなどを表示する場合、されに<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
-TABLEタグを用いて、表を表示するサンプルを作成して下さい。
-tableタグは全体、trタグは行、tdタグは列。組み合わせて使用します。
 <table>
     <tr>
         <td>データ</td>
         <td>データ</td>
     </tr>
 </table>
-''html_sample_07'' フォルダ内に、index.html を作成して下さい。
-GitHub 上に、リポジトリ ''html_sample_07'' を作成して、index.html ををアップして下さい。
- ''html_sample_07''  をGitHubPages として公開して下さい。
-学科サイトの WebSample のページで、リンク公開して下さい。
~

***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>
~

***補足説明
-セルの横方向の結合は、以下のように colspan を追記します。
表の1行目では、横3つのセルが1つのセルに結合表示されます。
 <table  border="1" rules="all">
   <tr>
     <td colspan="3">一覧</td>
   </tr>
   <tr>
     <td>A</td>
     <td>B</td>
     <td>C</td>
   </tr>
 </table>

-セルの縦方向の結合は、同様に以下のような書き方になります。
表の1列目では、縦3つのセルが1つに結合表示されます。
 <table  border="1" rules="all">
   <tr>
     <td rowspan="3">一覧</td>
     <td>A</td>
   </tr>
   <tr>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
   </tr>
 </table>

-HTML5では、border属性の指定は空文字か「1」の指定だけが使用を認められています。見た目に関することは原則としてCSSで記述するのが現在の標準的な考え方なので、ここでは罫線その他の表現には触れないのが賢明です。
~
~


**本日の成果の確認
学科サイトの[[氏名/WebSample>https://design.kyusan-u.ac.jp/socialdesign/?Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92]] のページは以下のようになるはずです。ご確認ください。

 **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/
 ~
~
~

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