the Internet World Wide Web - ロリポップ!レンタ...

Post on 30-Jun-2020

4 views 0 download

Transcript of the Internet World Wide Web - ロリポップ!レンタ...

107

1 WWWとHTML

① インターネットのサービス

インターネット( )とは、世界的規模の通信ネットワークのことをいい、インthe Internetターネットで利用できるサービスには、WWW、電子メールなどがあります。

② WWWとは

WWWとは、 の略で、Webともいわれます。World Wide WebWebには蜘蛛の巣という意味があり、文字通り は、世界中に広く張World Wide Webり巡らされた蜘蛛の巣のようなコンピュータのネットワークを利用した情報システムの

ことをいいます。

WWWサーバとクライアント

クライアント クライアント

クライアント

サーバ

サーバ

クライアント

③ を支える基本技術World Wide Webを支える基本技術として、次の3つがあげられます。World Wide Web

HTML(Hypertext Markup Language)

URL(Uniform Resource Locater)

HTTP(Hypertext Transfer Protocol)

④ HTML(Hypertext Markup Language)

Hypertext Markup Languageとは、ホームページを作るための言語です。

この言語で書かれた文書をブラウザとよばれるホームページをみるためのソフトを使う

と、画像や色が付いたホームペ-ジをみることが出来るのです。

ハイパーテキストとは、複数のファイルを関連つけた文書をいい、

マークアップ言語とは、特定の文字でマークを付けながら、文書の構造やレイアウトな

どを表現する言語のことをいいます。

そして、このマークには、<タグ>というものを使います。

☆ホームページ☆

108

⑤ URL(Uniform Resource Locater)

Uniform Resource Locaterとは、ホームページのある場所を示す住所ともいえるもので

す。

ホームページのデータ( で書かれたデータ)は、サーバとよばれるコンピュータHTMLに入れられます。そして、このサーバは、 網とよばれる世界のコンピュータ・ネWebットの中にたくさんあるので、クライアントとよばれるデータの読み手は、どのデータ

をみるかを指定する必要があります。

URLは、ホームページがあるサーバの住所といえるものです。

住所があって初めて目的のデータ(サーバ)に辿り着けるのです。

また、URLには、必ず頭に「 」を付けることになっています。HTTP://

⑥ HTTP(Hypertext Transfer Protocol)

HTTPとは、ホームページを転送するときの取り扱いです。

ホームページは、 網を飛び交うデータです。Webそこで、パソコン(コンピュータ)とコンピュータサーバをつなぎ、データを遣り取りする決

まり事をきちんとしておく必要があります。それが、HTTPです。

⑦ ホームページの基本構造

ホームページ(Webページともいわれます)は、先に見たようにHTML(言語)を使用し

て書かれています。そして、その際の基本的な約束事として、Webページを書く基本構

造を、つぎのように定めています。

< >HTML< >HEAD< >/HEAD< >BODY< >/BODY< >/HTML

、 、 、 。言語の注意点は 大文字 小文字はいずれでも構いませんが 全角での記述はダメです

必ず“半角”で書きませんと、ブラウザはHTML(言語)と認識してくれません。

⑧ メモ帳の利用

HTMLを書くには色々なソフトがありますが、HTMLはテキストファイル(文字フ

ァイル)ですのでメモ帳で書くことができます。

そして、この方法がHTMLという言語を理解するためには最善かと思われますので、

以下メモ帳でWebページを作成してみましょう。

※ メモ帳は、 に付属している簡略なテキストエディタですので 【スタート】Windows 、

[プログラム] [アクセサリ]で起動することができます。

※ 本格的にWebページをつくるには、専用のWebページ専用ソフトを利用した方が効

率がよいでしょう。

109

☆ホームページ☆

2 タグの基本 Ⅰ 文字( )………

基本1 川村学園女子大学の表示………

作業終了後[ ]で保存hp1.html

● メモ帳で文字入力

では、次のようにメモ帳に入力しましょう。

入力する場所は、< >と< >の間になります。BODY /BODY< >から始まり< >で終わるこの間は、Webページの本文になります。BODY /BODY

< >HTML< >HEAD< >/HEAD< >BODY川村学園女子大学

< >/BODY< >/HTML

