ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >HTMLソースの編集

HTMLソースの編集

サブページとはTOPページ以外のページです。 サブページを作る時はTOPページのヘッダーとフッターの部分 のレイアウトと同じレイアウトにすると効率よく楽に複数のページ作る ことができます。

■ TOPページのソースをコピー、貼り付けする

まず新規にメモ帳を立ち上げます。そしてTOPページを開き、ソースも開きます。 編集→すべて選択でソースをコピーして新規に立ち上げた方の ソースに丸ごと貼り付けます。

また、TOPページの外部ファイルも同時に開いておきます。

新規メモ帳に貼り付けたソース

<HTML>
<HEAD>
<TITLE>ホームページのタイトル</TITLE>
<link rel="stylesheet" href="toppage.css" type="text/css">
</HEAD>
<BODY>
<div id="body">
<div id="header">ホームページのタイトル</div>
<div id="header2" align="center">
<a href="menu1.html">メニュー1</a>
<a href="menu2.html">メニュー2</a>
<a href="menu3.html">メニュー3</a>
<a href="menu4.html">メニュー4</a>
<a href="menu5.html">メニュー5</a>
<a href="menu6.html">メニュー6</a>
</div>
<div id="middle">
TOPページのメインコンテンツ
</div>
<div id="rightmenu">
<ul>
<li><a href="htmltag.html">HTMLタグ</a></li>
<li><a href="stylesheet.html">CSSとは</a></li>
<li><a href="source.html">ソースとは</a></li>
</ul>
<hr>
<ul>
<li><a href="server2.html">サーバーとは</a></li>
<li><a href="browser2.html">ブラウザとは</a></li>
</ul>
<hr>
<ul>
<li><a href="bbs.html">雑談掲示板</a></li>
<li><a href="chat.html">チャット</a></li>
<li><a href="mailform_sample.html">問い合わせ</a></li>
</ul>
</div>
<br clear="all">

<div id="footer">
<a href="aboutlink_sample.html">リンクについて</a>
<a href="menseki.html">免責事項</a>
<a href="mutuallylink_sample.html">相互リンク募集</a>
</div>
</div>
Copyright (C) 2000-2011 サイト名 All rights reserved.
</BODY>
</HTML>

上記のソースで赤文字の部分が不要な部分なので 全て削除します。
そしてTOPページのタイトルを 削除してタイトル部分をサブページのタイトルに変更します。
また、 <HEAD>〜</HEAD>内の
<link rel="stylesheet" href="toppage.css" type="text/css"> のtoppage.cssの 部分をsubpage.cssに変更すると 以下のようなソースになります。

<HTML>
<HEAD>
<TITLE>サブページのタイトル</TITLE>
<link rel="stylesheet" href="subpage.css" type="text/css">
</HEAD>
<BODY>
<div id="body">
<div id="header">ホームページのタイトル</div>
<div id="header2" align="center">
<a href="menu1.html">メニュー1</a>
<a href="menu2.html">メニュー2</a>
<a href="menu3.html">メニュー3</a>
<a href="menu4.html">メニュー4</a>
<a href="menu5.html">メニュー5</a>
<a href="menu6.html">メニュー6</a>
</div>
<div id="middle">
メインコンテンツ
</div>
<div id="footer">
<a href="aboutlink_sample.html">リンクについて</a>
<a href="menseki.html">免責事項</a>
<a href="mutuallylink_sample.html">相互リンク募集</a>
</div>
</div>
Copyright (C) 2000-2011 サイト名 All rights reserved.
</BODY>
</HTML>

下記リンクから解説その2(CSSファイルの編集のページ)に移動して下さい。

CSSファイルの編集
ヘッダーを追加する
サブページのサンプル


HTMLタグ一覧
スタイルシート一覧


HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.