HTMLでは、テキストをイタリック体（斜体）、ボールド体（太字）などにすることができます。 フォントの切り換えは以下の表に従ってください。 タグを組み合わせることにより、ボールドイタリック体などにもできます。 ただし、システムに適切なフォントがなければ、タグが無視されたように表示されます。
| タグ | フォント・スタイル | 覚え方 |
|---|---|---|
<B>〜</B> |
ボールド体 | Bold |
<I>〜</I> |
イタリック体 | Italic |
<TT>〜</TT> |
タイプライタ体 | Typewriter Type |
オリジナル: 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>
と書きますと、思ったように表示されません。
HTMLでは、テキストの色と背景の色を変えることができます。
<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="リンクのイメージ" align="left"> <P> リンクの構造は図のようになります。 </P> <P> 次に、フォルダを作成します。 </P>
テキストの流し込みを解除するには、
<BR>
タグの中で
clear
属性を用います。
以下の要領で指定してください。
| 属性と値 | 画像の位置 |
|---|---|
clear="left" |
左側 |
clear="right" |
右側 |
<IMG src="link-image.png" alt="リンクのイメージ" align="left"> <P> リンクの構造は図のようになります。 <BR clear="left"> </P> <P> 次に、フォルダを作成します。 </P>
規格の上では、
align
属性も
clear
属性も使わないように指示されています。
代わりに、スタイルシートを使うように勧められています。
「未来日記」のウェブ・ページを作成してください。 以下の例を参考にして、未来の日付を3つ選び、その日の日記を想像で書いてください。 このページのスタイルは、次の指定に従ってください。
FONT
タグで色を変えるのは禁止。）
H2
タグで書き、アンダーラインを引き、中央揃えにする。
（
A
タグでアンダーラインを引くのは禁止。）
ファイル名は、report11.htmlとしてください。
今日の演習11の答案（URL）をメールで提出してください。 差出人は学内のメール・アドレス（b04a001@cis.twcu.ac.jpなど）とし、宛先はkonishi@cis.twcu.ac.jpとします。 メールの本文には、学生番号、氏名、科目名、授業日（12月12日、12月21日）を明記してください。