このタグが、 ページの基本構造です。Webどんな複雑な ページでも、この構造を備えています。Web

● ファイルで保存HTML入力が終わったら、保存。

フロッピーデスクを用意して、

[ファイル] [名前を付けて保存]

110

ここで[保存する場所]を[マイドキュメント]から[ インチ ]にしてファイル名を指定。3.5 FD但し、注意。

[ ] [ ] 。このままでは ファイルの種類 が テキスト文書 なので ファイルとして保存できないHTMLそこで [テキスト文書]を[すべてのファイル( )]に変更。、 *.*

[ファイル名]を [無題]から[ ]として、保存を実行する。、 hp1.html※「 」についてhp1.html① 拡張子「 」を忘れないように!html② 拡張子は、必ず「 」若しくは「 」にする。html htm

、 、いずれの拡張子でも ブラウザは ファイルとして認識してくれますがHTML統一して使用しましょう。

統一していないとファイルの呼び出しやリンクの際に不都合が生じます。

そこで、ここでは以下「 」に統一して使用します。html③ ファイル名は、なるべく英数字を使って付ける。

世界に通用するようにすることを考えれば理解できますか。

さらに注意。

④ ファイル名は「半角英数」を使用すること。

全角英数は使用しない。

大文字、小文字はどちらでもOKですので、お好きなように。

ただし、どこに大文字を使い、どこに小文字を使ったかをキチンと覚えておく

こと。

そうしないと、先の 拡張子のように不都合が生じます。htmlコンピュータがちゃんと読んでくれません。

● ファイルでも保存TXTさらに、以後の作業に便利なように、これをテキストファイルでも保存しておきましょ

う。

[ファイルの種類]を[テキスト文書]に、再び変更。

ファイル名を「 」にして保存。hp1

111

☆ホームページ☆

※「 」の保存についてhp1.txtテキストファイルの保存は、通常[ファイルの種類]を[テキスト文書]にして実行

しますが、

[ファイルの種類]を[すべてのファイル( )]のままにして実行した方が、*.*最初のhtmlファイルでの保存の時は[すべてのファイル( )]で、*.*次のテキストファイルの保存の時には[テキスト文書]と

切り替えを度々実行しなくてすむので、

以後は[ファイルの種類]が[すべてのファイル( )]の状態でテキストファイルの保*.*存をしましょう。

「 」と拡張子まで入力すれば[ファイルの種類]が[すべてのファイル( )]でも*.txt *.*テキストファイルの保存は完成します。

次に

● メモ帳を閉じる

● ブラウザでの閲覧

ファイルが完成したので、ブラウザでみてみましょう。HTMLブラウザは に装備されているインターネットエクスプローラ(IE)を使用しWindowsましょう。では、IEを起動してください。

起動したら、表示された画面で[ファイル]をクリック [開く]をクリックで、

次の画面が表示されましたか。

112

この画面で [参照]をクリック。、

すると、IEのファイル選択の画面が表れます。

さて、ここで[ファイルの場所]を、[マイドキュメント]から[ インチ ]に変更。3.5 FD[ファイルの場所]の[マイドキュメント]の右の[▼]をクリックすると、

[ インチ ]が窓に表示されるので、3.5 FDここで[ インチ ]をクリックしてください。3.5 FD画面が「 インチ 」の次の画面に切り替わるので、3.5 FD

[ファイルの場所]の下にあるファイルの一覧の窓から[ ]を選び、クリック。HP1.htmlすると、下の方にある[ファイル名]に[ ]が表示されます。HP1.htmlこの[ ]が目的のファイルですので、右下の[開く]をクリック。HP1.html画面は次のようにまた切り替わります。

113

☆ホームページ☆

さあ、これで最後の作業です。

[ ]をクリック。OK

川村学園女子大学が無事に、ブラウザ「IE」で表示できましたか。

メモ帳によって書かれた、

タグを使用した 言語が、上の完成品です。HTML

● 作業終了ですので、ブラウザ「IE」を閉じてください。

● 作業の手順

以後、以上の手順を繰り返します。

その時には詳しい手順は示しませんからよく理解しましょう。

114

基本2 数行の文字列を入力する………

作業終了後[ ]で保存hp2.html

第2ステップへ進みます。

