Introduction to HTML

LANGUAGE REFERENCES
HyperText Markup Language (HTML) is a markup language designed for the creation of web
pages with hypertext and other information to be displayed in a web browser. HTML is used to
structure information denoting certain text as headings, paragraphs, lists and so on and can
be used to describe, to some degree, the appearance and semantics of a document. HTML's
grammar structure is the HTML DTD that was created using SGML syntax.
Markup Language combines text and extra information about the text. The extra information,
for example about the text's structure or presentation, is expressed using markup, which is
intermingled with the primary text. The best-known markup language in modern use is HTML
(HyperText Markup Language), one of the foundations of the World Wide Web.
Web page or webpage is a resource on the World Wide Web, usually in HTML/XHTML format
with hypertext links to enable navigation from one page or section to another. Varying filename
extensions can be used, such as .htm, .html, or .php to name a few. Web pages often use graphic
files to provide illustration. A web page is displayed using a web browser, which can have a
Graphical User Interface, like Internet Explorer, Mozilla Firefox, or Opera, or can have a Command
Line Interface, like Lynx.
Hypertext is a user interface paradigm for displaying documents which, according to an early
definition (Nelson 1970), "branch or perform on request." The most frequently discussed form of
hypertext document contains automated cross-references to other documents called hyperlinks.
Selecting a hyperlink causes the computer to display the linked document within a very short
period of time.
Web browser is a software application that enables a user to display and interact with text,
images, and other information typically located on a web page at a website on the World Wide
Web or a local area network. Text and images on a web page can contain hyperlinks to other web
pages at the same or different websites. Web browsers allow a user to quickly and easily access
information provided on many web pages at many websites by traversing these links.
Uniform Resource Locator (URL) is a string of characters conforming to a standardized
format, which refers to a resource on the Internet (such as a document or an image) by its
location.
For
example,
the
URL
of
this
page
on
Wikipedia
is
http://en.wikipedia.org/wiki/Uniform_Resource_Locator.
An HTTP URL, commonly called a web address, is usually shown in the address bar of a web
browser.
Standard Generalized Markup Language (SGML) is a metalanguage in which one can define
markup languages for documents. SGML is a descendant of IBM's Generalized Markup Language
(GML), developed in the 1960s by Charles Goldfarb, Edward Mosher and Raymond Lorie (whose
surname initials also happen to be GML). SGML should not be confused with the Geography
Markup Language (GML) developed by the Open GIS Consortium; cf, or the Game Maker scripting
language, GML.

BRIEF HISTORY
Tim Berners-Lee, who pioneered the use of hypertext for sharing information, created the first
web browser, named WorldWideWeb, in 1990 and introduced it to colleagues at CERN in March
1

1991. Since then the development of web browsers has been inseparably intertwined with the
development of the web itself.
The explosion in popularity of the web was triggered by NCSA Mosaic which was a graphical
browser running originally on Unix but soon ported to the Apple Macintosh and Microsoft
Windows platforms. Version 1.0 was released in September 1993, and was dubbed the killer
application of the Internet. Marc Andreessen, who was the leader of the Mosaic team at NCSA,
quit to form a company that would later be known as Netscape Communications Corporation.
NCSA Mosaic was originally designed and programmed for Unix's X Window System by Marc
Andreessen and Eric Bina at NCSA. Development of Mosaic began in December 1992. Version 1.0
was released on April 22, 1993, followed by two maintenance releases during summer 1993

Markup element types

Structural markup. Describes the purpose of text. For example, : <h2>Golf</h2>

