作成しながら進めていきましょう
基本編は、ホームページを作成しながら進めていきましょう。HTMLコードNo1のindex.htmlのソースを表示してください。
ホームページのタイトルを決めましょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>〜</title>
<style type="text/css">
<!--
a:link { color: }
a:visited { color: }
a:hover { color: ; background-color: }
a:active { color: }
-->
</style>
</head>
<title>〜</title> ⇒ 〜部分がタイトルです。<title>ホームページ</title>としたらタイトル部分に「ホームページ」と表示されます。
>> サンプル1
◇ さっそく練習してみましょう。
ソースの<title>〜</title>に好きな名前をタイプしてみてください。
タイプ後、ファイル（ソース左上） ⇒ 上書き保存 ⇒ ブラウザ更新ボタンをクリック（左上の方にある緑ボタン）
注意：半角カタカナは、文字化けの原因になりますのでやめましょう。
下のタグがホームページの基本となるタグです。
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
- <head>〜</head> ⇒ 〜の情報はブラウザに表示されません。
- <body>〜</body> ⇒ 〜の情報がブラウザに表示されます。
<head>〜</head>の中は、ほとんど記載情報が決まってますので、先にHTMLコードNo1に記載してあります。
あとは、<body>〜</body>の中を充実させていきましょう。
◇ タイプの練習をしてみましょう。
<table border="1" cellspacing="1" cellpadding="5" width="550">
<tr><td>練習１</td><td>練習２</td></tr>
<tr><td>練習３</td><td>練習４</td></tr>
</table>
上記と同じ部分をソースから見つけてください。「練習３」の部分に文章を作成してみましょう。
>> サンプル2
下記のp strongなど要素と呼びます。要素を< >で囲んだ状態をタグと言います。下の5種類は利用頻度が多くなるので覚えておいてください。
- <p>〜</p> ⇒ 前後に1行文のスペースが空き改行されます。
- <br> ⇒ 強制的に改行します。
- <strong>〜</strong> ⇒ 〜部分が太字で強調されます。
- <em>〜</em> ⇒ 〜部分が斜体で強調されます。
- align="〜" ⇒ 配置を設定。〜部分にleft（左）center（中央）right（右）
作成のコツ：情報をタイプしたらマメに上書きしてブラウザで確認です。
ホームページも文字の大きさが一緒だとメリハリがないので、文字の大きさを変更してみましょう。
- 1. 見出しの設定
- <h1>〜</h1> ⇒ <h1>から<h6>まで設定できます。
- 2. 文字の大きさ
- style="font-size:〜" ⇒ 〜部分に文字の大きさを設定します。
- 3. 個別に範囲指定
- <span>〜</span> ⇒ spanだけでは機能しないので、styleを指定。
>> サンプル3
見出しはコンテンツの見出しに、それ以外は2、3番の方法を指定します。
色は#6桁のカラーコードを設定します。カラーコードは、色の見本を参考にしてください。
◇ 背景色・文字色の変更
- style="background-color:#*******" ⇒ 背景色の設定
- style="color:#*******" ⇒ 文字色の設定
◇ リンク色の変更
- a:link {background-color:#*******;} ⇒ 未訪問の背景色の設定
- a:visited {background-color:#*******;} ⇒ 訪問済みの背景色の設定
- a:hover {background-color:#*******;} ⇒ マウスを重ねた時の背景色
- a:active {background-color:#*******;} ⇒ クリックした時の背景色
- a:link {color:#*******;} ⇒ 未訪問（クリック前）の文字色の設定
- a:visited {color:#*******;} ⇒ 訪問済み（クリック後）の文字色の設定
- a:hover {color:#*******;} ⇒ マウスを重ねた時の文字色
- a:active {color:#*******;} ⇒ クリックした時の文字色
>> サンプル4
下のコードをテーブルと呼びます。
<table border="1" cellspacing="1" cellpadding="5 width="550">〜</table>
テーブルは数字の変更で色々な形に変化します。
- <table>〜</table> ⇒ テーブルを指定するタグです。
- border="1" ⇒ 線の太さを指定。"0"にすると枠線がなくなります。
- cellspacing="1" ⇒ 枠線に数字分だけ余白を入れます。
- cellpadding="5" ⇒ 文字と枠線の間に数字分だけ余白を入れます。
- width="550" ⇒ テーブルの横幅の長さを指定します。
使用例などは、以下で説明しています。
>> サンプル5
運営しようと思えば、ここまででもできますが、1ページでは少し寂しいので、次はページ数を増やしリンクに挑戦してみましょう。