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

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

RSS


メルマガの登録・解除

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



HTMLの基礎 Vol.50 実際にウェブぺージを作成する 1

発行日:6/10

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

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

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

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

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

    1.実際にウェブぺージを作成する

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


  暑くてなかなか熟睡できない日が続いています。というか長くディスプレ
  イを見続けると脳が覚醒するのか、浅い眠りになってしまうのです。
  クーラーのタイマーが切れても、しばらくすると暑くて目が覚めます。

  さて、今回のメルマガから少しずつウェブページを作成していき、実際に
  一つの簡単なウェブサイトを作ってみることにしましょう。

  それでは今回も最後までお付き合い宜しくお願いいたします。


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


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


1.実際にウェブぺージを作成する為に用意するもの

  でははじめに、実際にウェブページを作成するにあたり、いまさらという
  感じもしますが、必要なものをそろえます。ここでは作成ソフトは一切使
  わずに手打ちで作っていきます。

  ▼テキストエディタ(Winならばメモ帳のようなもの)
  ▼画像等を使用するなら画像の編集ソフトもあったほうが良い

  画像等は素材屋さんからお借りしても、自分で作成してもどちらでも良い
  でしょう。テキストエディタですが、もともとOSに標準で付いている、
  メモ帳などを使用しても良いのですが、ソースが複雑になってくるとそれ
  ではかなり使い勝手が悪くなってきます。

  またプログラム等を打ったりする際、メモ帳などでは文字コード等を扱う
  機能が不足して使えない為、そういった物に使用する多機能なテキストエ
  ディタを使用することをお勧めします。今現在有料のものから無料のもの
  まで沢山出ているので、少し紹介いたします。


   ■秀丸エディタ(シェアウェア)
   ・http://hide.maruo.co.jp/

   ■TTTEditor
   ・http://homepage1.nifty.com/taka36/

   ■TeraPad 
   ・http://www5f.biglobe.ne.jp/~t-susumu/


  フリーのものからシェアウェアのものまで様々なものが出ています。が、
  別にフリーのものでも充分高機能なので特別な用途がない限り、わざわざ
  お金を払ってまで購入する必要はないと思います。

  もちろんHTMLはメモ帳でも充分打てます。

  画像の編集や作成などに使用するソフトは「photoshop」や「illustrator」
  、Flashなど様々なものがありますが、特になくても問題はないでしょう。
  素材屋さんで立派な素材を沢山配布しているところはありますし、画像なし
  のページでも充分立派に作成できます。

  ここではすごく簡単な画像を作成してサイトに使用していく事にします。


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


2.テーマを決める

  趣味でサイトを作成する人もいれば、仕事等で仕方なくウェブサイトを用
  意しなくてはならない方など、様々な理由があると思いますが、まずサイ
  トを作成するに当たり、決めなくてはならないことはサイトの「テーマ」
  となるものです。

  まず根本となるテーマを決め、そこから枝を広げるようにコンテンツを広
  げて行きます。例えば・・


   ▼ダイエットをテーマとしたウェブサイト

    タイトル「コツコツ続けるダイエット」

     ▽ダイエットするに至った理由
     ▽現在体重と目標体重
     ▽作者のプロフィール等
     ▽毎日の献立記録と体重・反省点

       ・○月×日 晩
          豚肉とキャベツの炒め物・ごはん・味噌汁・おひたし
          ××キログラム  いつもより一杯歩いた

       ・△月×日 晩
          ロールキャベツ・ミネストローネ・パスタ
          ×○キログラム  饅頭を食べてしまった・・・


  という感じです。これならば、頻繁に更新しなくてはならない為にどんど
  んサイトを広げることができますし、励みにもなりそうです。この形式な
  らばブログを使用すると更新が非常に楽になるのですが、敢えてここでは
  普通にサイトを作る事を前提とします。(上のテーマは例です!)

  というわけで、次回から作成していくサイトのテーマを何にするのか迷い
  ましたが、喫茶店のオーナーになったつもりでデザート等を紹介するウェ
  ブサイトを作成してみることにします。

  ※ サイトで使用する簡単な素材等はこちらで用意します。
    その際使用される方がおられればダウンロードして下さい。

  それでは次回から本格的に作成していきます。


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


来週は・・・

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

    1.実際にウェブぺージを作成する 2

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

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


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


  今回も最後まで付き合ってくださった方、お疲れ様でした。
  次回からの内容はわかる人にとっては非常に簡単すぎて退屈な内容にな
  ってしまうかもしれません。が、タグ以前に何をどうすればいいのかが
  わからない・・という方が結構おられるようなので、一度実際に作成し
  て見るとよくわかるだろうという考えからこのテーマに決めました。

  実際、サイトを作成するに当たってHTMLだけではなく、簡単にスタ
  イルシートの記述なども説明します。(細かい説明は省きますが)
  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
    読者数:
    4682人

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

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

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

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

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

    最終発行日:
    2017/04/23
    読者数:
    1129人

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

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

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

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

発行者プロフィール

過去の発行記事