1
情報リテラシー第 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 ソフトが必要である。2
(0)準備 自分のＵＳＢメモリのなかに自分の学番の名前をつけたフォルダを作成する（例：5210001）。以下で作 成・使用するHTML 文書や画像ファイルはすべてこのフォルダの中に作成すること。 (1)テキストエディタで HTML 文書の作成 HTML 文書は、メモ帳などのテキストエディタを使って作成する。このテキスト形式の HTML 文書を ソースと呼ぶ。 では、テキストエディタを起動し、ソース１の通りにHTML 文書を作成してみよう。 ソース1 <html> <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 のように文書アイコンをクリックして開いても、 エディタは開かない。3
通常は、マウスの右ボタン・メニュー［送る］に 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> タグはヘッダ部分に記述する。4
ソース2 <html> <head> <title>はじめての HTML</title> </head> <body> <h1>はじめての HTML</h1> </body> </html>3.3. 文書レイアウト
(1)改行 <br> エディタに入力した文書は、エディタ上で改行しても、ブラウザでの表示には反映されない（ソース ３）。改行は、<br>で指定する（ソース４）。終了タグはない。 ソース3 <html> <head> <title>はじめての HTML</title> </head> <body> <h1>はじめての HTML</h1> エディタに入力した文書は、 エディタ上で改行しても改行されません。 </body> </html>5
ソース4 <html> <head> <title>はじめての HTML</title> </head> <body> <h1>はじめての HTML</h1> エディタに入力した文書は、<br> エディタ上で改行しても改行されません。 </body> </html> (2)見出し <hn> ～ </hn> （n は見出しのレベルで 1～6 の値をとる） テキストを見出しとして表すタグは、<h1>から<h6>までの 6 段階ある。ブラウザでは数字が小さい ほど文字が大きな見出しになる。 ソース5 <html> <head> <title>見出し</title> </head> <body> <h1>見出し</h1> <h2>見出し</h2> <h3>見出し</h3> <h4>見出し</h4> <h5>見出し</h5> <h6>見出し</h6> </body> </html>6
(3)横罫線 <hr> 水平の罫線を引くには、罫線を引きたいところで<hr>タグを入力する。終了タグはない。 ソース6 <html> <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 green #008000 silver #c0c0c0 teal #008080 gray #808080 blue #0000ff black #000000 navy #000080 yellow #ffff00 purple #800080 aqua #00ffff fuchsia #ff00ff lime #00ff00 red #ff0000 olive #808000 maroon #800000 (2)文字の書体 文字の書体を設定する。 太字：<b> ~ </b> イタリック：<i> ~ </i> 下線付き：<u> ~ </u>7
ソース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 文書や画像のパスをすべて記述する方法である。通常、他のウェブページへのリン クを張る場合には、絶対パスで指定する。
8
<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 属性を使って表示し たい部分にキーワードを付け、リンク元からそのキーワードで表示位置を指定する。
9
href 属性で指定した<a href “#キーワード”> ~ </a>内のテキストや画像をクリックすると<a name=” キーワード”> ~ </a>の場所にジャンプする。別のページから特定の場所にジャンプするには、href 属性 の値に「パスの指定#キーワード」で指定する。
(4)リンク先を新しいウィンドウで開く
<a href=”パスの指定” target=”_blank”> ～ </a>
target 属性は、リンク先の開き方を指定する。値の「_blank」で新しいウィンドウを開くように指定し ている。
3.6. コメント <!-- コメント -->
コメントとは、テキストエディタでは読むことができるが、ブラウザには表示されない文字のことで ある。ページを更新する際の注意点やメモをコメントとして入力しておくと便利である。複数行にわた る長いものでも、「<!--」と「-->」の間に入力したものは、ブラウザには表示されない。 ソース8 <!-- ファイル名：sample.html --> <html> <head> <title>はじめての HTML</title> </head> <body> <h1>はじめての HTML</h1> <!-- この部分はブラウザには表示されません --> </body> </html>3.7. 特殊な文字
ブラウザに表示される文字は、ほとんどの場合、エディタから入力されたものと同じものになる。し かし、一部の文字は、特別な方法を用いなければ、ブラウザに表示されない。右の表で示したものがウ ェブページでよく使う特殊な文字を表示するための入力文字例である。10
ソース9 <html> <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 形式の両方の長所を持つ。主に画質を落としたくない画像に利用。11
(2)画像ファイルの指定 <img src=”画像ファイルのパス”> 画像ファイルを表示するには<img>タグを使用する。終了タグはない。 ソース10 <html> <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 列の表を作成する。12
ソース11 <html> <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>タグに付けることができる。 ソース12 <html> <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>13
属性 <table>タグ <tr>タグ <td>タグ border 枠線の幅を指定。これを指定 しないと枠線は表示されな い。 値：1 以上の数値をピクセル で設定する。0 を設定したと きは、枠線は表示されない ――― ――― align 表を左、右、中央のいずれか に配置する。 値：left、right、center データの横方向の位置を指 定。 値：left、right、center データの横方向の位置を指 定。 値：left、right、center valign ――― データの垂直方向の位置を 指定。 値：top、bottom、middle データの垂直方向の位置を 指定。 値：top、bottom、middle width 横幅を数値またはパーセン テージで指定する。 ――― 横幅を数値またはパーセン テージで指定。 height 縦幅を数値またはパーセン テージで指定する。 ――― 縦幅を数値またはパーセン テージで指定。 colspan ――― ――― そのセルから指定された数 の右方向のセルを結合する。 rowspan ――― ――― そのセルから指定された数 の下方向のセルを結合する。 bgcolor 表全体の背景色を設定する。 値：色名、色番号 行の背景色を設定する。 値：色名、色番号 セルの背景色を設定する。 値：色名、色番号 background 表全体の背景となる画像を 設定する。 行の背景となる画像を設定 する。 セルの背景となる画像を設 定する。14
3.10. リストの作成
(1)連番つきのリスト <ol><li> …. <li> …. </ol>
番号つきのリストを作成するには、<ol> ~ </ol>タグと<li>タグを使用する。ブラウザでは、リスト の項目に1 から順に数字が付けられ、リスト全体は字下げされる。 ソース13 <html> <head> <title>連番つきリスト</title> </head> <body> <ol> <li>いちご <li>りんご <li>みかん </ol> </body> </html>
(2)連番なしのリスト <ul><li> … <li> … </ul>
番号なしのリストを作成するには、<ul> ~ </ul>タグと<li>タグを使用する。ブラウザでは、リスト 項目に「・」マークが付けられる。 ソース14 <html> <head> <title>連番なしリスト</title> </head> <body> <ul> <li>パンダ <li>うさぎ <li>コアラ </ul> </body> </html>
4. ウェブページの公開
ウェブページをＰＣ上に作るだけでは、インターネット上に公開はできない。公開するためにはウェ ブページを構成する HTML ファイルと、それらに挿入している画像ファイルなどをウェブサーバーに転 送する必要がある。このファイル転送にはFTP（File Transper Protocol）ソフトウェアを使う。15
4.1. ウェブページを公開する上での注意事項
他人や他の団体を傷つける内容は載せない。 公序良俗に反する内容は載せない。またリンクしない。 他人や他の団体の著作権を侵害しない。すなわち、他人の作った画像、文章、ソフトウェアを、許 可無く勝手に掲載しない。 電話番号や住所などの個人情報を載せない。 ウェブページを通じて商売をしない。5. ファイル転送
ファイル転送にはWinSCP というプログラムを使用する。この WinSCP は暗号化され仮想端末ソフトウ ェアSSH のコピー・コマンドを使って、学内外から学内へのファイルの送信・受信を行う。 (1)起動、設定とログイン 図5.1 の WinSCP のアイコンをクリック。図 5.2 のログイン・ダイアログ・ボックスが表示されるので以 下の情報を入力する。 ホスト名：www.lab.toho-u.ac.jp ユーザー名：lecture パスワード：yrk2yyr3 入力したら、［ログイン］ボタンを押す。図5.3 のようなウィンドウが表示されたら［はい］を押す。16
図
5.1
図
5.2
図
5.3．
(2)ファイルのコピー ログインが正常なら、図5.4 の画面が表示される。サーバーにコピーしたいフォルダ（2.3 の(0)で作成 した、自分の学番を名前に持つフォルダ）を含むディレクトリを表示する。このコピーしたいフォルダ をマウスで選択する（破線枠で囲まれる）。次に［ファイル］メニューから［コピー］をクリックする（図 5.5）。確認の［コピー］ダイアログが表示されるので、コピーを実行するときには、［コピー］ボタンを 押す（図5.6）。コピーの実行後、反対側のディレクトリにファイルがコピーされているか、確認する。17
図5.4
図5.5
