Basic HTML

Basic HTML
Table of Contents
HTML...................................................................................................................... 4
Head and Title Tags............................................................................................ 4
The <head> Tag:............................................................................................. 4
The <title> Tag:.............................................................................................. 4
Basic Text Formatting in HTML...........................................................................4
Making Text appear BOLD:.............................................................................. 4
Making Text appear in ITALICS:........................................................................5
Underlining Text:............................................................................................. 5
Strike Through:................................................................................................ 5
Preformatted Text:........................................................................................... 5
Making text appear BIGGER:...........................................................................6
Making text appear smaller:............................................................................6
Super Script:.................................................................................................... 6
Sub Script:....................................................................................................... 6
Cantering the Text:.......................................................................................... 6
The Font Tag....................................................................................................... 7
Changing the size:........................................................................................... 7
Changing the color:......................................................................................... 7
Changing the font face:................................................................................... 7
Basefont Tag....................................................................................................... 7
The Body Tag...................................................................................................... 8
Setting Background Color:............................................................................... 8
Setting Background image:............................................................................. 8
HTML Headings................................................................................................... 8
Level 2 Heading.................................................................................................. 9
Level 3 Heading............................................................................................... 9
Heading alignment:......................................................................................... 9
Level 2 Heading Left aligned..............................................................................9
Level 2 Heading Centered..................................................................................9
Level 2 Heading Right aligned............................................................................ 9
Level 2 Heading Justified.....Note that the heading will only justify itself if it is
more than a single line...................................................................................... 9
Paragraphs and Line Breaks............................................................................... 9
The paragraph tag:.......................................................................................... 9
1 | Page
Paragraph Alignment:.................................................................................... 10
HTML Lists........................................................................................................ 10
1. Unordered List........................................................................................... 10
2. Ordered List............................................................................................... 11
3. Definition List............................................................................................ 11
Nesting HTML Lists.............................................................................................. 11
The Output is:................................................................................................ 12
Adding Comments in HTML.................................................................................. 12
Adding Special Characters in HTML.....................................................................12
HTML Tables......................................................................................................... 13
Advanced HTML Tables........................................................................................ 14
The attributes of <table> tag:......................................................................14
Controlling Cell contents:.............................................................................. 15
Table Nesting:............................................................................................... 16
Relative and Absolute Paths in HTML................................................................16
Absolute Paths:.............................................................................................. 16
Relative Paths:............................................................................................... 16
Image handling in HTML................................................................................... 17
Web page with an Image.................................................................................. 17
Web page with an Image.................................................................................. 18
Advanced image handling in HTML...................................................................18
Changing the size of an Image:....................................................................18
The output will be:........................................................................................ 19
Normal Size of Image....................................................................................... 19
Smaller Size of Image...................................................................................... 19
Bigger Size of Image........................................................................................ 19
Converting Images to Links:.........................................................................19
HTML Links....................................................................................................... 20
Adding External Links:..................................................................................20
The HR Tag.................................................................................................... 20
HTML Bookmarks.............................................................................................. 20
Header Part................................................................................................... 20
Advanced HTML Links....................................................................................... 21
Opening links in a new browser window:......................................................21
Email Links....................................................................................................... 21
Simple Text Animation...................................................................................... 22
2 | Page
Simple text scrolling:..................................................................................... 22

Scrolling text in both directions (alternatively):.............................................22
Changing the background color the Scrolling text:........................................22
Advanced Text Animation................................................................................. 22
Simple Image Animation..................................................................................23
Simple Image scrolling:................................................................................23
Scrolling Image in both directions (alternatively):........................................23
Changing the background color of the MARQUEE:........................................23
Advanced Image Animation..............................................................................24
LOOP=" "....................................................................................................... 24
WIDTH=" "..................................................................................................... 24
DIRECTION=" ".............................................................................................. 24
HTML Forms...................................................................................................... 24
Text box and Textarea...................................................................................... 25
HTML Form Elements:.................................................................................... 25
Radio, Select and Checkbox............................................................................. 26
Radio Option:................................................................................................. 26
Select Field:................................................................................................... 26
Check Box:.................................................................................................... 26
HTML Button Fields........................................................................................... 26
Reset Buttons:............................................................................................... 27
Submit Button:.............................................................................................. 27
Meta Tags......................................................................................................... 27
Refreshing and Redirecting...............................................................................28
Lesser Known HTML Tags................................................................................. 28
Appendix 1........................................................................................................... 31
Working with Colors in HTML............................................................................31
3 | Page
HTML
This HTML tutorial, has been written to help the absolute beginners learn the HyperText Markup
Language quickly and without any difficulty. Most of the basic concepts of HTML like text
formatting, lists, comments, image handling, tables, HTML entities, links, forms and meta
information tags are explained in simple language. This HTML tutorial assumes no prior
experience. We have made every effort to make this tutorial useful for every HTML learner.
Head and Title Tags

The <head> Tag:
The contents in a normal HTML web page are enclosed in <html> and </html>
tags. The first tag after the <html> tag in a normal HTML page is the <head>
tag. The <head> tag contains other tags containing meta-information of the
page. One such tag is <title> tag that is discussed in the following text. Other
tags containing meta information will be discussed later.
The <title> Tag:
When we start writing our HTML, the first thing we encounter is the title of our page. Title appears
at the caption bar of the browser window. So every good HTML page needs a title. Here is what
you need to add a title to your web page:
<title>This is my web page's title</title>
You can write the text of your own choice. Be sure to write a meaningful title for your web page.
The title should reflect the contents of the web page. It is like a topic sentence. A good title text
contains up to 20 words.
The <title> and </title> should be surrounded by the <head> and </head> tags. If it is placed
anywhere outside, it will not work. For Example:
<HEAD>
<TITLE>
This is my web pages title
</TITLE>
<HEAD>
Basic Text Formatting in HTML

