Basic HTML
Basic HTML

TN00411A.gif (2245 bytes)
Intermediate I

TN00604A.gif (2428 bytes)
Intermediate II


Advanced


DHTML

WB01569_.gif (193 bytes)
Back Home

Section 2- Intermediate HTML

Now that you've gotten a taste of HTML, its time to get down to business. In this section, you'll learn all you need to create a decent web page, with text, graphics, and more!

what.gif (1120 bytes) Formatting your text
what.gif (1120 bytes) Inserting images
what.gif (1120 bytes) Adding links

-Formatting your text

Learning how to format text ranks as one of the most important things to learn in HTML...after all, all documents contain some text inside of it.

-Headers

A header is an extra large, bold text used as, well, headers in a document. Headers are created using the <h?> tag, with ? being a number of 1 to 6 (1 is largest, 6 is smallest). Lets see what I mean:

<h1>Welcome!</h1>

<h2>Welcome!</h2>

<h3>Welcome!</h3>

-Paragraphs

A paragraph can be created in HTML by using the <p> tag. The <p> tag creates a block of text that is separated by a blank line both above and below the block. For example:

<p>This is the first paragraph. This is the first paragraph. This is the first paragraph.</p>

<p>This is the second paragraph. This is the second paragraph. This is the second paragraph.</p>

You can go on to manipulate the alignment of any paragraph by using the align attribute. This attribute accepts three values-left, center, or right. Lets align a paragraph to the right edge of the page:

<p align="right">This is the rightly aligned paragraph. This is the rightly aligned paragraph. This is the rightly aligned paragraph.</p>

-Bold and italic text

Bold and italic text can be created by using the <b> and <i> tag, respectively:

<b>This text is bold</b>

<i>This text is italic</i>

-Changing font color, size, and type

Like any decent word processor, you can also alter the font color, size, and type of the text. The three tags that accomplish this are as follows:

<font color="#FF0000">This text is red</font>

<font size="6">This text is very big!</font>

<font face="Courier">This text is in courier</font>

The valid values for the font color are the hex values of colors- the same values used for background colors. For font size, an integer between 1 and 7 should be used, with 7 representing the largest font. For the font face, use the name of the font type as the value, such as Courier, Arial, etc.

You can easily shove different formatting tags into one big code to create the effect desired. For example, if you want text that is bold, 2 in font size, italic, and Arial in font type, do the below:

<b><i><font size="5" face="Arial">Complex Text</front></i></b>

As you can see, HTML is very flexible, and allows you to throw together various tags to create the desired effect when one by itself cannot do the job.

-Centering text

A <center> tag exists that can be used to wrap around virtually around formatting tag to center it. Here are a couple of examples:

<center><b>This bold text is centered</b></center>

<center><h3>This header is centered as well!</h3></center>

-Inserting Images

Enough with boring text, lets move on to something more colorful- images!

Adding images to your web page can't be simpler (creating them is another story). Images are inserted into a document by using the <img> tag. The below inserts an image called "paperboy.gif":

<img src="paperboy.gif">
PE03257A.gif (4096 bytes)

Two things to notice here. First, all <img> tags have a src attribute, which is required to specify the file path of the image you're inserting (in this case, its paperboy.gif). Second, <img> tags no not have closing tags (ie </img). It's one of those rare cases where a closing tag is not required.

-The width and height attribute of <img>

There's a secret to making your images load faster in a document- use the width and height attribute of the <img> tag. These attributes allows us to explicitly specify the dimensions of the image, thus saving the browser the boring job of having to determine this info itself (thus increasing download time). The above paper boy is 98*100 in dimensions. Lets tell our browser that when defining it, shall we?

<img src="paperboy.gif" width="98" height="100">

The width/height attribute can actually do more than just speed up an image's download. We can use it to also alter the dimensions of the image. Lets blow up the paperboy by giving it a large width and height:

<img src="paperboy.gif" width="200" height="208">
PE03257A.gif (4096 bytes)

Ugly paper boy, from this viewpoint!


-Adding links

What would the WWW be without links? Links represent the essence of the WWW, linking millions and millions of pages from around the world together...what are we waiting for? Lets start linking!

Links are created using the <a> tag. The <a> tag requires a href attribute which specifies the target URL it should follow when the link is clicked on. Here is a text link that goes to Yahoo:

<a  href="http://www.yahoo.com">Click here for Yahoo</a>
Click here for Yahoo

The above link links to an external document on the WWW. You can easily create links that link to a local document within your site. Just supply the complete path of the target document, with the current document the starting point. Here's are some examples:

<a  href="section3.htm">Click here for the next section</a>
Click here for the next section

<a  href="subdir/section3.htm">Click here for the next section</a>
Click here for the next section

The first link assumes that section3.htm is in the same directory as the current page, whereas the second assumes section3.htm is stored in the directory "subdir", a sub directory of the current directory.

-Adding Image links

Once you understand how to create links in general, creating image links are a snap. Just substitute the text with the <img> tag. Why don't we let our paper boy take us to Yahoo when clicked on?

<a href="http://www.yahoo.com"<img src="paperboy.gif"></a>
PE03257A.gif (4096 bytes)

Notice the blue line surrounding the image- this is how an image link appears by default. We can easily get rid of the border by setting the border attribute to 0:

<a href="http://www.yahoo.com"<img src="paperboy.gif" border=0></a>
PE03257A.gif (4096 bytes)

Copyright © 1998 All Rights Reserved.