● メモ帳で文字入力

メモ帳を起動して [ ]ファイルを読み込む。、 HP1.txt次の画面が表示されます。

< >HTML< >HEAD< >/HEAD< >BODY川村学園女子大学

< >/BODY< >/HTML

この の「川村学園女子大学」の次行から3行を使ってHTML「文学部、教育学部、人間文化学部」を挿入します。

< >HTML< >HEAD< >/HEAD< >BODY川村学園女子大学

文学部

教育学部

人間文化学部

< >/BODY< >/HTML

● ファイルで保存HTMLHP2.html .ファイル名は [ ]、

● ファイルでも保存TXT

115

☆ホームページ☆

ファイル名は [ ]、 HP2.txt

次に

● メモ帳を閉じる。

● ブラウザでの閲覧

IEで閲覧。

残念ながら、意図したとおりには表示されなかったようです。

では、上手くいかなかった部分を修正しましょう。

● IEを閉じます。

116

………< >基本3 BRで改行する

作業終了後[ ]で保存hp3.html

ここでは、基本3で上手く表示されなかった画面を、キチンと改行させるタグを使

用します。

< > が改行のタグです。BR通常、タグは < >△△△< >のように対で使用されますが、HTML /HTMLこの< >はこれだけで使われます。BR

● メモ帳で文字入力

メモ帳を起動して [ ]ファイルを読み込む。、 HP2.txt次の画面が表示されます。

< >HTML< >HEAD< >/HEAD< >BODY川村学園女子大学

文学部

教育学部

人間文化学部

< >/BODY< >/HTMLこれに、次のように < > のタグをそれぞれの文字列の後に挿入します。BR

< >HTML< >HEAD< >/HEAD< >BODY川村学園女子大学< >BR文学部< >BR教育学部< >BR人間文化学部

< >/BODY< >/HTML

人間文化学部は最後の行ですので、この行の改行は必要ありませんよね。

117

☆ホームページ☆

● ファイルで保存HTMLHP3.html .ファイル名は [ ]、

● ファイルでも保存TXTファイル名は [ ]、 HP3.txt

次に

● メモ帳を閉じる。

● ブラウザでの閲覧

どうです、キチンと意図したとおりに表示されたようです。

● IEを閉じます。

118

………< >< >基本4 BR BRで改行する

作業終了後[ ]で保存hp4.html

< > が改行のタグでした。では < >< >では、どのように表示されるでしょう。BR BR BR

● メモ帳で文字入力

メモ帳を起動して [ ]ファイルを読み込む。、 HP3.txt表示された画面を、次のように修正します。

< > のタグを「川村学園女子大学< >」の後に挿入します。BR BR

< >HTML< >HEAD< >/HEAD< >BODY川村学園女子大学< >< >BR BR文学部< >BR教育学部< >BR人間文化学部

< >/BODY< >/HTML

● ファイルで保存HTMLHP4.html .ファイル名は [ ]、

● ファイルでも保存しないTXTさらに、テキストファイルでも保存。と、今まで実行してきました。 ファィHTML

ルで保存したり、 ファイルで保存したりして、面倒なことこの上もありません。TXTそこで、 ファイルの保存をやめましょう。TXTこの ファイルの保存に代える操作を、次の基本5で試みますので十分に注意してTXT実行してください。

ここで、

● メモ帳を閉じる。

● ブラウザでの閲覧

119

< >< > 改行の改行ですから、BR BR上のように川村学園女子大学の次の一行があくことになりますね。

● IEを閉じます。が、今までの操作でしたが、ここでは、IEを閉じません。

閉じないで、次の「基本5」に行きます。

○ 参考

<BR><BR>で、行が1行空くのですから、

先のメモ帳での記述は次のようにした方が分かりよいかもしれません。

川村学園女子大学<BR>

<BR> ………1行空くことが分かる。

文学部<BR>

☆ホームページ☆

120

………< > < >基本5 文字列P /Pで段落を設定する

作業終了後[ ]で保存hp5.html

< >△△△< > のタグは、段落を設定します。P /Pよって、< >と同じように文字列を改行します。BRさらに、その改行文字列の前後に1行の空行を設定します。

● メモ帳で文字入力

