ホームページを自作しよう≪JoyWave便利箱≫
ジョイのHTML勉強 ホームページを自作しよう≪JoyWave便利箱≫
ジョイのHTMLソース勉強部屋
制作:ジョイ@関西

 トップ | ≪HTML基本構成≫ | ≪タグの書き方≫ | ≪スタイルシートの書き方≫ | HTMLタグ・属性 abc順 | ≪サイトマップ≫

エプソンダイレクト株式会社


「W3C」という組織?団体?規格?があって、ページのソースは準拠するように指導されているらしいのです。 でも私は見たことも読んだこともないので、私の説明が正しい(いわゆる文法どおり)かどうか判りません。 本当に正しく理解したい方は、「W3C」のサイトあるいはその解説サイトなどをご覧ください。

また、呼び方も正しくは下記のように表現するそうです。
・ サイトのトップページのこと → ホームページ
・ サイト全体のこと      → WEBサイト(ウェブサイト)
・ サイトの各ページのこと   → WEBページ(ウェブページ)

でも「ホームページ」の方が馴染みがあるので、ここでは各ページのことも「ホームページ」あるいは「ページ」と言うことにします。

■HTMLの基本構成

メモ帳( Notepad )などのテキストエディタに、表示したい内容と、その内容をコンピュータに理解させ意図したとおりに表示させるための「タグ」を記述していきます。 この全体を ソース(source) と言います。HTMLの骨格は下記のとおりで例外はありません。 この骨格に、段落の作成、改行、テキストの装飾など、それぞれ意味を持つタグを規則に従って記述していけば、色々と肉付けし体裁を整えることができます。 最近ではHTMLは基本的なことだけにとどめ、装飾、つまり体裁良く見せるためのソースはスタイルシートに記述することを推奨しています。

<・・・>のように書かれた記号の部分を「タグ」と呼び、複数の属性などを付けることができます。
図解説明すると、

HTML構造図解

このようになります。

また、ソース(source)とは、HP(ホームページ)の元となるものの意味で、HPを開き「右ボタンクリック」→「ソースの表示」で下記のような記号群が表示されます。
タグは大文字・小文字を区別しませんので、対になっているタグでも、小文字で始めて大文字で終わっても構いません。 <BODY>〜</body> のような大文字・小文字の組み合わせも可能です。 ただし、URL、JavaScriptやスクリプト名、文字コードなどは大文字・小文字、全角・半角を区別しますのでご注意ください。

<html>〜</html>、<head>〜</head>、<title>〜</title>、<body>〜</body> のように同じ言葉の前に「/」を付けて終わります。
<head>〜</head> の間にタイトルやキーワードなどのタグ(メタタグと呼ぶ)を書き入れます。
<body>〜</body> の間に本文や画像などを書き入れます。(この部分がページに表示されます)

また、タグは必ず「入れ子」の形で書きます。
 <aaa><bbb>〜</aaa></bbb> ・・・・×、<aaa><bbb>〜</bbb></aaa> ・・・・○

終了タグがないもの、終了タグを書かなくてもいいものは下記のとおりです。

※終了タグがないもの
 <br>、<img>、<hr>、<meta>、<frame>
※終了タグを省略してもいいもの
 <p>、<li>、<dt>、<dd>

◇HTML言語の基本的な記述・組み合わせはこのようになります。

<html>
<head>
<title></title>
</head>
<body>

<div align="center">
<font size="4" color="blue">

保存したファイル名をダブルクリックすると、<br>
こんな風に表示されます。
</font>
</div>
</body>
</html>
:html文書であることを宣言します。
:htmlの情報部分の始まりを宣言します。
:タイトルを書き入れます。
:htmlの情報部分の終了を宣言します。
:本体の始まりを宣言します。
:左右の中心に配置する命令です。
:文字の大きさと色を指定しています。


:文字指定解除
:この場合は位置指定解除
:本体の終了を宣言します。
:html文書の終了を宣言します。

上の左側の内容をコピーしメモ帳などに貼り付け、「 *****.html 」という名前でデスクトップなどに保存してください。
.html 」は拡張子といい、この拡張子をつけたファイルはアイコンがインターネットのマークになります。また、「 ***** 」部分は半角英数と一部の半角記号で書きます。
そのファイルをダブルクリックして開くと、表示は下記のようになります。

こんな感じで表示されます

基本的なタグは青字部分です。ページには表示されませんが、この並び方を覚えましょう。

◇基本情報部分(ヘッダタグ)

ヘッダ部分( <head>〜</head> )にこのページ全体に関する指定などを書きます。

  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  3. <meta http-equiv="Content-Script-Type" content="text/javascript">
  4. <meta http-equiv="Content-Style-Type" content="text/css">
  5. <title>各ページごとのタイトルを書きます(検索などで表示されます)</title>
  6. <meta content="制作者" name="author">
  7. <meta content="このページのポイントとなるキーワードを半角カンマ区切りで書きます" name="keywords">
  8. <meta content="このページの概略を説明します" name="description">
  9. <meta content="著作権の保有者などを書きます、私はトップページのURLを書いています" name="copyright">
  10. <link href="リンクで使用するスタイルシートを指定します" type="text/css" rel="stylesheet">
  11. </head>

もっと沢山書けることがありますが私の判るのはこのくらいです。ヘッダ部分を省略してもページは表示されますが、意味が判らないところがあっても書くようにしましょう。
特に2〜5行目、7〜8行目は省略しないよう頑張って書きましょう。10行目はスタイルシートのファイルを使う場合のみ書きます。
※2行目で私は charset=Shift_JIS としていますが、charset=euc-jp も多いです。どう使い分けるのかよく判りません。

ページの先頭へ


 トップ | ≪HTML基本構成≫ | ≪タグの書き方≫ | ≪スタイルシートの書き方≫ | HTMLタグ・属性 abc順 | ≪サイトマップ≫

Copyright(C) 2005 ホームページを自作しよう≪JoyWave便利箱≫ All Rights Reserved.