HOME > ホームページ作成
>ページを作ってみよう
このページの最終更新日2003/7/8
これから簡単なHTMLでのページ作成を説明しますが、ここで説明しているHTMLが全てではありません。下記のページ作成方法を学んだ方は、トップページからHTMLのコーナーも覗いてみて下さい。このページで紹介していないHTMLがあります。
今からトップページを作ります。まずはテキストエディタを開き、HTMLファイルとしての最低限な記述を書いてみましょう。この記述はこれから複数のページを作るでしょうが全てのページに共通する最低限の記述です。
【最低記述】
<html>
<head>
<title></title>
</head>
<body>
</body>
</html> |
ページにタイトルをつけましょう。<title>から</title>の間がタイトルを書く場所です。これはブラウザの左上に表示されるページタイトルなので、ページには表示されません。
<html>
<head>
<title>山田太郎のホームページ</title>
</head>
<body>
</body>
</html> |
実際にページを開いたときに表示される本文を書いてみましょう。<body>から</body>の間に書きましょう。
<html>
<head>
<title>山田太郎のホームページ</title>
</head>
<body>
ホームページです
</body>
</html> |
ここで一度ページを保存してみましょう。テキストエディタの左上のタブから、ファイル(F)→名前を付けて保存(A)を選択
「名前を付けて保存」と言う画面がでたら、ファイル名(N)にファイル名を書いてください。今回はトップページなので「index.htm」または「index.html」として下さい。同画面の、「保存する場所(I)」は「フォルダの作成」で作ったホームページ専用フォルダを選択しましょう。最後に保存(S)をクリックすると保存完了です。
上記でテキストエディタで作成した「index.htm」または「index.html」を、新規作成したフォルダに保存できましたね？でわ、ホームページ専用フォルダを開き、その中に保存された「index.htm」または「index.html」をダブルクリックで開いてみて下さい。ブラウザが起動し、上記で作成したページが表示されるはずです。【下図参照】これで初めてのホームページの出来あがりになります。
【ブラウザ表示例】
| 山田太郎のホームページ
- Microsoft Internet Explorer |
| ファイル(F） 編集(E）
表示(V) |
| ホームページです
|
一度保存したファイルを再編集してみましょう。もう一度テキストエディタを開きます。開き方にはいくつかあり、上記のブラウザ左上にある表示(V)→ソース(C)で、そのページソースがテキストエディタ表示されます。他の方法としては、スタート→プログラム（P）→アクセサリでメモ帳を開いて下さい。メモ帳が起動すれば、メモ帳の左上のタブから、開く（O）で上記で作成したページを呼び出してください。
【呼び出されたファイル】
<html>
<head>
<title>山田太郎のホームページ</title>
</head>
<body>
ホームページです
</body>
</html> |
呼び出されたファイルを編集してみます。現在本文は「ホームページです」ですが、これを「初めて作るホームページ」と書き換えてみましょう。
【書き換え後】
<html>
<head>
<title>山田太郎のホームページ</title>
</head>
<body>
初めて作るホームページです
</body>
</html> |
書き換えができれば、再度保存しましょう。上記ですでにファイル名をつけた（index.html）ファイルなのでファイル名をつける必要はありませんが、再編集をしたので上書き保存きする必要があります。
ファイル（F)→上書き保存(S)
保存しても変化がないように思えるでしょうが、ここでもう一度上記で説明した手順でブラウザを起動すて表示してみましょう。本文の内容が「ホームページです」から「初めて作るホームページ」に変わっていれば成功です。もし、変化が無い場合や、すでにページを開いた状態の場合はブラウザ上のタブから、表示(V)→最新の情報に更新(R)でページが反映するはずです。
文章を改行してみます。通常文章を改行するにはエンターキーで可能ですが、HTMLの場合改行するにもHTMLを使用します。改行するには<br>と記述して下さい。
<html>
<head>
<title>山田太郎のホームページ</title>
</head>
<body>
初めて作る<br>ホームページです
</body>
</html> |
【表示結果】
| 山田太郎のホームページ
- Microsoft Internet Explorer |
| ファイル(F） 編集(E）
表示(V) |
初めて作る
ホームページです |
<center>と</center>で囲むと中央揃えになります。
<html>
<head>
<title>山田太郎のホームページ</title>
</head>
<body>
<center>初めて作る<br>ホームページです</center>
</body>
</html> |
【表示結果】
| 山田太郎のホームページ
- Microsoft Internet Explorer |
| ファイル(F） 編集(E）
表示(V) |
初めて作る
ホームページです |
文字を太字にしてみましょう。<b>と</b>で囲まれた文字が太字になります。
<html>
<head>
<title>山田太郎のホームページ</title>
</head>
<body>
<center><b>初めて作る<br>ホームページです</b></center>
</body>
</html> |
【表示結果】
| 山田太郎のホームページ
- Microsoft Internet Explorer |
| ファイル(F） 編集(E）
表示(V) |
初めて作る
ホームページです |
ページの背景色を変えてみましょう。<body>タグを<body bgcolor="色の名前">と書き換えると背景色が変わります。（yellowは黄色）。
<html>
<head>
<title>山田太郎のホームページ</title>
</head>
<body bgcolor="yellow">
<center>初めて作る<br>ホームページです</center>
</body>
</html> |
【表示結果】
| 山田太郎のホームページ
- Microsoft Internet Explorer |
| ファイル(F） 編集(E）
表示(V) |
初めて作る
ホームページです |
<font color="色の名前">と</font>で囲まれた文字の色が変わります。（blueは青色）
<html>
<head>
<title>山田太郎のホームページ</title>
</head>
<body bgcolor="yellow">
<center>
<font color="blue">初めて作る<br>ホームページです</font>
</center>
</body>
</html> |
【表示結果】
| 山田太郎のホームページ
- Microsoft Internet Explorer |
| ファイル(F） 編集(E）
表示(V) |
初めて作る
ホームページです |
<font size="大きさを1〜6で指定">と</font>で囲むと文字の大きさが変わります。
<html>
<head>
<title>山田太郎のホームページ</title>
</head>
<body bgcolor="yellow">
<center>
<font size="6">初めて作る<br>ホームページです</font>
</center>
</body>
</html> |
【表示結果】
| 山田太郎のホームページ
- Microsoft Internet Explorer |
| ファイル(F） 編集(E）
表示(V) |
初めて作る
ホームページです |
ページに水平線を出すには<hr>と書きます。
<html>
<head>
<title>山田太郎のホームページ</title>
</head>
<body bgcolor="yellow">
<center>初めて作る<br>ホームページです<hr>
</center>
</body>
</html> |
【表示結果】
| 山田太郎のホームページ
- Microsoft Internet Explorer |
| ファイル(F） 編集(E）
表示(V) |
初めて作る
ホームページです
|
画像を表示させてみましょう。ホームページで画像を使う場合は、テキストエディタで現在作成中のHTMLファイルと同じ場所に保管します。使用する画像は「フリー素材配布サイト」などで手に入れて下さい。
今の段階で画像を持っていない方が多いと思いますので、今回はこちらの画像で練習して下さい。（すでに画像をお持ちの方はそちらを使っても良いです。）
| 【画像の保存方法】 |
| 画像の上で、右クリック→名前を付けて画像を保存（S）→「画像の保存」の画面が出れば、英数半角で画像ファイル名を付けて「保存(S)」で保存完了【拡張子はgifとして下さい】 |
 |
画像を表示するには<img>と言うタグを使います。xxx.gifが画像のファイル名で使用する画像のファイル名を書いてください。
<html>
<head>
<title>山田太郎のホームページ</title>
</head>
<body>
<img src="xxx.gif">
</body>
</html> |
【表示結果】
siriasu.netにリンクする場合書きのように記述します。赤字が移動先のURLになります。
<html>
<head>
<title>山田太郎のホームページ</title>
</head>
<body>
<a href="http://siriasu.s10.xrea.com/">siriasu.net</a>
</body>
</html> |
【表示結果】
siriasu.net
同じサイトの別ページにリンクしましょう。上記の作成方法で別のページを作成して下さい。ここでは別ページのファイル名を仮に「abc.html」と言うことで解説します。
上記で説明したリンクですが、同じアドレス内の時（自分で作成した同じフォルダに入ってること）は、http://から記入しなくてもリンクが可能で、直接リンクするファイル名を指定しましょう。
<html>
<head>
<title>山田太郎のホームページ</title>
</head>
<body>
<a href="abc.html">siriasu.net</a>
</body>
</html> |
画像をリンクのボタンにすることも出来ます。リンクのタグ<a>で画像のタグ<img>を囲めばOK
<html>
<head>
<title>山田太郎のホームページ</title>
</head>
<body>
<a href="http://siriasu.s10.xrea.com/"><img
src="xxx.gif></a>
</body>
</html> |
【表示結果】
