×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

ホームページの作り方 >> ホームページ作成編 >> HTMLファイルを作ろう

ホームページ作成編 04.HTMLファイルを作ろう

ここからいよいよ各ファイルに文字を打ち込んでホームページを作っていきます。
楽しみですね!
習うより慣れろ!ってことで、まずは簡単なホームページを作っちゃいましょ!
意外と簡単に出来ますよ。
中身の意味は次ページ以降で考えましょう!

HTMLファイルを作って表示させましょう!

ごちゃごちゃと論理的なことばかり考えていてもなかなか先に進まない時ってありますよね。
「百聞は一見にしかず」とも言いますし、まずはHTMLファイルを作ってみましょう。
どんなホームページが現れるのかな?

1.index.htmlを作ろう!

それでは、まず先ほど作った「index.html」を書き込みが出来る状態にしましょう。

「index.html」の上にカーソルをあてて
右クリック→「プログラムから開く」→「Notepad」

これで先ほど出てきたテキストエディタ(メモ帳)が出てきましたね。
左上のところに「index.html」とありますね。
以下のように打ち込んでみてください。

面倒であれば、そのままコピー&ペーストしてもかまいませんです。
字は全部黒くなると思いますが、それでいいのです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="初めてホームページを作ってみました。見てね。">
<meta name="keywords" content="ホームページ,初心者,作成,簡単,入門">
<title>初めてのホームページ</title>
<link rel=stylesheet href="style.css" type="text/css">
</head>
<body>
<div align="center">
<h1>Wellcome to my Homepage!!</h1>
<p>初めてホームページなるものを作ってみた。<br>
意外と簡単で面白そうである。</p>
</div>
</body>
</html>

これが、ホームページの元になるもので、「ソース」と呼ばれています。
ホームページを作るということはつまりこのソースを作るということです。
更に”<”と”>”でくくられている部分をタグといいます。
ソースはタグで作っていきます。
ちなみに赤い字の部分は、自由に書き換えてみてもかまいませんよ。
※styleの部分は、CSSファイルと関係していますので、ちょっと待っててくださいね!

「index.html- メモ帳」の「ファイル(F)」→「上書き保存(S)」

これで、「index.html」に書き込みをして保存が出来ました。
立派なHTMLファイルが出来ました。よかったですね!!
後はこのファイルに色々書き足していくことになるんです。

「今編集しているメモ帳」の「ファイル(F)」→「上書き保存(S)」でファイルの更新を行いますので、HTMLファイルもCSSファイルも今後、新しいことを打ち込み終わったら、必ずこの作業をして、上書き保存をしましょう。

2.ホームページを見てみよう!

ソースの中身の意味は分からないけど、まあとりあえず、見てみましょうか!どきどきっ!

index.htmlファイル

「index.html」をダブルクリック!!

どうですか? サンプル004-01 のようになっていますか?
大丈夫ですよね!
(青字で書かれている宣伝はプロバイダーの広告で自動的に挿入されているものなのであなたのホームページでは表示されません。)

よかったよかった!
これでホームページも完成だっ!!

・・・ってこれだけじゃね。
なんだかかっこ悪いし、ソースの中身の意味も分からんし、
CSSファイルはどこ行ったんだぁ〜!

次 行きましょ。次っ!!

マグカップM ■トリさん■  ホワイト/ブラウン

サイズ:約
 口径78o×高さ90o
重 量:約260g
全容量:約300t
材 質:陶器


<送料>
ゆうパック 一律500円
沖縄県1000円

ホームページ(ウェブサイト)の中には数ページから多い時には何百ページもある場合がありますよね。
その時1番最初に表示させたいページ(トップページ、厳密な意味でのホームページ)に「index」という名前を付けることになっています。
どのホームページにもトップページがあり「index」というファイル名になっていますので、あなたの作るホームページもトップページは「index」という名前にしましょう。他のページは、「index」ページからたどっていくことになります。名前は自由に決めていってかまいませんが「半角英数字」で命名することをお忘れなく!


 
別窓で開く便利な検索窓です。どうぞご利用下さい!
カスタム検索