Chapter 1 HTML

HTML
Introduction to HTML
Tim Berners-Lee , a British physicist
working at CERN labs in Switzerland
at the time (1989), is the inventor of
HTML, and is often also credited as
the inventor of www.
HTML is based on SGML (Standard
Generalized Markup Langauge),
which existed since 1940s, but
without the ability to link
He suggested that you could actually
link the text in the files themselves,
through an agreed-upon mark-up
language
Markup languagesare designed
for the processing, definition and
presentation of text.
Thelanguagespecifies code for
formatting, both the layout and style,
within a text file.
The code used to specify the formatting
are called tags.
HTML is a an example of a widely known
and usedmarkup language
What is HTML?
Hyper Text Markup Language
Hypertext refers to the way in
which Web pages (HTML documents)
are linked together. Thus, the link
available on a webpage is called
Hypertext.
What is HTML?
Hyper Text Markup Language
As its name suggests, HTML is a
Markup Language which means
you use HTML to simply "mark-up" a
text document with tags that tell a
Web browser how to structure it to
display
What is HTML?
HTML is a computer language that
is used to create documents on the
World Wide Web.
HTML is very simple, and logical. It
reads from left to right, top to bottom
and uses plain text
What is HTML?
HTML is NOT a programming
language, but a mark-up language
that uses <Tags> like this.
The websites you view on the
internet are actually text files that
consist of HTML Tags
The only thing HTML does is it tells a
browser how to display the text
HTML is designed to work on a wide
variety of platforms
Graphical workstations
Network computers
TV sets etc
Advantages of HTML
It is simple
It is case insensitive
Flexible
Free of cost
Structural building up
Disadvantages
Dynamic web pages cannot be
created with HTML
HTML doesnt pass information to
pages
All the browsers may not support all
the tags of HTML
Basic HTML Document

<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
Either you can use Try it option available

at the top right corner of the code box
to check the result of this HTML code or
Let's save it in an HTML file test.htm
using your favorite text editor.
Finally open it using a web browser like
Internet Explorer or Google Chrome, or
Firefox etc.
It must show the following output:
Output
Introduction to WWW
TheWorld Wide Web(WWW / W3) is
anopen sourceinformation
spacewhere documents and
otherweb resourcesare identified
byURLs, interlinked
byhypertextlinks, and can be
accessed via theInternet.
It has become known simply asthe
Web
Introduction to WWW
TheWWW includes few billions of
files i.e. text, images, audio, video,
animations or programs stored on
tens and thousands of computers
(Web servers) all over the world.
The web is the largest and most
diverse collection of information
grouped in one place
Introduction to W3C
W3C stands for the World Wide Web (W3)
Consortium.
W3C is working to make the web
accessible to all users
Today, the World Wide Web Consortium
(W3C) is an international consortium
(group) where member organizations, a
full-time staff, and the public work
together to develop Web standards.
Introduction to W3C
Tim Berners-Lee is the Director of the
W3C
Objective of W3C is To lead the
WWW to its full potential by
developing various protocols and
guidelines that may ensure long-term
growth of the web.
HTMLEditors
Write HTML Using Notepad or TextEdit
HTML can be edited by using
professional HTML editors like:
Microsoft WebMatrix
Sublime Text
However, a text editor like Notepad

(PC) or TextEdit (Mac) is a good way
to learn HTML.
Follow the 4 steps below to create

your first web page with Notepad
Step 1: Open Notepad
Step 2: Write Some HTML
Step 3: Save the HTML Page (.html
extension)
View HTML Page in Your Browser
HTML Documents
All HTML documents must start with
a type declaration:<!DOCTYPE
html>.
The HTML document itself begins
with<html>and ends
with</html>.
The visible part of the HTML
document is
Example
<!DOCTYPEhtml>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Tags
As told earlier, HTML is a markup
language and makes use of various
tags to format the content.
These tags are enclosed within angle
braces <Tag Name>.
Except few tags, most of the tags
have their corresponding closing tags.
For example, <html> has its closing
tag</html> and <body> tag has its
closing tag </body> tag etc.
HTML Tags
A completed tag is known as Element.
E.g. <Body> Hello All </Body>
There are two types of tags:

