webページ - Dohi's Webpagedohi/d2-2018-prog1/...web ページは，HTML(Hyper Text Markup...

1

web ページ

１． web ページ(ホームページ)の公開

インターネットには無数の web サイトが公開されています．複数の web ページのまとま

りのことを web サイトと言います．web ページは，web ブラウザを使って閲覧できます．

代表的な web ブラウザ(以下ブラウザと略)は，マイクロソフトの IE(Internet Explorer)や

Edge があります．その他に，Firefox，Opera，Google Chrome 等があります．皆さんは，

目的や好みでブラウザを選ぶことができます．

web ページを公開するためには，その内容を web サーバに登録する必要があります．web

サーバはプロバイダ等が提供するものや，フリーで利用できるものがあります．最近は

CMS(Content Management System)を利用して，後述する HTML 言語の知識が無くても，

手軽に web ページやブログを公開できるものもあります．代表的なものとして，Wix(ウィ

ックス)や Jimdo(ジンドゥー)等があります．

コンピュータ基礎Ⅰの授業では，総合メディアセンターが提供する学内限定の web サー

バを利用します．その原理や仕組みを十分に理解した上で，各自の目的に応じた web サー

バを選んで活用してください．

（注意）

インターネットによる情報公開の威力は絶大です．2016 年 4 月に発生した熊本地震では，

ライオンが逃げ出したなどのデマが社会問題になりました．噓やデマを公開することはも

っての他です．著作権の侵害や他人の誹謗中傷にならないよう十分注意し，有益な情報を

公開するように心掛けてください．

２． web ページの記述

（１） HTML 言語

web ページは，HTML(Hyper Text Markup Language)言語を使って記述します．以下の

説明では，HTML 言語を HTML と記載します．図 1 は，「電大太郎の web ページです．」

が一行だけが表示される web ページです．これは，ブラウザのタブにも表示されています．

図 1 web ページの例

2

（２） HTML で記述した web ページ

図 1 は，わずか一行の web ページですが，HTML で記述すると図 2 のようになります．

内容は文字列の記述，すなわちテキストファイルになっており，メモ帳などを使って入力

することができます．

HTML で記述された web ページの構造を見てみましょう．web ページは，タグと呼ばれ

るテキストを埋め込むことによって記述します．冒頭にある<!DOCTYPE 途中略>は，文

書型宣言になります．XHTML 1.0 の型式で web ページを記述することを示すものです．

詳しい説明は省略します．

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=shift_jis" http-equiv="Content-Type" /> <title>電大太郎の web ページです</title> </head> <body> 電大太郎の web ページです． </body> </html>

図 2 HTML の例

<html>は，web ページの始まりを示すタグです．終わりは</html>になります．このように，

タグの終わりには / (スラッシュ)が付きます．これらの間に web ページの内容を記述する構造

になっています．なお，説明の都合でタグに色を付けていますが，HTML とは無関係です．

<head>は，ヘッダを示すタグです．終わりは</head>になります．このタグの中に，<meta>

タグと<title>タグが入れ子(タグの中にタグが存在する構造)になっています．

<meta>は，単独で使うタグです．web ページが記述されている漢字コード等を指定します．

<title>は，タイトルを示すタグです．終わりは</title>になります．これらのタグの間に記述

された文字列は，web ブラウザで表示した時に，ウインドウのタブに表示されます．図 2

の例では「電大太郎の web ページです」がタブに表示されます．

<body>が，web ページの本文を示すタグです．終わりは</body>になります．これらのタグ

の間に記述された文字列は，web ページの本文になります．

は，段落を示すタグです．とで囲まれた部分が，段落になります．

以上，web ページの構造を図 2 に記述された HTLM で説明しましたが，「電大太郎の web

ページです．」を表示するだけで，これだけ多くの記述を行わなければなりません．初学者

にとって決して分かり易いとは言えないばかりか，タイプミスを誘発することにもなりか

ねません．

3

３． web ページ公開までの流れ

（１） web ページの記述

web ページを記述する方法は，大きく二つあります．一つは，メモ帳などのテキストエ

ディタを使ってタグを入力する方法です．この方法は最もシンプルですが，タグに関する

