QSL.NET

Home Basics of HTML Handling Text Handling Images HyperLinks The COOL! Stuff

Working with Text in HTML



To display text, or anything for that matter, in your HTML document, it must be between the <BODY> and </BODY> tags.

Look at this example again:

<HTML>
<HEAD>
<TITLE>Howdy World</TITLE>
</HEAD>

<BODY>

<CENTER>HOWDY WORLD!</CENTER>

</BODY>
</HTML>


  • First, the line, <TITLE>Howdy World</TITLE> displays the words, "Howdy World" on the title bar (upper-left corner) of your browser window.

  • Second, the lines <BODY> ... <CENTER>HOWDY WORLD!</CENTER> ... </BODY> display "HOWDY WORLD!" in your browser window. Note that the tags,<CENTER> ... </CENTER> center the words, "HOWDY WORLD!"

Now, lets look at HTML codes for changing text.


Look at this code:

<BODY>
Hello! Welcome to my personal web page. I hope you like it.

I am a HighSchool Senior, who has bit off more than
he can chew. I live near a little town called Benoit in the state
of Wisconsin, land of cheese!

This is my first attempt at a web page. Enjoy!
</BODY>

Here is what the above code looks like:


Hello! Welcome to my personal web page. I hope you like it. I am a HighSchool Senior, who has bit off more than he can chew. I live near a little town called Benoit in the state of Wisconsin, land of cheese! This is my first attempt at a web page. Enjoy!


Things didn't work out quite right! To make the browser end lines and paragraphs correctly, you must put in special markers. Unlike the tags so far, these represent single actions that don't have a "beginning" or "end". They do not come in pairs. To simply end one line and jump to the next, use a line break, or <BR>. To end a line and also show a blank line before beginning anything else, use a paragraph marker <P>. To fix things up, you would edit the above text like this:

<BODY>
Hello! Welcome to my personal web page. I hope you like it.<P>
I am a High School Senior, who has bit off more than<BR>
he can chew. I live near a little town called Benoit in the state<BR>
of Wisconsin, land of cheese!
<P>
This is my first attempt at a web page. Enjoy!
</BODY>

Here is what that above code looks like:


Hello! Welcome to my personal web page. I hope you like it.

I am a High School Senior, who has bit off more than
he can chew. I live near a little town called Benoit in the state
of Wisconsin, land of cheese!

This is my first attempt at a web page. Enjoy!


Much better! Now let's look at some different things that can be done with text.

Physical Text Styles
First, there are style tags. The most basic are for physical styles, such as boldface type. I only know three, all of which are demonstrated below. These have a beginning and end; you must say where the bold type, for example, begins and where it ends.


<B>Boldface type looks like this on your machine</B> <BR>
<I>Italics appear like this.</I> <BR>
<TT>Typewriter text uses a fixed-width font.</TT> <BR>
<B> <I>The styles may be combined as well.</I> </B> <BR>
Here is what the above code looks like:


Boldface type looks like this on your machine
Italics appear like this.
Typewriter text uses a fixed-width font
The styles may be combined as well.

Logical Text Styles and Headings
HTML also includes logical styles. These are more general descriptions, that may be interpreted by each browser differently. They make your document easier to follow and edit. They will also allow your page to conform to local custom; if a journal citation (for example) is typically bold in one country and italicized in another, the use of the logical style <CITE> will cause it to appear correctly in each place. This flexibility also allows users to have text displayed according to their preferences; they could for example have text marked <STRONG> displayed in a different color rather than in boldface.

Take a look at this code and the example below:


<DFN>HTML is the language used for www pages.</DFN>
<CITE>Testing 1 2 3.</CITE>
<CODE>printf("The value of n is %d\n",n)</CODE>
<SAMP>(Abort, Retry, Fail)?</SAMP>
<VAR>username</VAR>
<EM>Is this thing on?</EM>
<KBD>username, host</KBD>
<STRONG>You cannot be serious!</STRONG>
<H1>Level 1 Heading</H1>
<H2>Level 2 Heading</H2>
<H3>Level 3 Heading</H3>
<H4>Level 4 Heading</H4>
<H5>Level 5 Heading</H5>
<H6>Level 6 Heading</H6>

Here is what the above code looks like:


HTML is the language used for www pages.
Testing 1 2 3
printf("The value of n is %d\n",n)
(Abort, Retry, Fail)?
username
Is this thing on?
username, host
You cannot be serious!

Level 1 Heading


Level 2 Heading


Level 3 Heading


Level 4 Heading


Level 5 Heading

Level 6 Heading



Syntax: <FONT SIZE=n COLOR="#nnnnnn"> ... </FONT>

Breakdown:

SIZE=nThe SIZE attribute controls the size of the text. "n" should be an integer {1-7}.

Here is an example of the SIZE attribute: First, the HTML code:


<font size="1">Optimum Est!</font>
<font size="2">Optimum Est!</font>
<font size="3">Optimum Est!</font>
<font size="4">Optimum Est!</font>
<font size="5">Optimum Est!</font>
<font size="6">Optimum Est!</font>
<font size="7">Optimum Est!</font>

Here is the output:



Optimum Est!
Optimum Est!
Optimum Est!
Optimum Est!
Optimum Est!
Optimum Est!
Optimum Est!

It is useful to note that the default SIZE is 3.

On to the next attribute: COLOR

COLOR = #rrggbb or COLOR = color The color attribute sets the color which text will appear on the screen. #rrggbb is a hexadecimal color denoting a RGB color value. Alternately, the color can be set to one the available pre-defined colors.


Example:
<FONT COLOR="#0000FF">This text is blue.</FONT>
<FONT COLOR="blue">This text is also blue.</FONT>

This text is blue.
This text is also blue.



There are two types of lists you can use in your HTML code:
Un-ordered, <UL>
Ordered, <OL>

Here is an example of an Un-ordered list:


<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</ul>

Here's what the code above looks like:


  • Item 1
  • Item 2
  • Item 3

Here is an example of an Ordered list:


<ol>
<li>Item 1
<li>Item 2
<li>Item 3
</ol>

Here's what the code above looks like:


  1. Item 1
  2. Item 2
  3. Item 3


Top