[ 目次 |  BACK | NEXT ]

ホームページの作り方-3

いよいよホームページの作り方です。
作り方の順番は、色々有りますがここでは大まかに全体の流れが分かるように進めていきます。
HPの構成を考える。
▼
ページを作成
▼
サーバを借りる
▼
ページをアップ
▼
掲示板を借りる
▼
HP公開

■HPの構成を考える
トップページ、プロフィール、日記、掲示板、リンクなど
一般的にそろえられてるコンテンツですね。
その他に、コレクションを披露したり、趣味のコンテンツを作ったり、小説を載せたり・・・。
色々イメージが広がってきます。
最終的なイメージがあるのなら、ノートにメモしておくのもいいですね。

でも、最初からあまり凝ったページをイメージすると、つまづきも多いかも。
とりあえず、アップロードが出来るまでやって見ましょう。
そのあと肉付けしていけばいいのですから（＾＾）

■ページを作成
ここでは、サーバを借りてオープンするまでの間の仮設トップページを作って説明します。

HP作成ソフトで作る方は、ワープロソフトと同じような作業です。
センタリングしたり、文字の大きさを決めたり、色を決めたり・・・。
ソフトによって少しずつ使い方が違うので、分からないところはマニュアルを参考にしてください。

さて、メモ帳でタグを打ってHPを作ろう！という方。メモ帳を開いて下さい。

スタートボタン⇒（XPはすべてのプログラム⇒）プログラム⇒アクセサリ⇒メモ帳

白紙の状態で、「名前をつけて保存」します。
ファイルの種類を「すべての場ファイル」にして、ファイル名は　index.htm　とします。
このとき、HP専用のフォルダを作って保存すると後で楽です。

▼

メモ帳に次のタグを書いていきます。
タグとは、<　と　> で囲まれたHTML（WEB上で最も一般的に使われてるファイル形式）での
命令文です。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Sift-sjis">
<title>NOEL'S WEB SITE</title>
</head>
<body>

NOEL'S WEB SITE 近日オープン

</body>
</html>


まずはこのまま書いてみて下さい。半角で、スペースも忠実に必要な部分に入れてください。
そして上書き保存。

▼

確認してみましょう。
InternetExplorerを起動します。
ファイル⇒開く⇒参照⇒（目的のフォルダまで移動して）index.htm

真っ白なページの左上に「NOEL'S WEB SITE 近日オープン」
タイトルバーに「NOEL'S WEB SITE」と出ましたね？
↑で書いたタグの中に、表示された文字が当てはまる部分があります。

<title>と</title>に挟まれた内容が、タイトルバーに現れます。
そして、<body>と</body>に挟まれた内容が、画面に現れます。
このように、ページを作るのは、ほとんどが<body>タグに挟まれた部分を作成していく事になります。

▼

画面の文字を編集しましょう。
【文字のセンタリング】
　『NOEL'S WEB SITE 近日オープン』　この文字を画面の中央に表示させてみます。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Sift-sjis">
<title>NOEL'S WEB SITE</title>
</head>
<body>
<center>
NOEL'S WEB SITE 近日オープン
</center>
</body>
</html>

<center>タグで挟みました。
上書き保存して、先ほどのようにブラウザで表示してみてください。センタリングできましたか？

【改行】
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Sift-sjis">
<title>NOEL'S WEB SITE</title>
</head>
<body>
<br>
<br>
<br>
<center>
NOEL'S WEB SITE 近日オープン
</center>
</body>
</html>

<br>一つが１行改行。改行タグには/（スラッシュ）の付いた閉じタグはありません。
上書きしてブラウザで開きながら、ちょうどいい位置になるように、<br>タグで調節します。
タグを編集しながらブラウザで確認する時、その都度ファイルを開きなおさないで
ツールバーの「更新」ボタンを押すと簡単です（＾＾）
※ここでは<br>タグで縦位置を調節していますが、もっといい方法はあります。
　今回は改行タグを知っていただくために、<br>を使っています。

【文字を飾る】
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Sift-sjis">
<title>NOEL'S WEB SITE</title>
</head>
<body>
<br>
<br>
<br>
<center>
<font size="+3">
<b>
NOEL'S WEB SITE 近日オープン
</b>
</font>
</center>
</body>
</html>

<font>タグは必ずオプションが付きます。オプションは、半角スペースで区切って
size="+3"　とか　color="#002BAA"　とか追記していきます。
いくつでも追記可能ですが、タグによって用意されているオプションも異なります。
color="#002BAA"　WEB上では#に続く６桁のカラーコードや、カラーネームを書くのが一般的です。
カラーコードを調べるには、カラーパレットをお使いください。

<b>タグは文字を太くするタグです。


このように、「NOEL'S WEB SITE 近日オープン」の文字を囲ってセンタリングしたり、
文字サイズを変えたり、太くしたりと飾っていきました。
ブラウザで確認しながら、色々と応用させてみてください。（＾＾）
そして、実際あなたが使うための仮のトップページを作成してみましょう。

【上記で説明されていないタグ】
<html></html>
HTML形式で展開してますよ〜と定義しています。

<head> </head>
このページの情報です。実際の画面には現れませんが、
ブラウザが色々判断するのに必要なことを書いたりします。

<meta>
ここで使用してるメタタグのオプションは、文字のエンコードを　x-sjis　（シフトJIS）に指定してます。
国内で一番一般的に使われているもので、このメタタグのオプションを置くことにより、表示した時の
文字化けを防げます。

エンコードってなぁに？
ブラウザの「表示」⇒「エンコード」をみてください。
シフトJISにチェックが入っていると思います。このページにシフトJISの指定がしてあるからです。
試しに、他のエンコードにチェックをしてください。
日本語以外のものにすると、確実に文字化けするのがわかると思います。

☆タグは一度に覚えきれないくらい沢山あります。
　沢山のタグをわかりやすく紹介してるサイト
　　⇒TAG index　様　http://www.tagindex.com/
　とても参考になると思います。（＾＾）

次回は、アップロードです。

NOEL  

'03.07.13　

'03.08.16 「index.html」のスペルミス修正・・・・Thanks! katsu様

 [ 目次 | BACK | NEXT ]