知識が必要です．もう一つは，web ページを記述するための専用のエディタを使う方法で

す．この方法は，タグに関する知識が十分でなくても，ワープロ感覚で記述できます．

コンピュータ基礎Ⅰの授業では，専用のエディタを使う方法で進めます．具体的なソフ

トウェアは，Microsoft Expression Web 4 を使います．このソフトウェアは，2012 年 12

月 21 日（日本時間）から，フリーソフトになった製品です．ワープロ感覚で web ページを

作成でき，生成された HTML のコードを逐次見ることができます．HTML の知識がある人

は，HTML のコードを直接記述することもできます．したがって，Microsoft Expression

Web 4 は，HTML の知識が豊富な方も，そうでない方も，両方，満足して利用できます．

（２） web サーバへの登録

総合メディアセンターの web サーバへ登録するまでの流れを，図 3 に示します．

①Microsoft Expression Web 4 を使って，各自の web ページをパソコン上に作成します．

図 3 web ページ公開までの流れ

教育システムの web サーバ web.term.usmc.dendai.ac.jp

②web サーバへ登録フォルダ public_html を転送

① web ページの作成 Microsoft Expression Web 4を使って各⾃の web ページを作成フォルダ名 public_html ファイル名 index.html

パソコン

パソコン

パソコン

③ブラウザによる閲覧 web ページをブラウザで閲覧可能

パソコン

4

総合メディアセンターの web サーバは，フォルダ public_html の内容が公開される仕様

になっています．さらにトップページ(最初に表示されるページ)は，ファイル名 index.html

で保存する仕様になっています．②パソコン上で作成した web ページは，web サーバへ転

送します．Microsoft Expression Web 4 では，後述するパブリッシュの機能を使います．

③web サーバへの転送が完了すると，ブラウザで web ページを閲覧できるようになります．

４．パソコン側のフォルダの作成

（１）「スタート」を右クリックし，「エクスプローラ」をクリックします．

（２） H ドライブを右クリックし「新規作成」「フォルダ」の順にクリックします．

5

（３）ここではフォルダの名前は，「MyWebSites」にしておきます．

（４）さらに「MyWebSites」を右クリックし「新規作成」「フォルダ」の順にクリック

します．

6

（５）フォルダの名前は，「public_html」です．キーボードの入力モードを半角英数に

切り換えた後，入力してください．スペルミスに十分注意してください．

５． Microsoft Expression Web 4 の起動と漢字コードの設定

それでは，Microsoft Expression Web 4 を起動してみましょう．最初に，web サーバの

漢字コードに，設定を合わせる必要があります．

（１）スタートをクリックし，「Microsoft Expression」「Microsoft Expression Web4」の

順にクリックします．

7

（２）「デザイン」タブが押された状態で起動が完了します．

（３）「分割」タブをクリックすると，上段に HTML のコードが，下段にデザインが表

示されます．

8

（４）「コード」タブをクリックすると，HTML のコードが表示されます．

（５）漢字コードの変更

Microsoft Expression Web 4 の漢字コードは，デフォルトでユニコード(UTF-8)に設定さ

れています．総合メディアセンターの web サーバは，Shift-JIS で公開しているため，この

まま web サーバに登録すると，web ページが文字化けします．漢字コードを Shift-JIS に

変更します．「ファイル」「プロパティ」の順にクリックします．

9

（６）「言語」タブをクリックし，「日本語(シフト JIS)」をクリックします．

（７）「OK」をクリックします．

10

（８） shift-jis に変わります．この設定は，新規作成毎に行ってください．

６． web ページの作成

それでは，web ページを作成してみましょう．図 1 に示した，「電大太郎の web ページ

です．」を表示する，一行だけの web ページを作成する手順を示します．

（１）「デザイン」タブをクリックします．

11

（２）「電大太郎の web ページです．」の文字を入力します．ワープロ感覚で文字を入力

できます．「電大太郎」の部分は，みなさんの名前にすると良いでしょう．

（３）「分割」タブをクリックすると，上段に入力した文字が HTML のコードとして記

述されていることが分かります．デザインウインドウでは，HTML のタグの機能を意識す

