[ MENU PAGE ]     Step [1〜3][5][6][7][8][ホームページのUL方法]
Step 4  <タグ>を使った編集方法
ワープロソフトは使ったことがありますか?
使ったことのある人は最初とまどうかもしれません。 編集の際に改行をいれても実際にブラウザで確認してみると改行されていないのです。
[HTML]では改行するにも<タグ>が必要となります。
「文字の大きさ」「文字の色」「改行」「罫線」「背景色」など全てにおいて<タグ>を使うことで表現されます。

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

タグ名
説明
<BR>
改行
<P>
段落分け(次の段との間隔が空きます。)
<HR>
罫線
<B>〜</B>
太字
<I>〜</I>
斜体
<DIV ALIGN="CENTER">
〜</DIV>
文字位置(CENTER・RIGHT・LEFT)
<FONT COLOR="#FF0000">
〜</FONT>
文字色の設定    カラーコードはこちらを参照
<FONT SIZE="1">
〜</FONT>
文字サイズの設定(1〜7)

サンプルページ
サンプルページStep 4

フォントサイズは1
フォントサイズは2
フォントサイズは3
フォントサイズは4
フォントサイズは5
フォントサイズは6

フォントサイズは7
中央揃え
右揃え
左揃え








太字 斜体
サンプルページのソースコード
<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">サンプルページStep 4</font></div>
<br>
<font size="1">フォントサイズは1</font><br>
<font size="2">フォントサイズは2</font><br>
<font size="3">フォントサイズは3</font><br>
<font size="4">フォントサイズは4</font><br>
<font size="5" color="#6600FF">フォントサイズは5</font><br>
<div align="center"><font size="6" color="#FF00CC">フォントサイズは6</font></div><br>
<font size="7" color="#66FF00">フォントサイズは7</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>

ソースの説明
<body bgcolor="#FFFFFF" text="#000000">
このページの背景色と文字色の設定
<div align="center"><font size="6" color="#FF0000">このページはサンプルです。</font></div>
「このページはサンプルです。」を中央揃え/フォントサイズ6/フォントカラー#FF0000で表示
<div align="right">右揃え<br></div>
「右揃え」を右揃えで表示
<hr width="80%">
罫線を枠内80%の幅で表示 (画面の伸縮で変動)
<hr width="100">
罫線を枠内100ピクセルの幅で表示 (固定)
<hr width="120" size="10">
罫線を枠内120ピクセルの幅/高さが10ピクセルで表示
<hr width="90" align="left">
罫線を枠内90ピクセルの幅で左揃えで表示
<div align="center"><font size="7"><b>太字</b> <i>斜体</i></font></div>
太字・斜体、共にフォントサイズ7で中央揃えで表示

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

[ Step 5へ ]
Copyright © 2000 asarinet,co.all rights reserved.