リンクとは2つ以上の情報を関連づけることで、具体的にはウェブページ上のある部分をクリックすると別にページがひらく仕組みになっているものです。
このある部分はテキストでも画像でもかまいません。
また、リンク先は、他のウェブページでも、同一ページ内でも、写真などの画像でもかまいません。

次のソースをコピーしてlink.htmlのように適当な名前を付けて保存してブラウザで見てください。
見た目には「yaho!のページ」と表示されるだけですが、そこをクリックするとyahooのトップページが開くはずです。
このソースはテストなのでhead内の記述は省略しています。
--------------------------------------------------------------------------------------------------------------------
リンクテスト <html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
    <title>リンクテスト</title>
</head>
<body>
    <a href="http://yahoo.co.jp">yahooのページ</a>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------

つまりリンクした箇所をa要素で囲んで、href属性でリンク先のURLを設定するだけです。
この例では外部のページなので「http://yahoo.co.jp」のように書きましたが、自分自身のページで同じ場所にあるページなら、
<a href="./index.html">topページ</a>
のようにファイル名をしてするだけでかまいません。



前回、

このときに値の記述はurl(〜〜)の様にして画像ファイルを相対パス指定します。
相対パスについては重要ですので別の機会で詳しく説明するつもりですが、今のところはわからなくても問題ありません。

と書きましたが、やっぱり気になりますので先に説明することにします。

background-image: url(../image/002.gif);

で、背景にする画像の場所を指定している事は前回書きましたが、問題はこの「../image/002.gif 」が何を意味していて、相対パスとは何かということです。

ファイルを指定するのによく使用されているのは相対パス絶対パスです。


対パス:起点となる現在位置から、目的のファイルやフォルダまでの道筋を記述するのが「相対パス」です。

以下のようなファイル構成があるとして説明します。

[xhtml]┳index.html
┣[css]┳[css2]━test2.css ┃ ┣test.css ┃ ┗bass.css ┗[image]┳001.jpg ┣002.gif ┣003.jpg ┣004.gif 005.gif   

 [ ] はディレクトリ(フォルダ)を表しています。
   

前回までに作ったサンプルページの背景は白のままで、味気ない物でした。
一般のウエブページには壁紙と呼ばれている背景画像が貼ってある物を多く見かけます。
そこで今回はサンプルページにもその壁紙(背景画像)を入れてみます。

この背景画像の設置はスタイルシート(CSS)で行います。
実はHTMLファイルに直接記述して指定しても出来るのですが、デザインに関わる記述はCSSファイルでという原則に基づくのと、HTMLファイルが複数存在する場合(普通存在します。)CSSファイルの記述を一カ所変更するだけですべてのHTMLファイルの背景を変更できるのでやはりCSSファイルに記述した方が都合いと思います。

前回まではXHTMLについてでしたが、今回はいよいよデザインを担当するCSSのお話です。
CSSはHTMLファイルとは別のファイルに書き込んでいきます。
そしてそれをHTMLファイルにつなげます。

  1. CSSファイルの用意
    • エディタを開いて1行目に半角で次のように記述する。
        @charset "Shift_JIS";
    • このCSSファイルを「第1回 いきなりですが、、、」で保存したHTMLファイル「20080808_01.html」と同じフォルダ(xhtml)内に「css」という名のフォルダを作り、その中にに拡張子を「.css」として「test.css」という名前で保存する。
    • ひとまずこの「test.css」は閉じる。
  2. HTMLファイルとCSSファイルをつなげる
    • 「第1回 いきなりですが、、、」で保存したHTMLファイル「20080808_01.html」をエディタで開く。
    • 5行目の先頭にカーソルを合わせて[Enter]キー押して改行する。
    • その場所に次のように記述する。
      <meta http-equiv="Content-Style-Type" content="text/css" />
    • 7行目の先頭にカーソルを合わせて[Enter]キー押して改行する。
    • その場所に次のように記述する。
      <link rel="stylesheet" type="text/css" href="css/test.css" media="screen,print" />
    • 上書き保存する。

これで、HTMLファイルとCSSファイルがつながりました。

<head>と</head>の間の記述が次のようになったはずです。
(赤字が今回追加したところ)

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
 <title>はじめてのXHTML/CSS</title>
 <link rel="stylesheet" type="text/css" href="css/test.css" media="screen,print" />
</head>

 

