adv banner
Fun with Transparent PNG Images
by Tommy Maloney
Text & Color
by Depiction.net
Cascading Style Sheets Tutorial
by Michael Bloch
HR Tag Attributes
by John Pollock
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
HTML and CSS tutorials
A collection of free web templates. Premium quality web designs, easy to browse.
Html lessons and tutorials in web page design.
You, too, can design your own website with over 45 interactive HTML tutorials. Also try your hand at JavaScript or check out a search engine submission service.
2 Create a Website
Offers free tutorials on website creation, generating traffic and making money online.
UK Hosting Services
Provider of low cost affordable UK web hosting services.
HTML and CSS  Home HTML and CSS Tutorials The Basics of HTML
rss

The Basics of HTML

Author: Selena Sol More by this author
Browse Pages: << <  3  4  5  6  7 > >>

Added: Oct 03, 2005 Rating:  Less than 3 votes yet Level: Beginner Software:  DreamweaverGoLiveFrontPage

Positioning Text

  • Besides controlling the size of the text, you will also want to control the placement of the text. In HTML placing text is very, very difficult because the language is meant to describe formatting, not layout. For example, since HTML does not really pay attention to white space, you cannot simply tab groups of text over.
  • However, there are a few tags that you can use for basic layout that are discussed in the following table.

    <CENTER> </CENTER>
    Centers the text between the tags

    <BLOCKQUOTE> </BLOCKQUOTE>
    Indents the text between the tags

    <NOBR></NOBR>
    Specifies that the browser should not word wrap the text within the tags.

    <PRE></PRE>
    Specifies that text should be displayed as pre-formatted text. This tag was not exactly meant to be used for positioning text, but it can be. In fact, many web designers have created some very nice ASCII art sites using this tag. Check out Crystal Water's Page for a great example.
  • The following HTML code demonstrates how you might use these tags 

<HTML>
<HEAD>
<TITLE>Text Positioning</TITLE>
</HEAD>
<BODY>

This is normal text
<CENTER>This is centered text</CETNER>
<BLOCKQUOTE>This is blockquoted text</BLOCKQUOTE>
<NOBR>This is <NOBR> text that will
not stop even when the browser wants to word wrap</NOBR>

</BODY>
</HTML>
  • The following figure shows the above HTML in the browser's window.

  • Notice that both the <CENTER> and the <BLOCKQUOTE> tags have an embedded new line character in them although this is browser dependent last I checked.

Text Styles

  • You can also utilize a motley of styles that affect how your text will look. The following table reviews some of the more commonly used styles.

    <ADDRESS></ADDRESS>
    Used for address information usually at the bottom of the page.

    <B> </B>
    Makes the text bold between the tags

    <BASEFONT> </BASEFONT>
    Sets the default font size, color and font face such as <BASEFONT = COLOR = "RED" FACE = "ARIAL" SIZE = "4">. Is overridden by the <FONT> tag.

    <BLINK> </BLINK>
    Makes the text blink.

    <CITE> </CITE>
    Used for displaying quotations

    <CODE> </CODE>
    Fixed width font used for displaying computer code

    <EM> </EM>
    Emphasizes the text, usually by making it italic.

    <FONT> </FONT>
    Changes the look of a font using the same parameters as <BASEFONT> above.

    <I> </I>
    Makes the text italicized

    <KBD> </KBD>
    Displays text in a monospaced font.

    <LISTING> </LISTING>
    Renders fixed-width font

    <PRE> </PRE>
    Specifies pre-formatted text such as programming text.

    <SAMP> </SAMP>
    Yet another fixed-width font.

    <STRIKE> </STRIKE>
    Puts a horizontal line through the text.

    <STRONG> </STRONG>
    Logical style usually used to bold text.

    <SUB> </SUB>
    Displays subscripted text

    <SUP> </SUP>
    Displays superscripted text

    <TT> </TT>
    Displays monospaced text

    <U> </U>
    Underline a bit of text.

    <XMP></XMP>
    Another fixed width specifier like <PRE>
  • Consider the following bit of code that demonstrates the usage of these styles 

<HTML>
<HEAD>

<TITLE>Styles</TITLE>
</HEAD>
<BODY>

<ADDRESS>
My Address
<BR>City, State Zip
</ADDRESS>

<B>This is bold font</B>
<BR><BLINK>This is blinking font</BLINK>
<BR><CITE>This is cited text</CITE>
<BR><CODE>This is code text</CODE>

<BR><EM>This is emphasized text</EM>
<BR><FONT FACE = "Modern" SIZE = "4"
          COLOR = "red">Red, Size 4, Modern Font</FONT>
<BR><I>Italicized font</I>
<BR><B><I>Bolded and italicized font</I></B>

<BR><KBD>Keyboard Font</KBD>
<BR><LISTING>Listing font</LISTING>
<BR><PRE>Pre-formatted font</PRE>
<BR><SAMP>Sample Font</SAMP>

<BR><STRIKE>Strike through font</STRIKE>
<BR>H<SUB>2</SUB>0
<BR>e = mc <SUP>2</SUP>

<BR><U>Underlined Font</U>
<BR><XMP>Example Font</XMP>

</BODY>
</HTML>
  • The following figure shows what the previous code will look like when interpreted by a web browser



print this page tell a friend subscribe to newsletter subscribe to rss
Rate this Material: Bad 1 2 3 4 5 Excellent
Browse Pages: << <  3  4  5  6  7 > >>

HTML and CSS  More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com
Add comments to "The Basics of HTML"