Singular tag or empty tag: A tag which
does not have any end tag
E.g. <hr>, <br>
Paired tag or Container tag: A tag

which has starting as well as ending tag
E.g. <html> and </html>
Above example of HTML document uses the

following tags :
Tag
Description
<!DOCTYPE...>
This tag defines the document type and HTML version.
<html>
This tag encloses the complete HTML document and

mainly comprises of document header which is
represented by <head>...</head> and document body
which is represented by <body>...</body> tags.
<head>
This tag represents the document's header which can

keep other HTML tags like <title>, <link> etc.
<title>
The <title> tag is used inside the <head> tag to

mention the document title.
<body>
This tag represents the document's body which keeps

other HTML tags like <h1>, <div>, <p> etc.
Tag
Description
<h1>
This tag represents the heading.
<p>
This tag represents a paragraph.
HTML Document
Structure
A typical HTML document will have the

following structure:
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
The <!DOCTYPE>
Declaration
The <!DOCTYPE> declaration tag is
used by the web browser to
understand the version of the HTML
used in the document.
Current version of HTML is 5 and it
makes use of the following
declaration:
<!DOCTYPE html>
HTML syntax
Tags
Instructions for the browser
<tag> Some text</tag>
Nesting
Close tags in the opposite order in which you
opened them.
<tag1> <tag2>Some text </tag2> </tag1>
Attributes
Specify attributes to use non-default behavior
<tag attribute=value>Text</tag>
How the Tags Work

Tags enclosed in angle brackets < and >
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is
the end tag
Start and end tags are also called opening tags and
closing tags
The first tag turns the action on, and the second turns it
off.
The first part of the tag <tag name> turns the tag on
The ending part of the tag, </tag name>, contains the
"/" slash character.
This "/" slash tells a WWW browser to stop tagging
the text. Many HTML tags are paired this way.
If you forget the backslash, a WWW browser will
continue the tag for the rest of the text in your
document, producing undesirable results.
HTML Comments
Comments can be inserted in the
HTML code to make it more readable
and understandable.
Comments are ignored by the
browser and are not displayed.
An HTML comment begins with
""
HTML Comments
Example

Multiline Comments:
Example:

HTML BASIC TAGS

The basic structure for all HTML documents
is simple and should include the following
minimum elements or tags:
<html> - The main container for HTML
pages
<head> - The container for page header
information
<title> - The title of the page

<body> - The main body of the page
Heading Tags
Any document starts with a heading
You can use different sizes for your
headings
HTML also has six levels of
headings, which use the elements
<h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>
<hx> - x is a number from 1 to 6

<h1> is the biggest
<h6> is the smallest
While displaying any heading,
browser adds one line before and one
line after that heading
Example : Heading Tag

<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
Example : Output
HTML Paragraphs
HTML paragraphs are defined with
the <p> tag
Each paragraph of text should go in
between an opening <p> and
closing </p> tag
Example
<html>
<head>
<title> Paragraph</title>
</head>
<body>
<p>This is my first paragraph</p>
<p>Here is a second paragraph of
text.</p>
</body>
</html>
Line Breaks
Whenever you use the <br /> element,
anything following it starts on the next line.
This tag is an example of an empty
element, where you do not need opening
and closing tags, as there is nothing to go
in between them.
Note: The <br /> element has a space
between the characters br and the forward
slash
<center> Element
Centring Content - The <center>
Element:
You can use <center> tag to put any
content in the center of the page or
any table cell.
Example:
<p>This is not in the center.</p>
HTML Horizontal Rule

