How to View HTML Source

Have you ever seen a Web page and wondered "How do they do that?"

To find out, simply click on the VIEW option in your browsers toolbar and select SOURCE or PAGE SOURCE. This will open a window that shows you the actual HTML of the page.

Remember that you can save the source file, and use it as a template for your own Web pages.

Text Formatting Tags:

NN: Netscape, IE: Internet Explorer

"Computer Output" Tags:

Citations, Quotations, Definition Tags:

Character Entities

Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in the HTML source.

A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;).

To display a less than sign in an HTML document we must write: &lt; or &#60;

The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage is that not all browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers.

Note that the entities are case sensitive. 

This example lets you experiment with character entities: 

Non-breaking Space

The most common character entity in HTML is the non-breaking space.

Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add spaces to your text, use the &nbsp; character entity.

The Most Common Character Entities:

Some other Commonly Used Character Entities:

HTML Links

HTML uses a hyperlink to link to another document on the Web.

The Anchor Tag and the href Attribute

HTML uses the <a> (anchor) tag to create a link to another document.

An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.

The syntax of creating an anchor: 

<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

This anchor defines a link to :

<a href="http://www.karachiplus.com/">Visit Us!</a>

The line above will look like this in a browser:

The Target Attribute

With the target attribute, you can define where the linked document will be opened.

The line below will open the document in a new browser window:

<a href="http://www.karachiplus.com/"
target="_blank">Visit karachiplus!</a>

The Anchor Tag and the Name Attribute

The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specified section on a page, instead of letting the user scroll around to find what he/she is looking for.

Syntax of a named anchor:

<a name="label">Text to be displayed</a>

The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use.

The line below defines a named anchor:

<a name="tips">Read the Useful Tips section</a>

You should notice that a named anchor does not display in a special way.

To link to the named anchor you add a # sign and the name of the anchor to the end of the URL, like this:

<a href="http://www.karachiplus.com/html_links.asp#tips">
Read the Useful Tips section</a>

The line above will take the user straight to the text within the anchor <a name="tips">... </a> within the file "html_links.asp".

A hyperlink to the Useful Tips section from within the file "html_links.asp" will use this syntax: 

<a href="#tips">Useful Tips</a>

Link Tags and Targets:

NN: Netscape, IE: Internet Explorer