第2回：9月29日
HTML(1)
マークアップの基礎

今回の内容
  • HTMLの記述ルール
  • イベント告知ページの作成
1. 小テスト 2. HTML 3. HTMLの記述ルール 4. 課題：イベントの告知ページの作成

1｜小テスト

前回までの理解度の確認のため、小テストを行います。各自で資料等は見ずに5分程度で行う想定です。各自で取り組んでください。

この授業の出席は課題の提出をもって確認します。毎回のレポート課題のほか、この小テストを必ずやっておくようにしてください。



作業
  • 小テスト

2｜HTML

前回の課題では、初めてのHTML文書作成を行いました。テキストエディタの利用やファイルの保存、それをブラウザで表示する方法は必ずマスターしておきましょう。


確認
  • 前回の課題の手順はマスターできていますか？

参考：Webプログラミング2023｜第1回


今回と次回の演習では、HTML文書のマークアップ方法を学んでいきます。

文書の論理構造と見た目

HTMLでマークアップを行うのは、文書の論理構造です。論理構造とは文書の章立てなどといった構造のことで、見出しや段落などを組み合わせて成り立っています。

われわれ人間が文書を目にすれば、書いてある内容からはもちろん、レイアウトや文字の書式などによって、どれがタイトルでどこからどこまでが 1 セクションなのか、作成者の署名はどれかといったことを判断することができます。 しかし、コンピュータにとっては文書といえどもデータの塊にすぎず、内容を理解することもできなければ、どの部分が何をあらわしていると解釈するべきなのかも判断できません。

そこで、コンピュータにも処理しやすいように、文書に一定のルールにもとづいた目印をつけようという発想が出てきました。 これがマークアップという考え方であり、HTML はマークアップのための言語のひとつです。


Web ブラウザは HTML のルールにもとづいてページの内容を解釈し、その意味に応じたレンダリングを施してわれわれに表示します。

一般的に見出しは大きく表示され、特に大見出しから小見出しへとサイズが変化することで文書の構造の見通しがよくなりますが、こうした見た目の具体的なことは、特段に指定しない場合、Webブラウザに処理が任されてそれらしく表示されています。 Web文書の見た目を制御するCSSという技術は、この見た目を指定するために用いられます。CSSについては第4回以降に学びます。そのため今回と次回作成する文書の見た目は質素なものになります。

HTMLとCSSという異なる技術を用いることによって、文書の内容と見た目の制御を分けて扱うことができます。論理構造と見た目を分割することによって、文書そのものを作成する際には内容に注力することができますし、同じ役割を持つ部品（見出しなど）を統一的な見た目にすることも行いやすくなります。

3｜HTMLの記述ルール

前回書き写したHTML文書を改めて見てみましょう。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>はじめの一歩</title>
  </head>
  <body>
    <h1>はじめてのHTML</h1>
    <p>こんにちは世界</p>
  </body>
</html>

HTML文書は、不等号記号（'<'、'>'）を用いた命令と、実際の文章の組み合わせによって成り立っています。これらの命令の記述方法は、他の講義で扱ったXML形式によく似ています。（ただし少し異なる点もあります。）

要素とタグ

HTMLでは、見出しや段落、署名といった文書を構成する部品のことを「要素」と呼びます。 また、これらの要素をコンピュータが理解できるように埋め込む記号のことを「タグ」と呼びます。

タグは不等号記号（'<'、'>'）で要素名をはさんだもので、通常、以下のように開始タグと終了タグ（要素名の前に半角スラッシュをつける）をペアで使用します。 見出しや段落のテキストといった「内容」を挟むことで、どの範囲が何の要素なのかを明示することができます。


<要素名>内容</要素名>

例えば以下は、「はじめてのHTML」という内容のh1要素を表します。h1は後述しますが、大見出しに相当する要素です。


<h1>はじめてのHTML</h1>

ただし、要素によっては内容をともなわず開始タグのみを単独で使用するものもあり、こういった要素は「空要素」と呼ばれます。（空要素の記述方法がXMLとは少し異なっていますが、歴史的経緯からXMLのように<要素名 />と書くこともできます。）

属性

文書中で表示する画像ファイルのアドレスやリンク先のアドレスなど、要素に何らかの付加情報を与えたい場合があります。このような付加情報は「属性」として開始タグに記述します。 属性は要素名の後に半角スペースで区切って複数指定することができます。 ただし、どの要素にどのような属性が指定できるかは仕様で定められているので、必要に応じて確認してください。


<要素名 属性名="値">内容</要素名>

先の例では、以下の要素が相当します。このmeta要素は内容を持たない空要素で、「charset」という属性に「UTF-8」という値を指定しています。これらの意味は後述します。


<meta charset="UTF-8">

要素の入れ子構造

要素の内容には、他の要素を含むことができます。

例えば、サンプルのHTML文書の以下の部分は、bodyという要素の中に、h1要素とp要素を内容として持っています。


  <body>
    <h1>はじめてのHTML</h1>
    <p>こんにちは世界</p>
  </body>

