ウェブページの作成と更新

情報リテラシー第 13 回
ウェブページの作成と更新
インターネットによって世界中の人に瞬時に情報を伝えることができるようになった。ウェブページ
はその情報発信基地である。ここではウェブページの作り方を学ぶ。コンピュータ・ストアにはたくさ
んのウェブページ作成ソフトが市販されており、操作法はソフトによって様々である。しかし、どのウ
ェブページも HTML 言語を使って作成されているため、HTML 言語を用いたウェブページの作り方を学
んでおけば、ウェブページの基本が理解できるだけでなく、色々な応用が効くようになる。
1. 目的
１．HTML 言語を用いたウェブページの作り方を習得する
２．自分のウェブページを開設する
2. HTMLの基本
2.1. HTMLの概要
ウェブページは HTML（Hyper Text Markup Language）という言語を使って作成する。HTML は文書の
中にタグと呼ばれる記号でマークをつけ、ブラウザがその記号を解釈しウェブページを表示する。
2.2. HTMLの基本構造
HTML 文書は、<html>タグで文書の始まりを、</html>タグで文書の終わりを示す。さらに<html>タ
グの中で、ヘッダ部分（<head>から</head>まで）と本体部分（<body>から</body>まで）に分かれ
る。ヘッダ部分は、HTML 文書に関する情報を記述し、本体部分には実際にブラウザで表示させる内容を
記述する。
<html> ←HTML 文書の始まり
<head>
ヘッダ部分
</head>
<body>
本体部分
</body>
</html> ←HTML 文書の終わり
2.3. HTML文書の作成手順
ウェブページを作成するには、タグで記述された HTML 文書を作成するためのテキストエディタと、
実際の表示を確認するためのブラウザが必要です。また PC で作成したウェブページを公開するには、ウ
ェブサーバーと FTP ソフトが必要である。
1
(0)準備
自分のＵＳＢメモリのなかに自分の学番の名前をつけたフォルダを作成する（例：5210001）。以下で作
成・使用する HTML 文書や画像ファイルはすべてこのフォルダの中に作成すること。
(1)テキストエディタで HTML 文書の作成
HTML 文書は、メモ帳などのテキストエディタを使って作成する。このテキスト形式の HTML 文書を
ソースと呼ぶ。
では、テキストエディタを起動し、ソース１の通りに HTML 文書を作成してみよう。
<html>
ソース 1
<head>
<title>はじめての HTML</title>
</head>
<body>
<h1>はじめての HTML</h1>
</body>
</html>
すべてタイプできたら以下のファイル名で保存する。
sample.html

タグはすべて半角で入力

タグは大文字、小文字のどちらでも良い

ファイル名は半角英数で入力する

