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

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

RSS


メルマガの登録・解除

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



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

発行日:8/5

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

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

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

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

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

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

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


  はっきりいってかなり焦っています。というのも、今日が金曜日だとい
  う事をすっかり忘れており、全くメルマガを書いていない状態です。
  私は毎朝定時に家を出なければいけないことは無いのですが、遅く起き
  る分前の晩寝るのがとても遅いのです。特に昨日は睡眠時間がやたら短
  かった為、朦朧とした頭でなおかつ、メルマガを大急ぎで打っています。

  というわけで、今日はお休みしようかと思いましたが、やっぱりいつも
  のように作成している次第です。

  さて、今回は最後のページ「info.html」を作成します。
  最後までどうぞ宜しくお付き合いお願い致します。


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

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


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


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

  ではお店のインフォメーションを掲載するページを作成する為の素材を
  準備します。以下のアドレスからダウンロードする事が可能です。
  (画像のダウンロードは自由です。以下のページを開き、必要な画像を自
  分のPCに保存して下さい。但し直リンクは禁止です。)


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


  今日作成するのは上から4番目の「info.html」です。

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

  では以下の「info.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}
-->
</style>
<head>

<body>
<table border="0">
<tr>
<td width="400" align="center">

<table border="0" cellspacing="7" cellpadding="10" width="350">
<tr>
<td colspan="2" bgcolor="#000000" align="center">
<img src="infomation.gif" border="0" width="170" height="30" alt="infomation">
</td>
</tr>

<tr>
<th bgcolor="#9999cc" width="80">
所在地
</th>
<td bgcolor="#ffffff">
大阪府○○市○○町1−1−1
</td>
</tr>

<tr>
<th bgcolor="#9999cc">
TEL
</th>
<td bgcolor="#ffffff">
00-000-0000
</td>
</tr>

<tr>
<th bgcolor="#9999cc">
FAX
</th>
<td bgcolor="#ffffff">
00-000-0000
</td>
</tr>

<tr>
<td colspan="2" bgcolor="#ffffff">
パーティーなどのご予約も承ります。
予約日の1週間前までに電話にてお問い合わせ下さい。
なお、予約が一杯の場合は先着順とさせていただきますので、
ご了承くださいませ。
</td>
</tr>

<tr>
<td colspan="2" bgcolor="#000000">
<img src="cafeinfo.jpg" border="0" width="330" height="248" alt="cafe and sweets">
<br>
<font color="#ffffff">※ 季節によりデザートメニューは変わります。
</td>
</tr>
</table>
</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="info.html">
<img src="info.gif" width="100" height="60" border="0" alt="インフォ">
</a>
</div>
</td>
</tr>
</table>
</body>
</html>


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


  さて、記述できたらファイルを保存します。
  拡張子は「.html」です。
  ダウンロードした画像とファイルは同じフォルダ内に置いてください。
  なお、表示の都合で、タグの途中で改行されてしまっている箇所がある
  かもしれませんが、実際は改行せずに記述するよう注意してください。

  記述したファイルは以下から見ることが出来ます。
  前回までのページも置いてあるので、これで全てのページが完成した事
  になります。

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

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


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


来週は・・・

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

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

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

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


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


  今回も最後まで付き合ってくださった方、お疲れ様でした。

  やはり朝(今日は昼前ですが)は間に合わず、出先でメルマガを仕上げ
  ました。今まで多分一度も送らなかった事は無かった(はず)ので、
  そんなに忙しいなら休めばいいのにと思いつつ、性格的にどうしても無理
  なのです。作成するもの自体はすごく短時間でできてしまうような単純
  (しょぼいともいう)なものなので、そう時間はかからないのですが・・

  話は変わりますが、私は今月の目標をたててみました。それは「無駄な努
  力をしない」というものです。必死になって何かをしていると、周りが見
  えなくなる事がよくあります。そうなると今自分のしている事が、先で何
  か形になるものなのか、そうでないのかがよくわからなくなるのです。
  それも長い目で見ると無駄にはならないとは思いますが、やはり無駄な時
  間は使いたくないものです。

  というわけで、たまには自分を客観的に見て、効率のよい努力をするよう
  心がけるというのが、今月(できればこの先も)の目標です。

  さて次回は「info.html」の解説をします。
  次回のメルマガもどうぞ宜しくお願いいたします。


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

■■■「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
    読者数:
    4068人

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

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

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

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

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

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

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

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

    最終発行日:
    2017/05/25
    読者数:
    1130人

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

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

    最終発行日:
    2017/03/04
    読者数:
    973人

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

発行者プロフィール

過去の発行記事