LogoMark.png

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


#author("2021-04-10T18:10:54+09:00","default:inoue.ko","inoue.ko")
*第2回 HTML
[[Webデザイン演習/2021]]|''2020.04.28''
~

***第2回目の展開と要件
-以下名簿が表示されます。出欠確認・座席記録をお願いします。
&fontawesome(far fa-hand-point-right); [[出欠確認・座席記録>https://docs.google.com/spreadsheets/d/1ScHlDi6BIENwpzkQrhjeudhcu1uQT2feJJfFvBeu0B8/edit?usp=sharing]]
-授業の進行
--対面参加の方:解説を聞いて下さい。
--遠隔参加の方:このページを読んで下さい。
-学習環境が整ったら、説明のフォーマットに従って、順に作業を進めて下さい。本日のみなさんの成果は、以下で確認できるようになります。
&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]]
~





**HTML

もういちど、先輩のページを参考にして下さい。
-https://design.kyusan-u.ac.jp/socialdesign/?%E7%8C%AA%E6%9C%AC%E7%B5%90%E8%A1%A3/WebSample
-https://design.kyusan-u.ac.jp/socialdesign/?%E6%B7%B1%E6%B1%9F%E6%B2%99%E7%BE%85/WebSample
-https://design.kyusan-u.ac.jp/socialdesign/?%E5%B1%B1%E5%8F%A3%E4%BD%B3%E5%A5%88/WebSample
~

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

-1つのHTMLタグについて、その機能を確認するサンプルを1つ作ります。代表的なタグだけでも、20個程度あるので、それぞれ作ると、html_sample_20 ぐらいはできることになります。それは次回以降ということで、&color(red){''本日は初回なので、以下の2つまで確認していただければOKです。''};

~

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

''以下事例''
 <!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ページとして公開して下さい。

''以下事例''
 <!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>
~
~