ファイル名の拡張子に「html」または「htm」を指定すると、そのファイルが HTML 文書として保
存される
(2)ブラウザに HTML 文書を表示
作成した HTML 文書をブラウザで表示してみる。作成した HTML 文書のアイコンを表示させ、ダブル
クリックする。すると Internet Explorer などのブラウザが起動し、HTML 文書に記述されたタグの内容を
解釈し、ウェブページとして表示する。続いて、同じ HTML 文書の編集をする場合は、表示確認後もそ
のブラウザを閉じずに開いておく。
(3)HTML 文書の編集
HTML 文書の編集はエディタで行う。Word や Excel のように文書アイコンをクリックして開いても、
エディタは開かない。
2
通常は、マウスの右ボタン・メニュー［送る］に HTML 専用のエディタを登録しておく。文書アイコ
ンをクリックして［右ボタン・メニュー］→［送る］→［メモ帳］のようにしてソースファイルを開く。
エディタでの編集画面が開いた状態のままなら、その画面で編集を再開すればよい。エディタをいった
ん閉じてしまったなら、まずエディタを起動し、編集したい HTML ファイルを［メニュー］→［ファイ
ル］→［開く］より開く。
(4)ブラウザでの表示確認（再編集後）
エディタで HTML 文書を再編集したあとは、再びブラウザで表示させ確認する。手順(2)で表示確認を
したまま、ブラウザが開いた状態になっているならば、表示の更新をすると、最新の表示になる。
2.4. タグの概要
タグの基本は
<tag> ~ </tag>
という形をしている。tag の部分には、様々な命令をする要素が入り、<tag>を開始タグ、</tag>を終了
タグと呼ぶ。開始タグと終了タグに囲まれた部分だけにその影響が生じる。また、終了タグがないもの
もある。
タグにはブラウザに詳細な指示を与える属性を設定するものもある。属性は開始タグの中で、要素の
後に半角スペースを空けて記述する。
<tag 属性=”（値）”> ~ </tag>
要素や属性の記述に関しては、半角であれば、大文字・小文字のどちらでも構わない。
3. HTML文書の編集
3.1. ページの基本構成
(1)HTML 文書の指定<html> ～ </html>
開始タグ<html>で HTML 文書の始まりを示し、終了タグ</html>で HTML 文書の終わりを示す。
(2)ヘッダ情報の指定<head> ～ </head>
ヘッダ部分は、開始タグと終了タグの間に記述する。ヘッダ部分は、<html>の直後におく。
(3)本文の指定 <body> ～ </body>
本体部分を開始タグ<body>と終了タグ</body>の間に記述する。
3.2. ヘッダの構成
ヘッダ部分には HTML 文書に関する様々な情報を記述できる。
(1)タイトル <title> ～ </title>
<title>タグで指定したタイトルは、ブラウザで表示させたときに、タイトルバーに表示される。<title>
タグはヘッダ部分に記述する。
3
<html>
ソース 2
<head>
<title>はじめての HTML</title>
</head>
<body>
<h1>はじめての HTML</h1>
</body>
</html>
3.3. 文書レイアウト
(1)改行 <br>
エディタに入力した文書は、エディタ上で改行しても、ブラウザでの表示には反映されない（ソース
３）
。改行は、<br>で指定する（ソース４）
。終了タグはない。
<html>
ソース 3
<head>
<title>はじめての HTML</title>
</head>
<body>
<h1>はじめての HTML</h1>
エディタに入力した文書は、
エディタ上で改行しても改行されません。
</body>
</html>
4
<html>
ソース 4
<head>
<title>はじめての HTML</title>
</head>
<body>
<h1>はじめての HTML</h1>
エディタに入力した文書は、<br>
エディタ上で改行しても改行されません。
</body>
</html>
(2)見出し <hn> ～ </hn> （n は見出しのレベルで 1～6 の値をとる）
テキストを見出しとして表すタグは、<h1>から<h6>までの 6 段階ある。ブラウザでは数字が小さい
ほど文字が大きな見出しになる。
<html>
ソース 5
<head>
<title>見出し</title>
</head>
<body>
<h1>見出し</h1>
<h2>見出し</h2>
<h3>見出し</h3>
<h4>見出し</h4>
<h5>見出し</h5>
<h6>見出し</h6>
</body>
</html>
5
(3)横罫線 <hr>
水平の罫線を引くには、罫線を引きたいところで<hr>タグを入力する。終了タグはない。
<html>
ソース 6
<head>
<title>横罫線</title>
</head>
<body>
<h2>横罫線</h2>
<hr>
水平の罫線を引くには、
罫線を引きたいところで hr タグを入力します。
<hr>
</body>
</html>
3.4. 文字の書式
(1)文字の大きさ、色 <font> ～ </font>
文字の大きさ、色の指定は、<font>タグで行う。大きさは size 属性で 1~7 段階の数字で指定する。色
は color 属性で色名または色番号で指定する。
基本 16 色
色名
色番号
white
#ffffff
silver
gray
black
yellow
aqua
lime
olive
色名
色番号
green
#008000
teal
#c0c0c0
blue
#808080
navy
#000000
purple
#ffff00
fuchsia
#00ffff
red
#00ff00
maroon
#808000
(2)文字の書体
文字の書体を設定する。
太字：<b> ~ </b>
イタリック：<i> ~ </i>
下線付き：<u> ~ </u>
6
#008080
#0000ff
#000080
#800080
#ff00ff
#ff0000
#800000
ソース 7
<html>
<head>
<title>横罫線</title>
</head>
<body>
<h1>文字の書式</h1>
<hr>
<h3>文字の大きさ、色</h3>
<font size="1">文字の大きさ</font>、
<font color="red">色の指定</font>は
<font size="5" color="#0000ff">font タグ</font>
で行います。
<hr>
<b>b タグは太字</b>、<br>
<i>i タグは斜体</i>、<br>
<u>u タグは下線付き</u>の<br>
書体になります。
<hr>
</body>
</html>
3.5. リンク
<a href=”パスの指定”> ~ </a>
ホームぺージ上のテキストや画像をクリックすることによって、他のページを表示させるようにする
ことを、リンクを張るという。リンクを張るには、絶対パス、相対パスの 2 つの指定方法がある。
(1)絶対パス
絶対パスは HTML 文書や画像のパスをすべて記述する方法である。通常、他のウェブページへのリン
クを張る場合には、絶対パスで指定する。
7
<html>
<head>
<title>リンク</title>
</head>
<body>
<h2>リンク</h2>
<a href="http://www.toho-u.ac.jp/">東邦大学</a>
</body>
</html>
クリック
すると
→
(2)相対パス
相対パスは、現在記述中のファイルから見た他のファイルの場所を相対的に記述する方法である。