Use the <hr /> tag to display lines
across the screen.
Example::
<hr /> Use <hr /><hr />
hr <hr /> for horizontal rule <hr />
Note: the horizontal rule tag has no
ending tag like the line break tag.
Preserve Formatting
<pre>
Sometimes, you want your text to
follow the exact format of how it is
written in the HTML document. In
these cases, you can use the
preformatted tag <pre>.
Any text between the opening
<pre> tag and the closing
</pre> tag will preserve the
formatting of the source
Preserve Formatting
<pre>
The <pre> tag defines preformatted text

Text in a <pre> element is displayed in a
fixed-width font (usually Courier), and it
preserves both spaces and line breaks
Use the <pre> tag for any special
circumstances where you wish to have the
text appear exactly as it is typed.
Spaces, tabs, and line breaks that exist in
your actual code will be preserved with the
<pre> tag.
Preserve Formatting
Example
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>
This will produce the following result:
function testFunction( strText ){

alert (strText)
}
Try using the same code without

keeping it inside <pre>...</pre>
tags
Non breaking Spaces

Suppose you want to use the phrase
"12 Angry Men."
Here, you would not want a browser
to split the "12, Angry" and "Men"
across two lines
Non breaking Spaces

In cases, where you do not want the
client browser to break text, you
should use a nonbreaking space entity
instead of a normal space.
For example, when coding the "12
Angry Men" in a paragraph, you
should use something similar to the
following code:
Example
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces
Example</title>
</head>
<body>
<p>An example of this technique appears
in the movie
"12 Angry Men."</p>
</body>
</html>
HTML ELEMENTS
An HTML element is defined by a
starting tag. If the element contains
other content, it ends with a closing
tag, where the element name is
preceded by a forward slash as
shown below with few tags:
So here <p>....</p> is an HTML

element, <h1>...</h1> is another
HTML element.
There are some HTML elements
which don't need to be closed, such
as <img.../>, <hr /> and <br />
elements.
These are known as void elements.
HTML Tag vs. Element

An HTML element is defined by a
starting tag. If the element
contains other content, it ends with a
closing tag.
For example, <p> is starting tag of a
paragraph and </p> is closing tag of
the same paragraph but <p>This is
paragraph</p> is a paragraph
element.
Nested HTML Elements

<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u>
paragraph</p>
</body>
</html>
Nested HTML Elements

This will display the following result:
HTML Formatting Tags

HTML uses tags like
<b> and <i> for formatting output,
like bold or italic text
These HTML tags are called
formatting tags.
HTML Formatting Tags

Example:
Bold, Italics, and Underline (<b>, <i>,
<u>)
<p>123 State Street
<br>Rochester, MN 55901
<br>(123)4100-44
<br><u>imageeke@geeke.com</u></p>
<p><b>This is bold</b> <i>This is
Italic</i></p>
HTML Formatting Tags :

Strike
Text
Anything that
appears within
<strike>...</strike> element is displayed
with strikethrough
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a
<strike>strikethrough</strike> typeface.</p>
</body>
</html>

Monospaced Font
The content of a <tt>...</tt> element
is written in monospaced font.
Most of the fonts are known as variablewidth fonts because different letters are
of different widths (for example, the
letter 'm' is wider than the letter 'i').
In a monospaced font, however, each
letter has the same width.

Monospaced Font
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<tt>monospaced</tt> typeface.</p>
</body>
</html>

Superscript Text
The content of a <sup>...</sup>
element is written in superscript
The font size used is the same size
as the characters surrounding it but
is displayed half a character's height
above the other characters.

Superscript Text
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<sup>superscript</sup> typeface.</p>
</body>
</html>

Subscript Text
The content of a <sub>...</sub>
element is written in subscript
The font size used is the same as the
characters surrounding it, but is
displayed half a character's height
beneath the other characters.

Subscript Text
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<sub>subscript</sub> typeface.</p>
</body>
</html>
HTML Formatting Tags : Inserted Text

Anything that appears within <ins>...</ins>
element is displayed as inserted text.
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del>
<ins>wine</ins></p>
</body>
</html>
HTML Formatting Tags : Deleted Text

