XHTMLの最近のブログ記事

リンクとは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>
のようにファイル名をしてするだけでかまいません。



第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の押入TOPへ

カウンタ

アーカイブ

ウェブページ

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

このアーカイブについて

このページには、過去に書かれたブログ記事のうちXHTMLカテゴリに属しているものが含まれています。

前のカテゴリはCSSです。

次のカテゴリはその他です。

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

books