第1回いきなりですが、、、で保存したhtmlファイル20080808_01.htmlをエディタで開いて見てください。

保存されたなかった方は 20080808_01.html をダウンロードしてエディタ開いてみてください。

(アイコンをダブルクリック等するとおそらくブラウザで表示されてしまうので、メモ帳等のエディタを起動しておいてそこから開くか、直接アイコンをドラッグしてください。)

HTML文章の全体像をみてみましょう。

----------------------------------------------
<html>
  <head>
   <title></title>
  </head>
  <body>
  </body>
</html>
-----------------------------------------------

html文章は上のように大きく分けて、3つの要素から成り立っています。
つまり、html要素、head要素とbody要素です。

head要素には全体の情報を書きます。前回の謎の文章がそうです。
ここに書いた物は<title></title>に挟まれた物以外はブラウザ上には表示されません。
つまりコンピュータに知らせる情報を書くところです。
手紙にたとえるなら封筒で、封筒には宛名とか、折り曲げ禁止とか、重要とが本文以外郵便屋さんに知らせる情報を書きますよね。

body要素は便せんで、本文を書きます。html文章ではテキスト以外にも写真や絵、表や華やかなグラフィックなど可能性は無限にあちます。

そして忘れてはならないのが、文章全体を表すhtml要素です。
これはxhtmlの場合でも<html>終わりは</html>と書きます。

そして、ファイル名.htmlまたはファイル名.htmと拡張子を付けて保存するとできあがりです。

次回からはいよいよタグについてお話しようと思うます。

次回につづく。

前回いきなり登場した文書の冒頭に次のような謎の文字がありました。

-------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
 <title>はじめてのXHTML/CSS</title>
</head>
-------------------------------------------------------------------------------------------------------

 

いきなりですが、
次の点線〜点線の部分(点線はいらない)を次のようにしてみてください。

  • 点線〜点線の部分(点線はいらない)を選択してコピーする。
  • windowsのメモ帳等のエディタを起動してそこに貼り付ける。
  • ディスクトップなどわかりやすい場所にxhtmlと言う名のフォルダ(名前は任意の物でもいいですが、今後の記事の関係で出来ればxhtmlとしてください。)のを作る。
  • 拡張子を「.html」として名前を20080808_01.htmlとして(拡張子「.html」なら名前は任意の物でもいいですが、今後の記事の関係で出来れば20080808_01.htmlとしてください。)その中に保存する。
  • 保存が出来たらそれをダブルクリックかシングルクリックで開いてみる。
    ※任意の名前を付ける時はフォルダやファイルの名には全角文字(日本語)を使わずに半角文字(英数字)にしておいてください。)

それが面倒とか、やり方がわからない方は次のリンクをクリックしてみてください。
でも、このファイルは今後も使っていくつもりですので出来れば保存しておいてください。

20080808_01.html

-------------------------------------------ここから------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
 <title>はじめてのXHTML/CSS</title>
</head>
<body>
 <h1>はじめてのXHTML/CSS</h1>
 <h2>Webページはだれでも作れる!</h2>
 <p>Webページだれにでも作る事ができます。</p>
 <ol>
  <li>テキストエディタだけで作れるから。</li>
  <li>プログラミングのような難しい知識を必要としないから。</li>
 </ol>
 <h3>Menu</h3>
 <ul>
  <li>XHTML</li>
  <li>CSS</li>
  <li>Javascript</li>
 </ul>
</body>
</html>

-------------------------------------------ここまで------------------------------------------------

KUMAOです。

ホームページを作成するためのツールに、○○ビルダーとかドリーム××とかいろいろありますが、ここではそういったツールを使わずに、WINDOWS付属のメモ帳等のエディタにXHTMLのタグとスタイルシートをテキストで記述してホームページを作成する方法を一から説明していこうと思っております。

まったくホームページを作った事のない方を対象として進めていくつもりです。
で、専門的な表現は極力避け、わかりやすい表現に置き換えて説明していくつもりですので、よくご存じの方にはおかしな表現だと思われるかもしれませんがその事についてはご容赦ください。

どこまでうまく説明する事ができるかはわかりませんが、こらからホームページを作ろうの思っておられる方のお役の立てればこうえいです。
付き合いの程よろしくお願いいたします。

KUMAOの押入TOPへ

カウンタ

アーカイブ

ウェブページ

ブログランキング・にほんブログ村へ

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

books