3.1 インターネット閲覧・ホームページ作成
インターネット技術のHTML言語タグ、CGIプログラム、WEBページについて



 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>を書くだけで次の行を空けてくれる。ソースをご覧になれば私の独自の書き方がわかるであろう。

いきなり/pから書き始めても、その前に何か書いていれば段落空けされる。

しかし、ダブルでpを行っても、段落空けを連続でしてくれるわけではない。


・<h1>フォントサイズの大きさ</h1>

ページの題、見出しなどに使われる。ビッグタグとフォントサイズタグの合体バージョンだ。数字は1〜6まで指定可能で、それ以外の数字は認識されず無意味。数字が小さいほうがフォントサイズが大きくなる。
スラッシュで括るときは指定した大きさの数字と同じ数字で括らなければならない。例えば<h1>で指定したら</h6>というのはNGと言う訳だ。
ちなみに最後にスラッシュで括ると段落空けもしくは改行タグを指定しなかった場合、自動的に段落空けされる。

・改行<br>
このタグを文の終わりにつけると改行される。</br>は必要ない。元々 スラッシュを使うときと言うのは、タグの指定範囲の終わりを示すものなので、改行ではあってもなくてもいい。
HTMLでは編集でエンターキーを使って改行しても表示では改行してくれていない。BRタグは実に単純なタグだが、閲覧者に対して見やすくさせるために とても重要で基本的なタグなのだ。


・<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>でも良い)、

ライトとやると右に来る。

テーブルタグをセンターで囲むと、文全体が真ん中に来ても文頭が左縦に揃う。右揃えは表の数字の時に使うかな。


・罫線の表示<hr>


区切り線に使える。属性を与えると罫線の長さや太さが指定可能となる。
<hr size="4" width="30" align="left">
サイズは太さ、ウィドスは長さ、アラインは行揃えを指定する。


・<body text="色">ページに使う文字全部の色を決める</body>
この場所で適応するとちょっとまずいのでできないが、ページに使う文字を全部、黒以外の他の色で統一したい時に使う。色の部分はRGBの16進でなくても具体的な英名を使っても良い。例:Blue


・<body color="色名又は色指定値">背景の色設定</body>
背景の色を設定する。このページでは「ffffc0」となっていて、赤と緑を全開にし青を多くして、明黄色っぽい色を指定していることがわかる。


・<ul><li>リストのタグ</li></ul>

点をつける。番号付の場合は<ol>こちら</ol>

  1. list1
  2. list2
  3. list3

・<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が列です。
<table border="数字">とやると枠の有無と太さを指定でき、<bordercolor="色">とやると外枠に色をつけれる。
ボーダーで太さの指定(0だったら無し)、ボーダーカラーで色。
さらにテーブルタグ内でalignを使えばテキストを揃えれる。数字なら右に揃える事もできる。
また、各タグ内でbgcolorをやればその全行、列の色を変えることが出来る。

・表の大きさ指定、セルの結合、表示位置の調整
<table>タグの中に『width="100"』とやると、テーブルの横の大きさが最低100ピクセルに固定される。
ちなみに、『height』で高さ固定。中に色々書き過ぎて100ピクセルをやむなく超える場合は、100ピクセルとはならない。
<table>タグと<tr>タグと<td>タグの間は、空白を入れても実際の表示には関係ないので、ソースを見やすくする時に入れておいてもいい。

<td>タグの中に、『rowspan="2"』とやると、その列だけ縦2行分の領域を一度に保持できる。
ちなみに、『colspan="2"』でその行だけ横2列分の領域を一度に確保。

<td>タグの中に、『valign="top"』とやると、中身が上詰めで表示される。
ちなみに、『middle』で真ん中、『bottom』で下詰め表示。
テーブルの中にテーブルを入れることもできるので、これらを駆使すると大抵のことは融通が利くようになるので、望み通りの表示ができる。

・縦と横
height
rowspan

silver
シルバー
width
colspan

濁雪空

・レイアウト例2
リヴリー メニュー
ハーボット ティッカー 履歴