髭仙人の漫ろ歩き
HTML
............................ unworldly man go for a ramble in the internet world ...
HTMLの基本
 最も簡単なホームページ


 最も簡単なホームページとして、右の「My Home Page」を紹介します。そのHTML文章の最も簡単な記述は、一般的には下記の通りです。

<HTML><HEAD></HEAD>
<BODY>
My Home Page
</BODY>
</HTML>

 但し、現実には右のHTML文章は、「My Home Page」のみであります。表示は如何ですか?

 

右の
HTML文の基本記述  
 自前のHTMLのテンプレート


 HTML文章の作成にあたっては、下記のようなテンプレートに自前の項目を記入して、オリジナルなテンプレートを作成しておくのも便利な方法でしょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML lang="ja">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META name="author" content="★制作者名★">
<META name="description" content="★内容説明★">
<META name="keywords" content="★キーワード★, ★キーワード★, ★キーワード★">
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Content-Script-Type" content="text/javascript">
<TITLE>★文書タイトル★</TITLE><LINK rel="contents" href="★目次URL★">
<LINK rel="prev" href="★前の文書URL★">
<LINK rel="next" href="★次の文書URL★">
<LINK rel="stylesheet" href="★外部スタイルURL★" type="text/css" media="screen">
<STYLE type="text/css" media="screen">
<!--
 A:link, A:visited, A:hover, A:active { text-decoration: none }
 A:link { color: ★色★ }
 A:visited { color: ★色★ }
 A:hover { color: ★色★ }
 A:active { color: ★色★ }
 BODY {
  color: ★文字色★;
  background-color: ★背景色★;
  margin-left: ★左マージン★;
  margin-right: ★右マージン★;
  margin-top: ★上マージン★;
  margin-bottom: ★下マージン★;
  line-height: ★行の高さ★;
 }
 -->
</STYLE>
<SCRIPT type="text/javascript">
 <!--
 if (self != top) top.location.href = self.location.href;
 // -->
</SCRIPT>
</HEAD>
<BODY background="★背景画像URL★" bgcolor="★背景色★" text="★文字色★" link="★リンク色★" vlink="★リンク色★" alink="★リンク色★">
<NOSCRIPT></NOSCRIPT>My Home Page
</BODY>
</HTML>

 それぞれの「★記入項目★」部分にオリジナルな内容を記載、変更および削除して使用してください。

 

 
HTML文の基本記述解説 (META)  
 HTML文のページ情報 (NETA)


 HTML文章の<head>〜</head> の部分を ヘッダ部 と呼びます。そのヘッダ部のHTML文のページ情報を記載しているMETA部分の簡単な解説です。

タイトルを入れる
 ここに記載しないとと、ロボット系の検索のエンジンなどに登録されたときや、お気に入り登録されたときに「無題標準ページ」「無題ドキュメント」などなってしまいます。

<HEAD>
<TITLE>★文書タイトル★</HTML>
</HEAD>

著者名
 ページの著者名を明記したいときに書き込みます。

<HEAD>
<META name="AUTHOR" content="★制作者名★">
</HEAD>

ページの説明
 ページの説明を記入します。これも、検索系エンジンで見る人が分りやすくなります。

<HEAD>
<META name =Description content="★内容説明★">
</HEAD>

ページのキーワード
 ページのキーワードを書き込むことが出来ます。これは、指定する事でロボット系の検索エンジンで検索されるときに、この内容の物でヒットすることが有ります。

<HEAD>
<META name="keywords" content="★キーワード★, ★キーワード★, ★キーワード★">
</HEAD>

指定したURLへジャンプ
 ページを表示した後、指定した秒数後に別ページへ移動させます。HPが移転したときに、よく使われます。

<HEAD>
<META http-equiv="refresh" content="5;URL=http://www.xxx.com/">
</HEAD>

content=5 というのは、五秒後にジャンプという意味です。
URL=http〜 というのは、 そのページにジャンプするという意味です。

製作したツール情報
 ホームページを作製したツールを記入します。テキストエディタだけで編集した場合は書かなくていいです。何かツールを使ったからといって、必須項目と言うわけでも有りません。

<HEAD>
<META name="GENERATOR" content="ツール名">
</HEAD>

漢字コードを指定
 ページを表示する漢字コードを指定できます。コレにより、サイトを見たときの文字化けを防ぎます。

<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=コード">
</HEAD>

コードのところに、漢字コードを書きます。種類は通常、シフトJISでいいと思います。

 

 
HTML文の基本記述解説 (BODY)  
 HTML文のページ情報 (BODY)


 HTML文章の<body>〜</body> の部分が 本文 です。その本文の先頭のHTML文のページ情報のBODY部分の簡単な解説です。

背景画像を指定
 ここには背景にしたい画像のパスを指定します。

<BODY background="★背景画像URL★">

背景色を指定
 ここにはページの背景色を指定します。英語表記で記述(例 <BODY bgcolor="red">)するか、「BGRの値」で記述します(例 <BODY bgcolor="#FF0000"> )など。

<BODY bgcolor="★背景色★">

文字色の指定
 基本となる文字色を指定します。設定をしない場合は黒になります。

<BODY text="★文字色★">

リンクの色の指定
 基本となるリンクの色を指定します。設定しない場合は青になります。

<BODY link="★リンク色★">

既読リンクの色の指定
 既読リンクの色を指定します。既読リンクというのは、一度クリックしたことがあるリンクの事です。設定していない場合は紫色になります。

<BODY vlink="★リンク色★">

選択リンクの色の指定
 選択リンクの色を指定できます。選択リンクというのは、リンクをクリックした時に変わる色です。どこでもいいのでリンクをクリックしたまま離さないでください。そのときに変わる色が「選択リンク」です。.

<BODY alink="★リンク色★">

 

 

 


Design by unworldly man Teizo AMMA
Email amma@beach.ocn.ne.jp
URL http://www.t-amma.com/