ホームページ作成応援サイト

入門!ホームページNAVI

タイトルの記述(XHTML共通)

タイトルはtitleタグでくくるだけでokです。タイトルはブラウザの左上や検索エンジンで検索した時の検索対象として非常に重要です。
例えば「アトピー」という題材を扱うときは、かならず「アトピー」という文字列を含むタイトルをつけるようにしましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<meta http-equiv="description" content="初めてのホームページ。">
<meta http-equiv="keywords" content="wakabagari,山登り">
<title>Wakabagari(山登り)</title>
</head>
<body>
</body>
</html>

著作権情報の記述(XHTML共通)

著作権情報はaddressタグ内に記述します。addressタグはbodyとbodyの間に埋め込んで、デフォルトでは斜体になっているので、斜体がいやな場合はスタイルシートで変更してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<meta http-equiv="description" content="はじめてのホームページ。">
<meta http-equiv="keywords" content="wakabagari,山登り">
<title>Wakabagari(山登り)</title>
</head>
<body>
<address>Copyright(C)2007 Wakabagari all rights reserved.</address>
</body>
</html>

リンクの設定

リンクは文字だけでなく、画像にも設定できます。まずは最も基本的な構造を示します。<a href="">と</a>でくくるだけでOKです。

<a href="sample.html">文字</a>
<a href="://www.○○○.ne.jp/">文字</a>
<a href="../file/sample.html">文字</a>
<a href="#nn">同一ページ内リンク</a>
<a href="sample.html#nn">同一フォルダ内リンク</a>
<a href="../file/sample.html#nn">別のフォルダ内へリンク</a>
<a name="nn">フラグ</a>

<a href="mailto:hamayu@○○○.com">メーラー起動</a>
<a href="aaa.zip">ダウンロード</a>

リンクで注意するものが階層です。
同じフォルダ内のページにリンクするのであればいいのですが、AというフォルダからBというフォルダの中のページにリンクしたい場合は、一番下のように記述することになります。「..」は一つ前の階層に戻ることを意味するので、一つ前に戻ってからfileという名前のフォルダのなかsample.htmlを参照します。
同一ページ内や他のフォルダのページ単位のリンクではなく、特定の場所へ飛ぶ場合は、リンクボタンの方にはアドレスとリンク先で定義された名前を書いて、リンク先にはフラグを立てておきます。こうすることで同一ページ内リンクという文字を押すとフラグという文字にリンクされています。

これを利用して先のページにリンクメニューを設置します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<meta http-equiv="description" content="初心者が作るページです。">
<meta http-equiv="keywords" content="wakabagari,若葉狩り">
<title>Wakabagari(若葉狩り)</title>
</head>
<body>
<img src="sho1.gif" alt="wakabagari" width="280" height="50">
|<a href="">HOME</a>|<a href="">PROGRAMING</a>|<a href="">TRAVEL</a>|<a href="">DISEASE</a>|<a href="">BBS</a>|
<h1>Wakabagari</h1>
<img src="fuukei1.jpg" alt="風景写真" width="500" height="180">
<h2>意味</h2>
<p>
若葉狩りというのは紅葉狩りの若葉バージョンの事です。つまり、若葉を見に行くみたいなのです。ただ、本来の意味は別のところにあります。それは何かというと、みなさんは自動車につける若葉マークを知っていますか?あれって初心者がつけていますよね? ここまでくればわかるでしょう。すべてにおいて初心者なので、HPにくること=若葉狩りにくることみたいになるでしょう?ここがこのサイト名の意味なのです。
</p>
<h2>目的</h2>
<p>
目的はというと、特にありませんが、あえていえば、紅葉マークをつけることでしょうね。自動車だってはじめは若葉マークだけど 1年後にマークははずれ、高齢者になると紅葉マークにななります。それと一緒ですね。

最終更新日:2016/7/8


コピーライト