Anything that appears within <del>...</del>
element, is displayed as deleted text.
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del>
<ins>wine</ins></p>
</body>
</html>
HTML Formatting Tags : Larger Text

The content of the <big>...</big> element is
displayed one font size larger than the rest of the
text surrounding it
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big>
typeface.</p>
</body>
</html>
HTML Formatting Tags : Smaller Text

The content of the <small>...</small> element
is displayed one font size smaller than the rest of
the text surrounding it
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<small>small</small> typeface.</p>
</body>
</html>
HTML Formatting Tags : Mark

Text
HTMLMarkedFormatting
The HTML<mark>element
definesmarkedor highlighted text
<h2>HTML<mark>Marked</mark>
Formatting</h2>
HTMLMarkedFormatting
HTML Attributes
HTML elements can have attributes
Attributes provide additional
information about the element
Attributes are always specified in the
start tag
Attributes come in name/value pairs
like:
name="value"
HTML Attributes
We have seen few HTML tags and
their usage like heading tags <h1>,
<h2>, paragraph tag <p> and
other tags.
We used them so far in their simplest
form, but most of the HTML tags can
also have attributes, which are extra
bits of information.
An attribute is used to define the

characteristics of an HTML element and is
placed inside the element's opening tag.
All attributes are made up of two parts: a
name and a value
The name is the property you want to set.
For example, the paragraph <p> element
in the example carries an attribute whose
name is align, which you can use to
indicate the alignment of paragraph on
the page.
The value is what you want the

value of the property to be set and
always put within quotations.
The below example shows three
possible values of align attribute:
left, center and right.
Example
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>
This will display the following result:
Always Quote Attribute

Values
Attribute values should always be enclosed
in quotes.
Double style quotes are the most common,
but single style quotes are also allowed.
In some rare situations, like when the
attribute value itself contains quotes, it is
necessary to use single quotes:
E.g. name='John "ShotGun"

Nelson'
Core Attributes:
The four core attributes that can be used on
the majority of HTML elements
class Specifies one or more classnames for

an element (refers to a class in a style
sheet)
id Specifies a unique id for an element

style Specifies an inline CSS style for an
element
title Specifies extra information about an

element
The id Attribute
The id attribute can be used to
uniquely identify any element
within a page ( or style sheet ).
There are two primary reasons that you

might want to use an id attribute on an
element:
If an element carries an id attribute as a
unique identifier it is possible to identify
just that element and its content.
The id Attribute:
If you have two elements of the same
name within a Web page (or style sheet),
you can use the id attribute to distinguish
between elements that have the same
name.
Example
<p id="html">This para explains what is

HTML</p>
<p id="css">This para explains what is
Cascading Style Sheet</p>
The title Attribute

The title attribute gives a
suggested title for the element
The behavior of this attribute will
depend upon the element that
carries it, although it is often
displayed as a tooltip when cursor
comes over the element or while the
element is loading.
The title Attribute :

Example
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute
Example</title>
</head>
<body>
<h3 title="Hello HTML!">Titled Heading
Tag Example</h3>
</body>
</html>
The class Attribute

The class attribute is used to
associate an element with a style
sheet, and specifies the class of
element.
You will learn more about the use of
the class attribute when you will
learn Cascading Style Sheet (CSS).
So for now you can avoid it.
The style Attribute

The style attribute allows you to specify
Cascading Style Sheet (CSS) rules within the
element.
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style="font-family:arial; color:#FF0000;">Some
text...</p>
</body>
</html>
The HTML Style Attribute

Setting the style of an HTML element,
can be done with thestyle attribute
Syntax:
style="property:value;
Thepropertyis a CSS property.
Thevalueis a CSS value

HTML Background Color
<bodystyle="backgroundcolor:lightgrey;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

HTML Text Color
<h1style="color:blue;">This is a
heading</h1>
<pstyle="color:red;">This is a
paragraph.</p>

HTML Fonts
Thefont-familyproperty defines the
font to be used for an HTML element
<h1style="fontfamily:verdana;">This is a
heading</h1>
<pstyle="font-family:courier;">This
is a paragraph.</p>

