1.見出し     <hn> ~文字列~ </hn>

HTMLの指定
画面表示

<H1>見出しサンプル Head1</H1>

<H2>見出しサンプル Head2</H2>

<H3>見出しサンプル Head3</H3>

<H4>見出しサンプル Head4</H4>

<H5>見出しサンプル Head5</H5>

<H6>見出しサンプル Head6</H6>


<H2 style="text-align:left">見出し(Head2 left)</H2>

<H3 style="text-align:center">見出し(Head3 center)</H3>

<H4 style="text-align:rght">見出し(Head4 right)</H4>


見出しサンプル Head1

見出しサンプル Head2

見出しサンプル Head3

見出しサンプル Head4

見出しサンプル Head5
見出しサンプル Head6

見出し(Head2 left)

見出し(Head3 center)

見出し(Head4 right)




 2.段落     <p> ~段落の文字列~ </p>

HTMLの指定
画面表示

<p>ここには、比較的長い文章を入れることができます。これが段落になります。段落のことを英語でParagraphといいます。HTMLではPタグを使用します。</p>

<p align="left">短い段落です。(left)</p>

<p align="center">短い段落です。(center)</p>

<p align="right">短い段落です。(right)</p>

   ※align属性:HTML5では廃止

ここには、比較的長い文章を入れることができます。これが段落になります。段落のことを英語でParagraphといいます。HTMLではPタグを使用します。

短い段落です。(left)

短い段落です。(center)

短い段落です。(right)





 3.文字の大きさ   ※font要素:HTML5では廃止

HTMLの指定
画面表示

<span style="font-size:200%">文字の大きさ(200%)</span>

<span style="font-size:70%">文字の大きさ(70%)</span>

<span style="font-size:100%">文字の大きさ(100%)</span>

<span style="font-size:1.5em">文字の大きさ(1.5em)</span>

<span style="font-size:10.5pt">文字の大きさ(10.5pt)</span>

<span style="font-size:40px">文字の大きさ(40px)</span>

文字の大きさ(200%)
文字の大きさ(70%)

文字の大きさ(100%)

文字の大きさ(1.5em)

文字の大きさ(10.5pt)

文字の大きさ(40px)

<font size="1">文字の大きさ size=1</font>

<font size="2">文字の大きさ size=2</font>

<font size="3">文字の大きさ size=3</font>

<font size="4">文字の大きさ size=4</font>

<font size="5">文字の大きさ size=5</font>

<font size="6">文字の大きさ size=6</font>

<font size="7">文字の大きさ =7</font>

一部の文字だけを<font size="+2">+2大きく</font>する

   ※font要素 <font size = "サイズ指定"> :HTML5では廃止

文字の大きさ size=1

文字の大きさ size=2

文字の大きさ size=3


文字の大きさ size=4

文字の大きさ size=5
文字の大きさ size=6
文字の大きさ =7
一部の文字だけを+2大きくする



 4.文字の色   

HTMLの指定
画面表示
<span style="color:red">文字の色を変えます</span>

<span style="color:blue">文字の色を変えます</span>

<span style="color:#ff66ff">文字の色を変えます</span>

<span style="color:maroon ; font-size:150%">文字の色とサイズを変えます</span>
文字の色を変えます

文字の色を変えます

文字の色を変えます

文字の色とサイズを変えます

 ◇ページ全体に背景を付けたい場合は、bodyタグで以下のように指定する。
   ・背景(単色)の場合 → <body bgcolor="色指定" >
   ・壁紙(画像)の場合 → <body background="画像ファイル名" >

    ※bgcolor、background属性:HTML5では廃止



 5.いろいろな文字飾り     

HTMLの指定
画面表示
<b>文字飾り 太文字(Bold)</b>

<i>文字飾り 斜体(Italic)</i>

<u>文字飾り 下線(Underline)</u>

<s>文字飾り 取り消し線(Strike through)</s>

文字飾り <sup>上付き文字(Super script)</sup>

文字飾り <sub>下付き文字(Sub script)</sub>
文字飾り 太文字(Bold)

文字飾り 斜体(Italic)

文字飾り 下線(Underline)


文字飾り 取り消し線(Strike through)


文字飾り 上付き文字(Super script)

文字飾り 下付き文字(Sub script)




 6.水平線(horizon)    <hr>    ※size、noshade、width、align属性:HTML5では廃止

HTMLの指定
画面表示
<hr>


<hr size="5">


<hr size="5" noshade>


<hr width="50%" align="center">

(指定なし)

(SIZE=5の場合)

(SIZE=5 影なしの場合 )

(長さ50%でセンタリングした場合)



 7.ブロック要素の生成     <div> ~文字列~ </div>

HTMLの指定
画面表示
<div id="mainContent">
div要素自体は、特定の意味を持ちませんが、コンテンツをグループ化してブロック要素を生成します。CSSと組み合わせてデザインを適用するときなどに利用します。
</div>

div要素自体は、特定の意味を持ちませんが、コンテンツをグループ化してブロック要素を生成します。CSSと組み合わせてデザインを適用するときなどに利用します。



 8.整形済みテキスト     <pre> ~文字列~ </pre>

HTMLの指定
画面表示
<pre>
  見たままを表示できます。
      Z
     Z Z
    Z   Z
   ZZZZZZZ
</pre>

  見たままを表示できます。
      Z
     Z Z
    Z   Z
   ZZZZZZZ