directs the browser to render "Golf" as a second-level heading, similar to the "Markup
element types" title at the start of this section. Structural markup does not denote any
specific rendering, but most web browsers have standardised on how elements should be
formatted. By default, for example, headings like these will appear in large, bold text.
Further styling should be done with Cascading Style Sheets (CSS).
Presentational markup. Describes the appearance of the text, regardless of its function.
For example, <b>boldface</b>
will render "boldface" in bold text. In the majority of cases, using presentational markup is
inappropriate, and presentation should be controlled by using CSS. In the case of both
<b>bold</b> and <i>italic</i> there are elements which usually have an equivalent
visual rendering but are more semantic in nature, namely <strong>strong
emphasis</strong> and <em>emphasis</em> respectively. It is easier to see how an
aural user agent should interpret the latter two elements. Note that most presentational
markup elements have become deprecated under the HTML 4.0 specification, in favour of
CSS based style design.
Hypertext markup. Links parts of the document to other documents.
For example : <a href="http://wikipedia.org/">Wikipedia</a>

HTML element indicates structure in an HTML document. More specifically, it is an SGML

element that meets the requirements of one or more of the HTML Document Type Definitions
(DTDs). HTML elements generally consist of three parts: a start tag marking the beginning of an
element, some amount of content, and an end tag. Elements may represent headings,
paragraphs, hypertext links, lists, embedded media, and a variety of other structures.

Many HTML elements include attributes in their start tags, defining desired behavior. The end
tag is optional for many elements; in a minimal case, an empty element has no content or end
tag. There are a few elements that are not part of any official DTDs, yet are supported by some
browsers and used by some web pages. Such elements may be ignored or displayed improperly
on browsers not supporting them. Informally, HTML elements are sometimes referred to as "tags"
(an example of synecdoche), though many prefer the term tag strictly in reference to the
semantic structures delimiting the start and end of an element.
HTML BASIC STRUCTURE
HTML The first and last tags in a document should always be the HTML tags. These are the tags
that tell a Web browser where the HTML in your document begins and ends. The absolute
most basic of all possible Web documents is: <HTML>
</HTML>
HEAD. The HEAD tags contain all of the document's header information. When I say "header," I
don't mean what appears at the top of the browser window, but things like the document
title and so on. Speaking of which...
TITLE. This container is placed within the HEAD structure. Between the TITLE tags, you should
have the title of your document. This will appear at the top of the browser's title bar, and
also appears in the history list. Finally, the contents of the TITLE container go into your
bookmark file, if you create a bookmark to a page.
BODY. BODY comes after the HEAD structure. Between the BODY tags, you find all of the stuff
that gets displayed in the browser window. All of the text, the graphics, and links, and so
on -- these things occur between the BODY tags. We'll get to what happens there starting
with the next chapter.
So, putting everything we've covered thus far into one file, we have:
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

BASIC TAGS

Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines
the smallest heading.
<h1>This
<h2>This
<h3>This
<h4>This
<h5>This
<h6>This

is
is
is
is
is
is

a
a
a
a
a
a

heading</h1>
heading</h2>
heading</h3>
heading</h4>
heading</h5>
heading</h6>

HTML automatically adds an extra blank line before and after a heading.

Paragraphs
Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML automatically adds an extra blank line before and after a paragraph.

Line Breaks
The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br>
tag forces a line break wherever you place it.
<p>This <br> is a para<br>graph with line breaks</p>
The <br> tag is an empty tag. It has no closing tag.

Comment Tags
If you want to leave yourself notes in an HTML document, but don't want those notes to show
up in the browser window, you need to use the comment tag. To do that, you would do the
following:
<!-- Hi, I'm a comment. -->
Your note would go where the text Hi, I'm a comment. appears. Yes, you do need an
exclamation point after the opening bracket, but not before the closing bracket. That's the way
the standard is written

Text Formatting Tags

Tag

Description

<b>

Defines bold text

<big>

Defines big text

<em>

Defines emphasized text

<i>

Defines italic text

<small>

Defines small text

<strong>

Defines strong text

<sub>

Defines subscripted text

4

<sup>

Defines superscripted text

<ins>

Defines inserted text

<del>

Defines deleted text

<s>

