戻る

挿入した画像を「images」フォルダ直下に移動する

HTML4.01

ファイル名：hollywood_cafe/4t/top.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="ハリウッド・カフェはクリエイターが集まる創造空間カフェです。">
<meta name="keywords" content="カフェ,クリエイター,CAFE,作品,創造,空間">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>HOLLYWOOD CAFE</title>
</head>
<body>
<img src="images/star.gif">
<!-- ヘッダ要素　ここから -->
<h1>HOLLYWOOD CAFE</h1>

<h2>クリエイターが集まり、作品が生まれる。創造空間カフェ。</h2>

<p>Sitemap</p>
<!-- ヘッダ要素　ここまで -->

<!-- ナビゲーション　ここから -->
<ul>
	<li>Home</li>
	<li>About</li>
	<li>Menu</li>
	<li>Access</li>
	<li>Contact</li>
</ul>
<!-- ナビゲーション　ここまで -->

<!-- Welcome to HOLLYWOOD CAFE　ここから -->
<h3>Welcome to HOLLYWOOD CAFE</h3>

<p>ハリウッドカフェは、グラフィックやWebデザインをはじめ、色々なジャンルで活躍するクリエイターが交流する創造空間カフェです。仕事をお探しの方、仕事を依頼したい方、仕事仲間を探している方、ハリウッドカフェで新たな出会いを探してみませんか。</p>
<!-- Welcome to HOLLYWOOD CAFE　ここまで -->

<!-- Recommended menu　ここから -->
<dl>
	<dt>Recommended menu</dt>
	
	<dd>
		<ul>
			<li>
				<dl>
					<dt>
					<strong>ハリウッド・バーガー</strong>
					</dt>
					<dd>
					<p>&yen;880</p>
					</dd>
					<dd>
					<p>当店で毎日焼き上げる自家製のパンを使ったオリジナルハンバーガー。ハンバーガーパティーは、厳選した国産和牛肉を炭火で焼き上げます。パント肉本来の持つ旨味を存分にお楽しみ下さい。</p>
					</dd>
				</dl>
			</li>
			<li>
				<dl>
					<dt>
					<strong>ハリウッド・プレート</strong>
					</dt>
					<dd>
					<p>&yen;1,380</p>
					</dd>
					<dd>
					<p>お酒を飲みながら軽い食事を楽しんでいただける5点盛り合わせ。どれも新鮮な素材を使用した手作りの味が自慢です。是非一度御賞味下さい。</p>
					</dd>
				</dl>
			</li>
		</ul>
	</dd>
</dl>
<!-- Recommended menu　ここまで -->

<!-- Information　ここから -->
<dl>
	<dt>Information</dt>
	<dd>
		<dl>
			<dt>2007.08.25</dt>
			<dd>
				<p>9/1（土）17：00より世界中から集めたCG映像作品上映会を開催します。</p>
			</dd>
			<dt>2007.07.07</dt>
			<dd>
				<p>8/25（土）よりHOLLYWOOD CAFEがオープンいたします。</p>
			</dd>
		</dl>
	</dd>
</dl>
<!-- Information　ここまで -->

<!-- バナー　ここから -->
<ul>
	<li>お得なセットメニュー</li>
	<li>オーナーブログ</li>
</ul>
<!-- バナー　ここまで -->

<!-- ページトップへのリンク　ここから -->
<p>PageTop</p>
<!-- ページトップへのリンク　ここまで -->

<!-- フッタ要素　ここから -->
<address>Copyright 2007 HOLLYWOOD CAFE, ALL Rights Reserved.</address>
<!-- フッタ要素　ここまで -->
</body>
</html>

XHTML1.0

ファイル名：hollywood_cafe/xt/top.html 

<?xml version="1.0" encoding="utf-8"?>
<!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=utf-8" />
<meta name="description" content="ハリウッド・カフェはクリエイターが集まる創造空間カフェです。" />
<meta name="keywords" content="カフェ,クリエイター,CAFE,作品,創造,空間" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>HOLLYWOOD CAFE</title>
</head>
<body>
<img src="images/star.gif" />
<!-- ヘッダ要素　ここから -->
<h1>HOLLYWOOD CAFE</h1>

<h2>クリエイターが集まり、作品が生まれる。創造空間カフェ。</h2>

<p>Sitemap</p>
<!-- ヘッダ要素　ここまで -->