HTML Text Size
Thefont-sizeproperty defines the
text size for an HTML element
<h1style="fontsize:300%;">This is a
heading</h1>
<pstyle="font-size:160%;">This
is a paragraph.</p>

HTML Text Alignment
Thetext-alignproperty defines the
horizontal text alignment for an
HTML element
<h1style="textalign:center;">Centered
Heading</h1>
<p>This is a paragraph.</p>
Attributes for body Tag

BGCOLOR: background color of the
page
BACKGROUND: background picture
for the page
TEXT: color of the text on the page
LINK: color of links that haven't been
followed yet
Attributes for body Tag

VLINK: color of links that have been followed
ALINK: color of links while you are clicking on them
TOPMARGIN: size of top and bottom
margins
LEFTMARGIN: size of left and right margins
Etc.
<body> element
The : <body> element
<body>
<p>This is body tag</p>
</body>
The <body> element defines the body of
the HTML document
The element has a start tag <body> and
an end tag </body>
The element content is another HTML
element
bgcolor (color)
bgcolor (color)
Sets a color to be used as
background of the document.
Example:
<body bgcolor="green">
Example
<html>
<head>
<title>My First Web Page - HTML is simple!
</title>
</head>
<BODY BACKGROUND=index.jpeg TEXT=#ffffff>
<h2>Hello, world. <br>HTML is easy!</h2>

</body>
</html>
HTML - Body Margins

Unique Attributes
leftmargin - Sets a left hand margin
for your body element.
topmargin - Sets a margin along the
top of your body element.
Example:<body topmargin="50">
<body leftmargin="50">
HTML Special Characters

Character
Representation
Non-Breaking Space
"
"
< <
> >
& &
©
®

The href Attribute

HTML links are defined with
the<a>tag. The link address is
specified in thehrefattribute
Example
<ahref="http://www.w3schools
.com">This is a link </a>
Size Attributes
HTML images are defined with
the<img>tag
The filename of the source (src), and the
size of the image (widthandheight) are all
provided asattributes
<imgsrc="w3schools.jpg"width="104"h
eight="142">
The image size is specified in pixels:
width="104" means 104 screen pixels wide.
The alt Attribute

Thealtattribute specifies an
alternative text to be used, when an
HTML element cannot be displayed
The value of the attribute can be
read by "screen readers". This way,
someone "listening" to the webpage,
i.e. a blind person, can "hear" the
element.
The alt Attribute

Example
<imgsrc="w3schools.jpg"alt="W3Sch
ools.com"width="104"height="142"
>
HTMLQuotation and
Citation Elements
HTML <q> for Short Quotations

The HTML<q>element defines a short
quotation
Browsers usually insert quotation marks
around the <q> element
E.g.
<p>WWF's goal is to:<q>Build a future
where people live in harmony with
nature.</q></p>
HTML <blockquote> for Long

Quotations
The HTML<blockquote>element
defines a quoted section.
Browsers usually align <blockquote>
elements
<p>Here is a quote from WWF's website:</p>

<blockquotecite="http://www.worldwildlife.
org/who/index.html">
For 50 years, WWF has been protecting the
future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported
by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
HTML <abbr> for Abbreviations

The HTML<abbr>element defines an
abbreviation or an acronym
Marking abbreviations can give useful
information to browsers, translation
systems and search-engines
<p>The<abbrtitle="World Health
Organization">WHO</abbr>was
founded in 1948.</p>
HTML <address> for Contact

Information
The HTML<address>element defines
contact information (author/owner) of a
document or article.
The <address> element is usually
displayed in italic.
Most browsers will add a line break
before and after the element
<address>
Written by Jon Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
HTML <cite> for Work Title

The HTML<cite>element defines
the title of a work
Browsers usually display <cite>
elements in italic
<p><cite>The Scream</cite>by
Edward Munch. Painted in 1893.</p>
HTML <bdo> for Bi-Directional