In this lesson we will learn about the text formatting capabilities of HTML. Before we proceed,
recall from lesson one that every html web page is enclosed between <html> and </html> tags.
Everything between<body> and </body> tags is displayed in a web browser window. To
experiment with the coming tags, you need to write them within <body> and </body> tags.
Making Text appear BOLD:

To make the text appear as bold just place your text between <b> and </b> tags.
<b>This text is bold</b>

Output:
This text is bold
4 | Page
The same effect can also be obtained by using <strong> and </strong> tags.
Making Text appear in ITALICS:

To make your text appear in Italics just place it between <i> and </i> tags.
<i>This text is ITALIC</i>

The same effect can also be obtained by using <em> and </em> tags.
Output:
This text is ITALIC
Underlining Text:
The text has to be surrounded by <u> and </u> tags to get it underlined.
<u>This Text is underlined</u>

Output:
This Text is underlined
Strike Through:
To make the text appear strike through, we need to enclose it within <strike> and </strike> tags.
<strike>Strike Through Text</strike>

Output:
Strike Through Text
Writing in Type Writer Style:

To make your text appear in type writer style, also called in HTML as fixed width font, add <tt> to
the beginning of the text and </tt> to the end.
<tt>This is fixed width font</tt>

Output:
This is fixed width font
Preformatted Text:
Have you ever noticed that the browsers ignore extra blank space / white space characters and
line spacing? However, sometimes it becomes necessary to add extra spacing between text and
lines. The solution is the <pre> tag. Everything enclosed within <pre> and </pre> tags appear as
preformatted.
<pre>This
pre
Output:
This
pre
text
text
is
formated</pre>
is
formated
5 | Page
Making text appear BIGGER:

To make your text slightly BIGGER, enclose your text with <big> and </big> tags.
<big>This text is BIG</big>

Output:
This text is BIG
Making text appear smaller:

To make your text appear smaller, enclose your text with <small> and </small> tags.
<small>This text is small</small>

Output:
This text is small
Super Script:
In mathematical equations we often need super script text. To add super script <sup> and </sup>
tags are used.
This text is <sup>super
script
</sup>
Output:
This text is
super script
Sub Script:
In mathematical equations, like super script text, we also need sub script text. To add sub script
<sub> and </sub> tags are used.
This text is <sub>sub
script
</sub>
Output:
This text is
sub script
Cantering the Text:

If you need to center the text, simply put your text within <center> and </center> tags.
<center>This Text is Centered</center>

Output:
This Text is Centered
Apart from just text, you can make anything (images, tables etc.) appear in the center of your web
page by surrounding it with the <center> and </center> tags.
6 | Page
The Font Tag

The <font> tag in HTML is used to control the font face, color and size of text. Its end tag is
</font>.
Changing the size:

The size of text can be controlled with the size attribute of the font tag. It takes the value from 1
to 7. 1 being the smallest size and 7 being the largest.
<font size="1">Font Size 1</font> <br>

<font size="7">Font Size 7</font>
Font Size 1
Font Size 7
Changing the color:
The color attribute can be used to change the color of the text. It can take the color name in
RGB Hexa or it can take one of the color names available see Appendix 1.
<font color="pink">
This is pink text.
</font>
<font color="#FF0000">
This is Red text.
</font>
This is pink text.
This is Red text.
Changing the font face:

<font
face="Arial">This
text
is
in
Arial
Font</font>
<font face="Courier">This text is in Courier Font</font>
<br>
This text is in Arial Font

This text is in Courier Font
Basefont Tag
Recall from the previous lesson where we learned that the <font> tag is used to control the font
face, size and color of the text written between <font> and </font> tags. But, what if you need to
control the font properties of the whole html web page. If you are thinking that you would open
the <font> tag just after the <body> tag and close the font tag i.e. </font> just before </body>
tag, you get full marks. But what if you need to use arial as your html web page's default font, and
courier font at selected places. You may still use <font> tag to achieve this, but don't you think
that your web page's code would become a bit messier. So, what is the solution?
<basefont> tag solves our above problem. The <basefont> tag can be used to control the font
face, color and size of a web page's text. When you use <basefont> tag to set the default text
7 | Page
properties, you can always use <font> tag to switch to another font and when you close the
</font> tag, the properties you set with the <basefont> are applied again, automatically.
<basefont> tag has no closing tag. In current day's browsers this tag works fine, no matter
whereever you use it. However, it is recommended that you use this tag anywhere before <body>
tag.
Example:
<basefont color="pink" size="5" face="Courier New, Courier, mono">

The above code sets the default text color to pink, its size to 5 and the font face is set to Courier
New, Courier, mono.
You can play with <basefont> tag's color, face and size attributes.
The Body Tag

The <body> and </body> tags of an HTML web page contain all the stuff that is displayed in a
browser. We can control the appearance of a web page by using different attributes of the <body>
tag.
Setting Background Color:

The default background color of a web page is white. We can change the default background color
by using the bgcolor attribute of the <body> tag.
<body bgcolor="gray">
The above HTML code will set the background color to gray. You can either specify the color name
or RGB hexa value of the color. A list of common colors is available see Appendix 1.
Setting Background image:

You can set the background image of a web page as under:
<body background="logo.jpg">
The background attribute of the <body> tag specifies the location of the image file to be
displayed in the background of the web page. It takes an absolute or a relative path of the image
file. A discussion of absolute and relative paths will come in a later lesson.
HTML Headings
You must already be familiar with the Headings. A heading is a title at the head of a page or
section of a book etc. There are six levels of headings in HTML.
H1 is the highest level of headings followed by H2, H3, H4, H5 and H6. H1 is considered the most
significant or important. The importance decreases as the heading number increases.
Heading should be used judiciously. Normally heading level 1 is used for top level or main headings
and heading level 2 and 3 for sub-headings.
Adding a heading in an HTML page is fairly straight forward, just place your heading text between
the <h1> and </h1> tags. In the following text all levels of headings are shown.
<h1>Level
<h2>Level
<h3>Level
1
2
3
Heading</h1>
Heading</h2>
Heading</h3>
8 | Page
<h4>Level
<h5>Level
<h6>Level 6 Heading</h6>
4
5
Heading</h4>
Heading</h5>
The Result is as under:
Level 1 Heading
Level 2 Heading
Level 3 Heading
Level 4 Heading
Level 5 Heading
Level 6 Heading
Heading alignment:
Heading alignment can be controlled by using the align attribute. The align attribute takes the
values; left, right, center or justify.
<h2 align="left">Level 2 Heading Left aligned</h2>
Level 2 Heading Left aligned

