生物情報リテラシー中部大学2025年春期

ウェブページの作成3

HTML作成の復習

下記に提示するページを作成する方法を復習する。フレーム内をコピーしてatomに貼り付け、report14.htmlとして保存する。

atomのメニューの「表示」-「自動折り返しの切替」を実行するとウィンドウ内でテキストが折り返される。

HTMLにする

文章全体を<html>タグでくくる。閉じるほうは</html>であることに注意する(以後この注意は書かない)。
画面に表示したい部分を body タグでくくる。
先頭に <!DOCTYPE HTML>と入力する(途中で改行しないで一行で書く)。これはここまでの講義で扱っていないが、HTMLファイルの先頭にはいれておいたほうがよい。

見出しを設定する

先頭の「食品化学基礎実験」を h1 タグでくくる。
「第4日鉄の定量」を h2 タグでくくる。
目的、材料と方法、実験結果、考察のそれぞれの見出しを h3 タグでくくる。
材料の中の見出しを h4 タグでくくる。

箇条書きを設定する

実験方法のところは箇条書きにしたほうがよいので番号なしの箇条書きを示すulタグを設定する。

全体(鉄標準溶液のh4タグの前から実験結果のh3タグの前まで)を ul タグでくくる。
それぞれの項目(鉄標準溶液とひじき)を li タグでくくる。
ひじきの処理方法は番号付きで二行表示する。 ol タグを設定し、それぞれの行に li タグを設定する。

表をつくる

実験結果に示す表をHTMLにする。

表全体を table タグでくくる。
各行を tr タグでくくる。
表のマスを td タグでくくる。 1行目の見出しはtdタグでなく th タグを使う。
table タグの直後に <caption>表1 標準溶液の吸光度</caption> をいれる。

本文にタグを設定する

ここまででタグをつけていない文章に p タグを設定する。

図を挿入する

挿入したい図をreport14.htmlと同じ場所に保存する。ここではpict1.jpgという名前で保存したものとする。
HTMLファイルの中の図を挿入したい部分に img タグを設定する。 src='pict1.jpg'をタグの中にいれて、表示する図を指定する。 img タグは閉じるほう(</img>)がない。
オルトフェナントロリンの構造式はsrcプロパティの値としてURLを入力する。

CSSでHTMLを装飾する

bodyの前に head タグを挿入して、CSSを入力する場所を作成する。


<html> <--これはすでにある

<head>
<style type='text/css'><!--

/*   以後CSSのコードはここに書く	*/

--></style>
</head>

<body> <-- これもすでにある

h2に背景をつけて中央寄せにする


h2 {
	text-align: center;
	background-color: #9acd32;
}

h3に下線を引き、左をマークする

線(境界)と近くなりすぎるので余白(padding)をとる。


h3 {
	border-bottom: 1px solid #a6c9e2;
	border-left: 18px solid #a6c9e2;
	padding-left: 10px;
}

表に線を引く

表中の数値を右寄せにする。


table {
	border: 1px black solid;
}

th {
	background-color: #CCCCCC;
	border-bottom: 2px black solid;
}

td {
	text-align: right;
}

本文の先頭を1字下げる

p {
	text-indent: 1em;
}

ページの幅を設定する

body {
	width: 18cm;
}

コンピュータで表示する色について

コンピュータのディスプレイ(液晶ディスプレイ)は赤、緑、青の三色の光の強度を調節し、混ぜ合わせることで様々な色をつくります。これは人間の目には赤、緑、青の光をよく吸収する色素が含まれているからです。現在の多くのディスプレイは光の強度を256段階に調節し、三色をそれぞれ256段階に調整しているのでその組み合わせは16777216色になります。

HTMLではred、green、blue、yellow、blackなど英語で色の名前を指定することもできますが、コンピュータらしく3色の組み合わせを指定することもできます。赤、緑、青の三色はその頭文字をとってRGBと表記され、色の強度は0からFF(16進数で255の意)で表します。以下に例を示します。

body {
	background-color: #FF0000;
}

数値をいろいろと組み合わせてどのような色になるのかを調べることは楽しいことですが、このようなページを参照して好みの色をみつけてみるのもよいと思います。

HTMLファイルの送信方法

HTMLファイルには他のファイルへの参照を含めることができる。 imgタグで図を表示するとき、srcプロパティに自分のコンピュータの中にあるファイルを指定した場合はこれに該当する。

こうしたファイルを送るときそれらをHTMLファイルといっしょに送る必要がある。複数のファイルをまとめて送るときにはまとめて一つのファイルにするとよい。以下にその方法を記す。

送るファイルを一つのフォルダにまとめる

適当なフォルダを作成し、送りたいファイルをそこにいれる。フォルダ名やファイル名はアルファベットと数字だけにしておいたほうがよい。

次にフォルダを右クリックして「送る」から「圧縮(zip形式)フォルダー」を選択し、実行する。

元のフォルダと同じ場所に.zipが付いたファイルが作成される。

課題

これまでに作成した自分自身の学生実験のレポートをHTMLでつくりなおし、提出せよ。

レポートはこれまで講義資料として使ってきた食品化学基礎実験の鉄の定量を除くいずれの実験のものでもよい。 4年生は現在行っている卒業研究のものでもよい。

この課題はHTMLを理解し、ウェブページを作成できるかどうかをみるもののため、レポートの内容(実験の目的をよく理解しているかや適当な考察ができているか)は基本的に課題として評価の対象とはしない。課題の採点基準として図表の有無がある。もし元のレポートにそれらがない場合は、他のレポートのものをもってきてもよい(レポートの内容としてはまとまりがなくてもよい)。

HTMLファイルと図をまとめて圧縮ファイル(zip)にて送信すること。

全体を15点満点で評価する。採点基準は以下の通り。

HTMLファイルを作成できている(5点)。
- 拡張子が.htmlのファイルを作成できる。
- html、bodyのタグを適切に配置している。
- h1、pなどのタグを使って見出しや本文を明確にしている。
様々なタグを使うことができる(5点)。
- 番号付きまたは番号無しの箇条書きを使うことができる。
- HTMLで表を作成することができる。
- リンクを設定することができる。
- 図を挿入することができる。
CSSを使って装飾を施すことができる(5点)。
- 見出しや本文にCSSを設定することができる。
- 図表に枠線をつけることができる。
- 図や本文の大きさ(幅)を設定することができる。
- 余白を適切に設定することができる。
- 読みやすさ、見やすさに工夫がみられる。

講義で扱っていないタグやCSSのプロパティを調べて使用していた場合、上記の採点とは別に加点する。

提出するファイルの作成にあたっては自由に議論もしくは相談してもらってもよいが、同じファイルが提出された場合はそれを提出した者の点数を0とする。

生物情報リテラシー 中部大学2025年春期