今まではメモ帳を起動して、作業するための元になるファイルを読み込み、それにタ

グの書き込みをしたのですが、

基本4の作業では[* ]ファイルを保存しませんでした。.txtそこで、代わりの作業を実行します。

現在、コンピュータのモニタには、

基本4での作業結果[ ]のIEによる画面が表示されているはずです。HP4.html画面は次のようになっていますか。

この画面のどこでもいいですから、画面上にマウスのポインタを持っていって、

マウスを右クリックしてください。

すると、処理できる作業の一覧が表示されますので、

その中で[ソースの表示]を選択し、クリック。

メモ帳が起動して [ ]の、 HP4.htmlファイルがモニタに表示されるTXT

はずです。

先程から実行してきたメモ帳を起動

して、 ファイルを読み込んだのTXTと同じことになります。

この画面に次の作業を実行しますが、

● その前に、表示されているIEの画面を閉じましょう。

121

Webページ(IEの画面)の右上の

をクリックすれば閉じられます。

● では作業。

文学部、教育学部の< >タグを削除し、BR教育学部に < >< > のタグをつけます。P /P

< >HTML< >HEAD< >/HEAD< >BODY川村学園女子大学< >< >BR BR文学部

< >教育学部< >P /P人間文化学部

< >/BODY< >/HTML

HTML HP5.html .● ファイルで保存 ファイル名は [ ]、

● 次に、メモ帳を閉じる。

● ブラウザでの閲覧

「川村学園女子大学」の次の1行は、< >< >- 改行の改行ですから1行空き。BR BR「教育学部」には、< >< >が付けられているので、P /P前の行を1行空け、後の行を1行空けます。

☆ホームページ☆

122

基本6………< >文字列< >DIV /DIVで段落を設定する

作業終了後[ ]で保存hp6.html

< >△△△< > のタグも、段落を設定します。DIV /DIVただし、< >△△△< >がP /Pその段落の前後に1行の空行を設定しますが、

< >△△△< >は、改行のみで空行を挿入しません。DIV /DIV

● メモ帳で文字入力

ブラウザIEで表示されている[ ]のWebページの上で、マウスを右クリック。HP5.htmlさらに[ソースの表示]をクリックして [ ]のソースを表示。、 HP5.html次の画面が表示されます。

画面が表示されたら、IEの画面は閉じることをお忘れなく。

< >HTML< >HEAD< >/HEAD< >BODY川村学園女子大学< >< >BR BR文学部

< >教育学部< >P /P人間文化学部

< >/BODY< >/HTML

これを修正。

、 。次のように < >教育学部< >のタグを < >教育学部< >のタグにつけかえますP /P DIV /DIV

< >HTML< >HEAD< >/HEAD< >BODY川村学園女子大学< >< >BR BR文学部

< >教育学部< >DIV /DIV人間文化学部

123

☆ホームページ☆

< >/BODY< >/HTML

● ファイルで保存HTMLHP6.html .ファイル名は [ ]、

● ブラウザでの閲覧

「川村学園女子大学」の次の行の空行は < >< > のタグによる空行で、BR BR「< >教育学部< >」のタグでは教育学部は段落になりましたが、DIV /DIV「< >教育学部< >」のタグのように前後の行に空行は挿入されません。P /P

○参考:見出しを設定する

<H数値 ALIGN="位置"> </H数値> で、

入力文字列を見出しとして設定することができます。

数値は文字の大きさで、1~6が指定でき 「1」が最大 「6」が最小です。、 、

124

基本7………< >文字列< >TITLE /TITLEでタイトルを設定する

作業終了後[ ]で保存hp7.html

< >△△△< >のタグは、TITLE /TITLE△△△の文字列をブラウザの表示画面の最上部左にタイトルとして表示します。

そして、このタグは、< > < >の中に書かれます。HEAD /HEAD、 。今までは< > < >の中に書かれていたので うっかりすると間違えますBODY /BODY

ご注意を。

● メモ帳で文字入力

ブラウザIEで表示されている[ ]のWebページの上で、マウスを右クリック。HP6.htmlさらに[ソースの表示]をクリックして [ ]のソースを表示。、 HP6.html次の画面が表示されます。

画面表示後 [ ]のWebページは閉じます。、 HP6.html