<!-- ナビゲーション　ここから -->
<ul>
	<li>Home</li>
	<li>About</li>
	<li>Menu</li>
	<li>Access</li>
	<li>Contact</li>
</ul>
<!-- ナビゲーション　ここまで -->

<!-- Welcome to HOLLYWOOD CAFE　ここから -->
<h3>Welcome to HOLLYWOOD CAFE</h3>

<p>ハリウッドカフェは、グラフィックやWebデザインをはじめ、色々なジャンルで活躍するクリエイターが交流する創造空間カフェです。仕事をお探しの方、仕事を依頼したい方、仕事仲間を探している方、ハリウッドカフェで新たな出会いを探してみませんか。</p>
<!-- Welcome to HOLLYWOOD CAFE　ここまで -->

<!-- Recommended menu　ここから -->
<dl>
	<dt>Recommended menu</dt>
	
	<dd>
		<ul>
			<li>
				<dl>
					<dt>
					<strong>ハリウッド・バーガー</strong>
					</dt>
					<dd>
					<p>&yen;880</p>
					</dd>
					<dd>
					<p>当店で毎日焼き上げる自家製のパンを使ったオリジナルハンバーガー。ハンバーガーパティーは、厳選した国産和牛肉を炭火で焼き上げます。パント肉本来の持つ旨味を存分にお楽しみ下さい。</p>
					</dd>
				</dl>
			</li>
			<li>
				<dl>
					<dt>
					<strong>ハリウッド・プレート</strong>
					</dt>
					<dd>
					<p>&yen;1,380</p>
					</dd>
					<dd>
					<p>お酒を飲みながら軽い食事を楽しんでいただける5点盛り合わせ。どれも新鮮な素材を使用した手作りの味が自慢です。是非一度御賞味下さい。</p>
					</dd>
				</dl>
			</li>
		</ul>
	</dd>
</dl>
<!-- Recommended menu　ここまで -->

<!-- Information　ここから -->
<dl>
	<dt>Information</dt>
	<dd>
		<dl>
			<dt>2007.08.25</dt>
			<dd>
				<p>9/1（土）17：00より世界中から集めたCG映像作品上映会を開催します。</p>
			</dd>
			<dt>2007.07.07</dt>
			<dd>
				<p>8/25（土）よりHOLLYWOOD CAFEがオープンいたします。</p>
			</dd>
		</dl>
	</dd>
</dl>
<!-- Information　ここまで -->

<!-- バナー　ここから -->
<ul>
	<li>お得なセットメニュー</li>
	<li>オーナーブログ</li>
</ul>
<!-- バナー　ここまで -->

<!-- ページトップへのリンク　ここから -->
<p>PageTop</p>
<!-- ページトップへのリンク　ここまで -->

<!-- フッタ要素　ここから -->
<address>Copyright 2007 HOLLYWOOD CAFE, ALL Rights Reserved.</address>
<!-- フッタ要素　ここまで -->
</body>
</html>

※img要素のsrc属性は、画像ファイルの保存場所（パスと呼ばれています）を指定する 属性です。画像は、パスを指定して表示させることができます。

パスについて

パスとはファイルがどこにあるのかを指定する方法のことで、フォルダやファイルの保存場所を一定のルールに沿って示したものです。画像の挿入以外に、リンクの設定でも必要な知識ですので、きちんと理解しておきましょう。

パスの表記方法には「相対パス」と「絶対パス」の2種類があります。

通常、同じサイト内にある画像の挿入やリンクの設定は、「相対パス」を使用します。サンプル画像の挿入で実践したように、相対パスはHTMLファイル（自分自身）の場所を基準にして、そこから見た画像ファイルの場所を示します。同じ階層にファイルがある時は、次のようにsrc属性にファイル名だけを指定します。

<img src="star.gif">

HTMLと同じ場所にある「images」フォルダのなかの画像は、images/star.gifと「/」で区切った形式で示します。HTMLの上の階層にある画像は、../star.gifとなり、「..」がひとつ上の階層を示します。階層を上がるにつれ、../../star.gifのように「..」の数が増えていきます。

「絶対パス」とは、http://xxxxxxxxxxxx.com/images/star.gifのように、http://から始まるURIで指定され、Web全体から見たファイルの場所を示します。通常、「絶対パス」は、外部のWebサイトにリンクを指定する場合に多く使用します。

inserted by FC2 system