WEB 4時間目 - hiro

ゴールデンウィークで少々間が空いてしまいましたが、気合いを入れなおして。

　4時間目はMy Home Pageと題したホームページを作っていきます。
　まずはテキストの入ったデータをもらい、HTMLタグを入れていく。イラストまで入れてブラウザに表示させたのが、下のものです。

　次はCSSでスタイルシートを作っていきます。これもまだまだ“見よう見まね”というレベルですが、何とかうまく行きました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>練習</title>
<link href="base.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>My Home Page</h1>
<h2>2004/12/3</h2>
<p><img src="images/image.jpg">ここは練習用のホームページです。ここで<em>スタイルシート</em>の練習をしていきましょう。この<a href="#">HTMLファイル</a>と同じフォルダの中に<a href="#">CSSファイル</a>がありますので、そこにスタイルシートを入力していきましょう。</p>
<h2>2004/12/4CSS</h2>
<p>ファイルを編集したら、忘れずに上書き保存をしましょう。上書き保存をしていないと、入力したデザインが反映されません。</p>

<h2>Link</h2>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
<li>Link6</li>
<li>Link7</li>
</ul>
</body>
</html>

で、こちらがCSSです。

body {
background-image:url(images/bg.jpg);
background-repeat:no-repeat;
background-position: center center;
}
h1 {
color: orange;
font-size: 1.5em;
font-family: Verdana;
border-color: gold;
border-style: dotted;
border-width: 5px
}
h2 {
color: yellowgreen
font-size: 1.2em
font-family: sans-serif;
}
em {
background-color: yellow;
}
a:link {
color: lightseagreen;
}
a:visited {
color: deeppink;
}
a:hover {
color: red;
background-color: pink;
}

これをブラウザに表示させたもの。

　少しは慣れてきたかな…とは思うものの、まだまだスラスラ入力…には程遠いので、やはり練習は怠りなくやって行かなくては。