| ソースを出す |
ＨＰはどんどん更新していくものです。
最初に作ったＨＰを表示して、
そのソースにいろいろ手を加えながら確かめていきます。
では、ソースはどうして出すのでしょうか・・・
いくつかの方法があります。
| １． | エクスプローラか、ＦＤから自分のＨＴＭＬファイルのある場所を表示する |
| ２． | 「.htm」または「.html」という拡張子の付いたファイルをダブルクリックする |
| ３． | ブラウザにＨＰが表示される |
| ４． | メニューバーの「表示」をクリックしてプルダウンメニューを出す |
| ５． | 「ソース」をクリックすると、メモ帳のソースが表示される |
または、上の３の次に
| ４． | ブラウザの画面上のどこかで、マウスを右クリックしてメニューを出す |
| ５． | 「ソースの表示」をクリックするとメモ帳のソースが表示される |
または、上の１の次に
| ２． | 目的のファイルを選び、右クリックしてメニューを出す |
| ３． | 「送る」を選ぶと、さらにメニューが出る |
| ４． | 「メモ帳」をクリックするとソースが表示される |
また、メモ帳から出す方法もあります
| １． | スタート＞プログラム＞アクセサリ＞メモ帳を出す |
| ２． | 左上の「ファイル」をクリックしてプルダウンメニューを出す |
| ３． | 「開く」をクリックするとウィンドウが出る |
| ４． | 目的のファイルのある場所を指定する |
| ５． | 「ファイルの種類」を「すべてのファイル」にする |
| ６． | 目的のファイルと選んで、「開く」をクリック |
ＨＰに手を入れるときには、
常に、ブラウザとソースを画面に出して作業してください。
| 背景に色をつける |
ＨＰに自分の好きな色をつけることができます。
いよいよこれから、楽しくなります！
・・・背景色のタグ・・・
これは、 body タグの属性のひとつです
| <body bgcolor="・・・"> | 「bgcolor」は「background color」の意味 |
色の指定は、「色名称 (colorname) 」または、「色番号」を使います。
色番号は、赤、緑、青がそれぞれ１６進数で表されています。
例えば、bgcolor="black" と bgcolor="#000000" はどちらも黒を指定します。
正式には、色名を「" "」で囲みますが、なくても有効です。
色名称をリストにした「色見本」を参考にしてください。
こんなサイトもあります。→ ２１６色（松阪大学のページ）
「最初のＨＴＭＬ」で作ったソースに、ちょっと細工しましょう。
赤で表示した部分を加えてください。
HTML No.２
|
<html> <head> <title> ＨＴＭＬ勉強会 </title> </head> <body bgcolor="lavenderblush"> <center> 自分のＨＰを持とう！ </center> </body> </html> |
・・・更新手続き・・・
↓ メモ帳のメニューバーの「ファイル」をクリック ↓ 「上書き保存」をクリック ↓ ブラウザのメニューバーの「更新ボタン」★をクリック |
今後、ＨＰに手を入れたときは、この手続きを必ずしてください。
★ 更新ボタン
画面が変わりましたね！
| はじめのＨＰ | 更新後 | ||
|
|
| フォントの編集 |
フォント（font）というのは、文字の字体やデザインのことです。
文字をいろいろにデザインしてみましょう。
・・・フォントのタグ・・・
| <font size="数字" color="色名" face="書体名">文字列 </font> |
「" "」は省略可能
全部を指定する必要はない
変えたい部分だけ指定すればよい
| サイズ | １から７までの整数 （１が最小、７が最大） |
| 色 | 色見本参照 |
| 書体 | ＭＳ 明朝、ＭＳ ゴシック、Arial、Verdanaなど 書体はブラウザに依存するので、あまり有効ではない |
・・・実験してみましょう・・・
書体の実験のために半角英数字を書いてください。
ここでは、「HomepPage Making」と書きました。
赤で表示した部分を加えてください。
HTML No.3
|
<center> <font size="5" color="red" face="Times New Roman"> HomePage Making </font> </center> |
次に更新手続きをしてください。
| はじめのＨＰ | 更新後 | ||
|
|
文字のサイズと色と書体が変わりました。
・・・文字の編集をするタグ・・・
| <b>・・・</b> | bold（太字）にする |
| <i>・・・</i> | italic（斜体字）にする |
| <u>・・・</u> | underline（下線）を引く |
実験しましょう。
赤で表示した部分を加えてください。
HTML No.4
|
<center> <b>自分の</b><i>ＨＰを</i><u>持とう！</u> </center> |
次に更新手続きをしてください。
| はじめのＨＰ | 更新後 | ||
|
|
全部一度に使うこともできます。
赤で表示したように書いてください。
HTML No.5
|
<center> <b><i><u>自分のＨＰを持とう！</u></i></b> </center> |
次に更新手続きをしてください。
| はじめのＨＰ | 更新後 | ||
|
|
・・・複数のタグを一度に使うときの注意・・・
算数の括弧のように、指定と解除を順序良く並べる
<b><i><u> ○○○ </u></i></b>
このように、同心円状にタグを書く
指定を変えるときは
必ず前の指定を解除してから、次の指定をする。
| 改行する |
ソースを書く上で改行しても、ＨＰには反映されません。
ＨＰ上で改行するには、改行タグを使います。
・・・改行のタグ・・・
| <br> | break 改行する |
改行タグは単独で使います。
改行したいところに書くと一回改行されます。
二回書くと、一行空行が入ります。
実験しましょう。
赤で表示した部分を加えてください。
まず、数行の文章をソース上で改行しながら入力してください。
HTML No.6
|
<center> 自分のＨＰを持とう！ まず環境を作って、 準備をしましょう。 メモ帳を出して、 ソースを書きます。 ブラウザで表示させましょう。 ソースに手を入れて 更新しましょう。 </center> |
次に更新手続きをしてください。
| はじめのＨＰ | 更新後 | ||
|
|
これではだめですね！
ソースを書くときに、
「enter」キーで改行しても、ＨＰには反映されません。
つぎに赤で表示したように書いてください。
HTML No.7
|
<center> 自分のＨＰを持とう！<br><br> まず環境を作って、<br> 準備をしましょう。<br> メモ帳を出して、<br> ソースを書きます。<br> ブラウザで表示させましょう。<br> ソースに手を入れて<br> 更新しましょう。<br><br> </center> |
更新手続きをしてください。
|
自分のＨＰを持とう！ まず環境を作って、 準備をしましょう。 メモ帳を出して、 ソースを書きます。 ブラウザで表示させましょう。 ソースに手を入れて 更新しましょう。 |
| 見出しを作る |
ＨＰの体裁を作っていく上で、まず見出しを作ります。
・・・見出しのタグと段落のタグ・・・
| <h数字>・・・</h数字> | 見出し（headline）にする 数字は１から６までの整数 （１が最大、６が最小） |
| <p>・・・</p> | 段落 (paragraph) としてまとめる 単独で使える場合もある |
見出しのタグと段落のタグはちょっと変わっています。
見出しの行の前後に一行ずつ空行がはいります。
実験です。
次のように書き直してください。
HTML No.8
|
<center> <h2>自分のＨＰを持とう！</h2> <p> まず環境を作って、<br> 準備をしましょう。<br> メモ帳を出して、<br> ソースを書きます。<br> ブラウザで表示させましょう。 <p>ソースに手を入れて<br> 更新しましょう。 </center> |
次に更新手続きをしてください。
自分のＨＰを持とう！まず環境を作って、 ブラウザで表示させましょう。 |
</p> を使っていません
</h2>の後と、<p> の前に<br>がないのに気がつきましたか？
それでもちゃんと、空行が入っていますね。
次回はジャンプ（リンク）
制作者のＨＰかぼちゃの旅