HTMLの基本的なソース一例

ソース見本

見た目より長いソースです。
一度、スクロールしてみてください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<!--
★必要のないタグは消してください！
★コメント(＜！－－あいう－－＞や/*あいう*/)も出来れば消してください！
★「meta」「link」を使用する場合
　＜！－－コメント－－＞を削除し「」を半角の山括弧(小なり記号・大なり記号にして下さい)
★「◆～～～◆」の部分を記述してください。
　例：content="◆ページの内容説明◆"をcontent="HTML に関するページ"
-->
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<!--文書の漢字コードを宣言-->

<meta http-equiv="Expires" content="San, 13 Jan 2002 09:30:50 GMT">
<!--ページがキャッシュ(読み込み)から消去されるべき、グリニッジ標準の年月日と時刻-->

<!--「meta http-equiv="Pragma" content="NO-CACHE"」-->
<!--アクセスする度に最新の更新ページを読み込ませる-->

<meta name="robots" content="INDEX, NOFOLLOW">
<!--検索ロボットの収集をこのページだけに限定-->

<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">
<!--文書中のスクリプトなどを使用するjavascriptの基準言語を指定-->

<!--[meta http-equiv="Refresh" content="10"]ページを10秒毎にリフレッシュ(再更新)します-->
<!--他に、サイト引越し(移転)を行った場合
「meta http-equiv="Refresh" content="10;URL=http://www.***.ne.jp/"」とすれば、
　content="10秒後に;URL=http://～移転先"で指定したURLにジャンプします
-->

<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.8,Transition=3)">
<!--このページに移動してくる時の演出効果-->

<!--Duration=n には効果完了までの秒数(0.1～30秒)を指定-->
<!--Transition=n 効果のやり方(0～23)を指定-->

<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.8,Transition=3)">
<!--他のページに移動する場合の演出効果-->

<title>◆ページのタイトル◆</title>

<link rel="contents" href="◆目次のページのURL◆">
<link rel="prev" href="◆このページに関連性のある前のページのURL◆">
<link rel="next" href="◆このページに関連性のある次のページのURL◆">
<link rev="MADE" href="mailto:◆メールアドレス@メールアドレス◆">
<link rel="START" href="◆index.html◆">
<link rel="INDEX" href="◆*****.html◆">
<link rel="NEXT"  href="◆*****.html◆">
<!--link rel="の属性は、
START=開始ページ,INDEX=索引ページ,NEXT=次のページ,PREV=前のページ,CONTENTS=目次ページ,
GLOSSARY=用語集ページ,APPENDIX=付録ページ,HELP=ヘルプページ
CHAPTER=章,SECTION=節,SUBSECTION=小節-->

<!--外部スタイル・シートを使用する場合
「link rel="stylesheet" href="◆外部スタイル・シートのURLファイル名◆" type="text/css"」
外部スタイル・シートを設置し取り込む場合のURLファイル名-->

<style type="text/css">
    <!--
    a:link, a:visited, a:hover, a:active { text-decoration: none; }/*リンクの下線を消します*/
