インターネットとは世界中にちらばるコンピュータネットワークを相互に(inter)つないだもので、情報をやりとりするために作られた。 インターネット上を流れる情報には様々なものがあるが、現在もっともよく使われているのがWorld Wide Web (ワールド・ワイド・ウェブ)である。 一般に「インターネットを見る」とか「インターネットをする」と言う時にはWorld Wide Webのしくみを使ってウェブページを見ることを指す場合が多い。
ウェブページは主に文字情報を含んでいるが、現在では画像、音楽、動画、コンピュータプログラムなども含まれ、あらゆる情報を広く伝達する方法として普及している。ウェブページはHTML(Hyper Text Markup Language)という言語(決まり)でかかれたテキストファイルである。 そのためテキストエディタで編集することができ、コンピュータプログラムによる自動作成も容易となっている。
様々な生物学の情報もウェブページを通じて入手することができる。 論文、遺伝子データベースや様々な解析ツールがウェブを通じて利用可能であり、生物学の発展に欠かせないものとなっている。 今後情報発信のツールとしてますますWWWの価値は上がっていく中、そのしくみを理解することは情報リテラシーとして重要な位置を占める。
ウェブブラウザーで適当なページを開き、画面上で右クリックをして「ソースの表示」を実行する。現れた記号の羅列がウェブページの正体である。
<!DOCTYPE html> <html lang='ja_JP'> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" > <meta http-equiv="Content-Style-Type" content="text/css" > <meta http-equiv="Content-Script-Type" content="text/javascript" > <meta name="author" content="鈴木孝征 (Suzuki Takamasa)" > <meta name="description" content="生物情報リテラシー 中部大学2025年春期" > <title>生物情報リテラシー 中部大学2025年春期 </title> <link href="/bioinfoliteracy2025/css/tslecture.css" media="screen" rel="stylesheet" type="text/css" > <link href="/bioinfoliteracy2025/base.css" media="screen" rel="stylesheet" type="text/css" >
HTMLの編集にはテキストエディタ(単にエディタともいう)には様々な種類があるが、今回はVisual Studio Codeを紹介する。 インストールはMicrosoft Storeから行うことができる。
Visual Studio Codeのメニューは英語になっているが、日本語にすることもできる。 「Visual Studio Codeを日本語化する」を参考にしてください。 メニューの日本語化とJavascript中の日本語とは無関係です(メニューを日本語化しなくても日本語の編集はできます)。
Javascriptのデバッグ(プログラムの間違いを見つけ修正すること)には高機能なウェブブラウザーが必須である。 今回はGoogle Chromeを使う。
このページを開いてchromeをダウンロードし、インストールを行う。
拡張子(.htmlなど)が表示されていないときは、フォルダオプションから拡張子を表示する。
フォルダ上で右クリックして、「新規作成」-「テキストドキュメント」をクリックしてファイルを作成する。 このとき拡張子をtxtからhtmlに変更しておく。 以下のように入力してファイル名をsample.htmlとして保存する。
<!DOCTYPE HTML> <html> <body> <h1>食品化学基礎実験</h1> <h2>第4日 鉄の定量</h2> <h3>目的</h3> <p>鉄(Fe)は赤血球の成分として酸素を運ぶ役割を担っている重要な元素である。鉄の欠乏は貧血を起こすので食事に必要な量が含まれている必要がある。鉄がそれぞれの食品中にどのぐらい含まれているのかを調べることは、栄養バランスのとれた献立を作成するのに役に立つ。本実験ではひじきを材料にして食品中に含まれる鉄の定量方法を学ぶことを目的としている。</p> </body> </html>
作成したファイルをブラウザーへドラッグするか、ブラウザーのメニュー「ファイル」-「開く」で開きます。
見出しには<h1>などのタグを使用します。
本文には<p>タグを使用します。pはparagraph(章、段落)の意味です。
画面に表示される部分は<body>タグではさみ、html全体を<html>タグでくくります。
箇条書きは<ul>で全体をくくり、個別の項目を<li>タグでくくります。番号付をするときには<ol>タグを使用します。以下に例を示します。
<h3>試薬および材料と実験方法</h3> <ul> <li> <h4>鉄標準溶液 (0.01 mg/ml)</h4> <p>硫酸鉄(II)アンモニウム(モール塩)((NH<sub>4</sub>)<sub>2</sub>Fe(SO<sub>4</sub>)<sub>2</sub>・6H<sub>2</sub>O) (特級) 0.7021gを精評し、1%無鉄塩酸に溶解して100mlに定容する。</p> </li> <li> <h4>ひじき</h4> <ol> <li>ひじき20gを100ml磁性るつぼに量りとり、電熱コンロ上で予備灰化した。</li> <li>予備灰化後、さらにマッフル炉で500℃にて6時間灰化した。</li> </ol> </li> </ul>
硫酸鉄(II)アンモニウム(モール塩)((NH4)2Fe(SO4)2・6H2O) (特級) 0.7021gを精評し、1%無鉄塩酸に溶解して100mlに定容する。
表全体を<table>タグでくくり、行を<tr>でくくり、列を<td>でくくります。
<table> <tr><td>標準溶液(µg)</td><td>吸光度 (A510)</td></tr> <tr><td>0</td><td>0.005</td></tr> <tr><td>50</td><td>0.079</td></tr> <tr><td>100</td><td>0.146</td></tr> <tr><td>150</td><td>0.223</td></tr> </table>
| 標準溶液(µg) | 吸光度 (A510) |
| 0 | 0.005 |
| 50 | 0.079 |
| 100 | 0.146 |
| 150 | 0.223 |