作成しながら進めていきましょう
基本編は、ホームページを作成しながら進めていきましょう。HTMLコードNo1のindex.htmlのソースを表示してください。
Lesson1 タイトル
ホームページのタイトルを決めましょう。
<!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>としたらタイトル部分に「ホームページ」と表示されます。
>> タイトル表示例
◇ さっそく練習してみましょう。
ソースの<title>~</title>に好きな名前をタイプしてみてください。
タイプ後、ファイル(ソース左上) ⇒ 上書き保存 ⇒ ブラウザ更新ボタンをクリック(左上の方にある緑ボタン)
注意:半角カタカナは、文字化けの原因になりますのでやめましょう。
Lesson2 タイプの練習
下のタグがホームページの基本となるタグです。
<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>練習1</td><td>練習2</td></tr>
<tr><td>練習3</td><td>練習4</td></tr>
</table>
上記と同じ部分をソースから見つけてください。「練習3」の部分に文章を作成してみましょう。
>> タイプの練習をしましょう
下記のp strongなど要素と呼びます。要素を< >で囲んだ状態をタグと言います。下の5種類は利用頻度が多くなるので覚えておいてください。
- <p>~</p> ⇒ 前後に1行文のスペースが空き改行されます。
- <br> ⇒ 強制的に改行します。
- <strong>~</strong> ⇒ ~部分が太字で強調されます。
- <em>~</em> ⇒ ~部分が斜体で強調されます。
- align="~" ⇒ 配置を設定。~部分にleft(左)center(中央)right(右)
作成のコツ:情報をタイプしたらマメに上書きしてブラウザで確認です。
Lesson3 文字の大きさの変更
ホームページも文字の大きさが一緒だとメリハリがないので、文字の大きさを変更してみましょう。
- 1. 見出しの設定
- <h1>~</h1> ⇒ <h1>から<h6>まで設定できます。
- 2. 文字の大きさ
- style="font-size:~" ⇒ ~部分に文字の大きさを設定します。
- 3. 個別に範囲指定
- <span>~</span> ⇒ spanだけでは機能しないので、styleを指定。
>> 文字の大きさを設定
見出しはコンテンツの見出しに、それ以外は2、3番の方法を指定します。
Lesson4 色の変更
色は#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:#*******;} ⇒ クリックした時の文字色
>> 色を設定しましょう
Lesson5 テーブルの説明
下のコードをテーブルと呼びます。
<table border="1" cellspacing="1" cellpadding="5 width="550">~</table>
テーブルは数字の変更で色々な形に変化します。
- <table>~</table> ⇒ テーブルを指定するタグです。
- border="1" ⇒ 線の太さを指定。"0"にすると枠線がなくなります。
- cellspacing="1" ⇒ 枠線に数字分だけ余白を入れます。
- cellpadding="5" ⇒ 文字と枠線の間に数字分だけ余白を入れます。
- width="550" ⇒ テーブルの横幅の長さを指定します。
使用例などは、以下で説明しています。
>> テーブルの形を変更と余白の設定
運営しようと思えば、ここまででもできますが、1ページでは少し寂しいので、次はページ数を増やしリンクに挑戦してみましょう。
次のページ >> 応用編