高速作成!オリジナルホームページ!
【0】始めに
【1】まずは基礎知識と準備
【2】ホームページを置くスペースを借りる
【3】ホームページを作る!そして完成!
【4】更新の方法
【0】始めに
▼このページの概要
このページは、「今すぐ簡単なホームページが欲しい!でも何にもわかんない!」
という人が、ホームページを持てるように作ったページです。
【1】まずは基礎知識と準備
▼用語知識
とにかく覚えろ。
ホームページ:いくつかのページがあつまってできたページのこと。サイト、ウェブサイト、HPなどとも言う
ページ:ホームページうちの1ページのことを言う
サーバー:ホームページが置いてあるパソコンのこと。ここに自分のホームページになるファイルを置くことでページが見れる
ウェブ:全世界のサーバーにあるホームページをまとめたインターネットの世界のこと
HTML:ホームページを作るプログラムのこと
タグ:HTMLと同じ。「HTMLタグ」とあわせて言うこともある
スタイルシート:デザインを変えるプログラム。CSSと略すこともある
▼タグ知識
テンプレートを自分流にアレンジする時に必要なタグ、「何これ?いじっていいの?」とならないようにするために基本的なタグを書いておく
<table>、<a>等は、中に「○○="○○"」というようなものが入っているが、そのタグの行う細かい情報が入っていると考えよう。長いがちゃんと見ておこう
(ここでは基本的なタグしか扱っていない。まだまだ他のタグもあるので、HPを作ってから探してみよう)
●基本的なタグ
<html></html> これはHTMLだよ、という指令を出すためのもの。これが無いとダメ
<head></head> ページのタイトル等、そのページの情報が主に入る場所。これ自体はいじらなくていい
●<head>に入るタグ
<title></title>
ページのタイトル。間に入れる。
●ボディータグ
<body></body>
ホームページとして見えるものはすべてここの間に入れていく。特にいじらなくて良い
●文字関連
<p></p>
段落。1行間をあけて文章を書く時はこれがベスト
<br>
改行する時に使おう。閉じタグ(</タグ>という形のもの)は無い
●表関連
<table (ごちゃごちゃ入っているが放置)></table>
表を作成する時に使う。特にいじらなくて良い
<tbody></tbody>
<table>に関係するが無意味。いじらなくて良い
<tr></tr>
表の行が始まる、という指令。特にいじることは無い
<td></td>
<tr>と</tr>の間にはさまれている、表の列を作れ、という指令。色々細かい注意事項があるので後で説明
●リンク関連
<a href="リンク先のファイル名"></a>
別のページにリンク(開く)するときに使う
●スタイルシート関連
<span></span>
一部の文字、画像等にスタイルシートを使う時はこのタグを使う
<div></div>
この中に入っている文字、画像等にスタイルシートを使う時はこのタグを使う。文字を真ん中にもってきたりするときにも使う
▼用意するもの
無い。「じゃあどうやって作るの?」って思うかもしれないが、インターネットが見れる環境ならそれでOKだ
▼内容
自分がホームページで出したい内容はなんだ?テーマをしっかり考えておこう
別に今から思い描いている内容を全て書け、というわけではない。目標を決めると言うことなので、簡単に考えておこう
【2】ホームページを置くスペースを借りる
▼ジオシティーズがお勧め!
初心者がホームページを置くならジオシティーズがおすすめです
ただし登録にはYahoo!Japan IDが必要なので、【ココで登録】しよう。既に持ってる人も別に登録しよう
なぜなら、ホームページ用のメールアドレスとして新しく手に入るからだ
そのYahoo!Japan IDと同じIDがURLに付くので、よく考えてIDを作りましょう
▼ホームページを作るには?
「んでどうやって作るよ?」といわれたら、答えは「ジオシティーズでさ。」となる
そう、ジオシティーズはインターネットを見る画面でホームページが作れるのさ!
素材もあるし、カウンター、日記、掲示板の設置もらくらくできる!
次はそのつくり方を説明するよ
【3】ホームページを作る!
▼サイトのデザイン
何も知らない人が自分の思い描いているページを作るのには時間がかかる…
というわけで、テンプレート(基本の形が出来たページ)を用意した
下のテンプレートから好きな物の上で右クリック(Macはコントロール+クリック)し、「対象をファイルに保存」を選び
好きなところに「temp.html」という名前で保存しよう
テンプレート <1> <2> <3> <4> <5>
▼たった一度のアップロード
ここで一度、さっき登録したIDでジオシティーズに【ログイン】し、画面真ん中にある「FTP、EZアップロード」をクリックしよう
次に参照ボタンを押し、さっき保存した「temp.html」を選ぼう。選んだら「ファイル転送」をクリック!これでいったん完了だ
▼修正
転送した画面の上に「ファイルマネージャ」とあるのでそれをクリック。「index.html」と「temp.html」があるだろう
そしたら「temp.html」のある列の左のチェックボックスにチェックを入れ、「編集」ボタンを押すんだ
するとHTMLタグがたくさんかいてある画面が出る。その中に<!---->で囲まれた文章がある
これは説明書きだ。絶対に消さないでおこう。これを見て、編集する場所を編集しよう。編集できたら「プレビュー」を押し、確認する
ここでうまくいっていないときはもう一度編集しよう。できたら「保存」を押そう。これで準備は整った!
▼トップページの作成
まずは「index.html」の左にあるチェックを押し、「削除」を押す。確認画面が出るので削除を選ぼう
そしたらもう一度「temp.html」のある列の左のチェックを入れ、今度は「コピー」を選ぶ
すると「新しいファイル名」という部分が出てくるので「index.html」と入れて保存しよう。これでトップページは出来た。
次はページ上にある「カウンタを設置する」をクリック。「index.html」を選びウィザードに従ってカウンタのタグを出そう
出たらそのタグをコピーし、次に進む。「オンラインでアドバンストHTMLエディタを使って」という部分をクリックし、
さっきと同じ編集画面を出そう。その中に<!--index.htmlカウンタ設置場所-->という部分があるので、そこの下に1つ改行をして
コピーしてきたカウンタのタグを貼ろう。これでカウンタが付いた!
▼その他のページの作成
また「temp.html」の左のチェックを入れ、「コピー」を選び「新しいファイル名」に「(分かりやすい半角英数字小文字のファイル名).html」
と入れて保存しよう。これで作りたいページが出来た。あとはそのファイルを選んで「編集」を押して編集しよう
この作業を繰り返していき、どんどん作りたいページを作っていこう
▼1つのページから他のページにいけるようにしよう
まず「index.html」を選んで「編集」ボタンを押す。そしたらメニューを入れるところに、作ったページのタイトルを入れていこう
そうしたら、そのタイトル全てを<A href="!">と</A>で囲もう。これがリンク(他のページへ移るためのタグ)の基本になるんだ
次に、その内容のあるファイル名を「href="!"」の「!」のところに入れていこう。もちろん半角英数字の小文字でね
そして保存。これでトップからリンクできたことになる。次に、そのメニュー部分を全てコピーして、他のファイルを編集で開き
そのメニュー部分を全て消し、コピーしたメニューを入れよう。これを全てのページにやれば終わりです
▼確認
ジオシティーズトップの右上にあるURL(自分のホームページのアドレスです)をクリックしよう。index.htmlが開かれる
そこから全てのページにいけるか・誤字・脱字・タグのミスないか探そう。ミスがあったらそのファイルを開いて直しましょう
全部確認できたら完成!
【4】更新の方法
▼更新の意味
更新は、ホームページの内容を新しくするためにするんだ。せめて1ヶ月に1回は更新するといいよ
▼更新する場所、場合
・日記(ジオシティーズについている日記機能だと楽に更新できます)
・新しくページを作った時
・今作っているページに関連する情報を知って、それをホームページに乗せたい時
・etc... 更新する場所はいくらでもあるから探してみよう
▼更新の仕方
・ジオシティーズについている日記機能を利用して日記を書いている人は、日記機能から更新できるよ
・既に作ってあるページに新たに書いていったりするときはそのファイルを選んで編集だ
・新たにページを作る時は「temp.html」をコピーして編集していこう
【5】一歩進んだHPにするには
▼バナーを作る
バナーとは:ホームページを象徴するような画像のこと。主にタイトル、扱っているもののイラストや写真が入る
いきなりバナーを作るのは大変だ。だから【バナー自動作成】を使うといい。タイトルと背景だけと言うシンプルなバナーだが
あると無いとでは違うので一つは作っておこう