/*★下記のa:link・a:visited・a:hover・a:active の順番は崩さないで下さい*/
    a:link { color: ◆#未訪問のリンク文字色◆; }
    a:visited { color: ◆#訪問済みのリンク文字色◆; }
    a:hover { color: ◆#マウスポインターが文字にかかった時文字色◆; }
    a:active { color: ◆#クリック時点のリンク文字色◆; }
/*★下記のbackground-color: ◆#ページ全体の背景色◆;を背景画像(壁紙)にする場合は、
	background-image:url(◆背景画像のファイル名.gif◆); に変えてください*/
/*★margin- は、ページ全体の余白を指定します*/
/*★line-height は、文字の行どうしの高さを指定します*/
    body {
        color: ◆#ページ全体の基準文字色◆;
        background-color: ◆#ページ全体の背景色◆;
        margin-left: ◆左マージン◆px;
        margin-right: ◆右マージン◆px;
        margin-top: ◆上マージン◆px;
        margin-bottom: ◆下マージン◆px;
        line-height: ◆行の高さ◆%; 
	letter-spacing:◆文字の間隔を指定します◆px; }
    h1{ border:medium double #770077;padding: 20px; }
    p    {line-height: 150%;}
    -->
</style>
<!--下記のJavaScript は、マウスを重ねると説明を表示の見本です。-->
<script type="text/javascript">
 <!--
   msg=new Array();
   msg[0]=""Contents.の説　明;
   msg[1]="はじめのページ";
   msg[2]="プロフィール";
   msg[3]="掲示板";
   msg[4]="お勧めリンク";
   msg[5]="日記帳";
   msg[6]="更新報告";
   msg[7]="画像表示リンクもOK";
   function Msg(index){
    document.contents.mylink.value=msg[index];
   }
// -->
</script>
</head>
<body>
 <noscript><div><h1>Java Script 非対応ブラウザです。</h1>
  <p>このサイトをご利用の場合、Java Script の実行をオンにして下さい。</p></div>
 </noscript>
<div>
  <h1 style="text-align:center;border:medium double #ff66ff">HTMLの基本的なソース一例</h1>
   <p>このページは、下記のテキストソースをコピーペーストすれば、出来上がります。</p>
<table border="0" cellpadding="8px" summary="コンテンツリンクとページの説明">
  <tbody>
    <tr>
      <td rowspan="2">
	<!--マウスを重ねるとテキストボックスに説明を表示-->
	<FORM name="contents">
	<INPUT type="text" name="mylink" size="25" value="Contents.の説　明">
	</FORM>
	<A href="index.htm" onMouseOver="Msg(1);this.style.background='#4444ff'" 
	onMouseOut="Msg(0);this.style.background='#bbbbbb''">TOP</A><BR>
	<A href="Profile.htm" onMouseOver="Msg(2);this.style.background='#4444ff'" 
	onMouseOut="Msg(0);this.style.background='#bbbbbb'">私は？</A><BR>
	<A href="BBS.htm" onMouseOver="Msg(3);this.style.background='#4444ff'" 
	onMouseOut="Msg(0);this.style.background='#bbbbbb'">語り処</A><BR>
	<A href="Link.htm" onMouseOver="Msg(4);this.style.background='#4444ff'" 
	onMouseOut="Msg(0);this.style.background='#bbbbbb'">Links</A><BR>
	<A href="Diary.htm" onMouseOver="Msg(5);this.style.background='#4444ff'" 
	onMouseOut="Msg(0);this.style.background='#bbbbbb'">Diary</A><BR>
	<A href="Updat.htm" onMouseOver="Msg(6);this.style.background='#4444ff'" 
	onMouseOut="Msg(0);this.style.background='#bbbbbb'">Updating</A><BR>
	<A href="Updat.htm" onMouseOver="Msg(7)" 
	onMouseOut="Msg(0)"><img src="***.gif"></A><BR>
	<!--マウスを重ねると説明を表示。終わり-->
      </td>
      <td valign="top" rowspan="2" 
	style="padding-left:80px">このようにセッティングできます。</td>
      <td style="padding-left:80px">ココに画像や文章</td>
    </tr>
    <tr>
      <td style="padding-left:80px">ココに画像や文章</td>
    </tr>
  </tbody>
</table>
</div>
<hr>
<div style="text-align:center">
  <h2>ソース見本</h2>
   <p>見た目より長いソースです。</p>
   <iframe neme="任意の名前" widht="200" height="200"
    src="http://表示したいファイルのURLや画像のURLもOK!!">
   表示されない時は、<A href="http://">表示</A>をクリックしてね！
   </iframe>
</div>
<hr>
</body>
</html>
TOP 私は？語り処 Links Diary Updating	このように、フレームを使わないでコンテンツと文章（画像）を個別にセッティングできます。　左のリンクにマウスポインタを当てると、背景色が出現し上のテイスト欄に説明が出ます。　　　　他に色々な効果も付けています。	ココに画像や文章
		ココに画像や文章