<h2 align="center">Level 2 Heading Centered</h2>
Level 2 Heading Centered

<h2 align="right">Level 2 Heading Right aligned</h2>
Level 2 Heading Right aligned

<h2 align="justify">Level 2 Heading Justified.....Note that the heading
will only justify itself if it is more than a single line...</h2>
Level 2 Heading Justified.....Note that the heading will only

justify itself if it is more than a single line...
Paragraphs and Line Breaks
Usually in our writings, we separate the blocks of text called paragraphs by adding extra blank
lines in between. HTML treats all text as one single paragraph unless we add paragraph markers
around each paragraph of text. These paragraph markers produce one blank line in between blocks
of text.
The paragraph tag:

Start Tag: <p>
End Tag: </p>
<p>This is first paragraph</p>

<p>This is second paragraph</p>
The result is:
9 | Page
This is first paragraph

This is second paragraph
Note that the browser automatically inserts a blank line between paragraphs.
Paragraph Alignment:
Paragraph alignment can be controlled by using the align attribute. The align attribute takes the
values; left, right, center or justify.
<p align="left">Paragraph Left aligned</p>

Paragraph Left aligned
<p align="center">Paragraph Centered</p>

Paragraph Centered
<p align="right">Paragraph Right aligned</h2>

Paragraph Right aligned
<p align="justify">Paragraph Justified.....Note that the paragraph will

only justify itself if it is more than a single line...</h2>
Paragraph Justified.....Note that the paragraph will only justify itself if it is more than a single
line...
Sometimes we need to have a line break instead of having a paragraph break. In these cases we
can use <br>. It is a stand-alone tag and does not have a matching end tag.
This is Line One. <br> This is Line Two.

The Result is:
This is Line One.
This is Line Two.
HTML Lists
HTML supports three types of lists. Let's try to understand them one by one.
1. Unordered List
An unordered list has the following format:
First Item
Second Item
Third Item
HTML code for the above unordered list is very simple. The whole list is enclosed between <ul>
and </ul> tags. Each list item is described using <li> and </li> tags.
<ul>
10 | P a g e
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
2. Ordered List
The second kind of html list is an Ordered List, also called a numbered list. A simple Ordered List is
as under:
1.
First Item
2.
Second Item
3.
Third Item
HTML code for the above ordered list is very simple. The whole list is enclosed between <ol> and
</ol> tags. Each list item is described using <li> and </li> tags.
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
3. Definition List
The last kind of list that HTML supports is called a definition list. It is so called because it is in the
format of a TERM followed by its DEFINITION. A simple definition list is as under:
First Item
Text describing the First Item
Second Item
Text describing the Second Item
Third Item
Text describing the Third Item
HTML code for the above definition list is very simple. The whole list is enclosed between <dl> and
</dl> tags. Each term is described using <dt> and </dt> and the definition using <dd> and
</dd>.
<dl>
<dt>First Item </dt>
<dd>Text describing the First Item</dd>
<dt>Second Item</dt>
<dd>Text describing the Second Item</dd>
<dt>Third Item </dt>
<dd>Text describing the Third Item</dd>
</dl>
Nesting HTML Lists

Sometimes it become necessary to nest lists. One particular example is the index of a book. HTML
allows nesting of lists. Following is an example of the nesting of lists for upto 3 levels.
<ol>
<li>Level 1 Item 1</li>

<ul>
11 | P a g e

<ul>
</ul>
</ul>
</ol>
The Output is:

1.
Level 1 Item 1
2.
Level 1 Item 2
o
o
3.
Level 2 Item 1
Level 3 Item 1
Level 3 Item 2
Level 2 Item 2
Level 1 Item 3
You can nest your lists up to as many levels you like, but remember this nesting should not harm
the readability of your content.
Adding Comments in HTML

Comments are very important in keeping track of the coding. Comments are not displayed by the
web browser, so they remain invisible to anyone who visits your web page. The only way you can
have a look at them is to view the source of your html page in any of the text editors. As the
comments are not displayed by the browser, you can leave yourself notes so that you don't forget
something when you come back later to redesign the page.
The method of inserting comments in an html page is very simple. Just start your comments with
 at the end.

Your comments can span multiple lines, as long as you start your comments with 
<!-This comment
spans on more
than one line
-->
Caution: Never write anything confidential in html comments. Comments are not displayed by the
web browser, but remember anyone can view them by viewing the source of the web page.
12 | P a g e
Adding Special Characters in HTML

Sometimes we need to add some special characters like a copyright symbol or signs like <, $, &
and so on. These special characters are called HTML entities. In this Lesson we will show you
how you can add these HTML entities to your web pages.
An HTML entity has three parts: an ampersand (&), an entity name or a # and an entity number,
and finally a semicolon (;).
For example if we need to display a less than (<) sign in our web page, we will write: < or
<
A question arises: What is the difference between the entity name and the entity number? The
answer is very simple; Traditionally HTML used to support entity numbers and later the capability
of entity names was also added. Most web designers feel comfortable with the entity names as
they are easier to remember.
Some commonly used HTML Entities

Entity
Description
Name
Number
non-breaking space

