NEC LAVIE公式サイト > 知る > ちょっとトライ！ > ホームページを「メモ帳」で作成 !?

ホームページを「メモ帳」で作成 !?

	メモ帳で HTML 文書を作成しましょう

ホームページを作成するには、「HTML」という言語を使います。ここでは「メモ帳」で作成していきます。

メモ帳を起動しましょう

[ スタート ]-[ すべてのプログラム ]-[ アクセサリ ]-[ メモ帳 ] をクリックします。「メモ帳」が開き、先頭にカーソルが点滅し入力できる状態になっています。

※	画面は作業しやすいように適宜「最大化」などにしてください。

HTML 文書を作成しましょう

← 基本のタグの意味
　<html>：これから html 文書を作成します
　<head>：タイトルなどの情報を書きます
　</head>：タイトルなどを書き終えました
　<body>：文字や画像などの内容を書いていきます
　</body>：内容を書き終えました
　</html>：html 文書を終了します

ここでは、左図のように入力します。

※	必ず半角で入力します。

	タグとは
	< > で囲まれた部分を「タグ」といい、多くは開始タグ (< タグ >) と終了タグ (< /タグ >) の間にホームページに表示する文字や画像情報を入力します。

	入力時の注意
	タグは必ず半角英数字で入力します。タグ自身は、大文字・小文字の区別はありませんが、このあとに出てくる画像の指定やリンクの指定などでは、大文字・小文字が区別されます。

※	なお、ここではタグは小文字で記述していきます。

タイトルバーに表示される情報を書きましょう

左図のように、ホームページのタイトルバー ( 最上部左上 ) に表示されるタイトルを作成します。

<html>
<head>
<title>COCOの子育て日記</title>
</head>
<body>
</body>
</html>

<head> の後ろでクリックし、【Enter】キーを押して改行します。
左記のように入力します。赤字部分がタグ、青字部分が実際のタイトルになります。

★	ご注意
	ここでは、わかりやすいようにタグを「赤色」、文字や画像情報などを「青色」で記載します。文字に色をつけるということではありません。

ページの見出しを作成しましょう

左図のように、ページの見出しを作成します。

<html>
<head>
<title>COCOの子育て日記</title>
</head>
<body>
<h1>ＣＯＣＯのページ</h1>
<h2>ようこそ！赤ちゃん誕生</h2>
</body>
</html>

<body> の後ろでクリックし、【Enter】キーで改行し、左記のように入力します。

	見出しタグ
	見出しタグ <h1> ～ </h1> の数字部分は、1 から 6 まで変更できます。数字が大きくなるほど文字サイズは小さくなります。

写真データを挿入しましょう

　　・
　　・
　　・
<body>
<h1>ＣＯＣＯのページ</h1>
<h2>ようこそ！赤ちゃん誕生</h2>
<p><img src="p1.jpg"></p>
</body>
</html>

</h2> の後ろでクリックし、【Enter】キーで改行し、左記のように入力します。
「p1.jpg」は、ダウンロードした画像のファイル名です。拡張子も必ず入力します。

	ファイルを指定する際の注意
	ここで指定の「p1.jpg」はすべて小文字ですが、指定するファイル名に大文字と小文字が含まれている場合、区別されますので、間違えないようにします。

	段落タグ
	<p> ～ </p> は、1 つの段落として扱いますという意味です。

水平線を入れましょう

左図のような、水平線を入れます。

　　・
　　・
　　・
<body>
<h1>ＣＯＣＯのページ</h1>
<h2>ようこそ！赤ちゃん誕生</h2>
<p><img src="p1.jpg" ></p>
<hr>
</body>
</html>

</p> の後ろでクリックし、【Enter】キーで改行し、左記のように入力します。

	水平線タグ
	<hr> は、区切りの線を表示させるためのタグです。水平線に終了タグはありません。

2 ページ目へのリンクを作成しましょう

　　・
　　・
　　・
<body>
<h1>ＣＯＣＯのページ</h1>
<h2>ようこそ！赤ちゃん誕生</h2>
<p><img src="p1.jpg" ></p>
<hr>
<a href="baby.html">赤ちゃんのページへ</a>
</body>
</html>

2 ページ目はまだ作成していませんが、2 ページ目のファイル名を、ここでは「baby.html」( 半角小文字 ) とします。
<hr> の後ろでクリックし、【Enter】キーで改行し、左記のように入力します。

	リンクタグ
	<a href=" ファイル名 "> ～ </a> のファイル名のところにリンク先のファイル名 ( 拡張子も付けて ) を入力します。指定するファイル名は、大文字と小文字が区別されますので、間違えないようにします。