dreamgate事業一覧
IT用語辞典

事業案内 HP制作・SEO 郡上ホームページ教室

トップページの作成例
「文字の表示と改行」「文字の配置」「画像の表示」「リンクの作成」を使って実際にトップページを作成してみましょう。わずかなタグだけでもホームページの作成は可能です。この程度のホームページであれば、初めての方も気軽に作成できると思いますよ。

→ タイトルの作成
まずは、タイトルの文字を作成します。ここでは、ブラウザ枠の上部に表示されるHP名と実際に画面に表示されるタイトル文字を作成できればOKです。HP名は「TITLE」〜「/TITLE」タグの間にHP名を入力するだけ。タイトル文字の表示は「FONT」タグを使用し、文字サイズを最大の「7」に指定し、「DIV」タグでタイトル文字の行揃えが中央揃えとなるように設定しておきす。なお、画面上部の余白は「BODY」タグの直後に「BR」タグ(改行)を記述すると調整できます。
<HTML>
<HEAD>
  <TITLE>憧れの南の島</TITLE>
</HEAD>

<BODY>
<BR>
<DIV align=center>
  <FONT size=7>憧れの南の島</FONT>
</DIV>
</BODY>

</HTML>

→ 背景画と画像の表示
これでタイトル文字が作成できました。続いては、メイン画像をタイトル文字の下に配置しましょう。この画像は、タイトル文字を改行(「BRタグ」)したあと、「IMG」タグを使って配置します。また、画像の下には文字サイズ「3」で簡単なホームページの紹介文を記述しておきます。このほか、ここでは「BODY」タグにbgcolor属性を追加し、ページ全体の背景色を「#FFCC66」に指定しています。
<HTML>
<HEAD>
  <TITLE>憧れの南の島</TITLE>
</HEAD>

<BODY>
<BR>
<DIV align=center>
  <FONT size=7>憧れの南の島</FONT><BR>
  <IMG src=image.jpg><BR>
  <FONT size=3>このホームページでは、南の島の魅力を紹介します。</FONT><BR>
</DIV>
</BODY>

</HTML>

→ リンクの作成
ホームページは、トップページだけでは成り立ちません。最後に、各コンテンツページへのリンクを作成しておきましょう。これは「A」タグを使ってリンク先のHTMLファイルを指定すればOKです。今回の例では、以下のような3つのリンクを作成してみました。なお、このときリンク先ページのHTMLファイルを用意しておくのを忘れないでください。リンク先のページはトップページを応用して作成しても構いませんし、とりあえずは「工事中」としておく方法もあります。完成したトップページは「index.htm」という名前を付けアップロードします(同時に、画像ファイルやリンク先のコンテンツページのHTMLファイルもアップロードしておきます)。これでトップページは完成です。
<HTML>
<HEAD>
  <TITLE>憧れの南の島</TITLE>
</HEAD>

<BODY>
<BR>
<DIV align=center>
  <FONT size=7>憧れの南の島</FONT><BR>
  <IMG src=image.jpg><BR>
  <FONT size=3>このホームページでは、南の島の魅力を紹介します。</FONT><BR>
  <BR>
  <BR>
  <FONT size=3>
    <A href=photo.htm>南の島の写真</A><BR>
    <A href=osusume.htm>オススメの南の島は?</A><BR>
    <A href=sports.htm>南の島で楽しむマリンスポーツ</A><BR>
  </FONT>
</DIV>
</BODY>

</HTML>

(※1) 詳しくは、「郡上ホームページ教室」にて・・・


スポンサーサイト
現代津軽三味線・徳山流 徳山弦泉 公式ホームページ
演奏活動・三味線教室・オリジナル曲の紹介。CD試聴できます。
http://www.t-gensen.com/
郡上プラザどっと混む|郡上の情報サイト
郡上の情報サイト「郡上プラザどっと混む」は郡上で活躍する方たちを応援するサイト。
http://gujoplaza.com/

Gujo sunset
あの町 この町 日が暮れて
郡上おどり日程表
自動で被リンクが増殖する新しいリンクシステム。登録無料!アクセスアップ・SEO対策にご利用下さい。
郡上のイベント

C2006−2011 dreamgate
Google