４． 初歩的なホームページを作ってみる (正規編)
HTMLタグのことが分かったので、少し飾りつけをしたホームページにしてみましょう。
では、文字に色を付けて見ましょう。
文字の装飾は<style>で指定し、色をRGBで表すときは R G B の順で各色の輝度を表記します。
「#ffffff」が白、「#000000」が黒、「#ff0000」が赤、「#00ff00」が緑、「#0000ff」が青、になります。
HTMLソース
ブラウザの表示画面
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ホームページの練習</title>
</head>
<body>
私の初めての<span style="color:#ff0000;">ホームページ</span>です。 ･･･⑦
</body>
</html>
| 🗋 ホームページの練習 |
| 🠤 🠦 ⟳ ✕ ☖ ⓘ ファイル･･･ |
私の初めてのホームページです。 ･･･⑦
|
文字を太字にするには、<b> か <style> の
font-weight lighter/bold/bolder や数値で指定します。また文字サイズを変えるには、
font-size small/medium/large などやサイズで指定します。
HTMLソース
ブラウザの表示画面
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ホームページの練習</title>
</head>
<body>
私の<b>初めての</b><span style="color:#ff0000; font-weight:bold;font-size:32px;">ホームページ</span>です。 ･･･⑧
</body>
</html>
| 🗋 ホームページの練習 |
| 🠤 🠦 ⟳ ✕ ☖ ⓘ ファイル･･･ |
私の初めてのホームページです。 ･･･⑧
|
大分飾りが付いて来ましたね。ここでちょっと勉強です。
上の例のように、複数の styleプロパティ を指定したい時は、 style の中に( ; )で区切って記述します。順番は任意です。
タグの開始と終了は、他の開始～終了タグの完全に外側か、完全に内側に無くてはなりません。
例えば、<s>～</s>タグ(打ち消し線)と、<b>～</b>タグを記述する場合、次のようになります。
【正】 <s>～<b>～</b>～</s> ← 完全に外側
【誤】 <b>～<s>～</b>～</s> ← 互いのタグが交互に噛み合っている。
<input type="text"> の
type="text" のように
属性を持つタグがあります。属性は多くの場合
属性名＝
属性値 という形式で記述します。例外的に、
属性名 だけ指定すればよい場合もあります。
【例】 <input type="checkbox"
checked>
複数の属性を指定することも出来ますが、属性名の前には必ず、ひとつ以上の半角スペースか、タブ文字か、改行をいれます。
また属性値には、小文字で書かなければいけないものがあります。（target="_top"など）
【誤】 <a href="xx.html" target="_TOP">～</a>
属性値に
半角の英数字以外の文字を使用する場合は、ダブルクォーテーション( " )
またはシングルクォーテーション( ' )で囲むようにしましょう。（正確に言うと、一部の記号はクォーテーションで囲まなくても良いのですが、最初の内は「記号はクォーテーションで囲む」
とおぼえておいた方が無難でしょう。）
また、ダブルクォーテーション( " )の中ではシングルクォーテーション( ' )を、シングルクォーテーション( ' )
の中ではダブルクォーテーション( " )を用いることができます。
【正】 <input type=button onclick="alert('XXX')">
【誤】 <input type=button onclick="alert("XXX")"> ←
"alert(" 及び
")" と解釈される
どうしても両方を使用したい場合は、ダブルクォーテーションの代わりに" を指定します。
<input type=button onclick="alert("X'X")">
前へ 次へ
Top>
ＨＰ作りTop>
HPの仕組>
基本タグ/
作成ﾌﾛｰ∥
ゼロ１/
ゼロ２/
ゼロ３/
ゼロ４∥
HTMLの初歩/
演習∥
手軽に作る∥