Deprecated. Use <del> instead

<strike>

Deprecated. Use <del> instead

<u>

Deprecated. Use styles instead

HTML Character Entities

Some characters like the < character, have a special meaning in HTML, and therefore cannot be
used in the text.
To display a less than sign (<) in HTML, we have to use a character entity.

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.

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:
Result

Description

Entity Name

Entity Number

non-breaking space

&nbsp;

&#160;

<

less than

&lt;

&#60;

>

greater than

&gt;

&#62;

&

ampersand

&amp;

&#38;

"

quotation mark

&quot;

&#34;

'

apostrophe

&apos; (does not work in

IE)

&#39;

Some Other Commonly Used Character Entities:

5

Result

Description

Entity Name

Entity Number

cent

&cent;

&#162;

pound

&pound;

&#163;

yen

&yen;

&#165;

section

&sect;

&#167;

copyright

&copy;

&#169;

registered trademark

&reg;

&#174;

multiplication

&times;

&#215;

division

&divide;

&#247;

The HTML <font> Tag

The <font> tag in HTML is deprecated. It is supposed to be removed in a future version of
HTML.Even if a lot of people are using it, you should try to avoid it, and use styles instead.

<font color="red"> Sample Text </font>

Font Attributes

Attribute

Example

Purpose

Size="number"

size="2"

Defines the font size

Size="+number"

size="+1"

Increases the font size

size="-number"

size="-1"

Decreases the font size

face="face-name"

face="Times"

Defines the font-name

color="color-value"

color="#eeff00"

Defines the font color

color="color-name"

color="red"

Defines the font color

The <font> tag is deprecated in the latest versions of HTML (HTML 4 and XHTML).
The World Wide Web Consortium (W3C) has removed the <font> tag from its recommendations.
In future versions of HTML, style sheets (CSS) will be used to define the layout and display
properties of HTML elements.

The Image Tag and the Src Attribute

In HTML, images are defined with the <img> tag.
6

The <img> tag is empty, which means that it contains attributes only and it has no closing
tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The
value of the src attribute is the URL of the image you want to display on your page.
The syntax of defining an image:

<img src="url">
The URL points to the location where the image is stored. An image named "boat.gif" located
in the directory "images" on "www.w3schools.com" has the URL:
http://www.w3schools.com/images/boat.gif.
The browser puts the image where the image tag occurs in the document. If you put an image
tag between two paragraphs, the browser shows the first paragraph, then the image, and then
the second paragraph.
The Alt Attribute
The alt attribute is used to define an "alternate text" for an image. The value of the alt
attribute is an author-defined text:

<img src="boat.gif" alt="Big Boat">

The "alt" attribute tells the reader what he or she is missing on a page if the browser can't
load images. The browser will then display the alternate text instead of the image. It is a good
practice to include the "alt" attribute for each image on a page, to improve the display and
usefulness of your document for people who have text-only browsers.

Backgrounds
The <body> tag has two attributes where you can specify backgrounds. The background can
be a color or an image.
Bgcolor
The bgcolor attribute specifies a background-color for an HTML page. The value of this
attribute can be a hexadecimal number, an RGB value, or a color name:

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
Background

The background attribute specifies a background-image for an HTML page. The value of this
attribute is the URL of the image you want to use. If the image is smaller than the browser
window, the image will repeat itself until it fills the entire browser window.
<body background="clouds.gif">
<body background="http://www.w3schools.com/clouds.gif">
The URL can be relative (as in the first line above) or absolute (as in the second line above).
Note: If you want to use a background image, you should keep in mind:
Will the background
Will the background
Will the background
Will the background
Will the background
Basic Notes - Useful

image
image
image
image
image
Tips

increase the loading time too much?

look good with other images on the page?
look good with the text colors on the page?
look good when it is repeated on the page?
take away the focus from the text?

