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="white">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に従ってホームページを作成し、そのファイル名をkonishi@twcu.ac.jpあてにメールで報告してください。 メールには、学生番号、氏名、科目名、授業の日付け(5/1)を明記してください。