戻る

キャプションをつける

HTML4.01

ファイル名：hollywood_cafe/4t/contact.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>Contact | HOLLYWOOD CAFE</title>
</head>
<body>
<!-- ヘッダ要素　ここから -->
<h1><img src="images/top/hc_logo.png" alt="HOLLYWOOD_CAFE" width="140" height="170"></h1>

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

<p><a href="sitemap.html">Sitemap</a></p>
<!-- ヘッダ要素　ここまで -->
<hr>

<!-- ナビゲーション　ここから -->
<ul>
	<li><a href="top.html"><img src="images/top/navi_home.jpg" alt="Home" width="120" height="30"></a></li>
	<li><a href="about.html"><img src="images/top/navi_about.jpg" alt="About" width="120" height="30"></a></li>
	<li><a href="menu.html"><img src="images/top/navi_menu.jpg" alt="Menu" width="120" height="30"></a></li>
	<li><a href="access.html"><img src="images/top/navi_access.jpg" alt="Access" width="120" height="30"></a></li>
	<li><img src="images/top/navi_on_contact.jpg" alt="Contact" width="120" height="30"></li>
</ul>
<!-- ナビゲーション　ここまで -->
<hr>

Home>Contact

Contact

ご予約、イベント、パーティ開催のお問い合わせ、そのほか当店へのご意見などは、下記お問い合わせフォームをご記入の上、送信ボタンをクリックして下さい。

<table cellpadding="0" cellspacing="0" summary="お問い合わせフォーム">
	<caption>お問い合わせフォーム</caption>
	<tr>
		<th>お問い合わせ内容</th>
		<td></td>
	</tr>
	<tr>
		<th>お名前</th>
		<td></td>
	</tr>
	<tr>
		<th>電話番号</th>
		<td></td>
	</tr>
	<tr>
		<th>メールアドレス</th>
		<td></td>
	</tr>
	<tr>
		<th>ご連絡方法</th>
		<td></td>
	</tr>
	<tr>
		<th>当店を何でお知りになりましたか</th>
		<td></td>
	</tr>
	<tr>
		<th>自由記入欄</th>
		<td></td>
	</tr>
</table>

Recommended menu

ハリウッド・バーガー
当店で毎日焼き上げる自家製のパンを使ったオリジナルハンバーガー

ハリウッド・プレート
お酒を飲みながら軽い食事を楽しんでいただける5点盛り合わせ

More

<!-- バナー　ここから -->
<ul>
	<li>お得なセットメニュー</li>
	<li><a href="http://www.sugiyama-style.tv/" target="_blank">オーナーブログ</a></li>
</ul>
<!-- バナー　ここまで -->

<!-- ページトップへのリンク　ここから -->
<p><a href="#pageTop">PageTop</a></p>
<!-- ページトップへのリンク　ここまで -->
<hr>

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

XHTML1.0

ファイル名：hollywood_cafe/xt/contact.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>Contact | HOLLYWOOD CAFE</title>
</head>
<body>
<!-- ヘッダ要素　ここから -->
<h1><img src="images/top/hc_logo.png" alt="HOLLYWOOD_CAFE" width="140" height="170" /></h1>

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

<p><a href="sitemap.html">Sitemap</a></p>
<!-- ヘッダ要素　ここまで -->
<hr />

<!-- ナビゲーション　ここから -->
<ul>
	<li><a href="top.html"><img src="images/top/navi_home.jpg" alt="Home" width="120" height="30" /></a></li>
	<li><a href="about.html"><img src="images/top/navi_about.jpg" alt="About" width="120" height="30" /></a></li>
	<li><a href="menu.html"><img src="images/top/navi_menu.jpg" alt="Menu" width="120" height="30" /></a></li>
	<li><a href="access.html"><img src="images/top/navi_access.jpg" alt="Access" width="120" height="30" /></a></li>
	<li><img src="images/top/navi_on_contact.jpg" alt="Contact" width="120" height="30" /></li>
</ul>
<!-- ナビゲーション　ここまで -->
<hr />

Home>Contact

Contact

ご予約、イベント、パーティ開催のお問い合わせ、そのほか当店へのご意見などは、下記お問い合わせフォームをご記入の上、送信ボタンをクリックして下さい。

<table cellpadding="0" cellspacing="0" summary="お問い合わせフォーム">
	<caption>お問い合わせフォーム</caption>
	<tr>
		<th>お問い合わせ内容</th>
		<td></td>
	</tr>
	<tr>
		<th>お名前</th>
		<td></td>
	</tr>
	<tr>
		<th>電話番号</th>
		<td></td>
	</tr>
	<tr>
		<th>メールアドレス</th>
		<td></td>
	</tr>
	<tr>
		<th>ご連絡方法</th>
		<td></td>
	</tr>
	<tr>
		<th>当店を何でお知りになりましたか</th>
		<td></td>
	</tr>
	<tr>
		<th>自由記入欄</th>
		<td></td>
	</tr>
</table>

Recommended menu

ハリウッド・バーガー
当店で毎日焼き上げる自家製のパンを使ったオリジナルハンバーガー

ハリウッド・プレート
お酒を飲みながら軽い食事を楽しんでいただける5点盛り合わせ

More

<!-- バナー　ここから -->
<ul>
	<li>お得なセットメニュー</li>
	<li><a href="http://www.sugiyama-style.tv/" target="_blank">オーナーブログ</a></li>
</ul>
<!-- バナー　ここまで -->

<!-- ページトップへのリンク　ここから -->
<p><a href="#pageTop">PageTop</a></p>
<!-- ページトップへのリンク　ここまで -->
<hr />

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

※caption要素は、テーブル（表）にタイトルをつける場合に使用します。

tableについて

●<table>
テーブル（表）を作成するタグです。開始タグ<table>～終了タグ</table>までが一つのテーブルになります。
テーブルは行と列により整形されています。テーブルを使うことで表形式のデータを扱えるようになり、レイアウトにも有効です。
●<td>、</td>
テーブルのセルの内容を示すためのタグです。開始タグ<td>から終了タグ</td>までとなります。tr内にtdを入れることによりセルができます。tdに挟まれた文章や画像などは一つの四角形で囲まれます。
●<th>、</th>
テーブルの見出しとなるセルを指定するタグです。tr内に開始タグ<th<から終了タグ</th>までを入れることにより見出しセルができます。
●<tr>、</tr>
テーブルの行を作るためのタグです。開始タグ<tr>から終了タグ</tr>までが1行となります。trに挟まれたtd群は1行になり、画面右側に広がります。
●cellspacingとは
テーブルに対して表全体の上下左右4方向について、もっとも外周にあるセルがどれだけ表全体の枠から離れるかを指定します。セル間についても同様です。
●cellpaddingとは
テーブルに対して表全体、または各セルの中で表示上最も大きなデータに対して、罫線との間の余白を指定します。ピクセル値を指定した場合は指定値そのもの、割合を指定した場合は限りなく指定値に近い余白を確保します。
●summaryとは
非視覚系ブラウザに対してテーブルの説明や構造を示すものです。視覚障碍者を配慮して、積極的に指定することが強く推奨されています。

td td td
td td td
td td td

inserted by FC2 system