タグ打ちでWebページをつくる

とりあへず表示する > ソースをいぢる > 文字の裝飾 > 畫像の表示 > ページを分ける > 表を作る > フレームを使ふ

文字、畫像(画像)と來て(来て)、ページがだいぶ長くなってきた頃かな。
それじゃあ、そろそろページを分けようか。
　

あっと。その前に、ページの情報を附加(付加)しとかう(しとこう)じゃないか。

キーワードと説明文の設定。終了タグなし。HEADタグの間(<HEAD>〜</HEAD>)に置く。

キーワード(keywords)は、「○○,○○,○○」のやうに(ように)「,」で區切って(区切って)複數(複数)設定出來る(出来る)。
説明文(description)を設定しとくと、檢索(検索)サイトで檢索(検索)かけた時の結果一覽(一覧)なんかに、本文の一部じゃなくてこの説明文が表示されたりする。 (まぁ表示されるトコと表示されないトコがあるみたいだけどね。)

この2つは特に設定しなくても問題なし。
それに、全部のページにいちいち設定してたらメンド臭いし邪魔だらう(だろう)から、サイトの玄關(玄関)になるページとかトップページとかに設定するだけで十分じゃないかな。

…上の畫像(画像)に <LINK REL="shortcut icon" HREF="favicon.ico"> なんてタグも寫ってる(写ってる)けど、これはサイトのアイコンの表示指定ね。ファビコンってヤツ。
まぁまぁ、これも無くても問題無いタグだし、アイコン(icoファイル)の作り方はここではやらないので、興味のある人は各自調べてみてよ。

(ファビコン)

ページの情報をもう一つ。

「本文ここから」の印である <BODY>タグ。ここに、

みたいに書き加へる(加える)と、
文字の色(TEXT="#○○")、背景色(BGCOLOR="#○○") もしくは背景畫像(画像)(BACKGROUND="○○")を指定できる。

