|
| 作成手順その1 |
|
さてここからが本格的なホームページ作成に取り掛かります。
今からはじっくり時間を掛けて基礎的な所からやっていきたいと思います。
まずここで確認しておくことがいくつかありますので
テキストにでも明確に書いておくと後々役にたってきます。
まずどのようなコンテンツ内容にするか。
当サイトでしたらホームページ作成方法などを記載していますね
自分が作りたいホームページの内容をここできちんと整理しておきましょう。
サーフィン・ゴルフ・勉強・芸能・食べ物・・・etc
なんでもいいのでメインとなるものをキチンと明確にしておいて下さい。
続いてメインとなるコンテンツの『キーワード』を作りましょう。
当サイトでしたら『ホームページ』がキーワードです。
大体で結構ですがホームページ内の文章の約3%はそのキーワードにしましょう。
左メニューのサイト内キーワード検索ツールで後々調べる事ができます。
それではメインカテゴリ、キーワードが決まりましたら
サブコンテンツを明確にしていきましょう。
メインコンテンツから広がる自分自身の体験、経験、知識なんでもいいです。
ここまで決まりましたらホームページに名前をつけてあげましょう。
アクセスアップでこれもかなり重要ですので真剣に考えたほうがいいです
左メニューのGoogle 検索ワードチェックで
メインコンテンツに関わる語句がどう検索されているのかがわかります。
その検索結果に伴ったサイト名にすることをお勧めします。
ここまでを参考に一つ例をあげますね
メインコンテンツ:
ボクシング
キーワード:
ボクシング
サブコンテンツ:
試合日程、階級、現在のランキング、選手評価、ジムの案内、最近の試合、お気に入りの試合、ボクシング基礎
サイト名前:インターネットボクシングジム
とまぁこんな感じにテキストに書いておきましょう。
ちなみにGoogle 検索ワードチェックで『ボクシング』で検索すると
この順位で皆さん検索されているようです
ここでは一番アクセスが見込まれる『ボクシングジム』をホームページのタイトル名にしてみました
これが検索結果上から10個です。
1. ボクシングジム
2. 亀田ボクシング
3. 亀田
4. ボクシング亀田
5. 階級
6. ボクシング階級
7. 日本ボクシング
8. 女子ボクシング
9. ボクシング内藤
10. ボクシングチャンピオン
さてそろそろホームページ作りに『飽き』が出てきた人もいると思います。
まだまだ入り口に着いたばかりです。
最初に述べました、【根気】が大事です。
必ず作れるようになるので諦めず下の作成手順その2へお進み下さい。
|
| 作成手順その2 |
|
さて今回はついにホームページを作っていきたいと思います。
前置きが長すぎてダラけてしまった人はいませんか?
ここからが楽しい所なので気合を入れなおして下さい!
さてホームページは何で出来ているか覚えていますか?
【ソース】と呼ばれるものです。
インターネットでYahooでもどこでもいいですから
ブラウザ上で右クリックすると『ソースを表示』というのがあると思います。
ソースは誰でも見ることができますし(見えないようにする事も可)
見栄えの綺麗なサイト様のソースを見て勉強する事も出来ます。
では前に作ったマイドキュメントのindex.htmlをテキストエディタで開いて下さい。
今は真っ白で何も書いていません。
ここに貴方がタグと呼ばれるソースを書いていくのです。
基本の形
はい。なんの事やらさっぱりですね!
これらの説明をしていく前にタグとは
<タグ>ここにタグに関連した内容</タグ>
<タグ"ここにタグ関連の数値やURL"></タグ>
こういった形で書いていきます。
上から3つ目が大文字になっていますよね?
タグは大文字でも小文字でもどちらでもいいですが
大抵の人は小文字で書いていきます。
タグ説明
今からhtmlファイルが始まります!と宣言しているとでも解釈して下さい
ファイルに関する情報やタイトルを示すタグなどを記述します
〜〜〜の部分にホームページの説明文
〜〜〜の部分にホームページ内の『キーワード』
検索ロボットが来た時にリンクを見回って下さいと宣言してます
〜〜〜〜〜〜の部分にホームページタイトル
ヘッダータグ終了
〜〜〜〜〜〜の部分が実際にブラウザで表示される部分。
文字の大きさや色などを指定するタグを書きこみます
html終了のタグ。このタグは基本一番最後に書きます。
この形をまず書いておけばあとはレイアウトや文字はたまた画像やリンクをはるだけです。
左メニューに一般的に使われるタグを記したHTMLタグで遊ぼうというリンクがあります。
ぜひ参考にして下さい。管理人も時々見に行きます。
それでは上記のタグを入力しましたらindex.htmlを上書き保存しましょう。
ダブルクリックで開いて見ましょう。
まだ真っ白ですが左上のホームページタイトルが
貴方の決めたホームページタイトルになっていれば一歩進んだ証拠です。
では再びindex.htmlをテキストエディタで開いて
<body><body/>に記述してみましょう。
なんでもいいですよ。『あ』でも脳天かかと落としでも適当でいいです。
それが表示されれば次のステップに進みましょう。
ここまでで解らない人も解った人も一応これをダウンロードして、確認してください。
それでは下の手順その3へ進みましょう。
|
| 作成手順その3 |
|
続いてホームページの基本でもある『リンク』について説明しましょう。
簡単に言うとリンクとは今現在みているページから違うページへ飛ぶための物
大体で結構ですのでニュアンスだけ把握しておいてください。
では実際にリンクさせてみましょう。基本のリンクタグはこれです
ではindex.htmlをテキストエディタで開いて下さい。
そこに
と記述してください。あとは上書き保存してindex.htmlを開いてみましょう。
『ホームページ作成』と書いてあり、クリックで当ホームページに画面が切り替われば
無事リンク作成できたと言う事です。404 Not foundと出る人はやり直して下さい。
アンカーテキストはブラウザで表示されるリンク先のホームページタイトルでもいいですし、リンク先の説明でもいいです。
続いて画像を表示させて見ましょう。画像表示させるタグはこれです
さて画像のURLですがマイドキュメントの中に『image』というフォルダを作成してください。
そのフォルダの中にこれをダウンロード解凍してから入れて下さい。
ではimageフォルダをFFFTPでサーバーにアップロードしたら
とソースに記述してindex.htmlを開いて見てください。
yahoo.gifの所は画像ファイルの名前です。
画像がでてきましたよね!
続いて画像からリンクさせてみたいと思います。
タグはこちら
今回はリンク先をYhaooにしてみたいとおもいます
タグはこちらです
ソースに記述しましたら確認してみましょう。
画像をクリックしてYhaooにブラウザが切り替われば成功です。
タグ内のimageの所はフォルダの名前です。今回はimageというフォルダ名にしましたけど
自分なりの名前がいい人は違う名前でもいいですよ
とりあえずここまでの説明でお察しの人もいるかもしれませんけど
殺風景なホームページならこれで作れます。
ただホームページは見た目も大事なので次のステップでレイアウトを学びましょう。
上の作成手順4〜6にお進み下さい。
の前にどうしても解らなかった人はこれを参考に自分のindex.htmlと比べて下さい。
|
|