3.2 wwwの仕組み
wwwとは(笑)の略×3=大笑ではなく、World Wide Webの略で国際広域網という感じである。
Webとは蜘蛛の巣という意で、Networkとは網のように繋がれた組織とでも言うべきだろうか。
クライアント(ユーザー)はネットワーク(空想世界)上にあるサーバ(情報提供者)のファイルにアクセスしている。これによってwwwサーバは要求されたページやファイルをクライアントに送り、クライアントはブラウザ(インターネット閲覧ソフト)でそれを表示する。中にはそれを表示するだけでなく、自動的に色々なことをするプログラムもある。
3.3.1 HTMLの概要
HTMLとは、Hyper Text Markup Lunguageを省いたもので、半角表示の<>(タグ)を用いてコンピュータがテキストの情報を読みやすくするようにしてくれる。HTMLテキストは、単純に言ってheadタグで囲まれた部分とbodyタブで囲まれた2つの構造からなっている。headタグにはファイル情報を打ち込む。例えば製作者やアクセス解析などを打ち込んで制御する。(閲覧者はこれをソースでなければ見えない)
bodyタグについては、ここに見せたい内容を書き込む。
3.3.2 <head> </head>の間で使われるタグ
ヘッドの間には例としてページのタイトルをつけるタグを用いる。
ちなみにこのページの名前は「HTML」としているのでそれを書こう。
例:<title>HTML</title>
他にも、検索されるための「メタ」タグを使うときもヘッダ内に用いる。
例:
<meta name "author" content="製作者名">
<meta name "keyword" content="この言葉で検索される">
<meta name "description" content="ページ内容の概要説明">
3.3.3 <body> </body>の間で使われるタグ
body内に使えるタグは実にたくさんある。
Pタグは段落空け。
</p>で括るのが正しい書き方だが、Pタグの場合</p>はなくても問題はない。文章の終わりに<p>を書くだけで次の行を空けてくれる。ソースをご覧になれば私の独自の書き方がわかるであろう。
・<pre>入力通りの表示</pre>
HTMLで入力したテキストは、表示のとき、横に短い文字は左に詰めて表示されるので、スペースはほとんど間を取ってくれない。そこでこのタグを使えばスペースで揃えたい時などに有効であると思われる。フォントサイズも自動的にスモール<small>状態となる。
また編集そのままの表示をしてくれるので、改行していればBRタグを使わなくて良いと言う面倒くささが減ると言う魅力もある。
ぁ ぃ ぅ ぇ ぉ ヵ ヶ ゃ ゅ ょ ゎ っ 、 。
ぁ ぃ ぅ ぇ ぉ ヵ ヶ ゃ ゅ ょ ゎ っ 、 。
・<em>斜体で強調する</em>
文字が斜め表示になり強調されると思う。しかし乱用すると見づらいので乱用に注意。
・<strong>太字で強調する</strong>
目立たせたい時や題などに使える。<b></b>と同じ?効果。
・<font color="部分的にテキストの色を変える"></font>
文字色を変える。ダブルクォーテーションの中には、始めに#を半角で居れ、次に16進を6つ入れる。左からRGB(レッドグリーンブルー)となっており、0〜255の3乗の数だけ色を決めれる。
・<p align="left(or)right(or)center">文字数の行列揃えを行う場合以下のタグを用いる</p>
レフトとやると全てが左に詰められ(最も最初から左詰めなのであまり使わないが)、
センターとやると中央に来(<center></center>でも良い)、
ライトとやると右に来る。
テーブルタグをセンターで囲むと、文全体が真ん中に来ても文頭が左縦に揃う。右揃えは表の数字の時に使うかな。
・<body text="色">ページに使う文字全部の色を決める</body>
この場所で適応するとちょっとまずいのでできないが、ページに使う文字を全部、黒以外の他の色で統一したい時に使う。色の部分はRGBの16進でなくても具体的な英名を使っても良い。例:Blue
・<body color="色名又は色指定値">背景の色設定</body>
背景の色を設定する。このページでは「ffffc0」となっていて、赤と緑を全開にし青を多くして、明黄色っぽい色を指定していることがわかる。
・<ul><li>リストのタグ</li></ul>
・<img src="〜〜〜">画像を表示する
これについては色々機能があり、画像の説明をするALTや、幅や高さ、改行のクリアするか否かなどがある。
<img src="../picture/banner_2.jpg" alt="天国の空" width="190" height="40" align="left"><br clear="left">
![]()
・リンク
<a href="URL">リンク名<img src="絵にリンクつけたいときはここに画像ファイル名(もしくは場所)を書く"></a>
YELLOW PAPER
画像リンクの周りを取りたい場合はborder="0"をつける。つけたい場合は数字を1にすればいい。
・リンク先を新しい窓で開く
<a href="URL" target="_blank"></a>
YELLOW PAPER
・メールを送る
<a href="mailto:メアド">誰々</a>
誰々
・テーブルタグ
<table><tr><td></td></td></tr></table>
| TRが行、TDが列です。 |
| ボーダーで太さの指定(0だったら無し)、ボーダーカラーで色。 |