Override
The HTML<bdo>element defines
bi-directional override.
The <bdo> element is used to
override the current text direction
<bdodir="rtl">This text will be
written from right to left</bdo>
HTMLComputer Code
Elements
HTML Computer Code Formatting

HTML normally uses variable letter
size and spacing.
This is not wanted when displaying
examples of computer code.
The<kbd>,<samp>,
and<code>elements all support
fixed letter size and spacing.
HTML <kbd> For Keyboard Input

The HTML<kbd>element defines
keyboard input
<kbd>File | Open...</kbd>
HTML <samp> For Computer

Output
The HTML<samp>element defines
sample output from a computer program
<samp>
demo.example.com login: Apr 12
09:10:17
Linux 2.6.10grsec+gg3+e+fhs6b+nfs+gr0501++
+p3+c4a+gr2b-reslog-v6.189
</samp>
HTML <code> For Computer Code

The HTML<code>element defines
a piece of programming code
<code>
var x = 5;
var y = 6;
document.getElementById("demo").i
nnerHTML = x + y;
</code>
HTML <var> For Variables

The HTML<var>element defines a
variable
The variable could be a variable in a
mathematical expression or a variable
in programming context
Einstein wrote:
<var>E</var>=<var>m</var><v
ar>c </var><sup>2</sup>.
Physical & Logical

Character Tags
A tag that is applied to an individual

character is known as acharacter tag.
A character tag can be grouped into
two categories:physicalandlogical.
(Note:physical stylesare associated
with physical character tags;logical
stylesare associated with logical
character tags.)
As you work with these tags to style your

text in different ways, you will discover that
there is not really big difference how the
text is displayed on a browser.
For instance, you can italicize your text
using the <i> tag (a physical character tag)
or <em> tag (a logical character tag).
Why does that make any difference? It
depends on whether you are using italics for
the sake of using italics or whether you are
using italics to convey some special
meaning.
While a physical character tag

controls how to format the text, a
logical character tag describes
how the text is being used,
without regard to how it should
be formatted.
Thus a logical style would be
used to convey some meaning
while a physical style would not.
Physical tags
Physical tags are used to indicate
exactly how specific characters are
to be formatted.
Logical Tags
Logical tags are used to indicate to
the visually impaired that there is
some emphasizes on the text.
Each browser has its own technique
as to how to indicate to its viewer
that the text between the tags are
different.
HTML Links
Links are found in nearly all web pages
Links allow users to click their way from page
to page
HTML Links - Hyperlinks