<
less than
<
<
>
greater than
>
>
&
ampersand
&
&
"
quotation mark
"
"
cent
¢
¢
pound
£
£
yen
¥
¥
euro
€
€
section
§
§
copyright
©
©
registered trademark
®
®
multiplication
×
×
division
÷
÷
HTML Tables
You probably know already what a table is. To just remind you; a table is an arrangement of
vertical columns and horizontal rows. The intersection of a row with a column is called a cell. We
can add just about anything inside the cells like links, images, headings, paragraphs and lists etc.
The creation of a table in HTML is very simple and easy. A table in HTML begins with <table> and
ends with </table>. Between these tags <tr> and </tr> is used to specify rows. <td> and </td>
is used to specify a cell.
<table border="1">
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>Mr. A</td>
<td>10 Years</td>
</tr>
<tr>
13 | P a g e
<td>Mr. B</td>
<td>20 Years</td>
</tr>
<tr>
<td>Mr. Z</td>
<td>60 Years</td>
</tr>
</table>
This HTML will be displayed as:
Name
Age
Mr. A
10 Years
Mr. B
20 Years
Mr. Z
60 Years
Note that the border attribute above specifies the thickness of the horizontal and verticals lines
across the above table.
We can specify that the first row of the table is headings by using <th> and </th> tags.
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Mr. A</td>
<td>10 Years</td>
</tr>
<tr>
<td>Mr. B</td>
<td>20 Years</td>
</tr>
<tr>
<td>Mr. Z</td>
<td>60 Years</td>
</tr>
</table>
Name
Age
Mr. A
10 Years
Mr. B
20 Years
Mr. Z
60 Years
In the next lesson we will be exploring html tables in some detail.
Advanced HTML Tables

We can control the behaviour of tables with the help of its attributes. In this lesson you will learn
to use the attributes of the <table> tag.
The attributes of <table> tag:

We can change the appearance of a table by using its attributes.
14 | P a g e
cellspacing=" "
This attribute is used to add space around each cell. It takes a whole number as its value.
cellpadding=" "
This attribute adds space inside each cell. It takes a whole number as its value.
border=" "
This attribute specifies the size of the border line of a table. It takes a whole number as its vlaue.
width=""
By using the width attribute we can control the width of a table. It takes a value in pixels or the
percentage of the total page width.
<table cellspacing="2" cellpadding="3" border="5" width="100%">

<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Mr. A</td>
<td>10 Years</td>
</tr>
<tr>
<td>Mr. B</td>
<td>20 Years</td>
</tr>
<tr>
<td>Mr. Z</td>
<td>60 Years</td>
</tr>
</table>
Name
Age
Mr. A
10 Years
Mr. B
20 Years
Mr. Z
60 Years
Controlling Cell contents:

Next we are going to discuss how HTML controls the contents of cells. First of all we will see how
we can align the content of our cells.
align=""
This attribute aligns the content of the cell. It can take the values; left, right or center.
bgcolor=""
This attribute sets the background color of a single cell if used with <td> and it sets the
background color of the whole row if it is used with <tr>. It can take the color value as Hex or one
of the color names available See Appendix 1.
<table cellspacing="2" cellpadding="3" border="5" width="100%">

<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td align="left">Mr. A--Left aligned</td>
15 | P a g e
<td align="right">10 Years--Right aligned</td>

</tr>
<tr>
<td align="center">Mr. B--Centered</td>
<td bgcolor="pink">20 Years</td>
</tr>
<tr bgcolor="#FF0000">
<td>Mr. Z</td>
<td>60 Years</td>
</tr>
</table>
Name
Age
Mr. A--Left aligned

Mr. B--Centered
Mr. Z
10 Years--Right aligned
20 Years
60 Years
Table Nesting:
Tables can also be nested by adding <table> and </table> tags within <td> and </td> tags of the
enclosing <table>.
<table>
<tr>
<td>
<table>
<tr><td>first nested table</td></tr></table>
</td>
<td>
<table><tr><td>second nested table</td></tr></table>
</td>
</tr>
<table>
You can make your tables as complicated as you want. But remember to make them as complex as
you can easily handle.
Relative and Absolute Paths in HTML

When adding links and images to our web pages, we can specify their location or path in one of
the two ways namely; absolute path and relative path.
Absolute Paths:
Absolute path refers to the location of the file with reference to the root directory, in the case of a
file system, or full web address in the case of a domain name.
For example:
C:\myWeb\images\logo.jpg
http://www.domainname.com/images/logo.jpg
The first one is the example of an absolute path of the image file in the local file system and the
second one is the example of an absolute path of an image file on a web server.
16 | P a g e
Relative Paths:
Relative path refers to the location of the file with reference to the current directory. For example if
you are currently working in a directory named myWeb and want to refer to the image file named
logo.jpg located in a directory named images stored inside myWeb directory, you can point to it
using its relative path as under:
images\logo.jpg
In this case you need not to specify full file system path.
In the case of a web server if your html file is on the root and your image file logo.jpg is stored in
the images folder, you can point to it using its relative path as under:
images/logo.jpg
Please note the difference between referencing a file on a file system and on a web server. On a
file system \ is used and on a web server / is used. While writing HTML you will most often
encounter web server / type paths. Please don't mix them as the file system example has been
given just as a reference.
Image handling in HTML

It is a famous saying that "A picture is worth a thousand words".
Web pages containing only text look lifeless. Images not only add beauty to a web page they also
bring life to web pages. Almost every web page has some kind of images on it. In this lesson we
will be showing you how you can add images to your web pages.
HTML supports many image formats. The most commonly used formats are GIF and JPEG. JPEG is
used for photographic quality images and GIF is used for other types of images.
Before going any further you should have an understanding of relative path and absolute path and
the difference between the two.
We use <img src="path"> tag, where path is the absolute or relative path of the image file.
<img> tag has no ending tag. It is one of the stand-alone tags of HTML.
<h2>Web page with an Image</h2>

<img src="logo.jpg">
The above HTML will result in the following output:
Web page with an Image
Here the src attribute takes the relative path of the image file. It could also take the full absolute
path of the image file. The resultant code with the same output would have been:

<img src="http://pickatutorial.com/resources/logo.jpg">
17 | P a g e
By default the image appears aligned to the left. If we want to see it in the center, we could place
<center> tag around the <img> tag, as under:

<center>
</center>
Web page with an Image
Advanced image handling in HTML

