ホームページ制作

［　ＭＥＮＵＰＡＧＥ　］　　　　　Ｓｔｅｐ　［１～３］［５］［６］［７］［８］［ホームページのＵＬ方法］

Ｓｔｅｐ４　　＜タグ＞を使った編集方法

ワープロソフトは使ったことがありますか？
使ったことのある人は最初とまどうかもしれません。　編集の際に改行をいれても実際にブラウザで確認してみると改行されていないのです。
［ＨＴＭＬ］では改行するにも＜タグ＞が必要となります。
「文字の大きさ」「文字の色」「改行」「罫線」「背景色」など全てにおいて＜タグ＞を使うことで表現されます。

簡単なページ作りに必要なタグです。
このタグを使って簡単なページを作ってみましょう。

タグ名	説明
<BR>	改行
<P>	段落分け（次の段との間隔が空きます。）
<HR>	罫線
<B>～</B>	太字
<I>～</I>	斜体
<ＤＩＶ　ＡＬＩＧＮ="ＣＥＮＴＥＲ"> ～</ＤＩＶ>	文字位置（ＣＥＮＴＥＲ・ＲＩＧＨＴ・ＬＥＦＴ）
<FONT　COLOR="#FF0000"> ～</FONT>	文字色の設定　　　　カラーコードはこちらを参照
<FONT　SIZE="1"> ～</FONT>	文字サイズの設定（１～７）

サンプルページ

サンプルページＳｔｅｐ　４

フォントサイズは１
フォントサイズは２
フォントサイズは３
フォントサイズは４
フォントサイズは５

フォントサイズは６

フォントサイズは７

中央揃え

右揃え

左揃え

太字　斜体

サンプルページのソースコード

<html>
<head>
<title>サンプルページ</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div align="center"><font size="6" color="#FF0000">サンプルページＳｔｅｐ　４</font></div>
<br>
<font size="1">フォントサイズは１</font><br>
<font size="2">フォントサイズは２</font><br>
<font size="3">フォントサイズは３</font><br>
<font size="4">フォントサイズは４</font><br>
<font size="5" color="#6600FF">フォントサイズは５</font><br>
<div align="center"><font size="6" color="#FF00CC">フォントサイズは６</font></div><br>
<font size="7" color="#66FF00">フォントサイズは７</font><br>
<div align="center">中央揃え<br>
</div>
<div align="right">右揃え<br>
</div>
<div align="left">左揃え</div><br>
<hr width="80%">
<hr width="100">
<br>
<hr width="120" size="10">
<br>
<hr width="90" align="left">
<br>

<div align="center"><font size="7"><b>太字</b>　<i>斜体</i></font></div>

</body>
</html>

ソースの説明

このページの背景色と文字色の設定

<div align="center"><font size="6" color="#FF0000">このページはサンプルです。</font></div>

「このページはサンプルです。」を中央揃え/フォントサイズ６/フォントカラー#FF0000で表示

「右揃え」を右揃えで表示

罫線を枠内８０％の幅で表示　（画面の伸縮で変動）

罫線を枠内１００ピクセルの幅で表示　（固定）

罫線を枠内１２０ピクセルの幅/高さが１０ピクセルで表示

罫線を枠内９０ピクセルの幅で左揃えで表示

太字・斜体、共にフォントサイズ７で中央揃えで表示

このソースコードを「コピー」＆「ペースト」で実行してみてください。　同じ結果が得られるはずです。
この内容をマスターできればテキストページなどは簡単に制作できるはずです。
イロイロ試してみましょう。
次のＳｔｅｐはイメージ（画像）の設置です。

［　Ｓｔｅｐ５へ　］