The bgcolor, background, and the text attributes in the <body> tag are deprecated in the
latest versions of HTML (HTML 4 and XHTML). The World Wide Web Consortium (W3C) has
removed these attributes from its recommendations. Style sheets (CSS) should be used instead
(to define the layout and display properties of HTML elements).

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.

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.w3schools.com/" target="_blank">Visit W3Schools!</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 specific section on a page, instead of letting the user
scroll around to find what he/she is looking for. Below is the 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">Useful Tips Section</a>

You should notice that a named anchor is not displayed in a special way.
To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a
URL, like this:
<a href="http://www.w3schools.com/html_links.asp#tips">
Jump to the Useful Tips Section</a>
A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like this:

<a href="#tips">Jump to the Useful Tips Section</a>

Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small black
circles). An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Here is how it looks in a browser:

Coffee
Milk

Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers. An ordered list
starts with the <ol> tag. Each list item starts with the <li> tag.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Here is how it looks in a browser:

1. Coffee
2. Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
9

Definition Lists
A definition list is not a list of items. This is a list of terms and explanation of the terms. A
definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each
definition-list definition starts with the <dd> tag.
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Here is how it looks in a browser:

Coffee
Black hot drink
Milk
White cold drink

Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images,
links, other lists, etc.

List Tags
Tag

Description

<ol>

Defines an ordered list

<ul>

Defines an unordered list

<li>

Defines a list item

<dl>

Defines a definition list

<dt>

Defines a definition term

<dd>

Defines a definition description

Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and
each row is divided into data cells (with the <td> tag). The letters td stands for "table data,"
which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms,
horizontal rules, tables, etc.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How it looks in a browser:

row 1, cell row 1, cell
1
2
row 2, cell row 2, cell
1
2

Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any borders.
Sometimes this can be useful, but most of the time, you want the borders to show.
To display a table with borders, you will have to use the border attribute:
10

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

Headings in a Table
Headings in a table are defined with the <th> tag.
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How it looks in a browser:

Another
Heading
Heading
row 1, cell
row 1, cell 2
1
row 2, cell
row 2, cell 2
1

Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.
<table border="1">
<tr>
<td>row 1, cell 1</td>
How it looks in a browser:
<td>row 1, cell 2</td>
row 1, cell row 1, cell
</tr>
1
2
<tr>
row 2, cell
<td>row 2, cell 1</td>
1
<td></td>
</tr>
</table>
Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays
the border).
To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders
visible:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>&nbsp;</td>
</tr>
</table>

How it looks in a browser:

row 1, cell row 1, cell
1
2
row 2, cell
1

11

Basic Notes - Useful Tips

The <thead>,<tbody> and <tfoot> elements are seldom used, because of bad browser
support. Expect this to change in future versions of XHTML. If you have Internet Explorer 5.0 or
newer, you can view a working example in our XML tutorial.
Table Tags
Tag

Description

<table>

Defines a table

<th>

Defines a table header

<tr>

Defines a table row

<td>

Defines a table cell

Spanning Multiple Rows and Cells

Use rowspan to span multiple rows and colspan to span multiple columns.
Note: if you would like to place headers at the top of your columns, use the <th> tag as
shown below. By default these headers are bold to set them apart from the rest of your table's
content.
<table border="1">
<tr>
<th>Column 1</th>
Column 1 Column 2 Column 3
<th>Column 2</th>
Row 1 Cell Row 1 Cell
<th>Column 3</th>
3
</tr>
Row 1 Cell 2
<tr><td rowspan="2">Row 1 Cell 1</td>
1
Row 2 Cell Row 2 Cell
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
2
3
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell
Row 3 Cell 1
3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
Cell Padding and Spacing
With the cellpadding and cellspacing attributes you will be able to adjust the white space on
your tables. Spacing defines the width of the border, while padding represents the distance
between cell borders and the content within. Color has been added to the table to emphasize
these attributes.
HTML Code:
<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
12

</table>

13