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

htmlの骨格を作成する

ドリル式ホームページの作り方TOP  >>  Lesson3〜CSSを使った装飾〜  >>  htmlの骨格を作成する

htmlの骨格を作成する

前回のサンプルの引用

前回までのサンプルを引用しますので、途中からの人は前回のものをコピーしてください。

<html>
<head>
<title>ホームページ作成講座</title>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
</head>
<body>
<h1><img src="gif/1.gif" alt="ホームページ作成講座" /></h1>
<p><img src="gif/2.gif" alt="境界線" /></p>
<p>|<a href="index.html"<HOME</a>|<a href="#>Lesson1</a>|<a href="#>Lesson2</a>|<a href="#>Lesson3</a>|<a href="#>Lesson4</a>|<a href="#>Lesson5</a>|</p>
<h2>Lesson1:メモ帳を起動してみよう!</h2>
<ul>
<li>ホームページを作成するためにはエディタと呼ばれるアプリを起動して、そこにプログラムを記述します。</li>
<li>Windowsをお使いの方は標準で付属しているエディタとして、メモ帳とwordpadがありますので、それを使うとよいでしょう。</li>
<li>さらに高性能のエディタをお求めの方は、無料ならterapad、有料なら秀丸エディタがお勧めです。</li>
</ul>
<h2>LLesson2:タグを書いてみよう!</h2>
<ul>
<li>ホームページを作るのに使用する言語はHTMLと呼ばれ、タグと呼ばれる命令を使って、色やフォントの大きさを指定することができます。
<p><img src="jpg/1.jpg" alt="メモ帳に記述" /></p>
<h3><文字の大きさを変える></h3>
<p>文字の大きさは、font sizeタグを使用します。</p>
<h3><文字の色を変える></h3>
<p>文字の色は、colorタグを使用します。</p>
</li>
<li>ホームページ作成に使われるタグは文字の装飾だけに限らず、背景や画像、ページの骨格を指定するものもあります。</li>
</ul>
<hr />
<address>Copyright 2007@nkdesk. all right reserved.</address>
</body>
</html>

定義リストを使用する

この骨格に定義リストdl,dt,ddを使って更新履歴を追加してみます。

定義リストは、下記のような構造になっていて、主として更新履歴やトップページの更新情報などに使用されることが多いです。

<dl>
<dt>題目</dt>
<dd>文字1</dd>
<dd>文字2</dd>
</dl>

これを先ほどの骨格にinformation情報として取り込んでみます。

<html>
<head>
<title>ホームページ作成講座</title>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
</head>
<body>
<h1><img src="gif/1.gif" alt="ホームページ作成講座" /></h1>
<p><img src="gif/2.gif" alt="境界線" /></p>
<p>|<a href="index.html"<HOME</a>|<a href="#>Lesson1</a>|<a href="#>Lesson2</a>|<a href="#>Lesson3</a>|<a href="#>Lesson4</a>|<a href="#>Lesson5</a>|</p>
<h2>INFORMATION</h2>
<dl>
<dt>2008/1/1</dt>
<dd>ホームページ作成講座を開設しました。</dd>
<dt>2008/1/2</dt>
<dd>ホームページ作成講座を閉鎖しました。</dd>
</dl>
<h2>Lesson1:メモ帳を起動してみよう!</h2>
<ul>
<li>ホームページを作成するためにはエディタと呼ばれるアプリを起動して、そこにプログラムを記述します。</li>
<li>Windowsをお使いの方は標準で付属しているエディタとして、メモ帳とwordpadがありますので、それを使うとよいでしょう。</li>
<li>さらに高性能のエディタをお求めの方は、無料ならterapad、有料なら秀丸エディタがお勧めです。</li>
</ul>
<h2>LLesson2:タグを書いてみよう!</h2>
<ul>
<li>ホームページを作るのに使用する言語はHTMLと呼ばれ、タグと呼ばれる命令を使って、色やフォントの大きさを指定することができます。
<p><img src="jpg/1.jpg" alt="メモ帳に記述" /></p>
<h3><文字の大きさを変える></h3>
<p>文字の大きさは、font sizeタグを使用します。</p>
<h3><文字の色を変える></h3>
<p>文字の色は、colorタグを使用します。</p>
</li>
<li>ホームページ作成に使われるタグは文字の装飾だけに限らず、背景や画像、ページの骨格を指定するものもあります。</li>
</ul>
<hr />
<address>Copyright 2007@nkdesk. all right reserved.</address>
</body>
</html>

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


Lesson3〜CSSを使った装飾〜

  1. htmlの骨格を作成する
  2. CSS(スタイルシート)の組込み方法
  3. CSSの基本構造
  4. @規則の指定
  5. 文字の大きさを変える
  6. 文字・背景の色を変える
  7. 文字のスタイルと太さを変える
  8. 幅と高さを変える
  9. 間隔と枠線を指定する
  10. カーソルを当てたときのリンクの色

CGIの設置

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

ホームページの公開

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