ることなく，入力できます．

12

（４）さっそく，保存します．「ファイル」「名前を付けて保存」の順にクリックします．

（５） H ドライブを選択し，「MyWebSites」をダブルクリックします．

13

（６） H ドライブを選択し，「public_html」をダブルクリックします．

（７）ファイル名を「index」にし，「保存」をクリックします．

14

（８）以上の操作で，web ページの保存が完了します．

７．サイトの設定(H ドライブ)

情報端末で作成した web サイトを設定します．この設定は一度行えば，毎回行う必要は

ありません．

（１）「サイト」「新規サイト」の順にクリックします．

15

（２）「参照」をクリックします．

（３） H ドライブを選択し，「MyWebSites」選択し「開く」をクリックします．

16

（４）「OK」をクリックします．

８．サイトの設定(web サーバ)

総合メディアセンターの web サーバに接続するための設定を行います．この設定は一度

行えば，毎回行う必要はありません．

（１）「サイト」「パブリッシュの設定」の順にクリックします．

17

（２）「パブリッシュ」タブをクリックし，「追加」をクリックします．

（３）接続の設定

名前は「web.term.usmc.dendai.ac.jp」，場所は「ftp://web.term.usmc.dendai.ac.jp」，ユ

ーザ名は「学籍番号」にします．例では「99xx999」になっています．パスワードの欄は，

必要に応じて入力してください．慣れるまでは，パスワードの欄を空欄にしておくと良い

でしょう．誤りがないことを確認し，「追加」をクリックします．

18

（４）パブリッシュ先の一覧に追加されます．「OK」をクリックします．

９．サイトの公開(web サーバへ転送)

（１）「サイト」「パブリッシュ」の順にクリックします．

19

（２）「作業中のパブリッシュ先に接続する」をクリックします．

（３） web サーバへのログイン

総合メディアセンターの共通パスワードを入力します．「パスワードを記憶する」は，慣

れるまではチェックを外しておいた方が良いでしょう．最後に「OK」をクリックします．

20

（４）左側がパソコン側に，右側が web サーバになります．左側の「public_html」をク

リックした後，「→」をクリックします．

（５）右側に public_html が表示され，転送が完了します．

１０． web ページの閲覧

（１） IE による閲覧

IE を移動し，URL の欄に http://web.term.usmc.dendai.ac.jp/~99xx999/ と入力します．

パソコン側 web サーバ側

21

なお，99xx999 の部分は，みなさんの学籍番号に置き換えてください．以下のように web

ページが表示されます．学籍番号の部分を変更すると，他の方の web ページを閲覧できる

ことを確認してください．

（注意）

前述した通り，総合メディアセンターの web サーバは学内限定の閲覧になります．学外

から閲覧する場合は，事前に VPN 接続を完了しておく必要があります．

（２）閲覧内容が文字化けする場合

以下のように，閲覧内容が文字化けする場合は，漢字コードの設定が誤っている可能性

があります．再度，５．（５）を確認してください．

22

１１．ハイパーリンクの設定

（１）サイトのウインドウが表示されている場合は，「ウインドウ」タブをクリックし，

「public_html/index.html」をクリックします．

なお，「ウインドウ」タブをクリックし，「public_html/index.html」が表示されない場合

は，既にファイルを閉じていることが考えられます．

23

この場合は，「public_html」をダブルクリックし，「index.html」をダブルクリックして

ください．

再び，「public_html」を表示できます．

24

（２）ハイパーリンクを設定してみましょう．新しく段落を作るために，最初に入力し

た文字列の下の部分をクリックします．

（３）新しい段落に「東京電機大学へのハイパーリンクの例です．」を入力します．行の

最初の上部に小さく p が表示されているのは，段落(Paragraph)を示しています．

（４）「東京電機大学」の文字列をマウスでドラッグし，選択します．Shift キーを押し

ながらカーソル移動キーを使って選択することもできます．

25

（５）「挿入」「ハイパーリンク」の順にクリックします．

（６）アドレスの欄に http://www.dendai.ac.jp/ を入力し，「OK」をクリックします．

