Ｗｅｂページの作成　もう一歩 （ midasi1.html ）



見出し１

太い文字で書きます

斜めの字体にします

茶色の文字を使います

太い茶色の文字を使います

大きくて太い茶色の文字を使います

戻る
    もう一歩　文字の形や大きさ、色づけを試します。
  1. 右のような見出し１のページ（ midasi1.html ）を作り文字の色や大きさなどをいろいろ変えてみましょう
  2. 一番右下に「戻る」という文字を書き、ここをクリックすると表紙のページへ戻るようにリンクを張ります


  3. 次の一歩で作成した表紙のページ（index.html）の見出し１の文字にリンクを張って、今作成したページへジャンプできるようにします
    また、link.thml にも「戻る」リンクを付けて表紙から見出し１とリンクのページへ行き、それぞれのページから表紙に戻るようにします。
    リンクの張り方は最初の一歩で既に学んでいます。
◎　コーディング例
見出し１のページ の <body> 部分（リンクは張っていない）

コーディング説　　　　明
<div align="center">下の方の</div>までを、中央に配置します
<font size="+2">見出し１</font><br><br>見出し１の文字を <font size="+2"> と </font> で挟んで2段階大きな文字になるように指定します
改行＝ <br> を二つ入れて1行空くようにします
<b>太い文字で書きます</b><br><br><b> と </b> で挟んで文字を太くします
<i>斜めの字体にします</i><br><br><i> と </i> で挟んで斜めの字体にします
<font color="#800000">茶色の文字を使います</font><br><br><font color="#800000"> と </font> で挟んで文字を茶色にします
色は16進法で示しています
<font color="#800000"><b>太い茶色の文字を使います</b></font><br><br>文字を茶色に指定した上、太い文字で書いています
<font size="+2" color="#800000"><b>大きくて太い茶色の文字を使います</b></font><br><br>文字を2段階大きくし、茶色を指定した上、太い文字で書いています
</div>中央配置を終わります
<div align="right">戻る</div><div align="right"> と </div> で挟んだ部分を右に寄せます

【 HTML文書の説明 3 】

作成したページがどのようなルールに従って作られているかという情報をブラウザーに伝えておくと、ブラウザーはそのルールに従って文書を表示します。
　 これらの情報はなくてもブラウザーが適当に判断して表示します。しかし、作成者の意図をブラウザーに正確に伝えるために、head部に付け加えておいた方がよろしい。

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
　 これから記述するHTML文書がどの規約に従って書かれているかを示します。HTML文書の規約はいろいろと改定されています。
　 この例では、バージョン 4.01 Transitional に従っていることを示します。

<html lang="ja">
　 文書は日本語で作成されていることを示します。

<meta http-equiv="content-type" content="text/html; charset=shift_jis">
　 文書の文字コード（キャラクタセット）を宣言します。これを指定することで文字化けの発生を抑えることができます。
　 この例では、文字コードに shift_jis を指定しています。


コーディングのまとめ
　 3枚のページにリンクを貼り付けたものをつぎに示します。

link.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">
<title>最初の一歩</title>
</head>
<body>
<a href="http://maikonohama.la.coocan.jp/">舞子の浜</a>
<br><br>
<div align="right"><a href="index.html">戻る</a></div>

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">
<title>最初の一歩</title>
</head>
<body>
<br><font size="+2">標題（タイトル）</font><br><br>
<a href="midasi1.html">見出し１</a><br><br>
見出し２<br><br>
<a href="link.html">リンク</a><br><br>
</center>
</body>
</html>

midasi1.htm
<!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">
<title>最初の一歩</title>
</head>
<body>
<br>
<center>
<font size="+2">見出し１</font><br><br>
<b>太い文字で書きます</b><br><br>
<i>斜めの字体にします</i><br><br>
<font color="#800000">茶色の文字を使います</font><br><br>
<font color="#800000"><b>太い茶色の文字を使います</b></font><br><br>
<font size="+2" color="#800000"><b>大きくて太い茶色の文字を使います</b></font><br><br>
</center>
<div align="right"><a href="index.html">戻る</a></div>
</body>
</html>

今までに作成した３枚のページの間を行き来できるはずです。各自で試してください。
動作のサンプルはここをクリック



戻る 　　 

作成：小田桐 一良　（舞子の浜）