You already know how to add an image to your web page. Here we will show you some advanced
image handling with HTML.
Changing the size of an Image:
If you are not satisfied with the size of the image you can change its appearance size with the help
of width and height attributes of the <img> tag.
<h2>Normal Size of Image</h2>

<h2>Smaller Size of Image</h2>
<img src="logo.jpg" width="100" height="50">
<h2>Bigger Size of Image</h2>
<img src="logo.jpg" width="300" height="250">
18 | P a g e
The output will be:
Normal Size of Image
Smaller Size of Image
Bigger Size of Image
The alt attribute is used to define an "alternate text" for an image. In case the browser can't load
the image, it displays the alternate text in the box reserved for the image. The alt attribute can
take a string of text as its value:
<img src="logo.jpg" alt="Logo Image">

Converting Images to Links:
We can very easily convert images to links by surrounding the <img> tag with the <a href> tag:
<a
href="http://pickatutorial.com"><img
Image"></a>
src="logo.jpg"
alt="Logo
The anchor tag <a></a> is explained in the next section.
HTML Links
On the internet you must have already encountered with the clickable text or images called links.
When you click on these links they take you somewhere else.
19 | P a g e
In HTML we have two types of links; internal and external. In this lesson we discuss external links
and the discussion of internal links is left for the following pages.
Adding External Links:
The external links are defined with the <a> called anchor tag. The target page is defined by
assigning the relative or absolute path to the anchor tag's href attribute. Lets see how we can link
to the Google search engine's home page:
<a href="http://www.google.com">This is Google home page.</a>

This result will be:
This is Google home page.
The text between the <a> and the </a> is used as the caption or description for the link. The
browser normally displays the link text in blue underlined text.
The above is the example of a link to a different website. If you need to add a link to your own
domain, you can specify its relative or absolute path to the anchor tag's href attribute.
<a href="http://pickatutorial.com/tutorial/html/thehrtag.htm"> The HR Tag

</a>
<a href="thehrtag.htm">Text Marquee</a>
The result will be:
The HR Tag
The HR Tag
Note that both of the links point to one, single web page. The only difference is that the href
attribute of the first link takes an absolute path and the other takes a relative path.
HTML Bookmarks
Internal links are also called bookmarks. We can use internal links to go on a specific point on a
long web page. To use internal links first we need to name different parts of our page. These
names are then used to jump to the different sections of a web page.
We can specify a name in the following way:
<a name="header">Header Part</a>

The result will be:
Header Part
The above HTML specifies a name header with the caption Header Part. Note that you can use any
string as the value of the name attribute. In short the text "Header Part" has been named as
header, which we can reference anywhere in our HTML.
<a href="#header">To Header</a>

The result will be:
To Header
20 | P a g e
Internal links are specified by using # prefix, the # sign tells the browser that the destination of
the links is within the same page. When the above link is clicked you are taken to the internal link
name header, which we created earlier.
Advanced HTML Links

Opening links in a new browser window:
When we click on a text or an image link, the default behavior of the browser is to open it in the
present window. We can control this behavior and force the browser to open our link in a new
window by using anchor <a> tag's target attribute, as under:
<a href="http://www.pickatutorial.com" target="_blank" >Computer

Programming Tutorials</a>
Computer Programming Tutorials
If you click on the above link, the browser will open it in a new window. The value _blank that is
assigned to the target attribute asks the browser that the link should be opened in a new blank
window. Image Links:
We can also use images as links. We just need to enclose the <img> tag within the <a> and </a>
tags.
<a href="http://pickatutorial.com">
<img src="../resources/logo.jpg"></a>
The result will be:
Email Links
By now you have already learned how to add simple text and image links to your html web pages.
In this lesson we will learn how to add email links to our html web pages.
Email links are not different from the normal hyperlinks. We use the same anchor <a> tag for the
email links too. The only difference is the value of the href attribute. Instead of assigning it a web
address, we assign it with an email address by prefixing mailto:. As is given below:
<a href="mailto:farooq_fl@yahoo.com">Email Me!!!</a>

The result will be:
Email Me!!!
When you click on the above link, your default email program will open for you to send ma an
email, with my email address already filled in the to field.
We can specify the subject of the message inside the anchor tag, as under:
<a href="mailto:farooq_fl@yahoo.com?subject=subject line">

Email Me!!!</a>
We can also add cc recipients and / or bcc recipients' email addresses.
21 | P a g e
<a href="mailto:farooq_fl@yahoo.com?cc=myfriend@domainname.com">
Email Me!!!</a>
<a href="mailto:farooq_fl@yahoo.com?bcc=myfriend@domainname.com">
Email Me!!!</a>
We can combine the subject, cc and bcc options together by using an & sign at the end of each
option, except for the last option.
<a href="mailto:farooq_fl@yahoo.com?
subject=subject line&bcc=myfriend@domainname.com&cc
=myotherfriend@domainname.com">Email Me!!!</a>
Simple Text Animation

In this lesson you will learn how you can add a simple text animation to your html web pages.
The marquee tag adds a kind of text / image animation to a web page. It is used to scroll text /
image across a web page. Here we will be showing you how to scroll text using the Marquee tag.
Start Tag: <marquee>

End Tag: </marquee>
Simple text scrolling:

<marquee> Some....Scrolling.....Text </marquee>
The above markup results in the following output:
Scrolling text in both directions (alternatively):

<marquee behavior="alternate">Some..Scrolling..Text</marquee>
The value of behavior attribute i.e. alternate causes the text to scroll in both directions,
alternatively.
Changing the background color the Scrolling text:

<marquee bgcolor="pink">Some..Scrolling..Text</marquee>
The value of the bgcolor attribute determines the background color the scrolling text. A complete
color list can be found see Appendix 1.
Advanced Text Animation

By using different attributes of the marquee tag, we can use this tag in a number of different
ways.
LOOP=" "
The value of this attribute can be any whole number. For example if you want your text to scroll
twice then you must use '2' as its value. This will tell the browser to scroll the text 2 times.
LOOP="1" will scroll the text only once.
<marquee loop="2" bgcolor="pink">

