eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
Resources
 ::   Tutorials
 ::   Presentations
Perl & CGI tutorials
 ::   Intro to Perl/CGI and HTML Forms
 ::   Intro to Windows Perl
 ::   Intro to Perl 5
 ::   Intro to Perl
 ::   Intro to Perl Taint mode
 ::   Sherlock Holmes and the Case of the Broken CGI Script
 ::   Writing COM Components in Perl

Java tutorials
 ::   Intro to Java
 ::   Cross Browser Java

Misc technical tutorials
 ::   Intro to The Web Application Development Environment
 ::   Introduction to XML
 ::   Intro to Web Design
 ::   Intro to Web Security
 ::   Databases for Web Developers
 ::   UNIX for Web Developers
 ::   Intro to Adobe Photoshop
 ::   Web Programming 101
 ::   Introduction to Microsoft DNA

Misc non-technical tutorials
 ::   Misc Technopreneurship Docs
 ::   What is a Webmaster?
 ::   What is the open source business model?
 ::   Technical writing
 ::   Small and mid-sized businesses on the Web

Offsite tutorials
 ::   ISAPI Perl Primer
 ::   Serving up web server basics
 ::   Introduction to Java (Parts 1 and 2) in Slovak

 
Introducton to Web Design
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.

Opening Tag Closing Tag Description
<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

Previous Page | Next Page