特に指定しない時は、標準(デフォルト)で文字色:黒(#000000)、背景色:白(#FFFFFF)。

文字色を白、背景色を黒にしたパターン。

文字色を白、
背景色を黒にしたパターン。

<BODY BGCOLOR="#ADFF2F" TEXT="#800080">

文字色を紫、背景色を黄緑にしたパターン。
本文中の
指定は、
無效にはならない。

タグで本文中に文字色が指定されてる時は、ページ設定(<BODY TEXT="#○○">)よりもこっちの個別設定が優先される。

背景畫像(画像)を指定する場合、そのパスは、畫像(画像)を表示するときと同じ方法で決まる。
あと、背景畫像(画像)は、自動的に隙間なく敷き詰められるので、畫像(画像)を表示するやう(よう)指定すると、背景色(BGCOLOR="#○○")は見えなくなる。

background.html(表示例)
　

はいはいはい。長くなっちゃったけど、これでやっとこさ話を戻せますよっと。

ページを分けるといふか(いうか)、ページを新しく作るには、最初の手順からやってってもまーいいんだけど、今あるHTMLをコピーしちゃった方が手っ取り早いし、ページ設定なんかもそのまんま引き繼げる(継げる)よね。

この HTMLの名前(ファイル名)だけど、「index.html」ってのを用意しておくとサーバーに上げた時(ネットに公開した時)にそれが玄關口(玄関口)になる。

www.○○.jp でも www.○○.com でもなんでもいいけど、トップページのファイル名が「top.html」だったときなんかは、「www.○○.jp/top.html」まで入力しないと表示されない。
でも index.htmlを用意しとけば「www.○○.jp/」までの入力で勝手に飛んでくれる。
www.○○.jp/△△.html …みたいに個別にページが指定入力されない場合は、自動的に「index.html」を探すやうに(ように)なってるのね。「index.html」が無いと "ページが見つかりません" なんて、エラーになることもある。

ってなワケなので、一番上層のフォルダには「index.html」を置いとかう(こう)(下圖(下図)※1)。

ホームページ(フォルダ)

index.html(テキスト)

←玄關　※1

menu.html(テキスト)

img(フォルダ)

photo.jpg(イメージ)

desk(フォルダ)

index.html(テキスト)

※2　　　　　

ちなみに、下層フォルダに index.html を置いた場合(上圖(上図)※2)、
www.○○.jp/desk/ = www.○○.jp/desk/index.html ってことになる。

とまぁ、index.html = 玄關(玄関)とは表現したけれど、index.html をトップメニューにしちゃっても全っ然構はない(構わない)んだよね。
見る方としては、「ようこそ」なんて畫面(画面)なしでいきなりメニュー表示された方が早くていいかも。
　

どーでもいいけど、ココ(蜻蛉ノ館)のディレクトリ(フォルダ)はこんな感じになってる。(2011年3月9日時點(時点))
フレームなしページを見たら、構造が理解できるかも。 …いやまぁ、ココの造り理解しても、しょーがねぇっちゃしょーがねぇんだけど。←

そんな話は置いといて。
　

さてさて、ページがいくつもあったら、そいつらを繋げてやらなきゃね。
ここまで來て(来て)ようやっとリンク(ハイパーリンク)の登場っすよ。

まぁまぁ、畫像(画像)表示のパスが分かってれば、リンク張んのぐらゐ(ぐらい)どっつーことねぇんだけど。

パスの出し方は畫像(画像)と同じ。
○○ってのがリンク先の位置(アドレス)で、△△ってのはクリックする文字列。
この△△の部分が青字+アンダーライン(←色つけてるだけなのでクリックできません)で表示されるやうに(やうに)なる。

link_test.html(使用例)
　

リンク先は .html の他、.jpg でも .png でも .txt でも .mp3 でも、基本的になんでもリンク張れる。
　

…みたいに、「TARGET="_blank"」の指示を追加すると別ウィンドウ(新規ウィンドウ)で表示されるやうに(やうに)なる。
この指定が無い場合は(通常は) 今表示してるウィンドウ内で切り替はる(替わる)よ。

また、△△の部分は文字の代はり(代わり)に畫像(画像)も指定できる。
さういふ(そういう)時はかう(こう)ね。

まー要は、<A HREF="○○">〜</A>で挾みゃぁ(挟みゃぁ) クリック出來るやうに(出来るように)なるんだ。

ほんで、畫像(画像)を指定した場合、周りに青い枠が勝手に付いちゃうんだけど、コイツが邪魔な時は <IMG>タグに「BORDER=0」を附加(付加)すると囘避(回避)できる。

左: <A HREF="photo.jpg" TARGET="_blank"><IMG SRC="photo.jpg"></A>
右: <A HREF="photo.jpg" TARGET="_blank"><IMG SRC="photo.jpg" BORDER=0></A>

リンクについての補足。

外部サイトへのリンクを張る場合、<A HREF="http://www.○○.jp/">○○さんのサイト</A> みたいにアドレスの最初 httpのトコから入れとかないといけない。

當然(当然)自分の手がけたページじゃないので、自分のサイトの一部であるかのやうに(ように)見せかけてリンクを組み込んだりするなんてのはマナー違反だね。

マナーといへば(いえば)、個人のサイトとかには「リンクフリー」とか「フリーリンク」なんて書いてあることもあるよね。
これは「自由にリンクしていいよ」って意味だけど、逆に言へば(言えば)、この表記の無いところは勝手にリンク張っちゃダメなのか？ってことにもなる。
「リンクしてもいいですか？」って基本サイトの管理人に事前に確認取るのが常識みたいになってるけど、どうやらかういふ(こういう)ことするのは日本人ぐらゐ(ぐらい)みたいよ。
世界的には「リンクなんて張られてナンボ」「基本無斷(無断)」って意識なんだってさ。
良く言へば(言えば)丁寧、惡く(悪く)言へば(言えば)細かすぎる。それが日本人なのね。

まぁそもそも、インターネットが普及し出した頃は、「世界中の誰でも見られる」ってのを賣り(売り)にしてたよーな氣(気)がするんだけどさ、う〜ん、今はどうなんかね？
不特定多數(不特定多数)に見られるのが嫌なら、会員制にしてパスワードとか發行(発行)すればいいと思うんだが。

とそんなワケで、インターネットってのは原則 "開かれた場" であるのと同時に、世界中の人が利用してる分いろんな考へ方(考え方)が混在してるんだってのも、サイトを作らうと(作ろう)思ったら意識しとくに越したことは無いだらう(だろう)ね。
　

vol.4 畫像(画像)の表示←　→vol.6 表を作る

TOP>タグ打ちでWebページをつくる>vol.5.ページを分ける