（７）東京電機大学の文字列が青くなり，下線が付きます．マウスカーソルを東京電機

大学の文字列の上に移動すると，「ハイパーリンク先へ移動するには…」が表示されます．

26

１２．画像の挿入

（１）画像は，あらかじめ，public_html に入れておく必要があります．ここでは IE を

使って東京電機大学の web ページを表示し，画像を利用することにします．画像を右クリ

ックし，「名前を付けて画像を保存」をクリックします．

（２） H ドライブをクリックし，「MyWebSites」をダブルクリックします．

27

（３）「public_html」をダブルクリックします．

（４）「保存」をクリックします．

（５）下の部分をクリックし，必要に応じて Enter キーを押します． web ページで表示

可能な画像は，jpg(ジェイペグ)，gif(ジフ)，png(ピング)形式になります．

ｓ

28

（６）「挿入」「画像」「ファイルから」の順にクリックします．

（７）「public_html」をダブルクリックします．

29

（８）画像ファイルをクリックし，「挿入」をクリックします．

（９）「OK」をクリックします．

（１０）画像が組み込まれます．「分割」をクリックすると，HTML のコードを確

認することができます．web ページの内容を追加する毎に，どのコードが追加されたのか

を確認すると良いでしょう．

30

（１１）画像の大きさの変更は，画像を右クリックし．「画像のプロパティ」をク

リックします．

（１２）「外観タブ」をクリックし，サイズを変更し「OK」をクリックします．

31

１３．表の挿入

（１）下の部分をクリックし，必要に応じて Enter キーを押します．

（２）「テーブル」「テーブルの挿入」の順にクリックします．

32

（３）行と列のサイズを入力し，「OK」をクリックします．例では，2 行，2 列です．

（４） 2 行 2 列の表が表示されます．デフォルトでは，枠線のサイズが 0 になっています

ので，ブラウザで閲覧した時には，罫線は見えません．表のセルの中には，これまで説明

してきたように，文字や画像などを入れることができます．

33

（５） 1 行目のセルに「花のページ」「山のページ」を入れました．次の複数の web ペー

ジで活用したいと思います．

（６） web ページの内容を充実し，完成を高めていきます．ここでは紹介していない機

能がたくさんあります．試行錯誤を繰り返しながら，生成される HTML のコードとの関係

を理解してください．

１４．その他

（１）水平線の表示

水平線は，「挿入」タブをクリックし，「HTML」「水平線」の順にクリックすると表示で

きます．

34

水平線が表示されます．組み込まれた，HTML のコードも確認しておきましょう．

（２）背景の色の変更

背景の色は，「書式設定」タブをクリックし，「背景」をクリックすると変更できます．

35

背景の「自動」をクリックします．

背景の色をクリックします．「その他の色」をクリックすると，細かく色を選べます．

（３）文字の大きさの変更

文字の大きさは，文字列を選択した後，「書式設定」タブをクリックし，「フォント」を

クリックします．

36

サイズを選びます．

（４）箇条書き，中央揃え等

箇条書きや中央揃え等は，下記で設定できます．

37

（５）連絡先の表示

webページの作成者へ問い合わせを行えるようにしておく必要があります．一般的には，

メールアドレスを記述します．メールアドレスを入力し，Enter キーを押すと自動的にメー

ルアドレスにリンクが貼られます．

パブリッシュを行い，IE で表示すると以下のようになります．

38

１５．複数の web ページの作成

web サイトは，通常，複数の web ページから構成されます．一般的に，複数の web ペー

ジを作成するためには，web ページ毎にフォルダを用意し，その中にページ毎で必要にな

る画像などのファイルを入れます．ここでは例として，「花のページ」「山のページ」をク

リックすると，各ページが表示される例を取り上げます．なお，花や山の画像は省略し，

文字のみが表示される web ページにします．仕組みと原理を理解してください．

（１） web ページ毎にフォルダを作成

ここでは，花の web ページと山の web ページを作るために，４．で説明した方法で，

public_html の配下に flower と mountain のフォルダを作ります．

39

（２）花の web ページを作ります．「ファイル」「新規」「ページ」をクリックします．