同一階層にあるファイルへリンクを張る場合
<a href=”page01.html”>ページ１</a>
には、ファイル名をそのまま指定する。

同一階層にあるフォルダの中のファイルへリ
<a href=”photo/sakura.html”>桜</a>
ンクを張る場合は、
「
（フォルダ名）/（ファイ
ル名）
」と指定する。

<a href=”../sample.html”>トップページ</a>
一階層上のフォルダは「../」で指定する。
フォルダ名・ファイル名の大文字・小文字は、実際のフォルダ名・ファイル名の大文字・小文字に合わ
せる。サーバーでは大文字・小文字を別の文字として認識する。大文字・小文字を混同した場合、ＰＣ
上では問題ないが、サーバーにアップロードしてウェブページを公開するときには、正しく表示できな
い。
(3)ページ内の指定位置へのリンク
<a href “#キーワード”> ～ </a> ...... <a name=”キーワード”> ～ </a>
1 つのページが長く、スクロールしないと必要部分を表示できない場合は、name 属性を使って表示し
たい部分にキーワードを付け、リンク元からそのキーワードで表示位置を指定する。
8
href 属性で指定した<a href “#キーワード”> ~ </a>内のテキストや画像をクリックすると<a name=”
キーワード”> ~ </a>の場所にジャンプする。別のページから特定の場所にジャンプするには、href 属性
の値に「パスの指定#キーワード」で指定する。
(4)リンク先を新しいウィンドウで開く
<a href=”パスの指定” target=”_blank”> ～ </a>
target 属性は、リンク先の開き方を指定する。値の「_blank」で新しいウィンドウを開くように指定し
ている。
3.6. コメント

コメントとは、テキストエディタでは読むことができるが、ブラウザには表示されない文字のことで
ある。ページを更新する際の注意点やメモをコメントとして入力しておくと便利である。複数行にわた
る長いものでも、
「」の間に入力したものは、ブラウザには表示されない。
ソース 8

<html>
<head>
<title>はじめての HTML</title>
</head>
<body>
<h1>はじめての HTML</h1>

