－ホームページ制作－【初級】

ホーム＞ホームページ制作（初級）＞Fourth


	開始前に
	ここでは今までのレッスンを参考に、最初に提示したサンプルページを完成させます。見た目や内容はオリジナルに書き換えて貰った構いません。むしろ自分色を出して行きましょう！このレッスンが終了したら恐らく何も知らなかった最初の頃よりHTMLを理解する事が出来ていると思います。最後まで頑張って参りましょう！まず開始前に以下の準備をしてください(Firstページのものと同じです) 今回作るホームページサンプルはこちらではまずデスクトップ上にWEBと言う名前のフォルダを作成しましょう。その中にテキスト文章(.txt拡張子のもの)を作成し、名前を「index.html」に変更しましょう。画像を2つ使いますので下記の2つを右クリック→名前をつけて画像を保存でWEBフォルダに保存を行ってください。(名前はダウンロードした時のもので構いません。他に使いたい画像がある方はそちらをご利用ください) 素材1 素材2
	First STEP
	ではまずFirstページに記述した、HTML・HEAD・BODYの記述をしましょう。 <html> <head> <title>私のホームページ</title> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta name="author" content="ONETWEB"> <meta name="description" content="私のホームページです"> <meta name="keywords" content="HP作成,ONETWEB,HTML講座"> </head> <body text="#000000" bgcolor="#FFCCFF" background="bg.gif" link="#3333FF" vlink="#6633FF" alink="#FF0000"> </body> </html> 上記のようになったと思います。赤字の部分は自分の環境に合わせて変更してみましょう。
	Second STEP
	ホームページの土台が完成したので、次に中身を作っていきます。 Secondページで説明しました・<h></h> ・<* align=""></> ・<font></font> ・<* color="*"> ・<p></p> ・<b></b> ・<s></s> ・<i></i> ・<u></u> ・<br> ・<hr> ・<center></center> ・<a href=""></a> ・<img src="" width="" height="" alt="" border=""> ・<!-- --> を組み合わせ、自分なりに中身をデザインしてみましょう。サンプルでのデザインHTMLは <h1 align="center"><font color="#FF33FF">ようこそ私のホームページへ！</font></h1> <p align="center"> <b>こんにちは！<br>初めて作ったホームページだけど見て行ってください！</b></p> <hr size="5" width="50%" align="center"> <center> </center> <hr> <p align="right"> 連絡先はこちら。 <a href="mailto:xxx@xxx.com">xxx@xxx.com</a> </p> <center><a href="../../index.html"><img src="../../logo1.gif" width="95" height="95" alt="ONEWEB" border="0"></a></center> </body> 文字の大きさや色、画像を自分で用意したものに入れ替えるなどしてみる事でオリジナルホームページ作りへの道が進んで行きます。また、一部のみ自分用に変更するだけでも、ここをこうしたらこうなるんだと実感が沸くので最初はそれだけでもいいかもしれません。
	Third STEP
	そして最後に中央部分（<center></center>）にテーブルを設置しましょう。サンプルでは簡単な作りでしかありませんが、<td>タグを複雑に入り込ませる事で見栄えのよい作りに変化させる事が出来ます。最初は難しいと思いますが、これは慣れ次第で楽々に複雑なテーブルでも作成できるようになるので、初めのうちに難しいことに挑戦していくことをお勧めします。サンプルテーブルタグはこちら <table border="1" bgcolor="#FFCCFF" width="500"> <tr><th colspan="2" bgcolor="#FFFFCC"><h2><font color="#333333"><u>コンテンツ</u></font></h2></th></tr> <tr><th><i><font size="+3"><a href="#">Profile</a></font></i></th><td>…自己紹介です</td></tr> <tr><th><i><font size="+3"><a href="#">Diary</a></font></i></th><td>…普段の出来事を書いています</td></tr> <tr><th><i><font size="+3"><a href="#">BBS</a></font></i></th><td>…書き込みしてくださいねー</td></tr> </table> これをコンテンツの位置をずらしたり、コンテンツの数を増やしたりサブコンテンツを配置したりすることで見た目が著しく変化します。その分ソースも複雑なものになりますが、Thirdページを見直しながら作成していくのもまた勉強となりますのでやってみる事をお勧めします。
	仕上げ
	そして仕上げに各コンテンツ部分に<!-- -->のコメントを使用し、次回ソースを変更する時に見つけやすいようマーキングをつけましょう。そしてソースを保存してブラウザで確認してみましょう。自分の思い通りに作成されているでしょうか？もしどこか違った表示や気に入らない部分があった場合、再度ソースを開いてその部分を訂正していきましょう。そしてこれで保存をし、自分のホームページの完成です。
	FTP
	さて、これでホームページは完成しました。これで終わり？と思った方が居ると思いますが、このままだとまだ外部の方にホームページを見ることが出来ません。他の人にホームページを見てもらうためには以下の３つの方法があります。　・ホームページのファイルをメール等に添付ファイルとし送信する。　・自宅サーバーを設置する。　・レンタルサーバーを利用する。 1つ目の方法では誰か1人2人の人に見て貰う、非更新型のホームページ等の場合には使用出来ますが、わざわざHTMLを利用する必要がないのでこれは却下です。 2つ目の方法はホームページ作成とはまた違うスキルが必要ななってきます。 Apache等のツールを利用して、ネット回線を利用し他の方が見る事を可能にしますが、セキュリティーや他にも難しい設定が必要になってきますので、こちらをやってみたいと言う方は後ほど別ページで説明致します。ならどうするんだ。と言うわけなんですが、ここではレンタルサーバーと言う、サーバーをレンタルさせていただけるサービスを利用しようと思います。レンタルサーバーは様々で、有料のものもありますが無料のものもあります。 CGIやSSL等が使用不可だったり可能だったりと選ぶ際に色々注意が必要です。レンタルサーバーを探す際は、タダものではない！のページがサンプルも配置されておりとても探しやすくなっています。そしてレンタルサーバーを用意できましたら次は作成したホームページのアップロード作業となります。ブラウザ上でアップロードが出来るレンタルサーバーもありますが、それらはレンタル先に説明がされていると思いますので省略させていただきます。大抵のレンタルサーバーではFTPと言うツールを利用してのアップロード作業がメインとなっております。 FTPとはオフライン上にあるファイルを、レンタルしたサーバーにアップロードするツールの事を指します。 FTPツールにも色々ありますが、日本で一番使われている無料のFTPツール。 FFFTP を利用しましょう。こちらは操作がとても簡単で、利用者も多いのでFFFTPについて解説されている所が多く、また初心者に限らず上級者にもとても使いやすいツールとなっています。 FFFTPの操作説明については以下のホームページで詳しく説明されていますのでご覧ください。 FFFTP Support Page. そしてFTPツールを使いファイルをアップロードしたらホームページの完成となります。
	最後に
	ここまで長い説明を最後まで見ていただきありがとうございました。なるべく簡潔に要点を延べ、重要な部分に時間を使い説明する。と言った感じで書かせていただいたのですがいかがでしたでしょうか。この講座で学んだ基礎をしっかりとしておけば、中級・上級と続きへ進んでも内容を理解していけるはずです。更なるホームページの発展を目指し、これからも頑張っていきましょう！初級講座お疲れ様でした。

Third　＜　Fourth　…　TOP