ホームページ作成までの流れ・準備・ページ作成方法を紹介しています。
|
| 【流れ】 |
|
|
|
|
|
ＨＴＭＬとは？ |
HTMLとは、Hyper Text Markup Languageの略で、ホームページ（WEBページ）に文字や画像を表示させるための言語です。
この言語で記述された文章ファイルをブラウザで読み込む事で、ご覧頂いているようにホームページとして見ることができます。
このHTML（ソース）を見るには、Internet Explorerにファイル(F) 編集(E) 表示(V)・・・・・・・と並んでいる所に
表示(V)→ソース(C)で見ることができます。
HTMLには、指定をさせるタグがあって、これはW3C（World Wide Web Consortium）と言う機関によって仕様が決められているようです。
|
|
タグ
|
タグの書き方には決まりがあって、タグは半角（1バイト）の英数字で記述します。
これは大文字でも、小文字でも半角であればどちらでもＯＫです。
半角文字<HTML>○
全角文字＜ＨＴＭＬ＞×
そして次に始まりと終わりを意味するスラッシュ【/】があります。
例えば、始まりは<HTML>で終わりは</HTML>というように終わりにはスラッシュが入ります。
但し、スラッシュを必要としない改行<BR>タグなどもありますので、全てに対して必要だということでもありません。 |
|
始まり（開始タグ） |
終わり（終了タグ） |
| <html> |
</html> |
| <head> |
</head> |
| <BODY> |
</BODY> |
| <FONT> |
</FONT> |
| スラッシュなし |
| <BR> |
|
難しく考えると難しくなってしまうので、基本的にホームページは<html>で始まって</html>で終わる！そしてその中に<HEAD>や<TITLE>や<BODY>や<FONT>などのタグがあって、それぞれの終わりに</TITLE></HEAD></BODY></FONT>などのスラッシュを付ければよく、中には<BR>などのように例外のタグもある！という感じですね。(^-^)
ただ、<html></html>の中に<TITLE></TITLE><BODY></BODY>を入れて<BODY></BODY>の中に表示させたい文字や画像を入れるという基本的なルールがあります。
このような事をホームページビルダーなどのホームページ作成ソフトは、自動で作成してくれます。 |
<HTML>
<HEAD>
| <TITLE>サンタさんのホームページ</TITLE> |
</HEAD>
|
<BODY>
</BODY>
|
</HTML> |
|
<HTML>
<HTML>ページ全体を意味していて、この間に基本的に記述が入ります。</HTML>
<HEAD>
<HEAD>この間に書かれることは、個人の情報やページのスタイルなどを記入する場所で、ページを見たときには実際には表示されない部分なのですが、必要なタグです。ただ最初うちは、何も書かなくてもＯＫです。</HEAD>
<TITLE>
B><TITLE>
この間にホームページのタイトルを入れます。ここに入れた文字が実際にExplorer（ページ画面の一番上の青い部分）に表示される文字です。</TITLE>
<BODY>
<BODY>この間にページの本文を入れていく事で、実際にページを開いた時に見える部分です。<BODY>
|
|
ホームページを作る前にフォルダの作成 |
これから作成するホームページのデータを、「ホームページ用」として保存（保管）するフォルダを作成します。そして作成したフォルダの中にホームページで使う画像や作成したファイルなどをこのフォルダに保存していきます。
|
|
フォルダの作成 |
デスクトップやマイドキュメントの中など御自身でおいておきたい任意の場所（サンタさんの場合は、マイドキュメントに入れています。）の何もない所で、右クリック→新規作成→フォルダ（F)で 新しいフォルダができます。まずは、新しく作ったフォルダに名前をつけます。名前の付け方は、新フォルダの上で右クリック→名前の変更をクリックすれば名前を変更出来ます。
（名前例、MyHomePage）
|
|
ホームページ作成 |
新しく作成したフォルダ（例、MyHomePage）の中にホームページを作っていくのですが、
HTMLで作成する場合には、テキストエディタと呼ばれる文字を編集するソフトが必要になります。Windowsに入っている「メモ帳」や「ワードパット」などがエディタです。フリーソフトでエディタもありますので、使いやすいのを探してみるのもいいかもしれませんね。サンタさんの場合は、Windowsの「メモ帳」を利用しています。
|
|
Windowsのメニューからメモ帳を出すには【スタート】→【プログラム】WindowsXpの場合は【すべてのプログラム】→【アクセサリー】からメモ帳を選びます。
|
|
トップページ |
ホームページに行くと最初に表示されるのが、この「トップページ」です。
トップページの名前にするのが「index.html」または「index.htm」と決まっていて、これはサーバが自動的にトップページを判断するための約束事になっています。
メモ帳やワードパットでファイルを作り名前をつけて保存すると付けた名前の最後に共通のローマ字が現れます。
これが拡張子と呼ばれるもので、これはファイルの形式を表していて、メモ帳なら.txt ワードパットなら.doc エクセルなら.xls という拡張子が付きます。
ホームページ作成時のリンクの指定や画像の表示などで拡張子を使う機会が出てきますので、ある程度は理解しておいて下さいね。
|
■わからない拡張子が出てきた時には、拡張子辞書のサイトで調べて下さいね。
|
| インターネット上で使用される主な拡張子 |
| ファイル形式 |
拡張子 |
内容 |
| HTML |
.html(.htm) |
インターネットファイル |
| GIF |
.gif |
画像ファイル（アニメーション含む） |
| JPEG |
.jpg |
画像ファイル |
| BMP |
.bmp |
画像ファイル |
| PNG |
.png |
画像ファイル |
| MIDI |
.mid |
MIDIサウンドファイル |
| Flash Player |
.swf |
フラッシュムービーファイル |
| Shockwave |
.dcr |
ムービーファイル |
| QuickTime |
.mov |
ムービーファイル |
| LZH |
.lzh |
圧縮ファイル |
| ZIP |
.zip |
圧縮ファイル |
|
|
では新しく作成したフォルダ（例、MyHomePage）のを開いてください。
そして開いたフォルダの何もない（白い部分）にマウスを持っていって、そこで右クリック→新規作成→テキスト ドキュメントをクリックすると新しく『新規テキスト ドキュメント.txt』というファイルが出たと思います。
|
| 【基本記述】 |
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML> |
|
次に新しく作った『新規テキスト ドキュメント.txt』を開いて上の【基本記述】をコピーして貼り付けてみてください。
貼り付けが完了すると、今度は、『新規テキスト ドキュメント.txt』ファイルのファイル→名前を付けて保存→名前（ファイル名）は「index.html」または「index.htm」として保存をします。
すると、フォルダ（MyHomePage）の中に新しくファイルが出来ています。
これで、トップページが出来上がりました。
この出来上がったファイルをクリックするとご覧になれます。
但し、これは【基本記述】ですから真っ白の状態です。つまり【基本記述】は、最低限必要な記述なのです。
もしまだ『新規テキスト ドキュメント.txt』を作っていないのでしたらコチラに貼り付けて点検するをクリックすれば、ご覧になれます。
この【基本記述】に色々とプラスしていく事で、今ご覧頂いているようなページになっていきます。
また、同じ方法を繰り返しおこなって１ページ、２ページ、３ページと作成していき、それぞれをリンクさせる事でホームページが出来上がっていきます。
|
|
いろいろとプラスしたトップページ
|
では、次にいろいろとプラスしたトップページにしてみますね。
|
<HTML>
<HEAD>
<TITLE>サンタさんのホームページ</TITLE>
</HEAD>
<BODY bgcolor="#ffffcc">
<center>ようこそ！サンタさんのホームページへ</center>
お越し頂きまして<BR>
有難うございます。<BR>
<B>末永く</B>
<FONT color="#ff0000">応援よろしく</FONT><BR>
<FONT size="5">お願いします。</FONT>
<HR>
<HR size="1" color="#ff0000">
↑水平線↓の色も太さも変更出来ます。
<HR size="5" color="#ffcc00">
<A href="http://money.nandenjoho.com/">次のページ</A>
<BR>
<IMG src="iruka.gif"><BR>
<BR>
<A href="http://money.nandenjoho.com/"><IMG src="iruka.gif"></A>
<BR>
</BODY>
</HTML> |
| ※上記の場合のサンプルはコチラ |
|
<BODY bgcolor="#ffffcc">
<BODY bgcolor="#ffffcc">とする事で、ページ全体の色を指定する事が出来ます。
色の指定はコチラを参考にして下さい。
この他にもデジカメで撮影した画像やお気に入りの画像などを背景として指定させる事も出来ます。
|
<center>
<center>ようこそ！サンタさんのホームページへ</center>のように
<center>と</center>で囲むと中央揃えになります。
|
<BR>
<BR>は改行です。
|
<B>
<B>末永く</B>
<B>と</B>で囲まれた文字が太字になります。
|
<FONT>
<FONT color="#ff0000">応援よろしく</FONT>
<FONT color="色の名前">と</FONT>で囲まれた文字の色が変わります。
また<FONT size="5">お願いします。</FONT>のように
文字の大きさを指定する事も出来ますし、<FONT face="HG創英角ﾎﾟｯﾌﾟ体">このように</FONT>とすれば
このように
と書体を変更する事も出来ます。
もちろん<B><FONT color="#ff0000" face="HGP創英角ﾎﾟｯﾌﾟ体"
size="3">すべてを</FONT></B>
のようにしてすべてを 合わせる事も可能です。
書体の変更はコチラを参考にして下さい。
|
<HR>
ページに水平線を出すには<HR>と書きます。
これも<FONT>と同じで<HR size="1" color="#ff0000">のように<HR size="1" color="色の名前">で色を変更したり<HR size="5" color="#ffcc00">のsize="5"ように水平線の太さを変更出来ます。
|
自分のホームページの別ページに移動
<A href="http://money.nandenjoho.com/">次のページ</A>と
次のページを<A href="○○○">次のページ</A>のように囲むことで○○○のページにリンクさせているので、
次のページをクリックすればhttp://money.nandenjoho.com/のページにいけます。
このように<A href="○○○">次のページ</A>とリンクをさせてホームページを構成していきます。
もう少し詳しく説明しますと、
例えば、次のページがhttp://money.nandenjoho.com/aaa.htmlだったとしますと
上記のように作成したフォルダ（MyHomePage）の中に次のページを作成した場合は、
<A href="http://money.nandenjoho.com/aaa.html">次のページ</A>のように全てを入れなくても
<A href="aaa.html">次のページ</A>としてhttp://money.nandenjoho.com/の部分は省いて指定出来ます。
|
画像などを入れたい場合（同じフォルダ内の場合）
iruka.gifを同じフォルダ内に入れて<IMG src="iruka.gif">とすれば下のように表示されます。
（見やすいようにcenterにしています。） |
iruka.gif
|
画像をリンクボタンにする
<A href="http://money.nandenjoho.com/"><IMG src="iruka.gif"></A>のように
<IMG src="iruka.gif">を囲む事で画像がリンクボタンになります。
（見やすいようにcenterにしています。） |
|
