画像挿入とリンクの設定
練習の途中経過をアップします。マークアップしたテキストに画像の挿入とリンクの設定をしました。id属性やclass属性に名前をつけながらCSSを指定していくので分かりやすいなと思いました。
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.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>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="keywords" content="キーワード1,キーワード2,キーワード3,キーワード4,キーワード5" />
<meta name="description" content="キーワード1〜サイトの説明文(検索結果に表示される)" />
<title>キーワード1｜Human Cafe</title>
<link href="css/import.css" rel="stylesheet" type="text/css" media="all" />
<script src="URL" type="text/javascript"></script>
</head>
<body>
<h1><img src="../../../../../Start/images/top/hc_logo.png" alt="Human Cafe" width="140" height="170" /></h1>
<p><em>クリエイターが集まり、作品が生まれる。創造空間カフェ。</em></p>
<ul id="siteMap">
<li>サイトについて</li>
<li><a href="sitemap.html">Sitemap</a></li>
</ul>
<ul id="globalNavi">
<li><img src="../../../../../Start/images/top/navi_on_home.jpg" alt="Home" width="120" height="30" /></li>
<li><a href="about.html"><img src="../../../../../Start/images/top/navi_about.jpg" alt="About" width="120" height="30" /></a></li>
<li><a href="menu.html"><img src="../../../../../Start/images/top/navi_menu.jpg" alt="Menu" width="120" height="30" /></a></li>
<li><a href="access.html"><img src="../../../../../Start/images/top/navi_access.jpg" alt="Access" width="120" height="30" /></a></li>
<li><a href="contact.html"><img src="../../../../../Start/images/top/navi_contact.jpg" alt="Contact" width="120" height="30" /></a></li>
</ul>
<h2><img src="../../../../../Start/images/top/top_ttl_welcome.gif" alt="welcome to Human Cafe" /></h2>
<p id="welcomeMessage"><img src="../../../../../Start/images/top/top_welcome_img.jpg" width="160" height="114" />ハリウッドカフェは、グラフィックやWeb デザインをはじめ、色々なジャンルで活躍するクリエイターが交流する創造空間カフェです。仕事をお探しの方、仕事を依頼したい方、仕事仲間を探している方、ハリウッドカフェで新たな出会いを探してみませんか。</p>
<h3>Recommended menu</h3>
<dl id="topRecommendedMenu">
<dt><img src="../../../../../Start/images/top/top_recommend_img_01.jpg" width="153" height="118" />ハリウッド・バーガー</dt>
<dd class="price">\880</dd>
<dd>当店で毎日焼き上げる自家製のパンを使ったオリジナルハンバーガー。ハンバーガーパティーは、厳選した国産和牛肉を炭火で焼き上げます。パンと肉本来の持つ旨味を存分にお楽しみ下さい。</dd>
<dt><img src="file:///C|/Users/miho/Desktop/Start/images/top/top_recommend_img_02.jpg" width="153" height="118" />ハリウッド・プレート</dt>
<dd class="price">\1,380</dd>
<dd>お酒を飲みながら軽い食事を楽しんでいただける5 点盛り合わせ。どれも新鮮な素材を使用した手作りの味が自慢です。是非一度御賞味下さい。</dd>
</dl>
<h3><img src="../../../../../Start/images/top/top_ttl_infomation.jpg" alt="Information" /></h3>
<dl id="infoData">
<dt>2007.08.25</dt>
<dd>9/1（土）17：00 より世界中から集めたCG 映像作品上映会を開催します。</dd>
<dt>2007.07.07</dt>
<dd>8/25（土）よりHuman Cafe がオープンいたします。</dd>
</dl>
<ul id="sideBanner">
<li>お得なセットメニュー</li>
<li><a href="htp://www.sugiyama-style.tv" target="_blank">オーナーブログ</a></li>
</ul>
<p id="gotoTop"><a href="#pageTop">PageTop</a></p>
<address>Copyright 2009 Human Cafe. All Rights Reserved.</address>
</body>
</html>
