ホームページ作成・素材

HTMLの基礎−タグを覚えてウェブページを作ろう!−

ホームページはHTMLタグの知識とテキストエディタさえあれば作成できます。またタグを理解していればサイトの細かい部分まで手が届きます。でも、わからない・・そんな方にお送りする初心者向けのHTMLタグ講座「HTMLの基礎」。

全て表示する >

HTMLの基礎 Vol.52 実際にウェブぺージを作成 3  HTML記述

2005/06/24

*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

    HTMLの基礎 −タグを覚えてウェブページを作ろう!−

      2005/06/24(Fri) Vol.52       執筆:ykr
              http://ykr.main.jp/html/index.html

*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

    1.実際にウェブぺージを作成 3  HTML記述

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   


  先週続いた熱も、ようやく治まり体調も元通りになってきましたが、ふと
  気づけばもうすぐ7月・・・リ、リニューアルは・・?自分でも呆れてし
  まいますが、時間に余裕のあるときはすこしだけでもやっています(ので
  放ったらかしにしているわけではありません・・)。

  さて、今回も前回の続きで、実際にHTMLを記述していきます。
  では最後までどうぞ宜しくお願い致します。


  ※注意  HTMLのバージョンは4.01です。
       発刊時点で非推奨とされてるものも掲載しています。
       表示確認しているブラウザは、WinIE6、WinNN7、MacIE5.2
       MacNN7です。その他のブラウザでの表示は未確認ですので
       意図したとおりにならないことがあります。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


1.サイトに使用する素材の準備

  まず、サイトテーマである「喫茶店のデザート紹介」で使用する素材を
  準備します。別にはじめに全て用意する必要はないと思うのですが、予め
  準備しておくと、実際にページに表示させながらサイト作成を行う事がで
  きるので、効率が良いでしょう。

  というわけで、今回は主にトップページで使用する画像を用意しました。
  (すべてのページにわたって使用するものもあります。もしかしたらあと
  から追加するかもしれません。画像のダウンロードは自由です。以下のペ
  ージを開き、必要な画像を自分のPCに保存して下さい。但し直リンクは
  禁止です。)

  ▼素材のダウンロード
  http://ykr.main.jp/html/dl/download.html

  サンプルとの多少の色調等・他、違いがありますが、ご了承下さい。
  このサイトの全てのファイル名は以下の通りとなります。

   ・index.html (トップページ)
   ・cafe.html (お店の紹介)
   ・menu.html (デザートメニュー)
   ・info.html (インフォメーション)

  では以下のトップページ「index.html」のサンプルソースをご覧下さい。
  また記述してみると良いかもしれません。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<meta http-equiv="Content-Type" content="text/html;charset=SHIFT_JIS">
<head><title>カリスマパティシェのお店 −Cafe & Sweets−</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
body {background-image:url('back.jpg');
background-repeat:no-repeat;
background-color:#000000;
margin:0px;padding:0px}
-->
</style>
<head>

<body>
<table border="0" summary="トップページ">
<tr>
<td width="400">
</td>
<td width="230">
<div style="text-align:center;margin:10px 10px 30px 20px">
<img src="title.gif">
</div>
<div style="text-align:center;margin:100px 10px 50px 20px">
<a href="index.html">
<img src="top.gif" width="100" height="60" border="0" alt="トップ">
</a><br>
<a href="cafe.html">
<img src="cafe.gif" width="100" height="60" border="0" alt="店内">
</a><br>
<a href="menu.html">
<img src="menu.gif" width="100" height="60" border="0" alt="メニュー">
</a><br>
<a href="index.html">
<img src="info.gif" width="100" height="60" border="0" alt="インフォ">
</a>
</div>
</td>
</tr>
</table>
</body>
</html>


----------------------------------------------------------------------


  さて、記述できたらファイルを保存します。
  前回のファイルに追加したという方は、上書き保存か名前をつけて、新
  しく保存して下さい。拡張子は「.html」です。
  ダウンロードした画像とファイルは同じフォルダ内に置いてください。

  記述したファイルは以下から見ることが出来ます。

  ▼ index.html
  http://ykr.main.jp/html/cafe/index.html


----------------------------------------------------------------------


  サンプルと多少違いはありますが、きちんと表示されたと思います。
  説明ですが、かなり長くなりそうなので又次回この続き(説明)を行いた
  いと思います。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


来週は・・・

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

    1.トップページを作成   HTMLの解説

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

(予告なく変更する事があります)


■ 雑記 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


  ここ数日蒸し暑くてイライラします。湿気が高いと温度まで高く感じま
  すね。暑くなってそろそろ虫対策と思い、ゴキブリ避けスプレーを購入
  しました。天然成分100%なので人には無害だそうで、虫は嫌いだけ
  ど、なんとなく「ベー○○ット」などは体に悪そうなイメージがあるの
  で、かなりこのスプレーに期待をよせています。

  ゴキブリ以外にもハエや蚊などの忌避効果もあるそうで、私にとっては
  画期的です。

  体調は大分回復したのですが、又睡眠不足に陥りつつあります。喉元過
  ぎれば暑さ忘れちゃうんですね・・にしても忘れるのが早すぎる。

  さて、次回は今回記述したソースの説明をおこないます。
  というわけで次回からのメルマガもどうぞ宜しくお願いいたします。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

■■■「HTMLの基礎」姉妹サイトです。よろしくお願いします。■■■■

■■■「全部まるごとスタイルシート」
■   http://ykr414.com/css/
■   スタイルシート辞典です。プロパティごと、または目的ごとに引
■   け、ブラウザの対応状況なども掲載しています。
■   HTMLに加える事で、より細かいレイアウトの指定が可能に。
■   コピーペーストするだけで利用できるテンプレートのページも。

■■■「コマンドプロンプトを使ってみよう!」
■   http://ykr414.com/dos/
■   コマンドプロンプトとは何かから始まり、バッチファイルの作成
■   法や、コマンド別・目的別に引けるコマンド辞典。
■   初心者でもわかるよう細かく説明。

■■■「伸び縮みマークアップ言語 XML」
■   http://ykr414.com/xml/
■   SGMLのサブセットであるXMLは、ネット上で扱うデータを
■   記述するためのデータフォーマットで、柔軟性のある言語構造を
■   持っており、プログラムで自在にデータを情報処理できます。そ
■   のXMLを実際に文書を作成しながら解説。随時追加更新。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


・MAKERS     http://ykr414.net/
         ダイエットグッズ、美味しいもの、かわいいもの
         セレクトショップ。ちょっと珍しいグッズ・便利な
         サービスなどの情報も掲載。
         コラムなどのコンテンツもあります。

・YKR GALLERY   http://ykr414.com/gallery/
         CG、また実際に描いた絵を紹介するギャラリー。
         趣味で運営の為かなり更新が遅め。
         ・・・というか時間がなくて殆ど更新してません(汗)


*――*――*――*――*――*――*――*――*――*――*――*――*――*――*
  Auther       ykr
  Mail         ykr414@yahoo.co.jp
  URL          http://ykr.main.jp/html/index.html
  Copyright    (C)2004 ykr414. All rights reserved.
  Attention    掲載記事の無断転載を禁じます
*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

規約に同意してこのメルマガに登録/解除する

メルマガ情報

創刊日:2004-06-29  
最終発行日:  
発行周期:週間  
Score!: - 点   

コメント一覧コメントを書く

この記事にコメントを書く

上の画像で表示されている文字を半角英数で入力してください。

※コメントの内容はこのページに公開されます。発行者さんだけが閲覧できるものではありません。 コメントの投稿時は投稿者規約への同意が必要です。

  • コメントはありません。