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

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


	開始前に
	では講座を始める前に、まずこれから作っていくホームページをご覧になってもらおうと思います。今回作るホームページサンプルはこちら画像を2つ使いますので下記の2つを右クリック→名前をつけて画像を保存を行ってください。素材1 素材2 かなりシンプルな物に仕上げましたが、HTMLを理解するのに必要な要素が沢山盛り込まれています。難しい所も出てきますが、諦めず最後まで頑張っていきましょう。このレッスンを終わった頃には基本的なホームページはすらすら作れるようになれるはずです！ではまずデスクトップ上にWEBと言う名前のフォルダを作成しましょう。その中にテキスト文章(.txt拡張子のもの)を作成し、名前を「index.html」に変更しましょう。これがホームページの元になるのです。
	HTML
	では初めに見たホームページのソースを開いてみましょう。ソースの表示の仕方は、ホームページを開きながら右クリック→ソースの表示で確認する事が出来ます。 <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"> <h1 align="center"><font color="#FF33FF">ようこそ私のホームページへ！</font></h1> <p align="center"> <b>こんにちは！<br>初めて作ったホームページだけど見て行ってください！</b></p> <hr size="5" width="50%" align="center"> <center> <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> </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> </html> このように表示されたと思います。ここで触れるのは、ソースの開始と最後にある <html></html>の部分です。この２つがソースをブラウザに「これはホームページの記述ですよ～」と教えている部分です。ですので、このタグがなくてはブラウザ上に上記の様なソースがずらーと表示されてしまいます。
	HEAD
	<html>の次にある<head> この中にサイトの説明・情報を書き込みます。 <head></head>の中には<title></title>と<meta>があります。まずは<title>について説明いたします。 <title>にはブラウザ左上に表示される、ホームページのタイトルを記述します。こちらにはタグを使用する事は不可です。必ずタイトルを記述した後に</title>を書いてください。そうしなければ、その後の<title>を閉じられるまでの部分が全てタイトルだと誤認されてしまいます。次に<meta> <meta>タグは主に、外部からこちらのホームページの情報を読み込む時に使用されます。一行目の <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> これはホームページがどの文字コードで書かれているか確認するものです。 WindowsではShift_JISに指定しておけばほぼ問題ありません。他にもEUC-JPやiso-2022-jp等もありますが、環境が違う場合文字化けが起こったり、ホームページが表示されない場合があります。 2行目の <meta name="author" content="ONETWEB"> これはホームページ製作者の名前・社名を表示するものです。 3行目の <meta name="description" content="私のホームページです"> これは主に検索エンジンで表示された時に出てくるホームページの説明文です。内容が分かりやすいよう書いておけば、検索エンジンから見に来てくれる方が増えていきます。 4行目の <meta name="keywords" content="HP作成,ONETWEB,HTML講座"> これは検索エンジンで検索する際の、検索ワードに関係してきます。数は「 , 」で区切る事でいくつでも指定可能です。
	BODY
	</head>の次にある<body> ここの中に記述するタグが、ホームページの見た目を作成します。また、<body>にホームページ全体の色々な指定をすることが出来ます。では <body text="#000000" bgcolor="#FFCCFF" background="bg.gif" link="#3333FF" vlink="#6633FF" alink="#FF0000">の部分を説明を致します。まず、text=""。これは""内に色を指定してサイト全体の基本文字色を指定します。色の指定法はいろいろありますが、今後使っていくのに便利な16進数で記述する事をお勧めします。 16進数のカラー表は後に紹介致します。次に、bgcolor=""。ここで""に色を指定すうことによってホームページ全体の背景色を指定する事ができます。次にある、background=""。これはホームページの背景に画像を使用するタグです。 bgcolorの指定をしていても、backgroundでの画像指定の方が優先されます。次から3つ続いてる、link・vlink・alinkについては、これら3つをセットと考えてください。これらは<a>タグで囲んだ部分のリンク色を指定します。　link　…　未クリック　vlink　…　クリック済み　alink　…　クリック中
	まとめ
	それではここまでの物でホームページを早速作ってみましょう。 <html> <head> <title>ホームページタイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta name="author" content="作者名"> <meta name="description" content="ホームページ説明"> <meta name="keywords" content="ホームページ,キーワード,単語"> </head> <body text="#000000" bgcolor="#FFCCFF" background="bg.gif" link="#3333FF" vlink="#6633FF" alink="#FF0000"> </body> </html> そして上書き保存をしましょう。どうでしょうか。ブラウザで確認すると真っ白なページが表示されたと思います。失敗？と思った方も居られると思いますが、ページ左上の部分を見るときっちりホームページタイトルが表示されているはずです。この回でやったのはホームページの見た目をデザインする前の段階の作業です。ですがこの部分を適当にやってしまうと、後々綺麗な見た目が完成しても思ったとおりに表示されなかったりしてしまうのです。とても重要な部分なので、不安の残る方はもう一度ご覧になった上、リファレンスで詳しい説明を行っていますのでそちらをご覧くださいませ。では次からホームページの中身。デザインの部分に入っていきます。最初はとっつきにくいかもしれませんが、何度かデザインを行っていくうちに簡単に覚える事が出来ますので、最後まで頑張ってくださいね！

準備　＜　First　＞　Second