また文書全体を考えてみると、最初の1行は後述するのでちょっと無視をすると、全体がhtmlというひとつの要素となっており、その中にhead要素とbody要素があることがわかります。

HTML文書を作成するには、様々な要素を組み合わせて記述しますが、この際にどの要素の中にどの要素が含まれているかを考えて適切に記述することが大切です。

空白とインデント、コメント

HTML文書は、要素と内容がWebブラウザに解釈されて表示されます。この際、空白文字（半角スペースやタブ、改行）は影響しません。逆に言えば、HTMLのソースが見やすいように、要素の区切りや入れ子の構造に合わせて、自由に改行したりインデント（字下げ）をすることができます。

サンプルのように要素の入れ子が1階層深まるごとに一定の高さの字下げをするのが、HTMLの構造を把握しやすくするコツです。テキストエディタの機能として、HTMLの要素を色付けしたり、階層に応じて自動でインデントしてくれる機能が備わっている場合がありますので、使いこなすと便利です。


また、<!--から-->までで囲まれた部分は、HTMLにおけるコメントとして扱われ、Webブラウザには表示されません。

必要最低限のHTML文書記述のルール

ここまでHTMLを記述する際の文法として必要なルールを紹介してきましたが、ここからは実際に文書を作成する際に必要となる記述のルールを説明していきます。

前回の課題のサンプルを再び確認してください。1行目には以下の記述があります。


<!DOCTYPE html>

これは、この文書がHTML文書であることをブラウザに指示しています。この授業で扱う範囲では、お約束としてHTML文書の最初の1行にはこれを書くものだと覚えてしまって構いません。

サンプルを見ると次に、2行目からhtml要素が始まり、その中にhead要素とbody要素が1つずつ含まれていることがわかります。HTML文書は、必ず1つのhtml要素からなり、その中にhead要素とbody要素を1つずつ持ちます。


head要素には、この文書に関する情報を記述します。サンプルには、meta要素とtitle要素が含まれています。

meta要素はこの文書のメタ情報（文書に関する情報）を記述する要素で、文書を記述している文字コードがUTF-8であることを示しています。日本語の文書を作成する際には、その日本語文字列がどの文字コードで保存されているかを指示しておかないと、場合によって文字化けが起こることがあります。従ってこの指定も行うようにしましょう。

ただし、meta要素のcharset属性に指定した文字コードが、実際にそのHTMLを記述した文字コードと異なっていると、やはり文字化けが起こってしまいます。今日では多くの場合、サンプルのようにUTF-8を用いるのがよいでしょう。従って、HTML文書を作成、編集する際には、そのファイルをUTF-8で保存するように注意をする必要があります。

title要素は、HTML文書のタイトルを表します。前回の課題でみなさんが確認した通り、HTML文書のタイトルは、例えばSafariであれば表示するタブにタイトルが表示されたり、ブックマークに追加する際にページ名として用いられたりします。内容を適切に表すタイトルをつけることが大切です。


body要素には、実際のWebブラウザの表示エリアに描画されるコンテンツを記述します。

よく使われる要素(1)

bodyの記述によく用いる要素をいくつか紹介します。今回は特に代表的なものを取り上げ、使い方に追加の説明が必要なものは次回扱います。

見出し： h1 〜 h6 要素

ある程度の内容が含まれる文書では、通常、本文のまとまりごとに見出しがつけられます。さらにその場合、文章の構造に応じて、大見出し、中見出し、小見出しのように階層的な見出しをつけていくことが多くあります。 HTMLにはこのような階層的な見出しを表現するための hn要素（heading の頭文字）が用意されており、n の部分に 1 〜 6 までの数字をあてて 6 段階の見出しをつけることができるようになっています。 h1 がもっとも上位の見出しで、数字の昇順に見出しが細分化されていきます。

下位の見出しは上位の見出しの子要素ではないことに注意してください。意味的には階層構造となっていますが、W3C 勧告では h1 〜 h6 はすべて同じ階層であると定義されています。

段落： p 要素

もっとも基本的な要素で、段落を示します。p は paragraph の頭文字です。

アンカー： a 要素

WWW のもっとも大きな特徴は、文書のある部分にそれと関連した別のリソースの位置情報が埋め込まれ、閲覧者が別のリソースに簡単にアクセスできるようになっていることです。この位置情報のことをハイパーリンクと呼び、ハイパーリンクによって複数のリソースを関連づけたシステムをハイパーテキストと呼びます。 HTML では、ハイパーリンクの始点を a 要素（anchor の頭文字）と a 要素の href 属性（hyper reference の略）で表現します。 ハイパーリンクを設定したい部分を a タグで囲い、href 属性にリンク先のリソースの URI を指定します。


<a href="http://www.ne.senshu-u.ac.jp/">専修大学ネットワーク情報学部ローカルコミュニティ</a>

