ドリル式ホームページの作り方

div内に文章を記述する

ドリル式ホームページの作り方TOP  >>  Lesson8〜floatを使ったレイアウト〜  >>  div内に文章を記述する

div内に文章を記述する

先ほどdivとfloatを使って作った骨格内に、文章を入れます。

タイトルを記述する

div#b1内に入れるタイトル部分には、h1タグでくくったタイトル画像を入れます。

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>ホームページ作成講座</title>
<meta name="description" content="ホームページ作成の方法を初心者さんにもわかるように、簡単に解説している講座です。" />
<meta name="keywords" content="ホームページ,作成,講座" />
<meta name="author" content="wakabagari" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
</head>
<body>
<div id="b1234">
<div id="b1">
<h1><img src="gif/24.gif" alt="ホームページ作成講座" /></h1>
</div>
<p id="a2"><img src="gif/25.gif" alt="境界画像" /></p>
<div id="b2">サイドメニュー</div>
<div id="b3">コンテンツ</div>
<div id="b4">フッター</div>
</div>
</body>
</html>

サイドメニューを記述する

サイドメニューをp要素とul要素を使用して作ります。

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>ホームページ作成講座</title>
<meta name="description" content="ホームページ作成の方法を初心者さんにもわかるように、簡単に解説している講座です。" />
<meta name="keywords" content="ホームページ,作成,講座" />
<meta name="author" content="wakabagari" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
</head>
<body>
<div id="b1234">
<div id="b1">
<h1><img src="gif/24.gif" alt="ホームページ作成講座" /></h1>
</div>
<p id="a2"><img src="gif/25.gif" alt="境界画像" /></p>
<p>HTML講座</p>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">Lesson1</a></li>
<li><a href="#">Lesson2</a></li>
<li><a href="#">Lesson3</a></li>
</ul>
<p>CSS講座</p>
<ul>
<li><a href="#">Lesson4</a></li>
<li><a href="#">Lesson5</a></li>
</ul>
<div id="b3">コンテンツ</div>
<div id="b4">フッター</div>
</div>
</body>
</html>

コンテンツを記述する

サイドメニューをp要素とul要素を使用して作ります。

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>ホームページ作成講座</title>
<meta name="description" content="ホームページ作成の方法を初心者さんにもわかるように、簡単に解説している講座です。" />
<meta name="keywords" content="ホームページ,作成,講座" />
<meta name="author" content="wakabagari" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
</head>
<body>
<div id="b1234">
<div id="b1">
<h1><img src="gif/24.gif" alt="ホームページ作成講座" /></h1>
</div>
<p id="a2"><img src="gif/25.gif" alt="境界画像" /></p>
<div id="b2">
<p>HTML講座</p>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">Lesson1</a></li>
<li><a href="#">Lesson2</a></li>
<li><a href="#">Lesson3</a></li>
</ul>
<p>CSS講座</p>
<ul>
<li><a href="#">Lesson4</a></li>
<li><a href="#">Lesson5</a></li>
</ul>
</div>
<div id="b3">
<p>>><a href="#">HOME</a> >><a href="#">ホームページ作成講座TOP</a></p>
<h2>INFORMATION</h2>
<dl>
<dt>2008/1/1</dt>
<dd>ホームページ作成講座を開設しました。</dd>
<dt>2008/1/2</dt>
<dd>ホームページ作成講座を閉鎖しました。</dd>
<dt>2008/1/3</dt>
<dd>サーバーを移転しました。</dd>
<dt>2008/1/4</dt>
<dd>ドメインを変更しました。</dd>
</dl>
<h2>Lesson1:メモ帳を起動してみよう!</h2>
<p>
ホームページを作成するためにはエディタと呼ばれるアプリを起動して、そこにプログラムを記述します。
</p>
<p>
Windowsをお使いの方は標準で付属しているエディタとして、メモ帳とwordpadがありますので、それを使うとよいでしょう。
</p>
<p>
さらに高性能のエディタをお求めの方は、無料ならterapad、有料なら秀丸エディタがお勧めです。
</p>
<h2>Lesson2:タグを書いてみよう!</h2>
<p>
ホームページを作るのに使用する言語はHTMLと呼ばれ、タグと呼ばれる命令を使って、色やフォントの大きさを指定することができます。
</p>
<p>
ホームページ作成に使われるタグは文字の装飾だけに限らず、背景や画像、ページの骨格を指定するものもあります。
</p>
</div>
<div id="b4">フッター</div>
</div>
</body>
</html>

