§01-01…画像ファイルの挿入・準備 – オンライン無料パソコン教室

(01) 「画像の練習」というフォルダーを作成し、その中に以下のようなファイル「index.htm」を作成してください。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<link rel="stylesheet" type="text/css" href="str.css" />
<title>猫の写真</title>
</head>
<body>
<h1>近所の猫</h1>
<p>近所の公園で撮影した猫です。お昼寝の最中でしたがとってもかわいかったのでつい写真に収めてしまいました。暑い日だったので木の上でお昼寝をしていたようです。</p>
<p>この公園には沢山の猫がいます。誰かが餌を与えているんでしょうか？みんな丸々太っています。それにしても気持ちよさそうに寝ていますね。</p>
</body>
</html>

§01-01

(02) 同じフォルダー内に以下のソースを持つ「str.css」を作成してください。

body{
background-color:#FFFFCC;
}
h1{
color:#0000FF;
border:thin solid #00FFFF;
}
p{
color:#009900;
}

(03) 「index.htm」をブラウジングしましょう。