はじめてのホームページ制作例

これまでのHTMLタグを駆使してホームページを制作してみましょう。制作例としてこんなページを作成しました。HTMLソースを見てみましょう。

がんばってHTMLを入力しよう

ちょっと長いですが一つ一つ確認しながら見てください。サンプルページではリンク先はすべて同じページになってますが必要に応じて複数のページを作成してそれぞれリンクでつなぎましょう。

<html>
<head>
<title>札幌市の和食洋食レストラン「さんぷる」</title>
</head>
<body>
<h1>札幌市の和食洋食レストラン「さんぷる」</h1>
<h2>レストラン「さんぷる」のご案内</h2>
<p>ようこそ。札幌市のレストラン「サンプル」のホームページへ</p>
<div><img src=”image/table.jpg” alt=”店内写真” width=”240″ height=”180″></div>
<p>レストラン「さんぷる」は札幌市の閑静な住宅街に位置するこじんまりとしたレストランです。</p>
<p>お店の外観は民家と変わりませんので一見すると「ここがお店?」と思われがちですが、家族で楽しくやっているアットホームなレストランです。<br>
メニューは洋食を中心に主に日替わりで提供させていただいております。その日の朝知り合いの農家や漁師のところに行って、新鮮な食材を手に入れてきます。 その日使う分だけ仕入れてきますので常に同じものが仕入れることが出来るとは限りません。ですから当店では定番メニューというものがありません。お店にい らしてからのお楽しみです。</p>
<h2>ドリンクメニュー</h2>
<table border=”1″>
<tr>
<td>コーヒー</td>
<td>300円</td>
</tr>
<tr>
<td>紅茶</td>
<td>300円</td>
</tr>
<tr>
<td>オレンジジュース</td>
<td>350円</td>
</tr>
<tr>
<td>もぎたてトマトジュース</td>
<td>400円</td>
</tr>
<tr>
<td>生ビール</td>
<td>500円</td>
</tr>
</table>
<h2>当レストランのポリシー</h2>
<ul>
<li>今日仕入れた食材は今日使う。
<li>もし余ったら自分で食べちゃう。
<li>お客様の健康を考える。
<li>自分の健康も考える。
</ul>
<h2>シェフの休日</h2>
<img src=”image/001.jpg” alt=”写真001番” width=”300″ height=”225″ align=”right” hspace=”10″ vspace=”10″>
<p>仕事が休みのときはいつもカメラを持って日本各地に花の写真を撮りに行っています。</p>
<p>日本は縦に長い国ですから一年中どこかで花が咲いています。そしてこれからまもなく南の方から桜の便りが、お店を長く休んで一度でいい から桜前線と一緒に北上したいものです。このホームページでは私の撮った写真を載せていこうと思っています。お楽しみに。</p>
<br clear=”all”>
<h3>サイトマップ</h3>
<a href=”index.html”>トップページ</a><br>
<a href=”index.html”>1ページ</a><br>
<a href=”index.html”>2ページ</a><br>
<a href=”index.html”>3ページ</a><br>
<a href=”index.html”>4ページ</a><br>
<a href=”index.html”>5ページ</a><br>
</body>
</html>

いかがですか?うまく出来ましたか?初めてのホームページはここまで出来ればまずは十分でしょう。 でもやっぱりもっとカラフルにしたり、かっこよくレイアウトしたりしたいですよね。そのためにはスタイルシートを使いましょう。

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録