フッターを記述する

フッター部分に、フッターメニューと著作権情報を記述します。

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>ホームページ作成講座</title>
<meta name="description" content="ホームページ作成の方法を初心者さんにもわかるように、簡単に解説している講座です。" />
<meta name="keywords" content="ホームページ,作成,講座" />
<meta name="author" content="wakabagari" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
</head>
<body>
<div id="b1234">
<div id="b1">
<h1><img src="gif/24.gif" alt="ホームページ作成講座" /></h1>
</div>
<p id="a2"><img src="gif/25.gif" alt="境界画像" /></p>
<div id="b2">
<p>HTML講座</p>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">Lesson1</a></li>
<li><a href="#">Lesson2</a></li>
<li><a href="#">Lesson3</a></li>
</ul>
<p>CSS講座</p>
<ul>
<li><a href="#">Lesson4</a></li>
<li><a href="#">Lesson5</a></li>
</ul>
</div>
<div id="b3">
<p>>><a href="#">HOME</a> >><a href="#">ホームページ作成講座TOP</a></p>
<h2>INFORMATION</h2>
<dl>
<dt>2008/1/1</dt>
<dd>ホームページ作成講座を開設しました。</dd>
<dt>2008/1/2</dt>
<dd>ホームページ作成講座を閉鎖しました。</dd>
<dt>2008/1/3</dt>
<dd>サーバーを移転しました。</dd>
<dt>2008/1/4</dt>
<dd>ドメインを変更しました。</dd>
</dl>
<h2>Lesson1:メモ帳を起動してみよう!</h2>
<p>
ホームページを作成するためにはエディタと呼ばれるアプリを起動して、そこにプログラムを記述します。
</p>
<p>
Windowsをお使いの方は標準で付属しているエディタとして、メモ帳とwordpadがありますので、それを使うとよいでしょう。
</p>
<p>
さらに高性能のエディタをお求めの方は、無料ならterapad、有料なら秀丸エディタがお勧めです。
</p>
<h2>Lesson2:タグを書いてみよう!</h2>
<p>
ホームページを作るのに使用する言語はHTMLと呼ばれ、タグと呼ばれる命令を使って、色やフォントの大きさを指定することができます。
</p>
<p>
ホームページ作成に使われるタグは文字の装飾だけに限らず、背景や画像、ページの骨格を指定するものもあります。
</p>
</div>
<div id="b4">
<ul>
<li>| <a href="#">sitemap</a></li>
<li> | <a href="#">Link1</a></li>
<li> | <a href="#">Link2</a></li>
</ul>
<address>Copyright 2007@nkdesk. all right reserved.</address>
</div>
</div>
</body>
</html>

|(たてぼう)の右と左の半角スペースは、”(&)+(nbsp;)”で表します。

ここまでの作成経過はコチラ→サンプル(ホームページ作成講座)

各ボックスをわかりやすくするため、サンプルでは黒色の枠線を付けております。


Lesson8〜floatを使ったレイアウト〜

  1. XHTMLの骨格を記述する
  2. floatタグを使用する
  3. divとfloatで骨格を作る
  4. div内に文章を記述する
  5. スタイルシートを適用する
  6. ブラウザによる表示の違いを学ぶ
  7. サイトを画面の中央に配置する
  8. ロールオーバーボタンの作成(文字の背景切替型)
  9. ロールオーバーボタンの作成(文字画像切替型)
  10. サンプルにロールオーバーメニューを配置する

CGIの設置

  1. 掲示板を設置する
  2. カウンターを設置する
  3. アクセス解析を導入する
  4. アクセスランキングを設置する

ホームページの公開

  1. ドメインを取る
  2. サーバーを選ぶ
  3. ファイルをアップロード(公開)
Copyright(C) ドリル式ホームページの作り方 all right reserved.