ウェブページの作成

POV-Ray 自由制作課題の作品紹介用ウェブページを作成しながら，ウェブページ記述用の言語である HTML（hypertext markup language）と CSS（cascading style sheets）について学習しよう．

HTML は主に，ウェブページの全体構成と文書内容（コンテンツ）の記述に利用．

CSS は主に，ウェブページの外観意匠（レイアウト，デコレーション，等）の記述に利用．

作業方法

作業用ディレクトリ： POV-Ray 自由制作で使ったディレクトリを再利用．
または，新規のディレクトリで作業する場合，自由制作の成果物（動画，代表画像，シーンファイル）をそこにコピーしておく．
ダウンロード：
- index.html - HTMLのサンプル
- style.css - CSSのサンプル
ウェブページの編集：サンプルを改造し，各自の作品紹介用ウェブページを作成しよう．
簡素すぎるサンプルそのままの構成（文章や色等を変えるカスタマイズ程度）ではNG．参考資料等を利用して学習し，独自の発想を込めて大幅に改造・工夫すること!!
```
$ gedit index.html &
$ gedit style.css &
```
それぞれ，編集したら「保存」．
ウェブページをブラウザで表示：
- Linux 環境に Firefox を導入済みの場合：
```
$ firefox index.html &
```
- その他の場合，Chrome 等のブラウザで「ファイル→開く」等．
同じページを編集後に再表示したい場合，ブラウザで「再読み込み ↻」．

基礎知識

ウェブページ用語の超まとめ解説：
- HTML：ウェブページの内容を記述するための言語
  - HTMLコンテンツの構成：
```
要素 要素 ...
要素 ...
...
```
  - HTML要素の書式：
```
<タグ 属性=値 属性=値 ...>コンテンツ</タグ>
<タグ 属性=値 ...>コンテンツ
<タグ ...>
```
  - HTMLの具体例： menu.html
```
<h1>おしながき</h1>
<ul id="MENU">
	<li class="food">ハンバーガー
	<li class="food">サンドイッチ
	<li class="drink">コーヒー
	<li class="drink">紅茶
</ul>
<hr>
<footer>高専珈琲</footer>
```
- CSS：ウェブページの意匠を記述するための言語
  - CSSの構成：
```
セレクタ { プロパティ: 値; プロパティ: 値; ... }
セレクタ { プロパティ: 値; ... }
...
```
  - セレクタの書式：
```
タグ
.クラス
#識別名
...
```
  - CSSの具体例： menu.css
```
#MENU { background-color: pink; font-weight: bold; }
.food { color: black; }
.drink { color: brown; }
footer { text-align: right; }
```
  - CSSの適用例：menu2.html
ちなみに...
- HTMLの「属性」の英語名は「attribute（アトリビュート）」です．
- CSS の「プロパティ（property）」の日本語名も「属性」です．
紛らわしいぞ．
なお，CSS プロパティは，HTML タグの style 属性としても記述できます．例えば「<li style="color: red;">」のように．つまり，アトリビュートの属性がプロパティと云うことですね．さらに紛らわしく... :-)

HTMLファイルの基本構成

<!doctype html>		# このファイルはHTML5ですよー（必ず，ファイルの先頭，一行目，一文字目に記述すべし）
<html lang="ja">	# コンテンツは日本語ですよー
	<head>			# ウェブページのメタ情報
		<meta charset="UTF-8">		# 文字コードはUTF-8ですよー（ファイル保存時に矛盾あると文字化け...）
		<link rel="stylesheet" href="スタイルシート.css">
		<title>文書タイトル</title>	# 文書の検索・管理用のタイトル（書籍の背表紙的な）
		...
	</head>

	<body>			# ウェブページの内容
		<header>サイト名等</header>		# ページヘッダ
		<h1>表題</h1>		# 文書の表示用のタイトル

		...			# 本文・画像・等

		<footer>著者名等</footer>		# ページフッタ
	</body>
</html>

上記では，ファイル構成の見通し良く示すため，インデント（字下げ）している．しかし，実際の編集作業の際には，インデントは不要．

大抵のウェブブラウザでは，寛容性があり，根幹的な部分以外の HTML タグについては，省略したり誤用しても大体よろしく表示してくれます．やさしい． ...しかし，技術者的には，そこに甘えることなく，正当な HTML を記述したいですね．

参考資料

教科書：とほほのWWW入門
- Webページ作成入門：HTMLの基本事項について理解しよう．
  この教科書は，Windows環境を前提としている． Linux環境では適宜，読み替えが必要．
  
  「ホームページを公開しよう」の部分は本科目では無視．
- 逆引きリファレンス：How-to．
- HTMLリファレンス：HTMLの辞書として活用．
  - HTML概要：HTMLについてより詳しく知ろう．
- CSSリファレンス：CSSの辞書として活用．
  - CSS入門：ウェブページの見栄えを整えよう．
- とほほの色入門・色見本：色名の一覧など．
  「とほほ」では紹介ありませんが，背景色として linear-gradient()でグラデーションも使えます．

本日の課題

POV-Ray 自由制作の作品紹介用ウェブページ（HTMLファイルおよび CSSファイル）を作成せよ．

簡素すぎるサンプルそのままの構成（文章や色等を変える程度）ではNG．独自の発想を込めて大幅に改造・工夫すること!!

担当教員へレポートを送信せよ：

To：yanagawa@kushiro-ct.ac.jp
Subject：ap-0627
本文：
- 独自の改造・工夫事項の説明
  CG作品についてではなく，ウェブページについての説明ですよ．
- HTML・CSSの記述経験の有／無
- （感想）
添付：
- index.html
- style.css
動画・画像ファイルについては，すでにap-povとして提出済みなので今回は不要．（もし，作成し直した場合，ap-povの提出方法と同様に， PNGはメール添付，GIFはTeams投稿．）
提出期限：07月04日（金）17:00