YAMAMOTO FAMILY
山本家の玄関へ

なごのパソコン教室へ ■
◇ 山本家でもできるホームページの作り方

ホームページのことはWEBページと言います。(山本家ではWindows XPを使っています)

「スタート」「すべてのプログラム」「アクセサリ」「メモ帳」を起動します。 「メモ帳」に次に表示されているサンプルをコピーします。 ファイル名は仮に「tes1.htm」(ファイル名は半角英数字、「.htm」を除き8文字以内、 大文字小文字はどちらでもよいがきちんと区別する)にし、 ファイルの形式を「すべてのファイル」にして保存すればWEBページ(ファイル)のできあがり。 プラウザ(Internet ExplorerやNetscapeなど)を起動し、「ファイル」「開く」で見られます。

この状態では自分のパソコンの中にWEBページがあるだけなので他のパソコンから見ることはできません。 WEBページをインターネット上に公開するためには、特別なサーバ(WWWサーバとかいう)に置いてやる必要があります。 転送することができるサーバーの「ホームページ作成の手続き」などを見てWEBページを転送しましょう。 転送するためには「FFFTP」(フリーソフト)などのソフトを使いますが、それはまた別の機会に。 WEBページを作成しないと転送することもできないので、まずは作り方を覚えましょう。

WEBページはhtmlという言語で作ります。ホームページビルダーのようにWEBページを作成してくれるソフトもあります。 それらのソフトは打ち込んだデータをhtmlに置き換えてくれているのです。htmlの基本的なことを覚えておくと修正も楽にできますし、 いくつか覚えてしまえばある程度のことはできますので、htmlでWEBページづくりに挑戦(それほどのことではない)しましょう。

☆目次☆

  1. htmlの基本的な構成
  2. 文字のみのページサンプル
  3. 簡単な表のページサンプル
  4. 画像のページサンプル
  5. レイアウトした表のページサンプル
  6. リンクを張ったページサンプル

1.htmlの基本的な構成

htmlの文書は<html>で始まり</html>で終わります。 <html>や<head>をタグ(開始タグ)と言います。 (</html>や</head>は終了タグ)
<html>〜</html>は、 <head>〜</head>と<body>〜</body>とに分かれています。

htmlの基本的な構成
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  <title>タイトル☆左上に出てるよ☆</title>
  </head>
  <body>
    <p>ここがページの本文です。プラウザの「戻る」をクリックして戻ってください。</p>
  </body>
</html>

タグの説明

<head>〜</head>
ページの情報を表しています。
<meta>
とりあえずこのまま使いましょう。
<title></title>
この間に入れた文字が画面左上のタイトルバーに表示されます。
<body>〜</body>
ページの本文になります。2.〜6.のページサンプルをここに入れると1つのhtml文書ができます。
上のページサンプルを見てみましょう。 プラウザの「戻る」をクリックして戻ってください。

このページのトップへ

2.文字のみのページサンプル

文字(テキスト)のみのページのサンプルです。基本中の基本です。これだけでもWEBページは十分作れますのでしっかり覚えましょう。

文字のみのページサンプル
<h1>見出し(大)です。1行空きます。</h1>
<h2>見出し(中)</h2>
<h3>見出し(小)</h3>
<p> ここから<b>本文</b>の<i>段落</i>が始まります。
<span style="font-size:120%;color:#008000">改行したいとき</span>は
次のタグを入れます。&lt;br&gt;<br>
&lt;/p&gt;で段落が終わり次に1行空きます。</p>

<div style="text-align:center">
  <h4>見出し(本文と同じ大きさ)</h4>
  <h5>見出し</h5>
</div>
<h6 style="text-align:center">見出し</h6>
<p style="text-align:center"> タグで使われている
矢印のようなかっこなど本文では使えない文字があります。<br>
 かっこ左「&lt;」やかっこ右「&gt;」やダブルクォーテーション「&quot;」や
アンド「&amp;」やスペース「&nbsp;」のように使います。</p>

