HOME
2章 基本設定
3章 文字装飾
4章 段落レイアウト
5章 画像音声
6章 リンク設定
7章 表デザイン
8章 フレーム

入門ホームページの作り方とまとめ

HTMLでつくるホームページのコマンド

ホームページはふつうWEBブラウザーで表示される画面全般を指します。Webページとは ブラウザーで表示される画面をいい、入り口のページをトップページと 呼びます。インターネットの検索でいろいろなところで、説明をみることが できます。ここでは「超図解HTMLでつくるホームページ入門」エックスメディア社を 材料にして説明します。この本のホームページは < http://www.x-media.co.jp > です。

インターネットの普及により、個人でもホームページを公開してさまざまな用途に 利用する機会が増えています。 ホームページをつくるためには、エディタ(メモ帳)とブラウザー(エクスフローラ)さえあれば 自分のパソコンの上でもつくることができます。

その実態はHTML文書(Hyper Text Markup Language)でHTMLは「タグ」と呼ばれる命令を 書き並べることで実現できます。簡単なものから順次組み合わせることで、すばらしいものを 作ることができます。 みなさんも色々なホームページをみたことがあるでしょう。これらはすべてHTMLの「タグ」で 指定します。文字の色、大きさ、書体などや画像、音楽もタグで設定します。 要するに、「表示したい文章」と「タグ」命令でHTMLは構成されています。

覚えておくべき基本のタグをセクションごとに分けて解説しています。またこのホームページを アクセスして、「表示」−>「ソース」とすることで、書かれている命令タグを 調べることができます。これをエディターで再編集すれば、自分の相応しい形の 新しいホームページをつくることができます。

  • HTMLの基礎構造を表すタグ
  • 段落や文字の設定をするタグ
  • 画像配置やレイアウトをするタグ
  • リンク設定をするタグ

それではこれらの説明を以下に述べておきましょう。

  • HTMLの基礎構造をあらわすタグ
    < HTML > 〜 < /HTML >
    HTMLであることを示すためにトップへくるタグです。 すべてのHTML文書は全体をこのタグで囲みます。 ただしHTMLのバージョンを表すために < !DOCTYPE〜 > をつけるものもあります。
    < HEAD > 〜 < /HEAD >
    このタグで囲まれた部分は、文書全体の情報を書く領域です。
    < TITLE > 〜 < /TITLE >
    文書のタイトルを指定します。この部分がタイトルとなりますが、 ブラウザーのWEBページではウィンドウのタイトルバーに表示されます。
    < BODY > 〜 < /BODY >
    実際に表示される本文の内容を記述する領域です。


  • 段落や文字を設定するタグ
    < H? > 〜 < /H? >
    ヘッダーとしても見出しを表します。?には 数字の1から6までが入ります。小さいほど上位でサイズが 大きいもので、数字が大きくなるほど下位になりますから、 小さな文字となります。

    ヘッダーサンプル< H3 >

    ヘッダーサンプル< H4 >

    ヘッダーサンプル< H5 > 
    < P > 〜 < /P >
    段落を表すタグで、この範囲のなかでは、ソースの文書で 改行をしてあっても、表示には改行になりません。つぎの 段落との間には1行分の空白が入ります。
    < BR >
    始まりと終わりがひとつの組ペアーとなりますが、これは 単体で、改行を表します。
    < B > 〜 < /B >
    このタグで囲まれた範囲は太文字(ボールド体)になります。
    < I > 〜 < /I >
    このタグで囲まれた範囲は斜文字(イタリック体)になります。


  • 画像レイアウトのタグ
    < IMG SRC="画像ファイル名" >
    イメージファイルとして、あらかじめ用意した画像ファイルを 指定します。オプションとして画像の幅や高さ、配置方法などを 定めることができます。


  • リンクの設定タグ
    < A HREF="リンク先" >
    このタグで囲まれた文字列や画像をクリックすることで、「リンク先」 へジャンプします。

< HTML >
< HEAD >
(文書に関する情報)
< TITLE > (タイトル) < /TITLE >
< /HEAD >
< BODY >
(ページに表示される内容、コンテンツ)
(文章、画像、リンク先など)
< /BODY >
< /HEAD >
< /HTML >


スタイルシート(CSS)について

もう一つファイルをダウンロードしたサンプル例には スタイルシートが使われています。上で述べたように書けば、ある程度の 文字や画像などのレイアウトをしながら、記述できたとおもいます。 しかし近年はWEB上のデザインに関する機能はHTMLとは切り離すべきと いう考え方が主流になっています。文字の書体大きさを変更できたと おもいますが、HTMLのタグではなく、スタイルシートを使って行うことが 推奨されています。 いくつかのサンプルソースを自分の作成したWEBページに コピー&ペーストし、これらを編集して新しいデザインをしてみてください。

*
Copyright (C) GREEN LEAF
All Rights Reserved.