TEXT TAGS

Tony's HTML4 Course


Paragraph
Quotation
Line Break
Centering
Grouping Elements
Basic Listings
Customized Listing
Preformatted Text
Comment
Spacer
Multi-Column Text
Marquee
Text Direction
Pronunciation

star pic Paragraph

Paragraph <p>

<p>This is a first paragraph. 
<p>This is a second paragraph. 

This is a first paragraph.

This is a second paragraph.



Paragraph Alignment
<p align=#> #=left, center, right

<p align=#> #=justify

<p align=left>

This is a first paragraph. This is a great story, isn't it? It is exciting, gorgeous, thrilling, fantastic, and romantic!

<p align=center>

This is a first paragraph. This is a great story, isn't it? It is exciting, gorgeous, thrilling, fantastic, and romantic!

<p align=right>

This is a first paragraph. This is a great story, isn't it? It is exciting, gorgeous, thrilling, fantastic, and romantic!

<p align=justify>

This is a first paragraph. This is a great story, isn't it? It is exciting, gorgeous, thrilling, fantastic, and romantic!



star pic Quotation

<blockquote>...</blockquote>

Her Song:
<blockquote>
When I was young, 
I listened to the radio 
waiting for my favorite songs....
</blockquote>
Her Song:
When I was young, I listened to the radio waiting for my favorite songs....


star pic Line Break

Break Line <br>

How are you?<br>I'm fine.
How are you?
I'm fine.


No Break <nobr>
Soft Break <wbr>

<nobr> 
Close your browser window width, and find how this tag will work!
This is exciting ... <wbr>and romantic!
</nobr>
Close your browser window width, and find how this tag will work! This is a first paragraph. This is a great story, isn't it? It is exciting, gorgeous, thrilling, fantastic, and romantic!

star pic Centering

<center>...</center>

<center>Hello</center>
Hello


star pic Grouping Elements

Division (grouping for text block)     <div> ... </div>

<div class="section">
<H1>1. First Step</H1>
In this section, you have to....
<div class="subsection">
<H2>1-1. Music</H2>
Music is a important language.... 
</div>
</div>

1. First Step

In this section, you have to....

1-1. Music

Music is a important language....


Division Alignment
<div align=#> #=left, center, right

<div align=#> #=justify

<left>

This is a first paragraph. This is a great story, isn't it? It is exciting, gorgeous, thrilling, fantastic, and romantic!

<center>

This is a first paragraph. This is a great story, isn't it? It is exciting, gorgeous, thrilling, fantastic, and romantic!

<right>

This is a first paragraph. This is a great story, isn't it? It is exciting, gorgeous, thrilling, fantastic, and romantic!

<justify>

This is a first paragraph. This is a great story, isn't it? It is exciting, gorgeous, thrilling, fantastic, and romantic!



Span (grouping for word)     <span> ... </span>

PHONE: 
<span class="phone">
000-0000000
</SPAN>
PHONE: 000-0000000


star pic Basic Listings

Unordered list <ul><li>...</ul>

<ul>
<li>Today
<li>Tommorow
</ul>
  • Today
  • Tommorow

<ul><li>ONE
    <ul><li>TWO
        <ul><li>THREE
</ul></ul></ul>
  • ONE
    • TWO
      • THREE

Ordered lists <ol><li>...</ol>

<ol>
<li>Today
<li>Tommorow
</ol>
  1. Today
  2. Tommorow

<ol><li>ONE
    <ol><li>TWO
        <ol><li>THREE
</ol></ol></ol>
  1. ONE
    1. TWO
      1. THREE

Definition lists <dl><dt>...<dd>...</dl>

<dl>
<dt>Today
<dd>Today is yesterday.
<dt>Tomorrow
<dd>Tomorrow is today.
</dl>
Today
Today will be yesterday.
Tomorrow
Tomorrow will be today.

Directory lists <dir><li>...</dir>

