htmlの骨格を作成する

メモ帳を開いたら、まず初めに前に作ったサイトなどからここまではコピります（管理人流）。

<html>
<head>
<title>ホームページ作成講座</title>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
</head>
<body>
</body>
</html>

次に、タイトルと境界画像とリストマークに画像を使う予定ですので、あらかじめ作っておきます（illustratorにて）。

今回使う画像はコチラ→画像のダウンロード

ダウンロードが終わったら、画像専用のフォルダを別に作り、そこに加えて置いてください。

あとは、今までの知識を使ってちゃちゃっと文の構造を組み立てていきます。最終的には長くなりますが、日記と同じで書いているときは気にならないものです（いつの間にかこんなに書いちゃったっていうノリデス）。

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

注意点は、「ホームページ作成講座TOP」の文字の前の>>という記号ですかね。

"shift+."で打ってもよいのですが、タグの<>と重なってしまうので、>を表示させたいときは、「&（アンド）gtのあとに;（コロン）」を付けて表します。

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

Lesson4～スタイルを細かく指定する～

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>