I will loop only twice.
</marquee>
WIDTH=" "
This gives you control on the width of the marquee. The number of pixels, or a percentage of the
screen can be used as its value.
22 | P a g e
<marquee width="250" bgcolor="pink">

This marquee is 250 pixels wide.
</marquee>
DIRECTION=" "
This attribute defines the direction of the marquee. It can take the values LEFT, RIGHT, UP or
DOWN.
<marquee bgcolor="pink" direction="up">

I am going upwards.
</MARQUEE>
Simple Image Animation

Image marquee works in the same way as the text marquee does. The same marquee tag is used
to scroll the image. However we replace the text with the 'img' tag. Let's see how it works:
Start Tag: <marquee>

End Tag: </marquee>
Simple Image scrolling:
<marquee><img src="logo.jpg"></marquee>
The above markup results in the image disappearing off the screen and re-appearing at the
opposite side.
Scrolling Image in both directions (alternatively):
<marquee behavior="alternate"><img src="logo.jpg"></marquee>

The above markup results in the image moving back and forth across the screen.
The value of behavior attribute i.e. alternate causes the image to scroll in both directions,
alternatively.
Changing the background color of the MARQUEE:
<marquee bgcolor="pink"><img src="logo.jpg"></marquee>

The above markup results in the marque being displayed with a pink background.
The value of the bgcolor attribute determines the background color of the MARQUEE. A complete
color list can be found in Appendix 1.
Advanced Image Animation

By using different attributes of the marquee tag, we can use this tag in a number of different
ways.
LOOP=" "
The value of this attribute can be any whole number. For example if you want your image to scroll
twice then you must use '2' as its value. This will tell the browser to scroll the image 2 times.
LOOP="1" will scroll it only once.
<marquee loop="2" bgcolor="pink">

<img src="logo.jpg"></marquee>
The above image will loop only twice.
WIDTH=" "
This gives you control on the width of the marquee. The number of pixels, or a percentage of the
screen can be used as its value.
23 | P a g e
<marquee width="250" bgcolor="pink">

<img src="logo.jpg"></marquee>
The above marquee is 250 pixels wide.
DIRECTION=" "
This attribute defines the direction of the marquee. It can take the values LEFT, RIGHT, UP or
DOWN.
<marquee bgcolor="pink" direction="up" width="250"><imgsrc="logo.jpg">

</marquee>
The image is scrolling upwards..
HTML Forms
When we convert simple HTML pages into interactive applications, we need to get user input to be
processed at the server side. A particular example is gmail, where user inputs its ID and password
to access the gmail mail system.
Forms:
The data to a server-side program from a web page is supplied using an HTML form. The idea
behind an HTML form is the same as that of a normal paper form. User is presented with a number
of fields to input data.
A form contains many different types of input elements that allow the user to enter information.
These input elements contain text fields, text area, drop-downs, radio buttons and check boxes
etc. They are combined together inside <form> and </form> tags. The values of all the input
elements are submitted to the server-side program whose URL is given in the action attribute of
the <form> tag..
<form action="ServerSideProgram">Form elements go here
</form>
When submitted, the browser will direct the user data to ServerSideProgram. A single web page
can have any number of forms on it.
Text box and Textarea

HTML Form Elements:
Text Field:
Text field or text box is used to enter text data. A text field is added to a web page as under:
This is a text field <input type="text" name="text">

The output will be:
This is a text field
24 | P a g e
Most of the form elements are added using the <input> tag. The value of the type attribute
specifies the kind of the element. The name attribute is used at the server-side to access the user
entered data.
Password Field:
The password field can be added as under:
This is a password field <input type="password" name="pw">

The output will be:
This is a password field
The password field is the same as the text field with only one difference. When entering data in a
password field, the user cannot see it. The data appears as all asterisks (*).
Textarea Field:
The text field is a single line input field. If we want a multiline text input field we use a textarea
field. The required code to add a textarea field is as under:
This is a textarea field <textarea name="textarea" rows="10"

cols="35"></textarea>
The output will be:
This is a textarea field
The height and width of a textarea field can be controlled using the cols and rows attributes of
the <textarea> tag. You can increase or decrease them in order to get a bigger or a smaller
textarea field.
Radio, Select and Checkbox

Radio Option:
The radio option is used when we need to offer the user one of the given options. The code
required to add radio option to an HTML form is as under: This is a radio option<input
type="radio" name="rd">
The output will be:
This is a radio option
25 | P a g e
Select Field:
The select field is like a drop-down menu. It can be added to a web page as under:
This
<select
<option>Item
<option>Item
<option>Item
</select>
is
select
field
name="test">
1</option>
2</option>
3</option>
The output will be:

This is a select field
Item 1
<select> tag is used to define a select field. <option> tags enclosed within <select> and
</select> tags specify different options that will be available to the user. You can add as many
<option> tags as you need.
Check Box:
A check box can be added to a web page as under:
This is a checkbox<input type="checkbox" name="chb">

The output will be:
This is a checkbox
We use checkboxes when we require the user to choose any number of items from the given list of
items.
HTML Button Fields

There are three types of buttons in HTML, i.e., simple buttons, reset buttons and submit buttons.
Simple Buttons can be added as under:
This is a button<input type="button" value="Test Button" name="btn">

The output will be:
This is a button
Buttons are used to initiate an action, when a user clicks on them. The value of the value attribute
appears on the button face.
Reset Buttons:
Reset buttons can be added as under:
This is a reset button<input type="reset">

The output will be:
This is a reset button
26 | P a g e
Reset
Reset buttons in a form are used to clear the contents of the form. When the user clicks on a reset
button the contents of every form element is reset. In the case of a reset button we do not need to
use the value and name attributes, but we can if we want to.
Submit Button:
Every form usually has a submit button. When the user clicks on a submit button it submits the
data to the sever. A submit button can be added as under:
This is a submit button<input type="submit"> </form>