< >HTML< >HEAD< >/HEAD< >BODY川村学園女子大学< >< >BR BR文学部

< >教育学部< >DIV /DIV人間文化学部

< >/BODY< >/HTML

これに 「タイトルを入れる」を < >△△△< >のタグで入力します。、 TITLE /TITLEついでに、< >< >も < >< >も削除し、< >による通常の改行に変更しましBR BR DIV /DIV BRょう。

< >HTML< >HEAD< >タイトルを入れる< >TITLE TITLE< >/HEAD< >BODY

125

☆ホームページ☆

川村学園女子大学< >BR文学部< >BR教育学部< >BR人間文化学部

< >/BODY< >/HTML

● ファイルで保存HTMLHP7.html .ファイル名は [ ]、

次に

● メモ帳を閉じる。

● ブラウザでの閲覧

画面の最上段左上を見てください。

「タイトルを入れる」とタイトルが挿入されています。

改行も、< >で通常改行に変更されています。BR実は今までの表示例のWebページにも「タイトル」が入っていました。

これは、私が内緒で入れていたもので、みなさんが作ったWebページにはありません。

ないのが正しい作成物です。

126

基本8……< >文字列< >FONT COLOR="#000000" /FONTで文字に色をつける

作業終了後[ ]で保存hp8.html

< >△△△< >のタグは、FONT COLOR="#000000" /FONTブラウザの表示画面で、

△△△の文字列に色をつけて表示します。

パソコンのモニタは、光の3原色で表示しています。

ここでの色の指定も、この3原色の混合による色の指定です。

3原色は赤・緑・青で、この3原色の英語の頭文字をとって、

RGBによる色の表示がここでの指定です。

R= (赤)RedG= (緑)GreenB= (青)Blue色の指定はカラーコードで定められていますが、

” ”のように “ ”の次の6桁の英数字で記述されています。#000000 #最初の2桁は“赤”を暗い( )から明るい( )で、00 ff次の2桁は“緑”を暗い( )から明るい( )で、00 ff最後の2桁は“青”を暗い( )から明るい( )で表したものです。00 ff

、「 」 、 、 「 」 。例えば は 赤と緑が最も暗く 青が最も明るいので 青 を表します#0000ffコードは、

数字が「 」から「 」で10文字、0 9英字が「 」から「 」で6文字のa f計16文字で16進数となります。

16進数の2桁ですから、

× = で、1色で256通りの色指定ができることになります。16 16 256これが3原色ですから、

× × で256 256 256=167702161677万216色を表すことができることになります。

主な色の指定は、次のカラーコード表の通りです。

なお、6桁の頭には必ず「 」をつけることになっています。#

white #ffffff silver #c0c0c0 maroon #800000 green #008000yellow #ffff00 gray #808080 aqua #00ffff blue #0000fffuchsia #ff00ff olive #808000 lime #00ff00 navy #000080red #ff0000 purple #800080 teal #008080 black #000000

127

☆ホームページ☆

● メモ帳で文字入力

ブラウザIEで表示されている[ ]のWebページの上で、マウスを右クリック。HP7.htmlさらに[ソースの表示]をクリックして [ ]のソースを表示。、 HP7.html次の画面が表示されます。

画面表示後 [ ]のWebページは閉じます。、 HP7.html

< >HTML< >HEAD< >タイトルを入れる< >TITLE TITLE< >/HEAD< >BODY川村学園女子大学< >BR文学部< >BR教育学部< >BR人間文化学部

< >/BODY< >/HTML

先ず、

タイトルを「情報機器の操作-文字に色を付ける」に修正。

文学部を「赤」に、

教育学部を「緑」に、

最後に人間文化学部を「青」にしましょう。

< >HTML< >HEAD< >情報機器の操作-文字に色を付ける< >TITLE TITLE< >/HEAD< >BODY川村学園女子大学< >BR< >文学部< >< >FONT COLOR="#FF0000" /FONT BR< >教育学部< >< >FONT COLOR="#008000" /FONT BR< >人間文化学部< >FONT COLOR="#0000FF" /FONT< >/BODY< >/HTML

● ファイルで保存HTMLHP8.html .ファイル名は [ ]、

128

次に

● ファイルを閉じる。

