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



見出し１

太い文字で書きます

斜めの字体にします

茶色の文字を使います

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

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

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


  3. 次の一歩で作成した表紙のページ（index.html）の見出し１の文字にリンクを張って、今作成したページへジャンプできるようにします
    また、link.thml にも「戻る」リンクを付けて表紙から見出し１とリンクのページへ行き、それぞれのページから表紙に戻るようにします。
    リンクの張り方は最初の一歩で既に学んでいます。
　 HeTeMuLu Creator の操作
「見出し１」から「大きくて太い茶色の文字を使います」までの部分は下のようになります
<div align="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>
</div>

◎　コーディング例の説明
コーディング説　　　　明
<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>中央配置を終わります

コーディングのまとめ
　 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>
</body>
</html>

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

midasi1.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>
<div align="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>
</div>
<div align="right"><a href="index.html">戻る</a></div>
</body>
</html>

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



戻る 　　 

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