<dir>
<li>Today
<li>Yesterday
</dir>
  • Today
  • Yesterday

  • Menu lists <menu><li>...</menu>

    <menu>
    <li>Today
    <li>Yesterday
    </menu>
  • Today
  • Yesterday


  • star pic Customized listing

    Mark Styles <li type=#> #=disk, circle, square

    <ul>
    <li type=disc>ONE
    <li type=circle>TWO
    <li type=square>THREE
    </ul>
    • ONE
    • TWO
    • THREE


    Capital Letters <li type=#> #=A, a, I, i, 1

    <ol>
    <li type=A>ONE-ONE
    <li>ONE-TWO
    </ol>
    1. ONE-ONE
    2. ONE-TWO

    <ol>
    <li type=a>ONE-ONE
    <li>ONE-TWO
    </ol>
    1. ONE-ONE
    2. ONE-TWO

    <ol>
    <li type=I>ONE-ONE
    <li>ONE-TWO
    </ol>
    1. ONE-ONE
    2. ONE-TWO

    <ol>
    <li type=i>ONE-ONE
    <li>ONE-TWO
    </ol>
    1. ONE-ONE
    2. ONE-TWO

    <ol>
    <li type=1>ONE-ONE
    <li>ONE-TWO
    </ol>
    1. ONE-ONE
    2. ONE-TWO



    List started number <ol start=#> #=number

    <ol start=5>
    <li type=A>ONE-ONE
    <li>ONE-TWO
    	<ol start=10>
    	<li>TWO-ONE
    	<li type=i>TWO-ONE
    </ol></ol>

    1. ONE-ONE
    2. ONE-TWO
      1. TWO-ONE
      2. TWO-TWO

    Definition lists Compact <dl compact>

    <dl compact>
    <dt>Today
    <dd>Today is yesterday.
    <dt>Tomorrow
    <dd>Tomorrow is today.
    </dl>
    Today
    Today will be yesterday.
    Next
    Tomorrow will be today.


    star pic Preformatted Text

    <pre>...</pre>

    <pre>
    Please use your card.
    VISA    Master
    <b>Here is an order form.</b>
    <ul><li>Fax
    <li>Air Mail</ul>
    </pre>
    Please use your card
    VISA    Master
    Here is an order form.
    
    • Fax
    • Air Mail


    <listing>...</listing>

    <listing>
    Please use your card.
    VISA    Master
    <b>Here is an order form.</b>
    <ul><li>Fax
    <li>Air Mail</ul>
    </listing>
    Please use your card VISA Master Here is an order form.
    • Fax
    • Air Mail


    <xmp>...</xmp>

    <xmp>
    Please use your card.
    VISA    Master
    <b>Here is an order form.</b>
    <ul><li>Fax
    <li>Air Mail</ul>
    </xmp>
    Please use your card VISA Master <b>Here is an order form.</b> <ul><li>Fax <li>Air Mail</ul>


    star pic Comment

    <!-- ... -->

    CACE 1
    <!-- this is a test -->
    CACE 1

    <comment>...</comment>

    CACE 1
    <comment>this is a test</comment>
    
    CACE 1this is a test


    star pic Spacer

    <spacer type="horizontal" size=#> #=horizontal space
    <spacer type="vertical" size=#> #=vertical space

    YESTERDAY 
    <pspacer type="horizontal" size=50> TODAY
    <spacer type="vertical" size=50> TOMORROW
    YESTERDAY TODAY TOMORROW

    <spacer type="block" width=# height=# align=-->
    #=space size
    --=top, middle, bottom, left, right

    <spacer type="block" width=150 height=50 align=left>
    YESTERDAY<br> TODAY<br> TOMORROW
    
    YESTERDAY
    TODAY
    TOMORROW


    star pic Multi-Column Text

    <multicol cols=#> ... </multicol> #=Column Number

    <multicol cols=2>
    text text text...
    </multicol>
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

    <multicol gutter=#> ... </multicol> #=Space between Columns

    <multicol cols=2 gutter=100>
    text text text...
    </multicol>
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

    <multicol width=#> ... </multicol> #=Column Width

    <multicol cols=2 width=400>
    text text text...
    </multicol>
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

    star pic Marquee

    Marquee <marquee>...</marquee>

    <marquee>Hi, I can move !</marquee>
    
    Hi, I can move !

    star pic Text Direction

    <bdo dir="#">...</bdo>     #=ltr, rtl

    <bdo dir="rtl">
    Today is fine! <BR>
    !enif si yadoT
    </bdo>
    Today is fine!
    !enif si yadoT

    star pic Pronunciation

    <RUBY> #1 <RT> #2 </RUBY>
    #1=Base text, #2=Pronunciation

    <RUBY>
       <img src="pic/1.gif">
       <RT>Network Communication Design
    </RUBY>
    
    star pic Network Communication Design




    Back to Top

    Back to HTML Index Page

    Page | Font | Text | Image | Form | Table | Frame | Objects | XML

    Please e-mail me at:d4188@hotmail.com
    <script language="JavaScript">document.write("<no" + "script>")</script> </HTML>