初めてのホームページ作成講座 - 子育て応援コミュニティ

一歩進んでＨＰ知識編

既成のHPじゃ物足りない、自分で好きなようにレイアウトしたい！って方はHP作成ソフトで自由に作ってみましょう。きつね♪は「ホームページビルダー＆秀丸エディタ」で作ってます。「簡単HP作成編」では必要ないですが、自分で作るとなると少しホームページの知識も必要になるので、簡単に流れをまとめておきますね。HP作成ソフトの使い方については、解説サイトなどを参考にしてみてくださいね。
関連リンク
・HP作成関連ソフト（Amazon)
・企業発HTML関連ソフト（Vector)
・HTMLエディタ等（Vector）
・テキストエディタ(Vector)秀丸等
・ビルダー初心者向け解説サイト
*Vector（ベクター）でフリー（無料）
やシェアウェアのソフトを色々探せますよ

はじめてHPを作るなら作成ソフトで作る方が無難だと思いますが（私は今でも使ってるけど）、挑戦してみたい人は、文章ファイルなのでタグなどを覚えて自分で書いていくか、フリーの作成支援ソフトを使ってみましょう

ホームページビルダーなどの作成ソフトでできることは、簡単に言うと「.html」という拡張子のテキストファイルの作成です。つまり普通の文章ファイルです。ブラウザ（インターネットエクスプローラやネットスケープ）だと、いつもみんなが「ホームページ」として見ている画面を見る事ができます。





ホームページ本文


←こういう形式の文章ファイルです。
<>で区切られた１つ１つをタグといいます。
（タグは開始タグと</BODY>のような終了タグと対になっているものが多い）

〜までの間に表示させたい文章を書いたり、画像・音などを貼り付けたりします。
HP作成ソフトでは、これらの作業を感覚的に簡単にできます。
タグもほとんど自動で書き込んでくれます。



ホームページビルダーでの制作

今バージョン2001を使っているので古い画面ですいません・・・が、こんな感じの画面です。

直接「標準」という画面（左図）に文字を書いたり、画像を挿入したり、表を作ったりできます。すると「HTMLソース」画面にはすでにタグが挿入されています。ブラウザでどう見えるかは「プレビュー」をクリックするとわかるので、感覚的に操作ができます。

文字の色を変えたりサイズを変えたり、フレームを作ったりというほとんどの作業ができるので、気に入って使ってます。素材も多種。


ホームページの構造

「きつね♪のホームページへようこそ」というトップページを作ったとします。ファイル名は「index.html」です。これとは別にprofile.htmlとoekaki.htmlという２つのページをそれぞれ作ったとします。それぞれをトップページにリンクさせます。これでトップページから２つのページに移動ができます。つまり例では、３つのhtmlファイルが必要だということになります。

また例で「掲示板」をリンクしています。これはhtmlファイルではないので、HP作成ソフトでは作れません（作れない事もないけど大変でしょうね、やりたくない）。別にCGIファイルが必要なので、フリー＆シェアで探して自分で設置するか、レンタルBBSなどを借りて、そのURLをリンクするのが簡単でしょう。


ちなみにprofile.htmlとindex.htmlが同じ場所にあるときのリンクタグは　プロフィール　です。HP作成ソフトを使っている方は覚えなくても大丈夫です。

場所といいましたが、これはファイルがリンクされているところから見て、どの場所にあるかをしめすもので「相対パス」といいます。同じフォルダ内に３つのファイルが入っているなら３つとも場所は同じなので、それぞれリンクしあってもファイル名だけでＯＫです。右図のようにトップページのある場所にフォルダ
（fileとする）があり、その中に２つのファイルが入っているときは、profliehtmlの場所は、トップページからみて"./file/profile.html"になります。逆にprofile.htmlから見たトップページは"../index.html"です。
相対パスに対して絶対パスというのがありますが、これはようするにhttp://で指定した「どのページからでもその場所がわかる」書き方です。（例：http://kitunet.kiy.jp/file/profile.html）

■
トップページ
index.html

プロフィール
profile.html

お絵かきの部屋
oekaki.html
■トップページ
index.html		─■フォルダ
file

プロフィール
profile.html

お絵かきの部屋
oekaki.html
./（省略可）同じ場所
../１つ上のフォルダ
./file/
　fileというフォルダに
　入っているファイル
となっているときは
profile.html（./profile.html）		となっているときは
./file/profile.html　


このように、いくつかのHTMLファイルがそれぞれリンクし、画像ファイルなどを表示させるように指定し、ひとまとめにした物が、ホームページになります。





前
ブログではじめるホームページ 		カテゴリートップ
HP作成講座 		次
素材・レンタルCGI編
ログイン・新規登録
ユーザ名:

パスワード:


パスワード紛失 新規登録
子育て応援コラム集
ママ講座Menu
Online
6 人のユーザが現在オンラインです。 (1 人のユーザが HP作成講座 を参照しています。)
登録ユーザ: 0
ゲスト: 6
もっと見る