タグの説明

<h1>〜</h1>
見出しになります。数字が小さいほど文字は大きくなります。
見出しの後は1行スペースが空きます。
<p>〜</p>
段落になります。段落の後は1行スペースが空きます。
<br>
改行になります。サンプル13行目「…タグで使われている/矢印のような…」のように見た目を改行しても、 プラウザで表示すると改行されません。
<b>〜</b>
太字になります。
<i>〜</i>
斜体になります。
<span>〜</span>
タグ自体に意味はなく続いている文字などの固まり(インライン要素)を表します。 スタイルシートを設定したい時などに使います。
<div>〜</div>
タグ自体に意味はなくデータの固まり(ブロック要素)を表します。スタイルシートを設定したい時などに使います。
スタイルシート(style属性)「style="〜"」
大きさは「font-size:80%」のように%表示で設定します。px単位等で設定することもできます。
色は「color:#008000」のように設定します。色についてはとりあえず基本16色を覚えましょう。
センタリングは「text-align:center」のように設定します。
<div style="text-align:center">〜</div>でまとめて囲ってやると全体がセンタリングします。
基本16色
black (#000000)
gray (#808080)
silver (#c0c0c0)
white (#ffffff)
red (#ff0000)
yellow (#ffff00)
lime (#00ff00)
aqua (#00ffff)
blue (#0000ff)
fuchsia (#ff00ff)
maroon (#800000)
olive (#808000)
green (#008000)
teal (#008080)
navy (#000080)
purple (#800080)

文字のみのページサンプルの表示例

見出し(大)です。1行空きます。

見出し(中)

見出し(小)

 ここから本文段落が始まります。 改行したいときは 次のタグを入れます。<br>
</p>で段落が終わり次に1行空きます。

見出し(本文と同じ大きさ)

見出し
見出し

 タグで使われている 矢印のようなかっこなど本文では使えない文字があります。
 かっこ左「<」やかっこ右「>」やダブルクォーテーション「"」 やアンド「&」やスペース「 」のように使います。


このページのトップへ

3.簡単な表のページサンプル

簡単な表(テーブル)のページサンプルです。表は、後で出てきますが、WEBページのレイアウトにも使えますので、 使いこなせればいろいろなことができるようになります。

簡単な表のページサンプル
<table border=3 cellspacing=3 cellpadding=5>
  <caption>3国総当たり戦</caption>
  <tr style="background:#c0c0c0">
    <th>国 名</th><th>あああ</th><th>いいい</th>
    <th>ううう</th><th>勝ち負け</th>
  </tr>
  <tr>
    <th style="background:silver">あああ</th><td>−</td><td>○</td>
    <td>○</td><td style="background:red">2勝</td>
  </tr>
  <tr>
    <th style="background:#c0c0c0">いいい</th><td>×</td><td>−</td>
    <td>○</td><td>1勝1敗</td>
  </tr>
  <tr>
    <th style="background:silver">ううう</th><td>×</td><td>×</td>
    <td>−</td><td>2敗</td>
  </tr>
</table>

タグの説明

<table>〜</table>
1つの表を表します。
borderは枠線の外枠の太さで、省略または「=0」にすると枠線なしになります。
cellspacingは枠線の内枠の太さで、「=0」にすると立体感のない枠になります。省略は「=1」
cellpaddingは枠とデータの間隔で、数字はピクセル数で大きくなるほど間隔が開きます。
<caption>〜</caption>
表題で表の中央につきます。
<tr>〜</tr>
1行(横に並ぶ)になります。
<th>〜</th>
表の見出しになります。
<td>〜</td>
その行の中の1項目になります。
スタイルシート
背景の色は「background:red」のように設定します。
簡単な表のページサンプルの表示例

3国総当たり戦
国 名あああいいい ううう勝ち負け
あああ 2勝
いいい× 1勝1敗
ううう×× 2敗

このページのトップへ

4.画像のページサンプル

画像のページサンプルです。画像のファイルを別に準備する必要があります。 このサンプルでは、1つ上のフォルダにある「img_home」というフォルダに入っている 「nago1.jpg」という画像ファイルを使っています。

画像のページサンプル
<p><b>僕はなごです</b></p>
<div>
  <img src="../img_home/nago1.jpg" width=200 height=150 alt="なごのおすまし写真" title="なごです">おはよう
  <img src="../img_home/nago1.jpg" width=200 height=150 alt="なごのおすまし写真" title="ございます">いい天気
  <img src="../img_home/nago1.jpg" width=200 height=150 alt="なごのおすまし写真" title="ですね">
</div>
<p><b>再びなごです</b></p>
<div>
  <img src="../img_home/nago1.jpg" width=200 height=150 alt="なごのおすまし写真" title="こんにちわ"
  style="float:left">
  こんにちわ<br>また、お会いしましたね<br style="clear:both">
</div>
<p><b>最後もなごです。</b></p>
<div>
  <img src="../img_home/nago1.jpg" width=200 height=150 alt="なごのおすまし写真" title="こんばんわ"
  style="float:right">
  こんばんわ<br>よくお会いしますね<br style="clear:both">それではさようなら なごでした。
</div>

タグの説明

<img src="ファイル名">
"ファイル名"の画像を表示します。
widthは表示する画像の横の長さです。省略すると画像の本来のサイズになります。
heightは表示する画像の縦の長さです。省略すると画像の本来のサイズになります。
altは代替テキストといい、画像を表示できない時に文字として表示されるほか、 スクリーンリーダーを使うと画像の替わりに読み上げられます。
titleはマウスを上に置くと表れるチップの文字で必要に応じて入れます。
スタイルシート
画像を左、文字をその右に回り込ませたい時は、「float:left」のように設定します。
回り込みを取りやめる時は、<br>タグに「clear:both」のように設定します。

□ファイルの保存場所によるファイル名の記述方法□

ファイルの保存場所のモデル
folder
fold1
file
file1
folda
file2
file3
fold2
file4
foldb
file5

使っているファイルをファイル名「file」とします。参照したいファイルが、
同じフォルダ「fold1」内のファイル「file1」の時 "file1"
同じフォルダ内にあるフォルダ「folda」内のファイル「file2」の時 "folda/file2"
1つ上のフォルダ「folder」内のファイル「file3」の時 "../file3"
別のフォルダ「fold2」内のファイル「file4」の時 "../fold2/file4"
別のフォルダ内にあるフォルダ内「foldb」のファイル「file5」の時 "../fold2/foldb/file5"
ファイル名の後には該当する拡張子(.gif .jpg .htmなど)をつけます。

画像のページサンプルの表示例

僕はなごです

なごのおすまし写真 おはよう なごのおすまし写真 いい天気 なごのおすまし写真

再びなごです

なごのおすまし写真 こんにちわ
また、お会いしましたね

最後もなごです。

なごのおすまし写真 こんばんわ
よくお会いしますね
それではさようなら なごでした。

このページのトップへ

5.レイアウトした表のページサンプル

<table>〜</table>を使ってページのレイアウトをすることもできます。 (<frame>というタグもありますが…まだよくわかりません。)
表の1つの枠内(セル)に文字を入れることも、表(<table>〜</table>)をいれることも、 画像(<img src="〜">)を入れることもできます。
言い換えると、ページを1つ〜複数のテーブルで分割して文字や画像を配置することができます。

レイアウトした表のページサンプル
  <table border=1 cellspacing=0 cellpadding=10 width="80%" style="font-size:200%">
    <tr valign=top style="height:150px">
      <td style="width:350px">左上</td>
      <td align=center style="width:25%">
        <table border=3 cellspacing=3><tr><td style="font-size:200%">表</td></tr></table>
      </td>
      <td align=right><img src="../img_home/nago1.jpg" width=120 height=90 alt="なごのおすまし写真"></td>
    </tr>
    <tr style="height:120px">
      <td colspan=2>左中</td>
      <td rowspan=2 align=right valign=bottom>右下</td>
    </tr>
    <tr valign=bottom style="height:90px">
      <td style="background:aqua">左下</td>
      <td align=center style="background:url(../img_home/nago1.jpg)">中下</td>
    </tr>
  </table>

タグの説明

<table>タグで使う属性
widthは表の横の長さです。%表示またはpx単位で設定します。heightは使いません。
<tr><th><td>タグで使う属性
alignはセル内での横の表示位置です。centerは中央、rightは右、省略すると左に表示されます。
valignはセル内での縦の表示位置です。topは上、bottomは下、省略すると中央に表示されます。
<th><td>タグで使う属性
colspanは横に連結するセル数です。
rowspanは縦に連結するセル数です。
スタイルシート
セルの幅や高さは「width:300px」「height:200px」のように設定します。
ただし、<tr>タグにwidthは使いません。
表やセルの背景に色や画像を使いたい時は「background:aqua」「background:url(画像ファイル名)」のように設定します。
 
レイアウトした表のページサンプルの表示例

左上
なごのおすまし写真
左中 右下
左下 中下

このページのトップへ

6.リンクを張ったページサンプル

↓ htmlはこのようになっています。
<a name="p6">6.リンクを張ったページサンプル</a>

最後のサンプルです。文字や画像を用いて他のページにリンクします。

リンクを張ったページサンプル
  <div>文字を使ってリンクします。 <a href="htm1.htm">最初のサンプルページへ</a></div><br>
  <div>画像を使ってリンクします。 <a href="htm1.htm"><img src="../img_home/nago1.jpg" width=80 height=60
    alt="nagoのおすまし写真" title="最初のサンプルページへ"></a></div><br>
  <div>同じページの特定の場所にリンクします。 <a href="#p6">このページサンプルのTOPへ</a></div><br>
  <div>文字を使ってリンクします。下線なしです。 
    <a href="htm1.htm" style="text-decoration:none">最初のサンプルページへ</a></div><br>
  <div>画像を使ってリンクします。枠線なしです。 
    <a href="htm1.htm"><img src="../img_home/nago1.jpg"width=80 height=60
    alt="nagoのおすまし写真" title="最初のサンプルページへ" style="border:none"></a></div><br>
 <div>Yahooへリンクします。 <a href="http://www.yahoo.co.jp/" target="_blank">YahooへGO!</a></div>

タグの説明

<a href="ファイル名">
"ファイル名"のページにリンクします。
target="_blank"は新しいウインドウを開いてリンクします。
<a href="#ネーム名">
同じページの<a name="ネーム名">を設定した箇所にジャンプします。
スタイルシート
リンクを表す下線(文字の場合)をつけたくない時は<a href="〜">に「text-decoration:none」のように設定します。
リンクを表す枠線(画像の場合)をつけたくない時は<img src="〜">に「border:none」のように設定します。
自分のサイト内のページへリンクする時のファイル名の記述方法は、「4.画像のページサンプル」の説明を参考にしてください。
他のサイトへリンクする時は、ファイル名にホームページアドレスを設定します。 (リンクフリーと記載されていないサイトへリンクする時はサイト管理者に確認することがマナーとされています。)

リンクを張ったページサンプルの表示例

文字を使ってリンクします。 最初のサンプルページへ

画像を使ってリンクします。 nagoのおすまし写真

同じページの特定の場所にリンクします。 このページサンプルのTOPへ

文字を使ってリンクします。下線なしです。  最初のサンプルページへ

画像を使ってリンクします。枠線なしです。  nagoのおすまし写真

 
Yahooへリンクします。 YahooへGO!

☆山本家でもできるホームページの作り方☆
このページのトップへ
Copyright (C) 2004 Nago
初版 : 2004年8月3日
YAMAMOTO FAMILY