ホームページ作成のための基礎知識

ホームページ作成のための基本的な知識を紹介します。

HOMEへ FrontPage ExpressによるHP作成講座
ここでは、流れるように進めていくわけですがtopicとしても見れるようになっています。

TOPIC [基本の全体像][水平線を引く][画像を入れる][リンクする]
[箇条書き][フォントを調整(太字、斜体、サイズ)][背景]←これらは次のページへ


  1. HPのレイアウトを構想し、テーマを決める
  2. サーバーから領域をもらう
  3. 画像などの必要な素材を集める
  4. 実際にHTMLを書いてみる。またはHP作成ソフトを使って文章を書く
  5. ブラウザで動作確認して、修正・調整を行う
  6. 出来あがったら、FTPソフトでサーバーにアップロードする
    以上の操作でHPが出来あがります。ここで注意点

 ・最初のページはindex.html(htm)にする。
 ・画像も一緒にアップロードすること
 ・HP作成ソフトによっては、満足なHPを作成できないのでHTMLを勉強しよう
 

  まず、良く聞く言葉でタグとはなにかって聞きます。タグとはHTMLで文章や画像などを埋め   込むために使う記号のことです。(cf)<H1></H1>や<body></body>
   例を見てわかる様に<○>と</○>はセットになっていて前者を開始タグ後者を終了タグと
   呼びます。

  さて、実際にやってみましょう。HTMLはwindowsのメモ帳で作成できます。やってみよう

まず最初にやること!やってもやらなくてもいいんですが最初の行に以下のように記述
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

さて、次に<HTML>〜</HTML>を記述!〜←の部分に全てのHTMLが入ることになります。

次は<HEAD>〜</HEAD>ですが〜の部分にページには表示しないが、重要な情報を入れたりします。例えば、作者の情報など

次は<BODY>〜</BODY>です。〜の部分にHTML文章の本体が入ります。

・他のタグについて    <TITLE>〜</TITLE> この間にHPのタイトルが入ります。上のバーの
               <H1>〜</H1> ページのタイトルをいれます。今回1と書いた部分は文                         字サイズを指し1〜6まであります。1が一番大きい!
                <HR> これには終了タグはありません。水平線のことです。
                <P>〜</P> 通常の文章を入れるタグ

ここで、水平線の引き方を・・・

例えば<HR size="5" width="50%" align="center">など
ここで属性を紹介します。属性とはあるものに対して追加の情報を入れて変化を与えるもののことです。例えばさっきの水平線の例でいうとsizeはフォントやラインのたての高さをピクセルで表したものです。widthは横幅を指しブラウザの横幅に対する割合かピクセルで表します。例では割合であらわしたため%がついてます。alignはフォント・ラインの位置を示します。center、left、rightがあります。

では、次に画像に関するHTMLです

画像の形式はjpeg、gif、xbm、png でなければいけません。
ここでは、HPに title.gif を仮定し挿入する手順を紹介します。画像挿入に使用するタグは
<img>を使用します。

サンプルです<img src="title.gif" alt="タイトルです" width="272" height="485">

といった感じになります。ここで使用している属性はsrc、alt、width・heightですね。

srcは画像ファイル名を指定という意味です。よく画像が表示されないという質問がありますがたいていファイル名の指定が間違っているときです。

altは入れても入れなくてもいいですが、ブラウザで立ち上げたときカーソルを合わせるとここに書いた文がでます。

width、heightは画像の縦横のサイズの指定です。ピクセルか%で表します。サンプルはピクセルで表してます。サイズを変更しない場合でもなるべく記述しましょう。

以上が画像に関するHTMLの基本になります。

次は数ページのHPの場合ハイパーリンクをしなければなりません。以下、その方法です

例えばindex.htmlから自己紹介のページ(syoukai.htmlとします)にリンクする場合は

サンプルです<A href="syoukai.html">自己紹介</A> となります
この場合、indexのページに 自己紹介 と表示されます。

ここでワンポイント!!

よくハイパーリンクしている画像にマウスを合わせると文章が表示されることがありますよね。それは、画像ファイルの後に属性としてaltを入れてるからなんです。

サンプル<img src="syoukai.gif" alt="僕のすべて!!">

こうすると画像にマウスを合わせたとき「僕のすべて!!」という文章が出てくるようになります。

さて、おさらい!!!

1行目 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2行目 <HTML>

3行目 <HEAD>

4行目 <TITLE>サンプルページ</TITLE>

5行目 </HEAD>

6行目 <BODY>

7行目 <H1 align="center" alt="title">ホームページのページタイトル</H1>

8行目 <P align="center">welcome to my homepage!!</P>

9行目 <HR size="5" width="50%" align="center">

10行目<img src="syoukai.gif" alt="僕のすべて">

11行目</BODY>

12行目</HTML>

以上が今回勉強した範囲です。

                       TOPへ  次へ