Syntax
<ahref="url">link text</a>
Example
<ahref="http://www.google.com"
>Google</a>
Local Links
A local link (link to the same web site)
is specified with a relative URL
(without http://www....)
Example
<ahref="html_images.asp">HTM
L Images</a>
HTML Links - Colors

When you move the mouse over a link,
two things will normally happen:
The mouse arrow will turn into a little hand
The color of the link element will change
By default, a link will appear like this (in

all browsers):
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
Example
<style>
a:link{color:green;backgroun
d-color:transparent;textdecoration:none}
a:visited{color:pink;backgroun
d-color:transparent;textdecoration:none}
a:hover{color:red;background
-color:transparent;textdecoration:underline}
a:active{color:yellow;backgrou
HTML Links - The target

Attribute
Thetargetattribute specifies where to
open the linked document.
<ahref="http://www.w3schools.
com/"target="_blank">Visit
W3Schools!</a>
Target
Value
Description
_blank
Opens the linked document in a

new window or tab
_self
Opens the linked document in

the same frame as it was
clicked (this is default)
_parent

the parent frame
_top

the full body of the window
HTML Links - Image as Link

<ahref="default.asp">
<imgsrc="smiley.gif"alt="HTM
L
tutorial"style="width:42px;heig
ht:42px;border:0">
</a>
HTML Links - Create a Bookmark

HTML bookmarks are used to allow readers
to jump to specific parts of a Web page.
Bookmarks are practical if your website has
long pages.
To make a bookmark, you must first create
the bookmark, and then add a link to it.
When the link is clicked, the page will scroll
to the location with the bookmark.
Example
1. First, create a bookmark with the id
attribute
<h2id="tips">Useful Tips Section</h2>

2. Then, add a link to the bookmark ("Useful
Tips Section"), from within the same page
<ahref="#tips">Visit the Useful Tips

Section</a>
3. Or, add a link to the bookmark

("Useful Tips Section"), from another
page
<ahref="html_tips.html#tips">Visi
t the Useful Tips Section</a>m
another page
HTMLLists
Example of an unordered list

and an ordered list in HTML
Unordered
List:
Item
Item
Item
Item
Ordered List:
1.
2.
3.
4.
First item
Second item
Third item
Fourth item
Unordered HTML Lists

An unordered list starts with
the<ul>tag.
Each list item starts with
the<li>tag.
The list items will be marked with
bullets (small black circles)
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Unordered HTML Lists - The Style

Attribute
Astyleattribute can be added to
anunordered list, to define the
style of the marker
Style
Description
list-styletype:disc
The list items will be marked with bullets

(default)
list-styletype:circle
The list items will be marked with circles
list-styletype:square
The list items will be marked with squares
list-style-
The list items will not be marked
Circle
<ulstyle="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML Lists

An ordered list starts with
the<ol>tag.
Each list item starts with
the<li>tag.
The list items will be marked with
numbers
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML Lists - The Type

Attribute
Atypeattribute can be added to
anordered list, to define the type
of the marker
Type
Description
type="1"
The list items will be numbered with numbers

(default)
type="A"
The list items will be numbered with uppercase

letters
type="a"
The list items will be numbered with lowercase

letters
type="I"
The list items will be numbered with uppercase

roman numbers
type="i"
The list items will be numbered with lowercase
Uppercase Letters
<oltype="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Description Lists

HTML also supports description lists.
A description list is a list of terms,
with a description of each term.
The<dl>tag defines the
description list, the<dt>tag
defines the term (name), and
the<dd>tag describes each term
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Nested HTML Lists

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Horizontal Lists
HTML lists can be styled in many
different ways with CSS.
One popular way, is to style a
list to be displayed horizontally
<!DOCTYPEhtml>
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ulid="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html>
Output
With a little extra style, you can make it look like a

menu
ul#menu{
padding:0;
}
ul#menu li{
display:inline;
}
ul#menu li a{
background-color:black;
color:white;
padding:10px 20px;
text-decoration:none;
border-radius:4px 4px 0 0;
}
ul#menu li a:hover{
background-color:orange;
}
Output
HTML List Tags

Tag
Description
<ul> Defines an unordered list

<ol> Defines an ordered list
<li>
Defines a list item
<dl> Defines a description list

<dt> Defines the term in a description
list
<dd> Defines the description in a
description list
HTML Images
In HTML, images are defined with

the<img>tag.
The <img> tagis empty, it contains
attributes only, and does not have a
closing tag.
The src attribute specifies the URL
(web address) of the image
<imgsrc="url"alt="some_text">
Example
<!DOCTYPEhtml>
<html>
<body>
<h2>Spectacular Mountain</h2>
<imgsrc="pic_mountain.jpg"alt="Mountai
n
View"style="width:304px;height:228px;">
</body>
</html>
The alt Attribute

The alt attribute specifies an alternate text
for an image, if the image cannot be
displayed.
The alt attribute provides alternative
information for an image if a user for some
reason cannot view it (because of slow
connection, an error in the src attribute).
If a browser cannot find an image, it will
display the alt text
Example
<imgsrc="wrongname.gif"alt="HTM
L5
Icon"style="width:128px;height:128
px;">
Image Size - Width and Height

You can use thestyleattribute to
specify the width and height of an
image.
The values are specified in pixels (use
px after the value)
<imgsrc="html5.gif"alt="HTML5
Icon"style="width:128px;height:12
8px;">
Alternatively, you can