</body>
</html>
3.7. 特殊な文字
ブラウザに表示される文字は、ほとんどの場合、エディタから入力されたものと同じものになる。し
かし、一部の文字は、特別な方法を用いなければ、ブラウザに表示されない。右の表で示したものがウ
ェブページでよく使う特殊な文字を表示するための入力文字例である。
9
<html>
ソース 9
<head>
<title>特殊な文字</title>
</head>
<body>
<h1>特殊な文字</h1>
<h2>HTML の基本構造</h2>
HTML 文書は、<br>
<html>タグで文書の始まりを、</html>タグで文書の終わりを示します。<br>
さらに<html>タグの中で、<br>
ヘッダ部分（<head>から</head>）と本体部分（<body>から</body>）に分かれます。
</body>
</html>
3.8. 画像の挿入
(1)使用できる画像ファイル
ブラウザで表示できる画像形式は、GIF 形式、JPEG 形式、PNG 形式の 3 種類である。
GIF 形式（.gif）
：画像を 256 色以内で表現する。主にイラストや透過画像、アニメーションに利用する。
JPEG 形式（.jpg）
：画像を 1600 万色で表現。主に写真やグラデーションを使ったイラストに使用。
PNG 形式（.png）
：GIF 形式と JPEG 形式の両方の長所を持つ。主に画質を落としたくない画像に利用。
10
(2)画像ファイルの指定 <img src=”画像ファイルのパス”>
画像ファイルを表示するには<img>タグを使用する。終了タグはない。
<html>
ソース 10
<head>
<title>画像ファイルの作成</title>
</head>
<body>
<h2>画像ファイルの作成</h2>
Windows に用意されている「ペイント」で
画像ファイルを作成する場合は、
保存するときにファイルの種類を JPEG、GIF、
または PNG に指定します。<br><br>
<img src="gazou01.png">
</body>
</html>
(3)画像ファイルからリンクを張る
画像からリンクを張るには、<img>タグを<a> ~ </a>タグで挟む。画像にリンクを張ると、画像の周
りに枠線が表示されるが、これを消したい場合には、<img>タグのなかの border 属性に 0 を指定する。
<a href=”page01.html”><img src=”gazou01.gif” border=”0”></a>
3.9. 表の作成
(1)表の構成
HTML 文書で表を作成するには、<table> ~ </table>タグを使用する。なお、セルは行毎に<td> ~ </td>
タグで 1 つずつ作成し、行は<tr> ~ </tr>タグで作成する。表に枠線を表示するには、<table>タグに
border 属性を設定する。
(2)表の作成 <table><tr><td> …. </td></tr></table>
実際に表を作ってみる。ここでは 2 行 2 列の表を作成する。
11
<html>
ソース 11
<head>
<title>表の作成</title>
</head>
<body>
<table border="1">
<tr><td>blue</td><td>green</td></tr>
<tr><td>red</td><td>yellow</td></tr>
</table>
</body>
</html>
(3)表の属性
次のような属性を<table>タグ、<tr>タグ、<td>タグに付けることができる。
<html>
ソース 12
<head>
<title>表の属性</title>
</head>
<body>
<table border="1">
<tr align="center">
<td width="70" bgcolor="blue">blue</td>
<td width="70" bgcolor="green">green</td>
</tr>
<tr align="center">
<td width="70" bgcolor="red">red</td>
<td width="70" bgcolor="yellow">yellow</td>
</tr>
</table>
</body>
</html>
12
属性
border
<table>タグ
枠線の幅を指定。これを指定
<tr>タグ
<td>タグ
しないと枠線は表示されな
い。
―――
値：1 以上の数値をピクセル
―――
で設定する。0 を設定したと
きは、枠線は表示されない
align
valign
表を左、右、中央のいずれか
データの横方向の位置を指データの横方向の位置を指
に配置する。
定。
定。
値：left、right、center
値：left、right、center
値：left、right、center
データの垂直方向の位置をデータの垂直方向の位置を
―――
width
横幅を数値またはパーセン
height
縦幅を数値またはパーセン
指定。
指定。
値：top、bottom、middle
値：top、bottom、middle
―――
テージで指定する。
―――
テージで指定する。
colspan
―――
―――
rowspan
―――
―――
横幅を数値またはパーセン
テージで指定。
縦幅を数値またはパーセン
テージで指定。
そのセルから指定された数
の右方向のセルを結合する。
そのセルから指定された数
の下方向のセルを結合する。
bgcolor
表全体の背景色を設定する。行の背景色を設定する。
セルの背景色を設定する。
値：色名、色番号
値：色名、色番号
値：色名、色番号
background
表全体の背景となる画像を
行の背景となる画像を設定セルの背景となる画像を設
設定する。
する。
13
定する。
3.10. リストの作成
(1)連番つきのリスト <ol><li> …. <li> …. </ol>
番号つきのリストを作成するには、<ol> ~ </ol>タグと<li>タグを使用する。ブラウザでは、リスト
の項目に 1 から順に数字が付けられ、リスト全体は字下げされる。
<html>
ソース 13
<head>
<title>連番つきリスト</title>
</head>
<body>
<ol>
<li>いちご
<li>りんご
<li>みかん
</ol>
</body>
</html>
(2)連番なしのリスト <ul><li> … <li> … </ul>
番号なしのリストを作成するには、<ul> ~ </ul>タグと<li>タグを使用する。ブラウザでは、リスト
項目に「・」マークが付けられる。
<html>
ソース 14
<head>
<title>連番なしリスト</title>
</head>
<body>
<ul>
<li>パンダ
<li>うさぎ
<li>コアラ
</ul>
</body>
</html>
4. ウェブページの公開
ウェブページをＰＣ上に作るだけでは、インターネット上に公開はできない。公開するためにはウェ
ブページを構成する HTML ファイルと、それらに挿入している画像ファイルなどをウェブサーバーに転
送する必要がある。このファイル転送には FTP（File Transper Protocol）ソフトウェアを使う。
14
4.1. ウェブページを公開する上での注意事項

