オリジナルのサイトを作ってみよう

オリジナルサイトを作る手順

全部で3～4ページの、オリジナルサイトを作ってみましょう。

作る手順は、

  1. サイトのテーマを決めよう

    2. （例：「夏休みに行った〇〇」「△△（好きなもの）の紹介」など）

  2. サイトの構成を決めよう（どのページに何を書くかなど）

    3. （例：「〇〇の場所」「〇〇の名前の由来」「〇〇でやったこと」「△△の歴史」「△△を好きになったわけ」「△△の説明」など）

  3. サイトのデザインを決めよう（色など）

    4. （例：背景の色、背景の写真、文字の色、文章を書く場所、写真を表示する場所など）

  4. 必要な素材（写真など）を集めよう
  5. コーディングしよう（HTMLファイルを作ろう）

    6. ※サンプルのコードをテキストエディタにコピーして使ってもよいです。

です。

これまで練習したことを使って自由に作ってもよいですし、下のサイトサンプルを使ってもよいです。

オリジナルサイトのサンプル

サイトサンプルを見てみる。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
	<title>はじめてのホームページ</title>
	<style type="text/css">
		#wrap{width:640px;margin:0 auto;}
		header {
			border:dashed 1px;
		}

		#contents {
			width:638px;
			height:498px;
			border:dashed 1px;
			margin:10px 0px 10px 0px;
		}

		footer {
			border:dashed 1px;
		}

	</style>
</head>

<body>
	<div id="wrap">

		<header>
			<h1>ホームページのタイトル名</h1>
			<div>
				<a href="">リンク</a>｜<a href="">リンク</a>｜<a href="">リンク</a>
			</div>
			
		</header>

		<div id="contents">
			<h2>ホームページの中身</h2>
		</div>

		<footer>
			<p>桃井プログラミング教室</p>
		</footer>
	</div>
</body>
</html>
オリジナルサイトのサンプル２

サイトサンプル２

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
	<title>タイトル</title>
	<style type="text/css">
		.zentai{margin:0px;background-color:#e17455;}
		.wide_tbl{width:100%;border-collapse: collapse;}
		.wide_tbl td{width:50%;padding:0px;}
		img{width:100%;}
	</style>
</head>

<body class="zentai">
	<table class="wide_tbl">
	<tbody>
	<tr>
	<td>ここに文章を入れる</td><td><img src="https://momo-pro.jp/wp-content/uploads/2016/04/960-250x250.jpg" ></td>
	</tr>
	</tbody>
	</table>
</body>
</html>