なお、リンク先のリソースは HTML 文書でなくても、静止画でも動画でも音楽でも任意のものを指定することができます。

画像： img 要素

HTML では、ハイパーリンクによって文書に画像を関連づけるほかに、本文中に画像を表示する方法が定められています。 画像を表示するには、img 要素（image の略）と img 要素の src 属性（source の略）を利用します。 画像を表示したい場所に img タグを記述し、src 属性にリソースの URI を指定します。


専修大学ロゴ

<img src="./senshulogo.png" alt="専修大学ロゴ">
代替テキストの指定

img 要素には src 属性のほかに、必ず指定しなくてはならない属性として alt 属性（alternative の略）があります。 alt 属性は、その名前が示すとおり代替テキストを指定する属性であり、何らかの理由で画像が表示できない場合に代わりに表示するテキストを指定するものです。

ただし alt 属性に記述する内容はよく考える必要があります。 代替テキストは、画像と等価な情報を伝えるテキストにするべきです。 しかしこのサンプルで用いているロゴの画像のように、画像それ自体にそれほど重要な意味がない場合には、alt 属性の内容はむしろ空にしておいたほうがよいという議論もあります。

改行： br 要素

先述のように、HTML では物理的な改行は無視されます。 そこで、何らかの理由でテキストの途中で強制的に改行したい場合には、br 要素（break の略）を利用します。 


<p>
•••<br>
••••••

</p>

水平線： hr 要素

意味的に大きな区切りがある場合など、文書中に区切り線を引く必要がある場合には、hr 要素（horizontal rule の頭文字）を利用します。


<hr>

4｜課題：告知ページの作成

Webは意味のある「情報」が命

正しくマークアップすることは大事ですが、内容がともなわなければ意味がありません。

みなさんがWebサイトを見るとき、サイトのビジュアルを見ることが目的ではなく、ソースコードを見に来るわけでもないことは経験しているでしょう。

大事なことは、新鮮な「情報」そのものです。そこで、ここからは内容と合わせながらページをマークアップしてみよう。

期間限定カフェ企画

カフェとは元々はコーヒーを主として提供する飲食店ですが、今日では様々なコンセプトや企画を伴った多岐にわたるカフェがあります。常設的なコンセプトカフェに加え、既存店が期間を区切って企画を展開したり、そもそもお店自体を期間限定で出店したり、多様な形態の「カフェ」が展開されています。

あなたは、スポンサーから十分な資金を得てカフェを開けることになったとします。さてあなたは、いつ、どこで、どんなカフェを開くでしょうか？　そのカフェの告知用サイトをつくってください。架空のものでかまいませんが、普通の大衆食堂やカフェではなく、ターゲットとなるお客さんがちゃんと来てくれるような魅力的な企画を考えてみましょう。

 

告知用として、

の情報を考え、それを説明するWebページを作成してください。


この課題は2週に渡ります。次週、より複雑な要素（表や箇条書き）を学び、それらを利用して最終的に完成させます。毎回の作業状況を別名で保存するため、今日の作業はwork02_1.htmlという名前のファイルに作成しましょう。今回は今週の内容の要素を用いて文書を作成し始め、次週までにどんな内容のカフェにするかを考えていってください。

ページで利用する写真やイラストなどの画像については、自分で用意したもののほか、フリー素材であれば用いて構いません。 ただし利用した自作ではない画像については、レポートに出典を記載してください。 今週の時点では画像は仮画像で構いません。また文字色や文字サイズなどの見た目の装飾は今後の授業でCSSを使って行なうので、現段階で気にする必要はありません。

時間内に作成できたところまでのHTMLソースファイルと、それをブラウザで表示したスクリーンショットをレポートにまとめ、時間内に提出してください。

次週はこの続きを行いますが、前もってカフェの企画を考えて、使いたい画像などを用意しておいてください。



課題
  • カフェの告知をするWebページをできるところまで作成する
  • 期限内にできたところまでをレポートにまとめ提出（10/4(水)23:59まで）
  • 企画内容やコンテンツ、画像等を次週に向けて考え、準備しておく

課題について確認
  • 課題のソースコードは、エディタ画面のスクリーンショットではなく、本文にテキストで、等幅フォントで記述してください。
    • VSCodeからコピペすると、書式ごとコピーされるため、初期状態では黒背景になります。いいといえばいいですが、気持ち悪いので変えましょう。以下のいずれかの方法で対応してください：
      • レポート上で自分で等幅フォントに設定する方法。VSCode上で「設定」→「テキストエディター」→「Copy With Syntax Highlighting」のチェックをオフにしておくと、書式なしでコピーされるようになります。
      • VSCodeの設定はそのままで、Googleドキュメントに貼り付け後、自分で背景色をクリアする方法。Googleドキュメントのメニューの「表示形式」から「段落スタイル」→「枠線と網かけ」を選び、この中で「背景色」を「なし」に設定してください。