● ブラウザでの閲覧

基本9………< 色の名前 >文字列< >FONT COLOR=" " /FONTで文字に色をつける

作業終了後[ ]で保存hp5.html

< >△△△< >のタグは、FONT COLOR="#000000" /FONT光の3原色でカラーコードをつくり、△△△の文字列に色をつけました。

ここでは、

このカラーコードにかえて「色の名前」で文字に色をつけます。

カラーコードでは1677万216色を表すことができましたが、

「色の名前」では次の16色は確実に表示されますが、

他の色はブラウザによって表示できない場合があります。

白 銀色 栗色 緑white silver maroon green黄色 灰色 水色 青yellow gray aqua blue赤紫 オリーブ色 ライムグリーン ネイビブルーfuchsia olive lime navy赤 紫 深い緑 黒red purple teal black

● メモ帳で文字入力

ブラウザIEで表示されている[ ]のWebページの上で、マウスを右クリック。HP8.htmlさらに[ソースの表示]をクリックして [ ]のソースを表示。、 HP8.html(画面表示後 [ ]のWebページは閉じます )、 。HP8.html

129

☆ホームページ☆

表示されたソースの画面を修正。

"カラーコード"を "色の名前"に変更。

文学部を「赤」に、

教育学部を「緑」に、

最後に人間文化学部を「青」にしましょう。

< >HTML< >HEAD< >情報機器の操作-文字に色を付ける< >TITLE TITLE< >/HEAD< >BODY川村学園女子大学< >BR< >文学部< >< >FONT COLOR="RED" /FONT BR< >教育学部< >< >FONT COLOR="GREEN" /FONT BR< >人間文化学部< >FONT COLOR="BLUE" /FONT< >/BODY< >/HTML

● ファイルで保存HTMLHP9.html .ファイル名は [ ]、

次に

● メモ帳を閉じる。

● ブラウザでの閲覧

130

基本10………< 数値 >文字列< >FONT SIZE=" " /FONTで文字の大きさを変える

作業終了後[ ]で保存hp10.html

< 数値 >△△△< >で、FONT SIZE=" " /FONT△△△の文字列の大きさを変えます。

< 数値 >の数字は、1から7まで指定できます。FONT SIZE=" "数値「 」が標準の大きさの文字を表示し、3「 」が小さい「 」が大きい文字になります。1 7

、 「 」 。ということは 無指定の場合は 3 の大きさの文字が表示されるということです

● メモ帳で文字入力

ブラウザIEで表示されている[ ]のWebページの上で、マウスを右クリック。HP9.htmlさらに[ソースの表示]をクリックして [ ]のソースを表示。、 HP9.htmlメモ帳が起動し、テキストファイルの画面が表示されます。

画面表示後 [ ]のWebページは閉じます。、 HP9.html

文学部を「 、2」教育学部を「 」で、5人間文化学部を「 」で指定してみましょう。7

ついでに色も変更してみましょう。

文学部を「緑 、」

教育学部を「青」で、

人間文化学部を「赤」に変更。

タイトルも変更。

「情報機器の操作-文字の大きさを指定する」に変更。

< >HTML< >HEAD< >情報機器の操作-文字の大きさを指定する< >TITLE TITLE< >/HEAD< >BODY川村学園女子大学< >BR< >文学部< >< >FONT COLOR="GREEN" SIZE="2" /FONT BR

131

☆ホームページ☆

< >教育学部< >< >FONT COLOR="BLUE" SIZE="5" /FONT BR< >人間文化学部< >FONT SIZE="7" COLOR="RED" /FONT< >/BODY< >/HTML

● ファイルで保存HTMLHP10.html .ファイル名は [ ]、

次に

● メモ帳を閉じる。

● ブラウザでの閲覧

< > とFONT COLOR="GREEN" SIZE="2"< >と、FONT SIZE="7" COLOR="RED"「 」指定と「 」指定の記述順序を変えても表示は同じですね。COLOR SIZE

○参考:フォントサイズを相対値で指定することもできます。

< >BACEFONT SIZE="3"文字列

< >文字列< >< >FONT SIZE="+2" /FONT BR< >文字列< >FONT SIZE="-1" /FONT

の は、1~7までです。BACEFONT SIZE