ＨＴＭＬのルールを覚える
『HTMLタグを手打ちしてＷＥＢサイトを作る』で簡単に貼り付け作業だけで、ＷＥＢサイトがブラウザにどんな感じで表示されているかを見ました。
では、この次に理解する事は、赤文字でかかれている意味と、青文字で書かれているタグの意味、一番最初に示したindex.html のなかで使った赤文字タグの意味とルールを理解できれば、今回示したくらいのＷＥＢサイトは手打ちでも書くことができます。
ではそのルールを覚えましょう。
HTMLファイルの構造
HTMLサンプル
先ずは前回のHTMLサンプルを見てください。これを更に骨組みにして表示したものが下記です。
<html>
<head>
<title><!--楽しいHTML教室--></title>
</head>
<!-- ここまでがヘッダーです -->
<!-- これ以下がボディ(本文) -->
<body>
<!--ブラウザ表示されている部分-->
</body>
タグのルール
タグのルール
ルール其の壱
タグは小文字で入力します
HTMLではタグを大文字で記述しても、小文字で入力しても構いません。しかし、XHTMLでは小文字で入力しなければなりません。
ルール其の弐
開始タグと終了タグはセットで使用します。タグはこのように 開始<html>と、終了</html>で一つのタグとして記述します。終了にはスラッシュを書き入れます</html>
タグは最後のタグから順に終了し、最初のタグが最後に終了。上記で言うとこうなります。
- </html>
- </body>
- </head>
- </title>
HTML、XHTMLはネスト（入れ子）の状態で成り立っているのですね。
【一例】
<li>箇条書きテキスト</li>は、<ul><ul>で挟まれていますよね。基本的には、ホームページはこういった状態、ネストで成り立っています。
- <ul>
<li>箇条書きテキスト</li> - <li>箇条書きテキスト</li>
<ul>
記述順序を解説
<html></html>
ＷＥＢサイトは全てこの<html></html>の間に記述されます。
<head></head>
このタグの間には、<title>楽しいHTML教室</title>が入ります。また、前回ＨＴＭＬふぁいるとＣＳＳふぁいるをリンクしたときの、
<link rel="stylesheet" href="ファイル名.css " type="text/css" />
を書き込んでファイルをリンクさせます。他にもここに書き込む事のできるコードがありますが今は割愛します。
<body></body>
このタグ間がブラウザ表示される重要部分となります。したがってこれからおぼえるタグは、<html></html>の中の<body></body>の中へ記述する事になるという事はご理解いただけたと思います。
参考ページ：ブラウザとは
<body></body>の中へ入るタグを全て紹介すると、とても初心者は勉強する気になれないと思うので、よく使われるタグを抜き出して下記に記していきます。
<title></title>
このタグは、<title>楽しいHTML教室</title>ページタイトルをあらわし、<head></head>タグの中に書くでしたね。一ページに一回しか使う事ことはできません。初心者の場合は、書き忘れもあるので必ず書き込むようにしましょう。
見出しを記述する h1,h2タグ
<h1>大見出し</h1>
見出し部分は、h1からh2、h3と順番に記述していきましょう。また、h1タグとタイトルタグ<title>については、同一の内容か、もしくは関連した内容のものを記述することをおすすめします。
段落分けの<p></p>と改行の<br />
<p></p><br />
<p></p>タグは段落タグです。本文テキストなどの記述に一番使われます。
<br />これは改行タグです。段落タグ <p></p>の終了タグの後ろに記述する事で段落が改行されます。このタグは、一個だけで用います。
使用例<p>ここにテキストが入る</p><br />
箇条書きリスト <ul><li>
<ul><li>
このタグは、<ul><li></li></ul>この形を一つとして覚えてしまいましょう。
リストが増えるごとに、<li></li>を増やしていく事になります。
例：
<ul>
<li>これは箇条書きリスト</li>
<li>これは箇条書きリスト</li>
<li>これは箇条書きリスト</li>
</ul>
- これは箇条書きリスト
これは箇条書きリスト - これは箇条書きリスト
<ol><li>
<ol>
<li>順列リスト</li>
<li>順列リスト</li>
<li>順列リスト</li>
</ol>
- リスト
- リスト
- リスト
文字の太さと強調 文字<b>と<strong>
<b>と<strong>
このタグは、文字を太くする効果があります。
例：<strong>文字</strong><b>文字</b>ブラウザでは同じように表示されますが、意味合いが違いますので、用途に応じて使うようにします。
<b>はデザインとしての強調に対して<strong>は文字の意味を強調させるため、多用に注意しましょう。見かけ上は遜色ないのですが、検索エンジンの判断は違う結果になります。
画像を表示する <img src=・・・・＞
<img src="http://" alt="" width="" height="" border="0" />
ＷＥＢサイトに画像を埋め込むときに使うタグがこのタグです。これを一括りで覚えるようにしましょう。<img src="http://" alt="画像説明" width="画像幅"/>
- "http://" は、http://afi114.com/03websight/html02.html(このページ)
- alt="画像説明"は、alt="トップページバナー画像"
- width="画像幅" height="画像高さ" は、width="100px" height="80px"
画像の場合の単位はpxで覚えておくとよいでしょう。
リンクのhtmlタグ <a href=""></a>
<a href=""></a>
リンクする場合は、<a href="リンクファイルのパス"></a>このタグもこの形を丸ごと覚えましょう。
使い方例：ＡファイルからＢファイルへリンクする場合、
Ａファイルがこのページだとして、Ｂファイルがトップぺージだとした場合。いきたいページのＢファイルへのパスを記述します。この場合トップページですので、この様に書きます。
<body><a href="Ｂファイルへのパス">トップぺージへリンク</a></body>
<body><a href="http://afi114.com/index.html">トップぺージへリンク</a></body>
これをブラウザ表示するとこの様になります。
ブロック分けのhtmlタグ <div></div>
<div></div>
コンテンツによってブロック分けする時に使ったりします。前回のXHTMLサンプルを見てください。コード中ほど下に
<div class="side">があります。このタグは、リンクタグを一まとめに括ったタグです。ブラウザ表示させると、リンクタグが本文左にリストが右に回っているのが確認できます。
<div class="side">
<ul>
<li>記事ページへのリンク</li>
<li>記事ページへのリンク</li>
</ul>
</div>
この<div class="side">の形を丸ごと覚えます。"side"の部分は任意の半角英数字の文字列を指定します。
今回、この<div class="side">くくりに対して、デザインプログラム（ＣＳＳ）で右に寄せるの指示を与えたので、このくくりが、右に寄っているのですね。
こんなことは、ルールさえ覚えて、後、ホームページ作成ソフトですると簡単にできます。
表を作成する <table>タグ
<table><tr><td>要素</td></tr></table>
表を作成するにはtableタグを使用します。tableタグは、trとtdとを組み合わせて行と列を指定し、表を作成することができます。今回は基本的な『田の字型』の表のでき方を記載しておきます。変形はまたの機会に紹介します。
<table>タグも以下の基本構成を丸ごと覚えてしまいましょう。
こんなイメージで覚えるといいでしょう。
1枠だけの場合
<table>
<tr>
| <td>要素</td> |
</tr>
</table>
コード
<table>
<tr>
<td>要素</td>
</tr>
</table>
1行×2列
| <td>要素</td> | <td>要素</td> |
<table>
<tr>
<td>要素</td><td>要素</td>
</tr>
</table>
２行×2列
| <td>要素</td> | <td>要素</td> |
| <td>要素</td> | <td>要素</td> |
<table>
<tr>
<td>要素</td><td>要素</td>
</tr>
<tr>
<td>要素</td><td>要素</td>
</tr>
</table>
『田の字型』はとっても簡単に作成する事ができます。行（<tr>）と列（<td>）をそれぞれ増やす事で桝目が増えてゆきます。
テキスト下にラインを引く<u></u>
<u></u>
見てもらうと解ると思います。アンダーラインがひかれている部分が、<u></u>で囲まれています。
例文
初心者でも成功するように、アフィリエイトに特化した、ＷＥＢサイトの作り方ＨＴＭLの知識等を解説しています。基本をマスターして、アフィリエイトで成果を上げていきましょう。
コード
<p >初心者でも成功するように、アフィリエイトに特化した、<u>ＷＥＢサイトの作り方ＨＴＭLの知識等を解説しています。</u>基本をマスターして、アフィリエイトで成果を上げていきましょう。</p>
ページ情報を記述する <meta タグ>
<meta>
<head>～</head>内に記述される、ページの各種付加情報を定義するタグです。 その用途は多彩で、文字コードの指定や、ページのキャッシュ無効化の指定、Javascript使用の宣言、ロボットに対しての命令など、さまざまな目的に使用されます。XHTMLサンプル<head>～</head>内を見てください。また、<head>～</head>内にはいるタグとして<title>楽しいHTML教室</title>がありました。
使用一例：<meta name="keywords" content="ページのキーワード1,2,3" />
文字色の指定 <span style="color:#ff0000;"></span>
文字色は、<span style="color:#ff0000;"> を使って指定します。#ff0000この部分を変更して色を変えます。
使用一例： <span style="color:#ff0000;">文字の色は赤</span>
背景色の指定 <div style="background-color:#ffffff;"></div>
背景色は、<div style="background-color:#090;"> を使って指定します。#090この部分を変更して色を変えます。この背景色は緑です。
使用一例：<div style="background-color:#090;">背景色は緑です。</div>
横線や破線 <hr>タグ
<hr>
ＨＴＭＬでは横線を引くには<hr>タグを使います。html で記入する場合は<hr />タグと書きます。このタグもこれ一つで使用します。
赤文字でかかれている意味
赤文字でかかれている意味
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>あなたのホームページのタイトル</title>
<meta name="keywords" content="ページのキーワード1,2,3" />
<meta name="description" content="ページの説明" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body>
</body>
</html>
XML宣言とDOCTYPE宣言を記載
HTML文書はHTMLタグから始まりますが、XHTMLの場合、HTMLタグの前に「XML宣言」と「DOCTYPE宣言」を記載する必要があります。
これをくわしく見て見ましょう。
その前に、このページで紹介しているコードが基本中の基本なのですね。無料ブログで使われているタグのほとんどは、ここで紹介しているタグで書かれています。あと少し、デザインコードのＣＳＳが使われていますが、これは、今勉強するとごちゃごちゃになるので、ＣＳＳのところで解説します。
では、一度無料ブログに登録して、実際にコードがどのようになっているかを見てみましょう。
ここで説明に使うブログは『ＦＣ２ブログ』ですが、ほとんどのブログでも同じ機能や同じコードが使用されています。デザインの部分は、そのブログで若干の違いはあります。
無料ブログで上記の内容を確認したあと、『XML宣言とDOCTYPE宣言を記載』へお進みください。では指先ボタンを押して『ＦＣ2ブログ』へ登録してコードをみてみましょう。
この記事が参考になったという方は、下にあるＳＮＳボタン、いいね～！を押してもらえると大変ありがたいです。
- 次のページ：FC2ブログの登録方法をお伝えします
- 次々ぺージ：XML宣言とDOCTYPE宣言を記載
- 前のページ：HTMLタグを理解してＷＥＢサイトを作る
- 目次ページ：ＨＴＭＬサイトとは ガイド