The output will be:
This is a submit button
Submit
Like a reset button, we need not to specify the value and the name attributes, but we can if we
want to.
Meta Tags
The <head> and </head> tags surround other tags that define the meta-information about the
current page. This information includes page title (already explained in a previous lesson), a
description of the page, important keywords and so on.
In this lesson we will discuss how we can help search engines catagorize our web pages, by adding
some meta information about them in their HTML code.
Describing the Content of a web page:
When we search something on a search engine, the results we get contain a link to the web page
along with a short description of the page. We can provide the description of our web page as
under:
<meta name="description" content="The description of your web page goes

here.">
You can add the description text as long as you want. A good description is about 60 to 80 words
long.
Declaring the Keywords of a web page:
Search engines catagorise web pages using the keywords that are provides in the meta
information of a web page. You can declare the keywords of your web pages as under:
<meta name="keywords" content="keyword 1, keyword 2, keyword 3">

You can add as many keywords you want. Be sure you add only the relevant keywords. 20 to 30
keywords are enough.
27 | P a g e
Refreshing and Redirecting

Sometimes there is a need to refresh a web page after a certain amount of time. A perfect
example might be a news website or a sports, particularly cricket, website. If you want ot refresh
your web page automatically after a certain time, you can take advantage of the refresh attribute
of the <meta> tag.
Note that the refresh meta tag must come before the <title> tag, else it will not work. You can add
the following code to refresh your web page after 2 seconds:
<meta http-equiv="refresh" content="5">

This page will automatically refresh in 5 seconds. You can increase / decrease the time before
refresh by using the content attribute of the above meta tag.
Suppose you have moved you web page, for some reason, and you want to automatically redirect
your visitors to the new address, you could achieve your purpose by adding the following code to
your web page:
<meta http-equiv="refresh" content="2

;URL=http://www.domainname.com/new.htm">
The page will automatically redirect in 2 seconds. The content attribute tells the browser to go to
the specified URL in 2 seconds. For a redirect 2 seconds are enough, but for a refresh you might
need to increase the number of seconds before the page refreshes. The number of seconds and
the URL are separated by the use of a semicolon (;). Note that URL is not a separate attribute of
the above meta tag.
Lesser Known HTML Tags

If you have come to this lesson after reading all the previous lessons, you can safely claim that
you know the basics of HTML and can design a cool web page. In this lesson we are going to
discuss some of the less known HTML tags.
<button>
Till now you used the following code to add a button to your html web form:
This is a button<input type="button" value="Test Button" name="btn">

The above code could also be written by utilizing the <button> tag.
Example:
This is a button<button type="button" name="btn">Test Button</button>

Output:
Test Button
The type attribute of the <button> tag specifies the type of the button, which could be button,
reset or submit.
<ins>
<ins> tag underlines the text appearing between <ins> and </ins>, as if it was inserted between
the original text.
Example:
28 | P a g e
In this sentence <ins>this text is inserted</ins>, while this one is not.

Output:
In this sentence this text is inserted, while this one is not.
<del>
<del> tag strikes through the text appearing between <del> and </del>, as if it was deleted from
the original text.
Example:
From this sentence <del>this text is deleted</del>, while this one is not.
Output:
From this sentence this text is deleted, while this one is not.
<address>
<address> tag can be used to add an address to a web page. It does nothing but to make the text
appear between <address> and </address> in italics.
Example:
<address>
Here <address> tag is used.
</address>
Output:
Here address tag is used.
<blink>
The text written between <blink> and </blink> will continuously blink.
Example:
<blink>This text is blinking. </blink>

Output:
This text is blinking.
<blockquote>
Whenever you need to put a block of quoted text you can utilize <blockquote> tag. The text
written between <blockquote> and </blockquote> appears slightly indented on the web page.
Example:
<blockquote>This one is an example of blockqute tag. Make sure that the