usewidthandheightattributes. Here,
the values are specified in pixels by
default
<imgsrc="html5.gif"alt="HTML5
Icon"width="128"height="128">
Both the width, height, and style
attributes are valid in the latest HTML5
standard
Images on Another Server

Some web sites store their images on
image servers.
Actually, you can access images from
any web address in the world
<imgsrc="http://www.w3schools.co
m/images/w3schools_green.jpg"alt=
"W3Schools.com">
Animated Images
The GIF standard allows animated
images
<imgsrc="programming.gif"alt="Co
mputer
Man"style="width:48px;height:48px;
">
Using an Image as a Link

To use an image as a link, simply
nest the <img> tag inside the <a>
tag
<ahref="default.asp">
<imgsrc="smiley.gif"alt="HTML
tutorial"style="width:42px;height:42
px;border:0;">
</a>
Image Floating
Use the CSS float property to let the
image float.
The image can float to the right or to
the left of a text
<p>
<imgsrc="smiley.gif"alt="Smiley
face"style="float:right;width:42px;heig
ht:42px;">
The image will float to the right of the
text.
</p>
<p>
<imgsrc="smiley.gif"alt="Smiley
face"style="float:left;width:42px;height
:42px;">
The image will float to the left of the text.
</p>
Output
Image Maps
Use the <map> tag to define an imagemap. An image-map is an image with
clickable areas.
The name attribute of the <map> tag is
associated with the <img>'s usemap
attribute and creates a relationship
between the image and the map.
The <map> tag contains a number of
<area> tags, that defines the clickable
areas in the image-map
<imgsrc="planets.gif"alt="Planets"use
map="#planetmap"style="width:145p
x;height:126px;">
<mapname="planetmap">
<areashape="rect"coords="0,0,82,1
26"alt="Sun"href="sun.htm">
<areashape="circle"coords="90,58,
3"alt="Mercury"href="mercur.htm">
<areashape="circle"coords="124,5
8,8"alt="Venus"href="venus.htm">
</map>
Output

Chapter 1 HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter 1 HTML

Uploaded by

Copyright:

Available Formats

HTML

Basic HTML Document

Either you can use Try it option available

However, a text editor like Notepad

Follow the 4 steps below to create

There are two types of tags:

Paired tag or Container tag: A tag

Above example of HTML document uses the

This tag defines the document type and HTML version.

This tag encloses the complete HTML document and

This tag represents the document's header which can

The <title> tag is used inside the <head> tag to

This tag represents the document's body which keeps

This tag represents the heading.

This tag represents a paragraph.

A typical HTML document will have the

How the Tags Work

HTML BASIC TAGS

<title> - The title of the page

<hx> - x is a number from 1 to 6

Example : Heading Tag

HTML Horizontal Rule

The <pre> tag defines preformatted text

This will produce the following result:

function testFunction( strText ){

Try using the same code without

Non breaking Spaces

Non breaking Spaces

So here <p>....</p> is an HTML

HTML Tag vs. Element

Nested HTML Elements

Nested HTML Elements

HTML Formatting Tags

HTML Formatting Tags

HTML Formatting Tags :

HTML Formatting Tags :

HTML Formatting Tags :

HTML Formatting Tags :

HTML Formatting Tags :

HTML Formatting Tags :

HTML Formatting Tags :

HTML Formatting Tags : Inserted Text

HTML Formatting Tags : Deleted Text

HTML Formatting Tags : Larger Text

HTML Formatting Tags : Smaller Text

HTML Formatting Tags : Mark

An attribute is used to define the

The value is what you want the

This will display the following result:

Always Quote Attribute

E.g. name='John "ShotGun"

class Specifies one or more classnames for

id Specifies a unique id for an element

title Specifies extra information about an

There are two primary reasons that you

<p id="html">This para explains what is

The title Attribute

The title Attribute :

The class Attribute

The style Attribute

The HTML Style Attribute

The HTML Style Attribute

The HTML Style Attribute

The HTML Style Attribute