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>を書くだけで次の行を空けてくれる。ソースをご覧になれば私の独自の書き方がわかるであろう。
いきなり/pから書き始めても、その前に何か書いていれば段落空けされる。 しかし、ダブルでpを行っても、段落空けを連続でしてくれるわけではない。
・<h1>フォントサイズの大きさ</h1>
・<pre>入力通りの表示</pre>
HTMLで入力したテキストは、表示のとき、横に短い文字は左に詰めて表示されるので、スペースはほとんど間を取ってくれない。
そこでこのタグを使えばスペースで揃えたい時などに有効であると思われる。フォントサイズも自動的にスモール<small>状態となる。
また編集そのままの表示をしてくれるので、改行していればBRタグを使わなくて良いと言う面倒くささが減ると言う魅力もある。
また、preタグを書いた前後は自動的に段落空けされる。
・通常小文字
ぁ ぃ ぅ ぇ ぉ ヵ ヶ
ゃ ゅ ょ ゎ っ 、 。
・preタグ表示
ぁ ぃ ぅ ぇ ぉ ヵ ヶ ゃ ゅ ょ ゎ っ 、 。
・<em>斜体で強調する</em>
文字が斜め表示になり強調されると思う。しかし乱用すると見づらいので乱用に注意。
・<strong>太字で強調する</strong>
目立たせたい時や題などに使える。<b></b>と同じ?効果。
・<font color="部分的にテキストの色を変える"></font>
文字色を変える。
ダブルクォーテーションの中には、始めに#を半角で入れ、次に16進を6つ入れる。#00FF00など。
左からRGB(レッドグリーンブルー)となっており、0〜255の3乗の数だけ色を決められる。
ダブルクォーテーションの中は、英語で入れてもいい。silverなど。
・<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="〜〜〜">画像を表示する
<img src="img/banner_2.jpg" alt="天国の空" width="190" height="40" align="right">文字<br clear="right">
これについては色々機能があり、画像の説明をするALTや、幅や高さ、改行のクリアするか否かなどがある。
画像の横に文字を書いて、改行してもまだ画像の横に書き続けたい場合は、alignを使う。
解除したい場合は、brタグにクリアと書いて、解除したい絵の位置を指定する。
ただし、絵の高さからはみ出ると自動的に解除される。
・リンク
<a href="URL">リンク名<img src="絵にリンクつけたいときはここに画像ファイル名(もしくは場所)を書く"></a>
てすと
画像リンクの周りを取りたい場合はborder="0"をつける。つけたい場合は数字を1にすればいい。
・リンク先を新しい窓で開く
<a href="URL" target="_blank"></a>
てすと
・メールを送る
<a href="mailto:メアド">誰々</a>
誰々
・テーブルタグ
<table><tr><td></td></td></tr></table>
| TRが行、TDが列です。 |
| ボーダーで太さの指定(0だったら無し)、ボーダーカラーで色。 |
・表の大きさ指定、セルの結合、表示位置の調整
<table>タグの中に『width="100"』とやると、テーブルの横の大きさが最低100ピクセルに固定される。
ちなみに、『height』で高さ固定。中に色々書き過ぎて100ピクセルをやむなく超える場合は、100ピクセルとはならない。
<table>タグと<tr>タグと<td>タグの間は、空白を入れても実際の表示には関係ないので、ソースを見やすくする時に入れておいてもいい。
<td>タグの中に、『rowspan="2"』とやると、その列だけ縦2行分の領域を一度に保持できる。
ちなみに、『colspan="2"』でその行だけ横2列分の領域を一度に確保。
<td>タグの中に、『valign="top"』とやると、中身が上詰めで表示される。
ちなみに、『middle』で真ん中、『bottom』で下詰め表示。
テーブルの中にテーブルを入れることもできるので、これらを駆使すると大抵のことは融通が利くようになるので、望み通りの表示ができる。
・縦と横
| rowspan 縦 silver シルバー |
colspan 横 |
||
| 濁雪空 | 藤 | ||
| リヴリー | メニュー | |||
|
||||