quoted block of text is more than a single line to see how blockquote tag
works.</blockquote>
29 | P a g e
Output:
This one is an example of blockqute tag. Make sure that the quoted block of text is more than a
single line to see how blockquote tag works.
30 | P a g e
Appendix 1
Working with Colors in HTML
We can add colors to many HTML tags like <font>, <body>, <hr> and so on. Colors add some life
to our web pages. In HTML we can specify colors in two ways:
1.
By using a hexadecimal notation for the combination of Red, Green and Blue values (RGB)
2.
By using color names
In the case of a color name, you can simply mention the color name like Red.
<hr color="red">
In the case of using a hexadecimal (RGB) value, you can specify it as under:
<hr color="#FF0000">
The value RGB value FF0000 is for the color Red. Note that we have to prefix the RGB hexa value
with the # sign.
Following is a list of HTML colors supported by most of the modern browsers:
31 | P a g e
Color Name
RGB Hexa
AliceBlue
#F0F8FF
AntiqueWhite
#FAEBD7
Aqua
#00FFFF
Aquamarine
#7FFFD4
Azure
#F0FFFF
Beige
#F5F5DC
Bisque
#FFE4C4
Black
#000000
BlanchedAlmond
#FFEBCD
Blue
#0000FF
BlueViolet
#8A2BE2
Brown
#A52A2A
BurlyWood
#DEB887
CadetBlue
#5F9EA0
Chartreuse
#7FFF00
Chocolate
#D2691E
Coral
#FF7F50
CornflowerBlue
#6495ED
Cornsilk
#FFF8DC
Crimson
#DC143C
Cyan
#00FFFF
DarkBlue
#00008B
DarkCyan
#008B8B
DarkGoldenRod
#B8860B
DarkGray
#A9A9A9
DarkGrey
#A9A9A9
DarkGreen
#006400
DarkKhaki
#BDB76B
Color
32 | P a g e
DarkMagenta
#8B008B
DarkOliveGreen
#556B2F
Darkorange
#FF8C00
DarkOrchid
#9932CC
DarkRed
#8B0000
DarkSalmon
#E9967A
DarkSeaGreen
#8FBC8F
DarkSlateBlue
#483D8B
DarkSlateGray
#2F4F4F
DarkSlateGrey
#2F4F4F
DarkTurquoise
#00CED1
DarkViolet
#9400D3
DeepPink
#FF1493
DeepSkyBlue
#00BFFF
DimGray
#696969
DimGrey
#696969
DodgerBlue
#1E90FF
FireBrick
#B22222
FloralWhite
#FFFAF0
ForestGreen
#228B22
Fuchsia
#FF00FF
Gainsboro
#DCDCDC
GhostWhite
#F8F8FF
Gold
#FFD700
GoldenRod
#DAA520
Gray
#808080
Grey
#808080
Green
#008000
GreenYellow
#ADFF2F
33 | P a g e
HoneyDew
#F0FFF0
HotPink
#FF69B4
IndianRed
#CD5C5C
Indigo
#4B0082
Ivory
#FFFFF0
Khaki
#F0E68C
Lavender
#E6E6FA
LavenderBlush
#FFF0F5
LawnGreen
#7CFC00
LemonChiffon
#FFFACD
LightBlue
#ADD8E6
LightCoral
#F08080
LightCyan
#E0FFFF
LightGoldenRodYellow
#FAFAD2
LightGray
#D3D3D3
LightGrey
#D3D3D3
LightGreen
#90EE90
LightPink
#FFB6C1
LightSalmon
#FFA07A
LightSeaGreen
#20B2AA
LightSkyBlue
#87CEFA
LightSlateGray
#778899
LightSlateGrey
#778899
LightSteelBlue
#B0C4DE
LightYellow
#FFFFE0
Lime
#00FF00
LimeGreen
#32CD32
Linen
#FAF0E6
Magenta
#FF00FF
34 | P a g e
Maroon
#800000
MediumAquaMarine
#66CDAA
MediumBlue
#0000CD
MediumOrchid
#BA55D3
MediumPurple
#9370D8
MediumSeaGreen
#3CB371
MediumSlateBlue
#7B68EE
MediumSpringGreen
#00FA9A
MediumTurquoise
#48D1CC
MediumVioletRed
#C71585
MidnightBlue
#191970
MintCream
#F5FFFA
MistyRose
#FFE4E1
Moccasin
#FFE4B5
NavajoWhite
#FFDEAD
Navy
#000080
OldLace
#FDF5E6
Olive
#808000
OliveDrab
#6B8E23
Orange
#FFA500
OrangeRed
#FF4500
Orchid
#DA70D6
PaleGoldenRod
#EEE8AA
PaleGreen
#98FB98
PaleTurquoise
#AFEEEE
PaleVioletRed
#D87093
PapayaWhip
#FFEFD5
PeachPuff
#FFDAB9
Peru
#CD853F
35 | P a g e
Pink
#FFC0CB
Plum
#DDA0DD
PowderBlue
#B0E0E6
Purple
#800080
Red
#FF0000
RosyBrown
#BC8F8F
RoyalBlue
#4169E1
SaddleBrown
#8B4513
Salmon
#FA8072
SandyBrown
#F4A460
SeaGreen
#2E8B57
SeaShell
#FFF5EE
Sienna
#A0522D
Silver
#C0C0C0
SkyBlue
#87CEEB
SlateBlue
#6A5ACD
SlateGray
#708090
SlateGrey
#708090
Snow
#FFFAFA
SpringGreen
#00FF7F
SteelBlue
#4682B4
Tan
#D2B48C
Teal
#008080
Thistle
#D8BFD8
Tomato
#FF6347
Turquoise
#40E0D0
Violet
#EE82EE
Wheat
#F5DEB3
White
#FFFFFF
36 | P a g e
WhiteSmoke
#F5F5F5
Yellow
#FFFF00
YellowGreen
#9ACD32
37 | P a g e

Basic HTML

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Basic HTML

Загружено:

Авторское право:

Доступные форматы

Basic HTML

Simple text scrolling:..................................................................................... 22

Head and Title Tags

Basic Text Formatting in HTML

Making Text appear BOLD:

<b>This text is bold</b>

Making Text appear in ITALICS:

<i>This text is ITALIC</i>

<u>This Text is underlined</u>

<strike>Strike Through Text</strike>

Writing in Type Writer Style:

<tt>This is fixed width font</tt>

This is fixed width font

Making text appear BIGGER:

<big>This text is BIG</big>

This text is BIG

Making text appear smaller:

<small>This text is small</small>

This text is <sup>super

This text is <sub>sub

Cantering the Text:

<center>This Text is Centered</center>

The Font Tag

Changing the size:

<font size="1">Font Size 1</font> <br>

Changing the font face:

This text is in Arial Font

<basefont color="pink" size="5" face="Courier New, Courier, mono">

The Body Tag

Setting Background Color:

Setting Background image:

The Result is as under:

<h2 align="left">Level 2 Heading Left aligned</h2>

Level 2 Heading Left aligned

Level 2 Heading Centered

Level 2 Heading Right aligned

Level 2 Heading Justified.....Note that the heading will only

The paragraph tag:

<p>This is first paragraph</p>

This is first paragraph

<p align="left">Paragraph Left aligned</p>

<p align="center">Paragraph Centered</p>

<p align="right">Paragraph Right aligned</h2>

<p align="justify">Paragraph Justified.....Note that the paragraph will

This is Line One. <br> This is Line Two.

Nesting HTML Lists

<li>Level 1 Item 1</li>

<li>Level 2 Item 1</li>

The Output is:

Adding Comments in HTML

Adding Special Characters in HTML

Some commonly used HTML Entities

In the next lesson we will be exploring html tables in some detail.

Advanced HTML Tables

The attributes of <table> tag:

<table cellspacing="2" cellpadding="3" border="5" width="100%">

Controlling Cell contents:

<table cellspacing="2" cellpadding="3" border="5" width="100%">

<td align="right">10 Years--Right aligned</td>

Mr. A--Left aligned

Relative and Absolute Paths in HTML

Image handling in HTML

<h2>Web page with an Image</h2>

Web page with an Image