東京・大阪・名古屋・福岡・仙台・札幌で開催する初心者向けのHTML・CSSを使ったホームページ制作の1日集中講座(セミナー)です。 HTML・CSSの入門講座なら、神田ITスクール!

演習1.11 サブページ(koinu.html)の作成

サブページ(koinu.html)の作成

演習1.11 サブページ(koinu.html)の作成

☑これまでに学んだ内容

続いて、2つ目のサブページを作成していきます。前節の「子猫の部屋」と同様に、サンプルソースの内容をコピーして、そのまま使用してください。

では、2つ目のサブページ(koinu.html)を作成していきましょう。

図 1.11.1 サブページ(koinu.html)

1. サブページ「koinu.html」を作成してHTMLファイルを保存

2つ目のサブページは、「子犬の部屋」というページです。さきほどは子猫たちを紹介しましたが、今回は、かわいい子犬たちを紹介します。新しくメモ帳を開いて、[koinu.html]という名前で、[ch06]フォルダ(これまで作成してきた[index.html]や[koneko.html]と同じ場所)に保存してください。

文字コードは、前回同様に、UTF-8としましょう。

2. HTMLファイルにソースコードを記述

今作成したHTMLファイルに、以下のURLにあるサンプルソースをコピーして、メモ帳に貼り付けしてください。

http://www.stepbystep-approach.com/element/software/html/index.php

「子犬の部屋のサンプルソース」

①ソース・フォルダー :html/ch06
②ファイル名     :koinu.html

➢ koinu.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>子猫と子犬の部屋</title>
</head>
<body bgcolor="#FFFFCC">
<center>
<h1><font color="#2A7e55">子犬の部屋</font></h1>
<h3><font color="red">かわいい子犬たちの写真</font></h3>
<table border="3" cellpadding="4" cellspacing="4 " width="660">
<tr>
<td width="220" align="center" bgcolor="#333333"><strong><font color="#FFFFFF">トップページ</font></strong> 
</td>
<td width="220" align="center" bgcolor="#333333"><strong><font color="#FFFFFF">子猫写真</font></strong></td>
<td width="220" align="center" bgcolor="#333333"><strong><font color="#FFFFFF">子犬写真</font></strong></td>
</tr>
</table>
 
	~中略~

<hr width="540">  
</center>
</body>
</html>
        

3. HTMLファイルを上書き保存してブラウザで表示

サンプルソースをメモ帳へ貼り付けたら、ブラウザで確認してみましょう。図6.11.1の画像のようなページが表示されればOKです。

NEXT>> 演習1.12 ページのリンクを設定する

HTMLとCSSの入門 目次

ご不明点はお問い合わせフォームからご連絡ください。

HTMLとCSSの入門 目次

ホームページ制作・保守

ホームページ制作・保守

セミナー講師

セミナー講師

主席インストラクター
早稲田大学大学院 理工学部卒業
SanJose 州立大学、コンピューター工学部卒業
アメリカのシリコンバレーでは、プログラマー・SEとして活躍
講師の詳細はこちら

ワードプレスセミナーも人気!

ワードプレスセミナーも人気!

より手軽にホームページ制作をしてみたい方にはワードプレスセミナーもおすすめです。
ワードプレスセミナーはこちら

1日集中HTML・CSSセミナーは、プログラミング教育で8年間の実績のある神田ITスクールが運営しています。
初心者、未経験者へわかりやすく教えるのには自信がありますので、ぜひご参加ください。
神田ITスクールのサイトはこちら

ホームページ制作・保守

ホームページ制作・保守
PAGETOP
Copyright © 2015 FusionOne Co.,Ltd. All rights reserved.