トップ > インターネット > ホームページ作成・素材 > HTMLの基礎−タグを覚えてウェブページを作ろう!−

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

RSS


メルマガの登録・解除

登録した方には、メルマ!からオフィシャルメルマガ(無料)をお届けします。



HTMLの基礎 Vol.54 「cafe.html」を作成(HTMLを記述)

発行日:7/8

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

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

      2005/07/08(Fri) Vol.54       執筆:ykr
              http://ykr.main.jp/html/index.html

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

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

    1.「cafe.html」を作成   HTML記述

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


  眼精疲労に悩まされています。思いつく事で目の為にできる事は一通りは
  やっていると思うのですが、一番目に悪い寝不足とディスプレイを長時間
  見続けるという事を毎日やっているので、目の病気などが心配です。

  さて、今回は2ページ目「cafe.html」を作成します。また前回同様先に
  ページを作成し、次回に細かな説明をします。

  では最後までどうぞ宜しくお願い致します。


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

       ここで言う「スタイルシート」とはCSS(カスケーディン
       グスタイルシート)の事を指しています。


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


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

  まず店内の様子を紹介するページを作成する為の素材を準備します。

  というわけで、今回はお店の紹介で使用する画像を用意しました。
  (画像のダウンロードは自由です。以下のページを開き、必要な画像を自
  分のPCに保存して下さい。但し直リンクは禁止です。)

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

  サンプルとの多少の色調等・他、違いがありますが、ご了承下さい。
  トップページで使用した素材なども置きっ放しにしています。
  このサイトの全てのファイル名は以下の通りとなります。
  今日作成するのは上から2番目の「cafe.html」です。

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

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


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


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

<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=SHIFT_JIS">
<title>店内の様子 −Cafe & Sweets−</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
body {background-color:#000000;
margin:0px;padding:0px;
color:#ffffff}
-->
</style>
<head>

<body>
<table border="0">
<tr>
<td width="400">
<img align="left" src="cafe01.jpg" border="0" width="250" height="160" alt="店の入り口">
★お店の入り口です。<br>
人通りの多い明るい場所にあります。子供から大人まで
沢山の人が毎日お店に出入りしています。
<br clear="all">
<hr>

<img align="right" src="cafe03.jpg" border="0" width="130" height="120" alt="店内">
★いつもコーヒーの香ばしい香りが漂っています。
リラックスしながらデザートを味わう事ができます。
<br clear="all">
<hr>

<img align="left" src="cafe02.jpg" border="0" width="200" height="200" alt="店内">
★開放感のある落ち着いた店内は、人目を気にする事なく
コーヒー片手に読書を楽しむ方もおられます。
</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」です。
  ダウンロードした画像とファイルは同じフォルダ内に置いてください。

  記述したファイルは以下から見ることが出来ます。
  前回のトップページも置いてあるので、今の所2ページの間を行き来する
  事ができます。

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

  少しややこしくなりそうだったので、サンプルとは少し配置や背景の色な
  どを変更してみました。できるだけスタイルシートを使用しないように打っ
  ているので、あまり配置の細部までは調整していません。

  次回はこのファイルのソースの説明を行いたいと思います。


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


来週は・・・

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

    1.「cafe.html」を作成   HTMLの解説

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

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


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


  今回も最後まで付き合ってくださった方、お疲れ様でした。
  マガジンのはじめに眼精疲労に悩まされている・・と書きましたが、本
  当に普段から気をつけていないと、体の抵抗力が落ちたときなどにもの
  もらいや結膜炎になります。(多分体質もあるのかもしれません。)

  ので、忙しいときは特に、食事には気を使っています。といっても緑黄
  色野菜をしっかり摂るとか、そういった類のものですが・・ビタミンA
  をしっかり摂ると、皮膚や粘膜の抵抗力が強くなります。後はブルーベ
  リーのサプリメントを欠かさない・遠くを見るようにする・まばたきを
  意識してする・・などです。するのとしないのとでは全然違います。

  さて次回は今回作成したページのソースの説明を行います。
  次回のメルマガもどうぞ宜しくお願いいたします。


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

■■■「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    掲載記事の無断転載を禁じます
*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

最新の記事

ブックマークに登録する

TwitterでつぶやくLismeトピックスに追加するdel.icio.usに追加Buzzurlにブックマークニフティクリップに追加Yahoo!ブックマークに登録記事をEvernoteへクリップ
My Yahoo!に追加Add to Google

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

登録した方には、メルマ!からオフィシャルメルマガ(無料)をお届けします。


この記事へのコメント

コメントを書く


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

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

  1. コメントはありません。

このメルマガもおすすめ

  1. @(あっと)驚く!エクセル好きルアップ  

    最終発行日:
    2011/05/26
    読者数:
    4069人

    エクセル(Excel)の基礎から裏ワザまで... D-UP発行のマガジンは、1問1答の形式、詳細な解説付きで配信。さらに連動した懸賞サービスもあり、スキルとプレゼントを同時にゲット。映画情報もあるよ

  2. これ知ってます?Wordの小ワザ&便利ワザ

    最終発行日:
    2011/05/26
    読者数:
    4683人

    D-UPが送る、ほほー!っと納得ワード(Word)の小ワザ&便利ワザをクイズ形式で楽しく学んでいきます。知ってて損することはありません。あなたの文章にアクセントをつけてみませんか?懸賞のチャンスもWでお得。

  3. 全部フリーソフト!!

    最終発行日:
    2014/02/26
    読者数:
    4888人

    ネット上にはこんなに便利なソフトがいっぱい。仕事にも、遊びにも、あると絶対にお得で楽しいソフトを1つずつご紹介します。

  4. 高橋浩子の日本一“お気楽”なパソコンマガジン

    最終発行日:
    2017/01/21
    読者数:
    1130人

    「クスッと笑えてタメになる」をモットーとするテクニカルライター高橋浩子が魂を込めてお届けする週刊メルマガ。パソコン講座を中心に、便利ネタやおすすめサイトもご紹介。とにもかくにも、“お気楽”に楽しめる異色のエンターテイメントマガジンである。

  5. C#プログラミングレッスン

    最終発行日:
    2014/09/30
    読者数:
    973人

    C#での .NETプログラミングを易しく丁寧に解説するメールマガジンです。「C#プログラミング・レッスン」で、.NETプログラミングをマスターしましょう。

発行者プロフィール

過去の発行記事