ホームページの作成例
 


ホームページ作成の簡単な説明です。最近ではホームページを作成する便利な専用ソフトウェアやワープロソフトが登場していますが、ここでは Windows のメモ帳を使ってホームページ作成の説明をします。

とりあえずのホームページ
画像を入れてみる
ハイパーリンクを張る

 


とりあえずのホームページ

    ホームページは HTML(HyperText Markup Language) という書式にしたがって書かれたテキストファイルです。ですから、専用の作成ソフトを用意しなくても Windows のメモ帳などのテキストエディタで作成することができます。

    HTML文書は 「<」「 >」 で括られた命令(directive)と、その命令の終わりを「/」で示す2つの対で書きます。
    <命令名> で始まり、</命令名> で終わりを意味します。

    これだけ知っていれば「とりあえずのホームページ」を作ることができます。

    <HTML> 〜 </HTML> 文書の最初と最後に必要
    <HEAD> 〜 </HEAD> 文書の情報を入れます。ここには、次の<TITLE>が入ります
    <TITLE> 〜 </TITLE> ホームページのタイトルが入ります
    <BODY> 〜 </BODY> 本文が入ります
    <Hn> 〜 </Hn> 見出しが入ります
    <P> 〜 </P> 文章の段落を括ります。(</P>は省略可)
    <br> 改行

    それでは メモ帳などのテキストエディタで実際にホームページを作ります。



    <HTML>
    <HEAD>
    <TITLE>Momo's_homepage</TITLE>
    </HEAD>
    <BODY>
    <H3>ここは「ももちゃん」のホームページです</H3>
    <P>私の名前は「もも」です。「ももちゃん」と呼んでね</P>
    </BODY>
    </HTML>

    出来上がったならば名前をつけて保存します。この時、拡張子は「.htm(.html)」とします。
    ここでは 「 momo01.htm 」 で保存しています。

    それではブラウザで表示を確認してみましょう。

    これで「とりあえずのホームページ」はできあがりです。


TOP へホームページの立ち上げかたへ戻る
画像を入れてみる

    では、次に写真やイラスト等の画像をホームページに入れます。
    上記で作成したものに momo.gif という画像を入れてみます。

    momo.gif

    画像の挿入命令は <IMG SRC="画像ファイル名"> となります。

    <IMG SRC="momo.gif"> を 本文中の見出しと挨拶文の間に挿入します。
    この時、指定するファイル名は小文字で表記し、”(ダブルコーテーション)でくくります。

    さらに、ここでは本文を中央にレイアウトする命令 <CENTER> 〜 </CENTER> でくくります。

    <HTML>
    <HEAD>
    <TITLE>Momo's_homepage</TITLE>
    </HEAD>
    <BODY>
    <CENTER>
    <H3>ここは「ももちゃん」のホームページです</H3>
    <IMG SRC="momo.gif">
    <P>私の名前は「もも」です。「ももちゃん」と呼んでね</P>
    </CENTER>
    </BODY>
    </HTML>


    出来上がりはここをクリック


TOP へホームページの立ち上げかたへ戻る
ハイパーリンクを張る

    次に作成したページから、他のページやファイルにハイパーリンクを張ってみます。
    リンクを張るには <A HREF="リンク先名 or ファイル名"> 〜 </A>命令を使います。

    ここでは、InfoSnow のトップページと、個人ホームページのインデックスにリンクを張ってみましょう。
    まず各ページの URL を調べておくことが必要です。

    InfoSnow トップページ :http://www.infosnow.ne.jp
    会員のホームページ :http://www.infosnow.ne.jp/personal/index.html

    <HTML>
    <HEAD>
    <TITLE>Momo's_homepage</TITLE>
    </HEAD>
    <BODY>
    <CENTER>
    <H3>ここは「ももちゃん」のホームページです</H3>
    <IMG SRC="momo.gif">
    <P>私の名前は「もも」です。「ももちゃん」と呼んでね</P>
    <P>ももちゃんのオススメリンクです</P>
    <A HREF="http://www.infosnow.ne.jp">インターネットサービスプロバイダ InfoSnow</A><P>
    <A HREF="http://www.infosnow.ne.jp/personal/index.html">InfoSnow 個人のホームページインデックス</A>
    </CENTER>
    </BODY>
    </HTML>

    出来上がりはここをクリック


TOP へホームページの立ち上げかたへ戻る

かいつまんでホームページの作成について説明しましたが、
さらに詳しい作成方法は、検索エンジンで「ホームページの作り方」などのキーで検索するといろいろあるので、参考にしてみてください。

【ホームページの立ち上げかたへ戻る】