HTMLでは、テキストをイタリック体（斜体）、ボールド体（太字）などにすることができます。 フォントの切り換えは以下の表に従ってください。 タグを組み合わせることにより、ボールドイタリック体などにもできます。 ただし、システムに適切なフォントがなければ、タグが無視されたように表示されます。
オリジナル: Good afternoon! こんにちは。<br> ボールド体: <b>Good afternoon! こんにちは。</b><br> イタリック体: <i>Good afternoon! こんにちは。</i><br> タイプライタ体: <tt>Good afternoon! こんにちは。</tt><br> ボールドイタリック体: <b><i>Good afternoon! こんにちは。</i></b>
文章を書いていると、一部の語句を
強調
したくなることがあります。
英語などの場合、強調する語句はイタリック体を用いるのが習わしです。
しかし、強調だから
<i>
〜
</i>
で囲むなどと考えていたのでは、作者は文章の内容に集中できません。
このため、HTMLには、ここからここまでを強調するというタグ
<em>
〜
</em>
が用意されています。
作者は、慣習を意識せず、このタグを使って強調する語句を指定します。
ブラウザは、慣習に基いて、その語句をイタリック体で表示します。
ブラウザは、強調以外にもいくつかの慣習を知っています。 主なものを表に示します。
| テキスト | タグ | 表示 | 覚え方 |
|---|---|---|---|
| 強調 | <em>〜</em> |
イタリック体 | EMphasize |
| より強い強調 | <strong>〜</strong> |
ボールド体 | |
| 文献参照 | <cite>〜</cite> |
イタリック体 | |
| 定義語句 | <dfn>〜</dfn> |
ボールド体 | DeFiNition |
| プログラムコード | <code>〜</code> |
タイプタイタ体 | |
| 出力例 | <samp>〜</samp> |
タイプライタ体 | SAMPle |
| キー入力 | <kbd>〜</kbd> |
タイプライタ体 | KeyBoarD |
| 変数 | <var>〜</var> |
イタリック体 | VARiable |
なお、
<b>
,
<i>
,
<tt>
タグと同様に、タグが無視されたように表示されることがあります。
<p> <strong>Don't write</strong> <code>if (x = y)</code> .... A single equal sign (<code>=</code>) is used in an <em>assignment statement</em>. </p>
フォントの大きさを切り換えるには、単純な方法とやや複雑な方法があります。
前者は、
<big>
〜
</big>
で囲めばより大きなフォントが使われ、
<small>
〜
</small>
で囲めばより小さなフォントが使われるというものです。
後者は
<font>
タグを用いるものです。
size属性
によってフォントの大きさを指定します。
この値は1から7までで、値が大きいほど大きなフォントが使われます。
3が普通の大きさです。
size
属性の値は、
+1
,
-2
のような相対指定も可能です。
システムに適切なフォントがなければ、それに近いフォントが選ばれたり、タグが無視されたりします。
<font size="5">Good afternoon!</font><br> <font size="4">Good afternoon!</font><br> <font size="3">Good afternoon!</font><br> <font size="2">Good afternoon!</font>
規格の上では、
<font>
タグは使わないようにと指示されています。
ここで紹介したのは、後でスタイルシートと比較するためです。
<h1>
タグを使っても、フォントを大きくできます。
しかし、フォントを大きくする目的で、
<h1>
タグを使うことは勧められません。
単にフォントを大きくするときには
<font>
タグを使い、見出しのフォントの大きさを意識せず、文章の内容に集中するときには
<h1>
タグを使う、としてください。
もう一度、
<i>
タグと
<em>
タグとの関係を思い出してください。
テキストの色を切り換えるにも、
<font>
タグを用います。
color属性
によって色を指定します。
この値は
色の名前
を意味するキーワードを使います。
以下の表に従ってください。
| キーワード | 色 | 例 |
|---|---|---|
aqua |
水色 | ■ |
black |
黒 | ■ |
blue |
青 | ■ |
fuchsia |
桃色 | ■ |
gray |
灰色 | ■ |
green |
緑 | ■ |
lime |
黄緑 | ■ |
maroon |
茶色 | ■ |
navy |
紺 | ■ |
olive |
黄土色 | ■ |
purple |
紫 | ■ |
red |
赤 | ■ |
silver |
銀色 | ■ |
teal |
深緑 | ■ |
white |
白 | ■ |
yellow |
黄色 | ■ |
<font color="green">Good afternoon!</font><br> <font color="black">Good afternoon!</font><br> <font color="red">Good afternoon!</font><br> <font color="blue">Good afternoon!</font><br> <font color="yellow">Good afternoon!</font>
赤のやや大きなフォントに切り替えるときには、
<font color="red"><font size="4">Good afternoon!</font></font>
または
<font color="red" size="4">Good afternoon!</font>
と書きます。
<font color="red"><font size="4">Good afternoon!</font>
と書きますと、思ったように表示されません。
ホームページでは、 テキストの色 と 背景の色 を変えることができます。
<body>
タグに
text属性
を書きますとテキストの色が、
bgcolor属性
を書きますと背景の色（BackGround COLOR）が、それぞれ指定できます。
これらの属性の値は、色の名前のキーワードです。
テキストの色は、
<font>
タグでも変えられますが、ページ全体にわたる場合は、この方法のほうがHTMLドキュメントが読みやすくなります。
<body text="blue" bgcolor="aqua"> Good afternoon!<br> Good afternoon!<br> Good afternoon! </body>
背景は、単色に限りません。 イメージにすることもできます。 背景イメージ （壁紙）は、ページ全体にタイル状に並べて表示されます。
<body>
タグで
background属性
を用いますと、背景イメージが指定できます。
HTMLファイルとイメージ・ファイルが同じフォルダにある場合、この属性の値はイメージ・ファイルのファイル名です。
<body background="triangle.png"> Good afternoon!<br> Good afternoon!<br> Good afternoon! </body>
背景イメージが目立ちすぎますと、その上のテキストが読みにくくなります。 背景イメージはあまり目立たないものを使ってください。
<body background="zigzag.png"> Good afternoon!<br> Good afternoon!<br> Good afternoon! </body>
規格の上では、
text
属性、
bgcolor
属性、および
background
属性は使わないようにと指示されています。
後でスタイルシートと比較します。
ブラウザは、特に断らない限り、テキストを左に揃えて表示します。
テキストの一部を中央や右に揃えるには、
<div>
タグを用います（DIVision）。
ただし、単に
<div>
〜
</div>
で囲んでも、前後と独立して表示されるだけです。
タグの使い方は次の表に従ってください。
| タグ | 位置揃え |
|---|---|
<div align="left">〜</div> |
左揃え |
<div align="center">〜</div> |
中央揃え |
<div align="right">〜</div> |
右揃え |
align属性
は、
<div>
タグにおいてテキストの揃える位置を示します。
この値を
center
や
right
に変えることによって、中央揃えや右揃えになるのです。
なお、
<div align="center">
〜
</div>
は、
<center>
〜
</center>
と略記できます。
<div align="left">Good afternoon!</div> <div align="center">Good afternoon!</div> <div align="right">Good afternoon!</div>
規格の上では、
<center>
タグも
align
属性も使わないようにと指示されています。
後でスタイルシートと比較します。
数式や化学式などでは、
上付き添字
や
下付き添字
が使われます。
HTMLでは、
<sup>
〜
</sup>
に囲まれると上付き添字（SUPerscript）になり、
<sub>
〜
</sub>
に囲まれると下付き添字（SUBscript）になります。
フォントの大きさによっては、タグが無視されたように表示されることがあります。
f(x) = a<sub>1</sub> x<sup>2</sup> + a<sub>2</sub> x + a<sub>3</sub>
HTMLでは、テキストに
打ち消し線
を施したり、
アンダーライン
を引いたりできます。
<s>
〜
</s>
または
<strike>
〜
</strike>
に囲まれると打ち消し線が施され、
<u>
〜
</u>
に囲まれるとアンダーライン（Underline）が引かれます。
<s>Good afternoon!</s><br> <strike>Good afternoon!</strike><br> <u>Good afternoon!</u>
規格の上では、
<s>
タグ、
<strike>
タグ、および
<u>
タグは使わないようにと指示されています。
後でスタイルシートと比較します。
（大きな）イメージを中央に揃えるには、
<div align="center">
〜
</div>
で囲みます。
しかし、同じ方法で左に揃えますと右側が大きくあきますし、右に揃えますと左側が大きくあきます。
<img>
タグの中で
align属性
を用いますと、このあいている範囲にテキストを
流し込む
ことができます。
以下の要領で書いてください。
| 属性と値 | イメージの位置 |
|---|---|
align="left" |
左揃え |
align="right" |
右揃え |
<img src="link-image.png" alt="A link image"
width="200" height="300"
align="left">
<p>
リンクの構造は図のようになります。
</p>
<p>
次に、フォルダを作成します。
</p>
テキストの
流し込みを解除
するには、
<br>
タグの中で
clear属性
を用います。
以下の要領で指定してください。
| 属性と値 | イメージの位置 |
|---|---|
clear="left" |
左側 |
clear="right" |
右側 |
<img src="link-image.png" alt="A link image"
width="200" height="300"
align="left">
<p>
リンクの構造は図のようになります。
<br clear="left">
</p>
<p>
次に、フォルダを作成します。
</p>
規格の上では、
align
属性も
clear
属性も使わないようにと指示されています。
後でスタイルシートと比較します。
「人名録」のホームページを作成してください。 以下の例を参考にして、有名人や歴史上の人物を3人選び、それらの人々を簡単に紹介してください。 このページのスタイルは、次の指定に従ってください。
font
タグで色を変えるのは禁止。）
h2
タグで書き、アンダーラインを引き、中央揃えにする。
（
a
タグでアンダーラインを引くのは禁止。）
余力のある人は、名前の左端と右端に、コピーまたは自作したイメージを入れてください。
今日の演習4の答案（ホームページのURL）をメールで提出してください。 メールの差出人は学内のアドレス（b04a001@twcu.ac.jpなど）とし、メールの宛先はkonishi@twcu.ac.jpとします。 メールの本文には、学生番号、氏名、科目名、授業日（10月19日）を明記してください。