（３）「標準」「HTML」「OK」をクリックします．

40

（４）６．で説明した方法で，「花の web ページです．」を入力し，「ファイル」「名前を

付けて保存」をクリックします．漢字コードは Shift-JIS にしておいて下さい．

（５） public_html の中の flower フォルダに保存します．ファイル名は「flower」を入

力し，「保存」をクリックします．ファイル名は index など，他の名前にもできます．

41

（６）同様に，新規作成を行い，「山の web ページです．」を入力し，「ファイル」「名前

を付けて保存」をクリックします．漢字コードは Shift-JIS にしておいて下さい．

（７） public_html の中の mountain フォルダに保存します．ファイル名「mountain」

を入力し，「保存」をクリックします．ファイル名は index など，他の名前にもできます．

42

１６．複数の web ページへのハイパーリンクの設定

（１）先ほど作成した index を閉じた場合は，「ファイル」「開く」の順にクリックし，「index」

を開きます．

（２）ハイパーリンクを設定する文字列を選択します．「分割」をクリックし，「花のペ

ージ」の文字列を選択します．この時，HTML のコードのウインドウの中で，花のページ

の文字列だけが選択されていることを確認してください．操作を誤ると，花のページの文

字列以外も選択してしまう可能性があります．

43

（３）ハイパーリンクを設定します．

（４）「public_html」をダブルクリックします．

（５）「flower」をダブルクリックします．

44

（６）「flower.html」をクリックし，「OK」をクリックします．

（７）ハイパーリンクが設定された文字列が青くなり，下線が表示されます．

45

（８）同様に，山のページの文字列を選択します．この時，HTML のコードのウインド

ウの中で，山のページの文字列だけが選択されていることを確認してください．操作を誤

ると，山のページの文字列以外も選択してしまう可能性があります．

（９）ハイパーリンクを設定します．

46

（１０）先ほどとは異なる方法ですが，「▼」をクリックし，フォルダの一覧から

「public_html」をクリックします．

（１１）「mountain」をダブルクリックします．

（１２）「mountain.html」をクリックし，「OK」をクリックします．

47

（１３） index.html を保存します．「ファイル」「保存」の順にクリックします．

１７．複数ページのサイトの公開(web サーバへ転送)

（１）「サイト」「パブリッシュ」の順にクリックし，web サイトを公開します．

48

（２）「作業中のパブリッシュ先に接続する」をクリックします．

（３） web サイトを公開します．左右のウインドウに public_html が表示されているこ

とを確認します．左側の「public_html」をクリックした後，「→」をクリックします．

49

（４）「はい」をクリックします．

（５） IE で表示してみましょう．「花のページ」をクリックします．

50

（６）「戻る」をクリックします．

（７）「山のページ」をクリックします．

（８）「戻る」をクリックします．

（９） flower や mountain フォルダの中に，文字，表，画像等を追加し各ページの内容

を仕上げることによって，web サイトを完成していきます．

51

１８．その他の注意事項

（１）ファイル名について

総合メディアセンターの web サーバは，UNIX と言う OS で動いています．Windows と

はファイル名の命名規則が異なります．

・全角文字のファイル名は使えません．

・スペースを含むファイル名は使えません．

・半角文字は大文字と小文字が区別されます．

Microsoft Expression Web 4 で作っている時には表示されていた画像が，web サーバへ

登録すると表示されなくなることが起こりますので，注意してください．

（２）必要なファイルについて

web ページに必要なファイルは，public_html の配下に，すべて入れておく必要がありま

す．ピクチャフォルダなどに入れた画像にリンクを貼ると，web サーバへ登録しても表示

されません．必要な画像ファイルなどは，public_html 配下にコピーして入れて下さい．

（３）複数の web ページについて

複数の web ページを作る場合は，花の web ページや山の web ページで説明したように，

public_html 配下に，ページ毎のフォルダを作成し完成してください．

webページ - Dohi's Webpagedohi/d2-2018-prog1/...web ページは，HTML(Hyper Text Markup...

Documents

Transcript of webページ - Dohi's Webpagedohi/d2-2018-prog1/...web ページは，HTML(Hyper Text Markup...