文書を章や段落で構成させる場合には、次のように記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Webページの練習</title>
</head>
<body>
<h1>第一章 入門編</h1>
<h2>1.1 ブラウザとは</h2>
<p>ブラウザとは本をパラパラ・・・</p>
<h2>1.2 HTMLとは</h2>
<p>HTML とは HyperText Markup Language の略で・・・</p>
</body>
</html>
これをブラウザで表示させると次のようになります。
<h1>～</h1> で囲まれた部分が章の表題を表わします。数字は表題のレベルで、1～6まで指定できます。
<p>～</p> は paragraph の略で、各段落を意味します。
太字にするには <b>～</b> を用います。
テキストの一部分を<b>太字</b>にします。
これをブラウザで表示すると次のようになります。
テキストの一部分を太字にします。
※ HTML5 では <b> は「太字」ではなく 「注意を引きつける箇所」と定義されています。「太字」にするには <span> や スタイルシート(CSS) の font-weight を用いて下記の様に記述します。
テキストの一部分を<span style="font-weight:bold;">太字</span>にします。
斜体文字にするには <i>～</i> を用います。
テキストの一部分を<i>Italic</i>にします。
これをブラウザで表示すると次のようになります。
テキストの一部分をItalicにします。
※ HTML5 では <i> は「斜体」ではなく 「通常の文章とは少し性質の異なる箇所」と定義されています。「斜体」にするには <span> や スタイルシート(CSS) の font-style を用いて下記の様に記述します。
テキストの一部分を<span style="font-style:italic;">Italic</span>にします。
文字の大きさを変えるには、以前は <font size=...> タグを使用していました。
テキストの一部分を<font size="+2">大きな文字</font>にします。
HTML5 では、<font> は廃止され、スタイルシート(CSS) の font-size を用いて下記の様に指定します。サイズには 16pt などの数値＋単位や、180% などの相対値を指定できます。
テキストの一部分を<span style="font-size:180%;">大きな文字</span>にします。
これをブラウザで表示すると次のようになります。
テキストの一部分を大きな文字にします。
文字の色を変更するには、以前は <font color=...> タグを使用していました。
テキストの一部分を<font color="red">赤い文字</font>にします。
HTML5 では、<font> は廃止され、スタイルシート(CSS) の color を用いて下記の様に指定します。指定できる色については「とほほの色入門・色見本」を参照してください。
テキストの一部分を<span style="color:red;">赤い文字</span>にします。
これをブラウザで表示すると次のようになります。
テキストの一部分を赤い文字にします。
フォントを変更するには、以前は <font face=...> タグを使用していました。
テキストの一部分を <font face="ＭＳ 明朝">明朝体</font> にします。
HTML5 では、<font> は廃止され、スタイルシート(CSS) の font-family を用いて下記の様に指定します。
テキストの一部分を <span style="font-family:'ＭＳ 明朝'">明朝体</span> にします。
これをブラウザで表示すると次のようになります。
テキストの一部分を 明朝体 にします。
HTML文書のテキストの改行は通常、ひとつの空白文字に変換されてしまいます。自分の好きな位置で改行するには <br> を用います。
テキストのここで<br>改行します。
これをブラウザで表示すると次のようになります。
テキストのここで
改行します。
改行を禁止するには <nobr>、HTML文書の改行や空白をそのまま表示するには <pre> を用います。
数字無しのリスト書きには <ul>～</ul> と <li> を用います。
<ul> <li>りんご</li> <li>みかん</li> </ul>
数字付きリストは <ol>～</ol> と <li> を用います。
<ol> <li>青森</li> <li>愛媛</li> </ol>
これをブラウザで表示すると次のようになります。
用語と用語の説明リストを記述するには <dl>～</dl> と <dt> と <dl> を用います。
<dl> <dt>HTML</dt> <dd>HTMLとは・・・</dd> <dt>JavaScript</dt> <dd>JavaScriptとは・・・</dd> </dl>