他人や他の団体を傷つける内容は載せない。

公序良俗に反する内容は載せない。またリンクしない。

他人や他の団体の著作権を侵害しない。すなわち、他人の作った画像、文章、ソフトウェアを、許
可無く勝手に掲載しない。

電話番号や住所などの個人情報を載せない。

ウェブページを通じて商売をしない。
5. ファイル転送
ファイル転送には WinSCP というプログラムを使用する。この WinSCP は暗号化され仮想端末ソフトウ
ェア SSH のコピー・コマンドを使って、学内外から学内へのファイルの送信・受信を行う。
(1)起動、設定とログイン
図 5.1 の WinSCP のアイコンをクリック。図 5.2 のログイン・ダイアログ・ボックスが表示されるので以
下の情報を入力する。
ホスト名：www.lab.toho-u.ac.jp
ユーザー名：lecture
パスワード：yrk2yyr3
入力したら、
［ログイン］ボタンを押す。図 5.3 のようなウィンドウが表示されたら［はい］を押す。
15
図 5.1
図 5.2
(2)ファイルのコピー
図 5.3．
ログインが正常なら、図 5.4 の画面が表示される。サーバーにコピーしたいフォルダ（2.3 の(0)で作成
した、自分の学番を名前に持つフォルダ）を含むディレクトリを表示する。このコピーしたいフォルダ
をマウスで選択する（破線枠で囲まれる）
。次に［ファイル］メニューから［コピー］をクリックする（図
5.5）
。確認の［コピー］ダイアログが表示されるので、コピーを実行するときには、
［コピー］ボタンを
押す（図 5.6）
。コピーの実行後、反対側のディレクトリにファイルがコピーされているか、確認する。
16
図 5.4
図 5.5
図 5.6
17
(3)確認
ブラウザを起動し、下記のＵＲＬを入力する。
http://www.lab.toho-u.ac.jp/sci/bio/ilit/5210999/sample.html
（
「5210999」の部分には、フォルダの名前として使用している自分の学番を入力すること）
自分の作成した HTML 文書が表示されていれば成功である。
(4)WinSCP の終了
［セッション］メニューから［切断］を選択する（図 5.7）
。WinSCP ログイン画面（図 5.8）が出たら
［閉じる］をクリックして終了させる。
図 5.7
図 5.8
18
「情報リテラシー」提出課題 13
自己紹介をするウェブページを自由につくり、サーバーにアップロードして、インターネットに公開し
てください。画像ファイルや、他のサイトやファイルへのリンク、リストや表を活用し、見て楽しいウ
ェブページを作成すること。

自分の USB メモリのなかに「kadai（自分の学番）」というフォルダを作る（例えば学籍番号が 5210050
ならば、
「kadai5210050」という名前のフォルダを作る）
。

このフォルダのなかに、
「index.html」という名前の HTML 文書を作成し、この文書に自己紹介を掲
載する。このフォルダのなかに、使用する画像ファイルなどをすべて保存する。


WinSCP ソフトを用いて、このフォルダを丸ごとサーバーにアップロードする。
ウェブページがきちんと公開されているかチェックする。もしきちんと公開されているならば、ブ
ラウザに下記のＵＲＬ（自分の学番が 5210050 の場合）を入力すると、自分の自己紹介のウェブペ
ージが見られるはずである。
http://www.lab.toho-u.ac.jp/sci/bio/ilit/kadai5210050/index.html
ウェブページ公開の締め切り：7 月 16 日（金）17：00
19

Download Report