つづき_第３回授業日記

日があいてしまいましたが、みなさんこんにちは。第３回授業日記の続きです。

みなさんに考えてもらった「情報のかたち」をひとつひとつ板書していき、DMに掲載されているすべての情報に「かたち」を与え、省略されている見出しは適当な語句で補いました。
それから新規のHTMLファイルを作成し、DMの情報を入力してブラウザで表示させると、文字の大ききさや改行、スペースなどは全くなく、ただの文字の羅列のように表示され非常に読みにくいページになってしまいました。
そこで、さきほどの「情報のかたち」をもとにそれぞれの情報に「タグ」と呼ばれる印をつけていきました。タグには、タイトルを表すh1,h2,h3...（数字が大きいほど小さな見出しになる）、段落を表すp、リストを表すulやli、改行を表すbrなどがありました。
みんなほとんどHTMLについて学んでいませんが、わたしがテキストエディタでタイピングしている様子を見てもらったことで、タグとはどういうものでどういう規則性があるのかなどは何となくわかってもらえたのではないでしょうか。
そうしてできたHTMLファイルをブラウザで表示すると、簡素ではあるけれどはじめに見たような読みづらいものではなく、見出しは見出しとして、文章は文章として全体を把握しやすく文章も読みやすいページになりました。
それは「情報のかたち」に応じて正しく印をつけられたからです。
この「情報のかたち」に従って印をつけるという行為こそが、HTMLのM（＝markup）とL（＝language）にあたります。

次に、よりDMのビジュアルデザインに近づけるために、スタイルシートファイルを作成しました。例の、HTMLファイルにかけるおまじないの準備です。
さて具体的にどのようにおまじないをかけてゆくのか。これもまたわたしのタイピングしている様子を見てもらいながら説明していきましたが、HTMLとは少し書き方が違うことや、拡張子は「.css」であること、内容はだいたい英語がベースになっていることなどはわかってもらえたでしょうか。
このあたりで時間が残り少なくなってきてしまいましたが（最終的にはおまじないの説明は端折りながら）ほぼDMの見た目に近づいたページを見てもらうことができました。
授業サイトでこのとき作成したHTMLファイルとスタイルシートファイルを公開していますので、内容を確認してください。

第３回授業の後半では、目には見えない「情報のかたち」について考えました。
いつも無意識に判断している多くの事柄に目を向けたり、情報のかたちというものを具体的に洗い出してみたりする行為はなかなか新鮮だったのではないでしょうか。みなさんに向かって話していて「あぁなるほど、」というような表情も多く見受けられました。
それにしても、２コマはあっという間ですね。もうすこし授業時間があれば、といつも思います。

さて、これからいよいよHTMLとスタイルシートを具体的に学んでゆくわけですが、次の授業のあたまでは、今回課題に出した「ウェブをつくるひとたち」について確認する予定です。それぞれのひとは何を専門にしてどういう行程でウェブサイトを構築してゆくのかというところを俯瞰し、この授業を通してできるようになることやこれから自分が更に力をつけていきたいと思う分野などについて再確認したいと思います。

それではまた、２５日のお昼に！