HTML文書作成法

本文の作成


本文は、全て <body> 〜</body>の内部に記述します。

基本的には、ここに書かれたことのみがブラウザに表示されます。

 

文書の基本構成

文書の基本構成は、新聞や書籍などを見ても分かるとおり、

「題名(見出し)」 

「章」

「段落」

「本文」

に分かれています。

題名は、<title>〜 </title> でしたね。

それ以外の構成要素は、 <body> 〜 </body> の中に記述します。

章は、<h1> 〜 </h1> 、 <h6>〜 </h6>と記述。※6段階まで指定できます。

段落は、<p> 〜</p>と記述します。

重要なのが改行です。改行しないと、次のようになります。

改行しないと延々と文が続きますので、ブラウザを最大化して閲覧した場合、文字が伸びきって大変読みにくい文章となってしまいます。ご注意を。

改行をするには、

<br>  という記述を行います。

</br>のように、タグを閉じる必要はありません。

 

ここまでで、このような文書が書けます。

<html>

<head>
<title>サンプル</title>
</head>

<body>
<h1>はらたいらさんに3000点</h1>
<p>なつかしのクイズダービーです。<br>土曜の夜に私はよく見てました。</p>
<h1>連想ゲーム</h1>
<p>この前リバイバル版を見ました。<br>時代の変化を感じました。</p>
<p>ちょっと回顧ムード・・・。</p>
</body>

</html>

 

文書に飾り付けをする

●文字を太字にする

<b>〜</b>

●文字を強調する

<strong>〜</strong>

●文字をイタリック体(斜字体)にする

<i>〜</i>

●文字にアンダーライン(下線)を付加する。

<u>〜</u>

●文字に取り消し線を付加する。

<s>〜</s>

-----------

●上の複合例

 取り消し線

-----------

●文字の大きさ

(絶対指定)

 <font size="1">〜</font> 1〜7までで文字の大きさを指定

(相対指定)

 <font size="+ 2">〜</font> 今よりも二段大きく etc...

 <big>〜</big> 今よりも一段大きく

 <small>〜</small> 今よりも一段小さく

●文字色

<font face=" ">〜</font>

色は、16進数 または 英語 で表記します。

黒は、 16進数では#000000 英語では black となります。

赤は、16進数では#FF0000 英語では red となります。

詳細は、とほほの色入門・色見本とほほのWWW入門をご覧ください。

●文字の位置

(段落)

<p align="   "> 〜 </p>

" " の内部には、

と記述します。

(全体)

<div align="   "> 〜 </div>

 

タグは様々な種類があります。

HTMLリファレンスとほほのWWW入門をご参照ください。

 

文書の体裁を整える

●色の指定

<body> タグを いじくって、

<body
bgcolor=" "
text=" "
link=" "
alink=" "
vlink=" ">

としてみる。

bgcolor は 背景色(バックグラウンドBGカラー)

text は 文字色

link は リンクの色

alink はクリックしている(アクティブな)リンクの色

vlink はクリック済み(訪問済み)のリンクの色

となる。

 >>リンクについては、こちら

●水平線

<hr>と記述すると、


このような水平線が挿入されます。

<hr> をもっと細かく指定することも可能です。

 size=" " では、罫線の太さを指定できます。

 width=" " では、罫線の長さを指定できます。
 %(実際は半角)を付加することにより、割合の指定も可能です。
 align=" "

 color=" " 色を指定できます。

●表(テーブル)

ここでは詳しい説明を割愛します。こちらで記述しています(拙サイト)

ソースでは以下の表が次のように記述されています。

みかん 500万5250個
りんご 324万5678個

 

ソース表示
<table border="2" cellpadding="3" cellspacing="1">
<tr>
<td bgcolor="#008000"><strong>みかん</strong></td>
<td>500万5250個</td>
</tr>
<tr>
<td bgcolor="#808000"><strong>りんご</strong></td>
<td>324万5678個</td>
</tr>
</table>

 

ワープロ系の入力方法をとる場合、

音声ブラウザなどの読み上げ順序などにも配慮して記述する必要があります。


トップページ HTML文書作成法