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

107

１ＷＷＷとＨＴＭＬ

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

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

② ＷＷＷとは

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

ことをいいます。

ＷＷＷサーバとクライアント

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

クライアント

サーバ

サーバ

クライアント

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

ＨＴＭＬ（Hypertext Markup Language）

ＵＲＬ（Uniform Resource Locater）

ＨＴＴＰ(Hypertext Transfer Protocol)

④ ＨＴＭＬ（Hypertext Markup Language）

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

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

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

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

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

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

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

☆ホームページ☆

108

⑤ ＵＲＬ（Uniform Resource Locater）

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

す。

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

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

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

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

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

⑥ ＨＴＴＰ(Hypertext Transfer Protocol)

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

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

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

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

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

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

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

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

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

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

⑧ メモ帳の利用

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

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

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

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

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

［ﾌﾟﾛｸﾞﾗﾑ］［ｱｸｾｻﾘ］で起動することができます。

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

率がよいでしょう。

109


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

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

作業終了後［］で保存hp1.html

● メモ帳で文字入力

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

入力する場所は、< >と< >の間になります。BODY /BODY< >から始まり< >で終わるこの間は、Ｗebページの本文になります。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③ ファイル名は、なるべく英数字を使って付ける。

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

さらに注意。

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

全角英数は使用しない。

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

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

こと。

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

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

う。

［ﾌｧｲﾙの種類］を［ﾃｷｽﾄ文書］に、再び変更。

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

111


※「」の保存についてhp1.txtテキストファイルの保存は、通常［ﾌｧｲﾙの種類］を［ﾃｷｽﾄ文書］にして実行

しますが、

［ﾌｧｲﾙの種類］を［すべてのﾌｧｲﾙ( )］のままにして実行した方が、*.*最初のhtmlファイルでの保存の時は［すべてのﾌｧｲﾙ( )］で、*.*次のテキストファイルの保存の時には［ﾃｷｽﾄ文書］と

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

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

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

次に

● メモ帳を閉じる

● ブラウザでの閲覧

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

起動したら、表示された画面で［ﾌｧｲﾙ］をクリック［開く］をクリックで、

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

112

この画面で［参照］をクリック。、

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

さて、ここで［ﾌｧｲﾙの場所］を、[ﾏｲﾄﾞｷｭﾒﾝﾄ］から［ｲﾝﾁ］に変更。3.5 FD［ﾌｧｲﾙの場所］の［ﾏｲﾄﾞｷｭﾒﾝﾄ］の右の［▼］をクリックすると、

［ｲﾝﾁ］が窓に表示されるので、3.5 FDここで［ｲﾝﾁ］をクリックしてください。3.5 FD画面が「ｲﾝﾁ」の次の画面に切り替わるので、3.5 FD

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

113


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

［］をクリック。OK

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

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

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

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

● 作業の手順

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

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

114

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


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


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


< >/BODY< >/HTML

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


文学部

教育学部

人間文化学部

< >/BODY< >/HTML

● ファイルで保存HTMLHP2.html .ファイル名は［］、

● ファイルでも保存TXT

115


ファイル名は［］、 HP2.txt

次に

● メモ帳を閉じる。


ＩＥで閲覧。

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

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

● ＩＥを閉じます。

116

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


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

用します。

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


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


文学部

教育学部

人間文化学部

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

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

< >/BODY< >/HTML

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

117



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

次に



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

● ＩＥを閉じます。

118

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


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


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

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

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

< >/BODY< >/HTML


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

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

ここで、

119

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

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

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

○ 参考

 で、行が１行空くのですから、

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

川村学園女子大学 

 ………１行空くことが分かる。

文学部

120

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


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


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

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

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

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

基本４での作業結果［］のＩＥによる画面が表示されているはずです。HP4.html画面は次のようになっていますか。

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

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

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

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

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

はずです。

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

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

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

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

121

Webページ(ＩＥの画面)の右上の

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

● では作業。

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

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

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

< >/BODY< >/HTML

HTML HP5.html .● ファイルで保存ファイル名は［］、

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


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

122

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


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

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


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

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


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

< >/BODY< >/HTML

これを修正。

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


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

123


< >/BODY< >/HTML



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

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

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

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

数値は文字の大きさで、１～６が指定でき「１」が最大「６」が最小です。、、

124

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


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

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

ご注意を。



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


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

< >/BODY< >/HTML

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

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

125


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

< >/BODY< >/HTML


次に



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

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

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

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

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

126

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


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

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

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

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

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

ＲＧＢによる色の表示がここでの指定です。

Ｒ＝ (赤)RedＧ＝ (緑)GreenＢ＝ (青)Blue色の指定はカラーコードで定められていますが、

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

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

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

１６進数の２桁ですから、

× ＝で、１色で２５６通りの色指定ができることになります。16 16 256これが３原色ですから、

× × で256 256 256=16770216１６７７万２１６色を表すことができることになります。

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

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

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





< >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

128

次に

● ファイルを閉じる。


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


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

ここでは、

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

カラーコードでは１６７７万２１６色を表すことができましたが、

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

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

白銀色栗色緑white silver maroon green黄色灰色水色青yellow gray aqua blue赤紫ｵﾘｰﾌﾞ色ﾗｲﾑｸﾞﾘｰﾝﾈｲﾋﾞﾌﾞﾙｰfuchsia olive lime navy赤紫深い緑黒red purple teal black


ブラウザＩＥで表示されている[ ]の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


次に

130

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

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

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

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

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


ブラウザＩＥで表示されている[ ]のWebページの上で、マウスを右クリック。HP9.htmlさらに［ソースの表示］をクリックして［］のソースを表示。、 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


次に



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

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

< >BACEFONT SIZE="3"文字列

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

のは、１～７までです。BACEFONT SIZE

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

Documents

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