HTML guide for beginners

For More : https://www.ThesisScientist.com
Key Concepts
***********************************************************************
 Introduction to Hyper Text Markup Language (HTML),
 HTML elements,
 XHTML syntax and Semantics,
 eXtensible Markup Language (XML), element,
 attributes,
 entity declarations.
 DTD files
 Basics of Cascading Style Sheet (CSS)
 Document object Model (DOM)
 history
 levels,
 Document tree,
 DOM event handling.
***********************************************************************
2.1 Introduction to Hyper Text Markup Language (HTML)
HTML stands for Hyper Text Markup Language, which is the most widely used
language on Web to develop web pages.
1. A markup language is a set of markup tags
2. HTML documents are described by HTML tags
3. Each HTML tag describes different document content
Hypertext is text which contains links to other texts.
Markup refers to the sequence of characters or other symbols that you insert at
certain places in a text or word processing file to indicate how the file should look
when it is printed or displayed
Versions of HTML

 HTML was created by Tim Berners-Lee in late 1991 but "HTML 2.0" was the
first standard HTML specification which was published in 1995.
 HTML 4.01 was a major version of HTML and it was published in late 1999.
 Though HTML 4.01 version is widely used but currently we are having HTML-5
version which is an extension to HTML 4.01, and this version was published in
2012.
Look at the following summary:
***Remember
W3C stands for World Wide Web Consortium
HTML Editors
Following are some HTML editors:
1. Adobe Dream Weaver
2. Microsoft Expression Web
3. Coffee Cup HTML Editor
However, for learning HTML, a text editor like Notepad is recommended.
First HTML PROGRAM
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page Title</title>
</head>
<body>

<h1>My First HTML Heading</h1>
<p>My First HTML paragraph.</p>
</body>
</html>
***Remember
1. The DOCTYPE declaration defines the document type to be HTML
2. The text between <html> and </html> describes an HTML document
3. The text between <head> and </head> provides information about the document
for the browser.
4. The text between <title> and </title> provides a title for the document
5. The text between <body> and </body> describes the visible page content to be
displayed on the screen.
6. The text between <h1> and </h1> describes a heading
7. The text between <p> and </p> describes paragraph
2.2 HTML elements,
An element gives structure to a HTML document and tells the browser how you want
your website to be presented. Generally an element consists of a start tag, some content,
and an end tag.
HTML Tags
Tags are labels you use to mark up the beginning and end of an element. All tags have
the same format: they begin with a less-than sign "<" and end with a greater-than sign
">".
There are two kinds of tags in HTML-
1. Opening tags: <html> and
2. Closing tags: </html>.
The only difference between an opening tag and a closing tag is the forward slash "/".
You label content by putting it between an opening tag and a closing tag.

Example - 1
<p> is starting tag of a paragraph and </p> is closing tag of the same paragraph but
<p>My First Paragraph</p> is a paragraph element.
Example - 2
“<title>” and “</title>” are tags, whereas
“<title>My First Title </title>” is a title element.
Void 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 Document Structure
Document declaration tag
***Remember
The <!DOCTYPE> declaration tag is used by the web browser to understand the version
of the HTML used in the document
About the HTML

1. HTML Tags
2. HTML Elements
3. HTML Attributes
4. HTML Page Title
5. HTML Paragraphs
6. HTML Headings
7. HTML Lists
8. HTML Hyper Links (Text, Images, E_mail)
9. HTML Images
10. HTML Tables
11. HTML Forms
HTML Tags
1. title tag
<title> My First Title</title>
2. heading tag
<h1>My First Heading</h1>
Output
Another code
<h1>My Second Heading</h1>
<h1>My Third Heading</h1>
Output
Another code

Output
***Note:
HTML has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>. While displaying any heading, browser adds one line before and
one line after that heading.
Paragraph Tag
Code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>My First Paragraph</p>
<p>My Second Paragraph</p>
<p>My Third Paragraph</p>
</body>
</html>
Output

Line tag
The <hr> tag creates a horizontal line in an HTML page.
Code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>My First Paragraph</p>
<hr>
<p>My Second Paragraph</p>
<hr>
<p>My Third Paragraph</p>
<hr>
</body>
</html>
Output

<br> Tag
The line break tag is the <br> tag in HTMLA br tag will insert a line break which
means the text/image following the tag will be moved to the next line when displayed
in the browser.
Code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Have <br>A<br> Nice<br> Day</p>
</body>
</html>
Output
Making fonts Bold and italic using <b> and <i> tag
Code
<!DOCTYPE html>
<html>

<head>
</head>
<body>
<p><b>This is a paragraph with Bold Fonts</b></p>
<p><i>This is a paragraph with Italic Fonts</i></p>
</body>
</html>
Output
HTML Style
Program
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color:red">Heading with Red Color</h1>
<h1 style="color:blue">Heading with Blue Color</h1>
</body>
</html>
Output
HTML Attributes
HTML elements can have attributes. Attributes provide additional information about
an element. 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 i.e. name="value"
The name is the property you want to set.
The value is what you want the value of the property to be set.
1. lang attribute
The document language can be declared in the <html> tag, using lang attribute. eclaring
a language is important for accessibility applications (screen readers) and search engines:
Program
<!DOCTYPE html>
<html lang="en-US">
<body>
<p>My First paragraph.</p>
</body>
</html>
Output
2. The title Attribute
HTML paragraphs are defined with the <p> tag. In following example, the <p> element
has a title attribute. The value of the attribute is "My First Web Page":
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.
Code
<!DOCTYPE html>
<html>

<head>
<title>My First Title</title>
</head>
<body>
<h3 title="Hello HTML!">Title Attribute Example</h3>
</body>
</html>
Output
3. The align attribute
Element in the following example carries an attribute whose name is align, which you
can use to indicate the alignment of paragraph on the page. Given example shows three
possible values of align attribute: left, center and right.
Code
<!DOCTYPE html>
<html>
<head>
</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>
Output

The href Attribute
A link is specified using HTML tag <a>. This tag is called anchor tag and anything
between the opening <a> tag and the closing </a> tag becomes part of the link and a user
can click that part to reach to the linked document.
Program
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<a href="http://www.google.com">This is a hyperlink to open google</a>
</body>
</html>
Output
Program
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="https://www.rgpv.ac.in">

<h3>Click on following URL to open www.rgpv.ac.in </h3>
</head>
<body>
<a href="UploadContent/frm_ViewScheme.aspx" target="_blank">Opens in New Window or Tab</a> |
<a href="UploadContent/frm_ViewScheme.aspx" target="_self">Opens in Same Frame</a> |
</body>
</html>
Output
***NOTE
In above program, <base> tag is used to give a base path for all the links. So your
browser will concatenate given relative path to this base path and will make a
complete URL. Here URL <a href="https://www.rgpv.ac.in"> is being considered as <a
href=https://www.rgpv.ac.in/UploadContent/frm_ViewScheme.aspx
***Remember
1. _blank opens the linked document in a new window or tab.
2. _self is the default (current browsing context, i.e. current window or tab)
Other options are _parent and _top. The value _parent refers to the frameset that
is the parent of the current frame, whereas _top “breaks out of all frames” and opens
the linked document in the entire browser window.
HTML Comments
HTML comments are placed in between  tags. So any content placed with-
in  tags will be treated as comment and will be completely ignored by the
browser.
Program
<!DOCTYPE html>
<html>
<head> 
<title>This is document title</title>

</head> 
<body>
<p>Document content goes here.....</p>
</body>
</html>
Output
***Remember:
1. <tag> tells the browser to do something.
2. An attribute goes inside the <tag> and tells the browser how to do it.
3. Default font size is 3, and default font style is “Times New Roman”.
Program
<html>
<head>
<title> My First Web Application </title>
</head>
<body>
<p> <font size="7" face ="arial" color="red"> Web Technology </p>
</body>
</html>
Output
Note:

Available Font Sizes:
1-Tiny, 2 - Small, 3 - Regular, 4 - Medium, 5 - Large, 6 - Big, 7 – Yelling
Program
<html>
<head>
</head>
<body>
<img src="Sunset.jpg" width="130" height="100">
</body>
</html>
Output
The “alt” is sort of a substitute for the image when the user is using a browser that
is not (for whatever reason) displaying images.
Program
<html>
<head>

</head>
<body>
<img src="Sunset.jpg" width="130" height="100" alt="Image Missing">
</body>
</html>
Output
Program
Image as Link
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<a href="https://www.google.com">
<img src="comp.jpg">
</a>
</body>
</html>
Output
HTML List
1. Ordered List (Numbered List) <ol>
2. Unordered List (Bullet List) <ul>

3. Definition List (Dictionary List) <dl>
Program (Unordered List (Bullet List) <ul>)
<html>
<head>
</head>
<body>
<h1> List of Branch </h1>
<ul>
<li> CS </li>
<li> IT </li>
<li> EC </li>
<li> ME </li>
</ul>
</body>
</html>
Output
Flavor of Bullets
1. Disc
2. Circle
3. Square

***Note:
Default Bullet in unordered list: Disc Bullet
Program (Unordered List with all Flavors of Bullets)
<html>
<head>
</head>
<body>
<h1> List of Branch with Disc Bullets </h1>
<ul type ="disc">
<li> CS </li>
<li> IT </li>
<li> EC </li>
<li> ME </li>
</ul>
<h1> List of Branch with Circle Bullets </h1>
<ul type ="circle">
<li> CS </li>
<li> IT </li>
<li> EC </li>
<li> ME </li>
</ul>
<h1> List of Branch with Square Bullets </h1>
<ul type ="square">
<li> CS </li>
<li> IT </li>
<li> EC </li>
<li> ME </li>
</ul>
</body>
</html>
Output

Program (Ordered List (Numbered List) <ol>)
<html>
<head>
</head>
<body>
<font size="2" face ="arial" color="red">
<h4> Numbered List </h4>
<ol>
<li> CS </li>
<li> IT </li>

<li> EC </li>
<li> ME </li>
</ol>
<h4> Uppercase Roman Numbers List </h4>
<ol type ="I">
<li> CS </li>
<li> IT </li>
<li> EC </li>
<li> ME </li>
</ol>
<h4> Lowercase Roman Numbers List </h4>
<ol type ="i">
<li> CS </li>
<li> IT </li>
<li> EC </li>
<li> ME </li>
</ol>
<h4> Uppercase Letters List </h4>
<ol type ="A">
<li> CS </li>
<li> IT </li>
<li> EC </li>
<li> ME </li>
</ol>
<h4> Lowercase Letters List </h4>
<ol type ="a">
<li> CS </li>
<li> IT </li>
<li> EC </li>
<li> ME </li>
</ol>
</body>
</html>
Output

***Note:
Default Number in ordered list: 1, 2,3,4,5
Program (Nested List with OL and UL combination)
<html>
<head>
</head>
<body>
<font size="2" face ="arial" color="red">

<h4> Nested Numbered List </h4>
<ol>
<li> CS </li>
<li> IT </li>
<ul type="disc">
<li> I Year </li>
<li> II Year </li>
<li> III Year </li>
<li> IV Year </li>
</ul>
<li> EC </li>
<li> ME </li>
</ol>
</body>
</html>
Output
Making Frame
Main Program
<html>
<head>
<title> Frame Demo </title>
</head>

<frameset rows="30%, 70%">
<frame src="one.html">
<frameset cols="50%, 50%">
<frame src="two.html">
<frame src="three.html">
</html>
Program (one.html)
<html>
<body bgcolor=red>
<h3 align="center">Rajiv Gandhi Prodyogiki Vishwavidyalaya <br> Bhopal, M.P.</h3>
</body>
</html>
Program (two.html)
<html>
<body bgcolor=white>
<h3 align="left">Menu</h3>
<ul>
<li><i>About us<i></li>
<li><i>Scheme<i></li>
<li><i>Result<i></li>
</ul>
</body>
</html>
Program (three.html)
<html>
<body bgcolor=green>
<h3 align="center"><br><br><br><br><br><br><br><br>Welcome</h3>
</body>
</html>
Output

Program
<html>
<head>
<title> Frame Demo </title>
</head>
<frameset cols="40%,20%,20%,20%">
<frameset rows="50%,50%">
<frame src="1.html">
</frameset>
<frameset rows="50%,50%">
</frameset>
</frameset>
</html>
Output

HTML Tables
The HTML tables allow you to arrange data like text, images, links, other tables, etc. into
rows and columns of cells.
Example Code
<html>
<head>
</head>
<body>
<table border="5" bgcolor="green" bordercolor="red" style="width:100%">
<tr>
<th>Group -1</th>
<th>Group -2</th>
</tr>
<tr>
<td>Harshita</td>
<td>Monika </td>

</tr>
<tr>
<td>Vasundhara</td>
<td>Priyalaxmi</td>
</tr>
</table>
</body>
</html>
Data presentation in table
Here border is an attribute of <table> tag and it is used to put a border across all the
cells. If you do not need a border then you can use border="0".
1. Tables are defined with the <table> tag.
2. Tables are divided into table rows with the <tr> tag.
3. Table rows are divided into table data with the <td> tag.
4. A table row can also be divided into table headings with the <th> tag.
Cell Padding and Cell Spacing
There are two attributes called cell padding and cell spacing which you will use to adjust
the white space in your table cells.
The cell spacing attribute defines the width of the border, while cell padding represents
the distance between cell borders and the content within a cell.
Program
<html>
<head>
</head>
<body>
<table border="5" bgcolor="green" bordercolor="red" style="width:100%" cellpadding="50" cellspacing="20">
<tr>
<th>Group -1</th>
<th>Group -2</th>

</tr>
<tr>
<td>Harshita</td>
<td>Monika </td>
</tr>
<tr>
<td>Vasundhara</td>
<td>Priyalaxmi</td>
</tr>
</table>
</body>
</html>
Output
Colspan
Program
<html>
<head>
</head>
<body>
<p></p>
<tr> <th colspan=2><font color="blue">Web Tech MST Marks</font></th> </tr>
<tr> <td><font color="red">Harshita</font></td> <td>20</font></td> </tr>
<tr> <td><font color="red">Monika</font></td> <td>19</font></td> </tr>
<tr> <td><font color="red">Vasundhara</font></td> <td>18</font></td> </tr>
</table>
</body>

</html>
Output
Program
<html>
<head>
</head>
<body>
<tr>
<th colspan="4">Odd Semesters</th>
</tr>
<tr>
<td align="center">1</td>
</tr>
<tr>
<th colspan="4">Even Semesters</th>
</tr>
<tr>

</tr>
</table>
</body>
</html>
Output
rowspan
The rowspan attribute specifies the number of rows a cell should span.
<html>
<head>
</head>
<body>
<tr>
<th rowspan="4">Odd Semesters</th>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Output

Explanation
In the example above, rowspan is set to 4. This specifies that the cell must span over 4
rows (its own row plus additional thee). Odd semesters and 1 are thereby in the same
row, while 3, 5, 7 form three independent row.
rowspan and Colspan together
Program
<html>
<head>
</head>
<body>
<tr>
<th colspan="2"> MST Marks</th>
</tr>
<tr>
<td rowspan="5">Harshita</td>
<td>IT-601 = 18</td>
</tr>
<tr>
<td >IT-602 = 19</td>
</tr>
<tr>
<td >IT-603 = 20</td>
</tr>
<tr>
<td >IT-604 = 18</td>
</tr>
<tr>
<td >IT-605 = 17</td>
</tr>
<tr>
<td rowspan="5">Monika</td>
<td >IT-601 = 17</td>
</tr>
<tr>
<td >IT-602 = 18</td>
</tr>
<tr>
<td >IT-603 = 20</td>
</tr>

<tr>
<td >IT-604 = 19</td>
</tr>
<tr>
<td >IT-605 = 18</td>
</tr>
</table>
</body>
</html>
Output
2.3 XHTML syntax and Semantics,
2.4 eXtensible Markup Language (XML)
XML is a markup language. Extensible means it has not a fixed format like HTML.
Markup is nothing but instruction, which is also called as tag. Scripting languages e.g.
HTML show how the data is displayed but XML describes what the data is.
Use of XML
XML is used to describe the structure of web document not the way of presenting the
web document.
Need of XML
XML is used to exchange the data. Both the sender and receiver can use XML to
understand the kind of data that is being sent.
***Note:
XML is a case sensitive language. It is a Meta language. Meta language is a language
used for describing other languages.

Program
<?xml version="1.0"?>
<info>
<rollno>1011</rollno>
<name>Amit Jain</name>
<marks>85</marks>
</info>
Explanation
The first line of the program is the XML declaration. The next line describes the root
element of the document i.e. <info>. Next three lines describe the three child elements of
the root i.e. <rollno>, <name> and <marks>.
Output
The output of above program will be displayed in form of an XML document which
displays color coded root and child elements as shown below:
***Remember
All tags used here are user defined. XML provide us the facility to create our own tag.
XML tags are case sensitive.
***Note:
A plus (+) or minus sign (-) to the left of the elements can be clicked to expand or
collapse the element structure. Let us collapse the above element structure now:

2.4.1 Element,
Everything written between start tag and end tag is known as element. It can contain
other elements, text, attributes etc.
Empty XML Element
An element with no content is said to be empty element.
Syntax
<element></element> or you can use self closing e.g.
<element/>
Both syntaxes written above are equivalent.
XML Element naming rules
1. Name of XML Element must start with a letter or an underscore, but it can
contain letters, digits, hyphens, underscores and period.
2. Name of XML Element can not start with the letter xml or XML or XmL etc.
3. Name of XML Element are case sensitive.
4. Spaces are not allowed in-between the name of XML Element.
5. No words are reserved in XML.
2.4.2 Attributes
In XML, data can be stored in child element or in attribute.
Look at the following example:
Program

<student>
<rollno>1011</rollno>
<marks>85</marks>
</student>
Output
Explanation
In above program, “rollno” is a child element, which can be converted into attribute,
look at the next program:
Program
<student rollno="1011">
<marks>85</marks>
</student>
Output

Explanation
In above program, “rollno” is a now an attribute of root element student. Both programs
will produce the same result.
***Note:
There are no rules about when to use attributes and when to use child elements.
Limitations of attribute in XML
1. Attribute cannot contain multiple values.
2. Attribute cannot describe structure.
3. attribute is not easily expandable
4. Attributes are more difficult to manipulate by program code.
5.
2.4.3 Entity declarations.
Entities help to reduce the entry of repetitive information. An Entity must be declared
before it is used. An entity can be declared with “ENTITY”.
Type of Entity Declaration
An entity in XML can be declared in following ways:
1. Internal Entity Declaration
2. External Entity Declaration
(i) Private External Entity Declaration
(ii) Public External Entity Declaration

Private external entities are identified by the keyword SYSTEM, whereas public external
entities are identifies by the keyword PUBLIC. Private external entities are intended for
use by a single author or group of authors whereas public external entities are intended to
use at broad level.
Syntax for Internal Entity Declaration
<! ENTITY name “entity_value”>
Syntax for Private External Entity Declaration
<! ENTITY name SYSTEM “URI”>
Syntax for Private External Entity Declaration
<! ENTITY name PUBLIC “public_id “URI”>
Difference between HTML and XML
S. No. HTML XML
1 HTML stands for Hyper Text Markup
Language.
XML stands for eXtensible Markup
Language.
2 HTML was designed to display the
data
XML was designed to describe the
data, not to display the data.
3 HTML defines its own predefined
tags.
XML makes use of user defined
tags.
4 HTML is static in nature, which
means content is not changed every
time page is reloaded.
XML is dynamic in nature, which
means content is changed every time
page is reloaded.
5 HTML is about displaying
information. It focuses on how data
looks.
XML is about carrying information.
It focuses on what data is.
6 HTML is not case sensitive XML is case sensitive.
Difference between HTML and XHTML
XHTML is NOT a different language from HTML, but extended version of HTML that is
stricter and the next phase in the evolution of HTML. The reason for XHTML to be
developed was convoluted browser specific tags. Pages coded in HTML appeared
different in different browsers.
S. No. HTML XHTML
1 HTML stands for Hyper Text Markup XHTML stands for eXtensible

Language. Hyper Text Markup Language.
2 We can omit the closing tags
sometimes in HTML document.
Tags in XHTML must be closed.
3 It is not always necessary to quote the
attribute values in HTML.
It is mandatory to quote the attribute
value in every XHTML document.
4 HTML is not case sensitive XHTML is case sensitive.
5 HTML is SGML-based. XHTML is XML-based.
***Remember:
SGML stands for Standard Generalized Markup Language.
2.5 DTD files
Document Type Definition (DTD)
The Document Type Definition (DTD) specifies the rules for the markup language, so
that the browsers provide the content correctly. A Document Type Definition (DTD)
defines the structure and the legal elements and attributes of a document.
Example Code
<!DOCTYPE html>
<html>
<head>
<title> My First HTML Program </title>
</head>
<body>
Hello World
</body>
</html>
***Note:
1. The <!DOCTYPE> declaration must be the very first thing in your HTML
document, before the <html> tag.
2. Always add the <!DOCTYPE> declaration to your HTML documents, so that the
browser knows what type of document to expect.
3. The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web
browser about what version of HTML the page is written in.
Why Use a DTD?

1. With a DTD, independent groups of people can agree to use a standard DTD for
interchanging data.
2. Your application can use a standard DTD to verify that the data you receive from
the outside world is valid.
3. You can also use a DTD to verify your own data.
What Happens If the DOCTYPE Declaration (DTD) is Not Included or is Incorrect?
If the web page coding does not include a DOCTYPE Declaration (DTD or Document
Type Declaration) or it is done incorrectly:
1. You will not be able to use a HTML (Hyper Text Markup Language) Validator to
check the page coding. HTML validation requires the DOCTYPE declaration.
2. The style sheet may not be implemented as planned.
Types of DTD
A DTD can be declared inside an XML document or in an external file.
Internal DTD Declaration
If the DTD is declared inside the XML file, it must be wrapped inside the <!DOCTYPE>
definition:
External DTD Declaration
If the DTD is declared in an external file, the <!DOCTYPE> definition must contain a
reference to the DTD file:
2.6 Basics of Cascading Style Sheet (CSS)
CSS stands for Cascading Style Sheets.
Meaning of Cascading
This is the capability provided by some style sheet languages such as CSS to allow style
information from several sources to be blended together. The cascade defines an ordered
sequence of style sheets where rules in later sheets have greater precedence than earlier
ones.
CSS handles the look and feel part of a web page. Using CSS, you can control the color
of the text, the style of fonts, the spacing between paragraphs, how columns are sized and
laid out, what background images or colors are used, as well as a variety of other effects.

CSS provides powerful control over the presentation of an HTML document.
***Note:
1. Most commonly, CSS is combined with the markup languages HTML or
XHTML.
2. CSS defines how HTML elements are to be displayed.
3. CSS controls the style and layout of multiple Web pages all at once.
Need of CSS (Limitations of HTML)
HTML was never intended to contain tags for formatting a document. HTML was
intended to define the content of a document, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Development of large web sites, where fonts and color information were added to every
single page, became a long and expensive process. To solve this problem, the World
Wide Web Consortium (W3C) created CSS.
CSS lets you separate the layout from the content, it also lets you define the layout much
more powerfully than you could with classic HTML.
In HTML 4.0, all formatting could be removed from the HTML document, and stored in
a separate CSS file. Styles are normally saved in external .css files. External style sheets
enable you to change the appearance and layout of all the pages in a Web site, just by
editing one single file!
***Note:
All browsers support CSS today.
Advantages of CSS:
1. CSS saves time - You can write CSS once and then reuse same sheet in multiple
HTML pages. You can define a style for each HTML element and apply it to as
many Web pages as you want.
2. Pages load faster - If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply to all the
occurrences of that tag. So less code means faster download times.
3. Easy maintenance - To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.

4. Superior styles to HTML - CSS has a much wider array of attributes than
HTML so you can give far better look to your HTML page in comparison of
HTML attributes.
5. Multiple Device Compatibility - Style sheets allow content to be optimized for
more than one type of device. By using the same HTML document, different
versions of a website can be presented for handheld devices such as PDAs and
cell phones or for printing.
6. Global web standards - Now HTML attributes are being deprecated and it is
being recommended to use CSS. So its a good idea to start using CSS in all the
HTML pages to make them compatible to future browsers.
CSS Versions:
1. CSS1
2. CSS2
***Note
We will start with a style sheet embedded inside the HTML file. Later, we will put the
HTML and the CSS in separate files. Separate files are good, since it makes it easier to
use the same style sheet for multiple HTML files: you only have to write the style sheet
once.
Ways to make CSS Code:
There are following three ways to associate styles with HTML document:
1. Inline CSS and (inside an HTML element )
2. Embedded/Internal CSS (inside the <head> section of an HTML page)
3. External CSS (in an external CSS file)
Inline CSS
You can use style attribute of any HTML element to define style rules. These rules will
be applied to that element only.
Program
<html>
<head>
<title>CSS Example</title>
</head>
<body>
<p style="color: red">My First CSS Program</p>
<p> Hello World </p>

</body>
</html>
Output
***Remember
This will make that specific paragraph red.
Embedded/Internal CSS
Embedded, or internal, styles are used for the whole page. You can put your CSS rules
into an HTML document using the <style> element. This tag is placed inside
<head>...</head> tags. Rules defined using this syntax will be applied to all the elements
available in the document. An internal style sheet should be used when a single document
has a unique style.
Program
<html>
<head>
<style>
p
{
color: red;
}
a
{
color: blue;
}
</style>
</head>
<body>
<p> My First CSS Program </p>
<p> Hello World </p>
<a href="http://www.google.com">This is a hyperlink to open google</a>
</body>
</html>

Output
External CSS
External styles are used for the whole, multiple-page website. The <link> element can be
used to include an external style sheet file in your HTML document.
An external style sheet is a separate text file with .css extension. You define all the Style
rules within this text file and then you can include this file in any HTML document using
<link> element.
Program
***Note:
The rel attribute specifies the relationship between the current document and the linked
document.

***Note:
Type=“text/css”, this line says that this is a style sheet and it is written in CSS.
Output – 1
Output - 2

Style sheets in CSS are made up of rules. Each rule has three parts:
1. The selector (in the example: “body”), which tells the browser which part of the
document is affected by the rule;
2. The property (in the example, 'color' is a property), which specifies what aspect of
the layout is being set; and
3. The value (red), which gives the value for the style property.
CSS Selector
The selector points to the HTML element you want to style. CSS selectors allow you to
select and manipulate HTML elements. CSS selectors are used to "find" (or select)
HTML elements based on their id, class, type, attribute etc.
1. The Element Selector
2. The id Selector
3. The class Selector
The Element Selector
The element selector selects elements based on the element name.
The class Selector
The class selector selects elements with a specific class (i.e. user defined) attribute. To
select elements with a specific class, you just need to write a period character, followed
by the name of the class:
Program

Output

The id selector
The id selector uses the id attribute of an HTML element to select a specific element. An
id should be unique within a page, so the id selector is used if you want to select a single,
unique element.
Difference between id selector and class selector
The id selector is similar to the class selector. Main difference between both is that the
class selector can be used with more than one element whereas using the id selector, the
style can be applied to the one specific element.
***Note:
To select an element with a specific id, write a hash character, followed by the id of the
element.
Program

Positioning
The CSS positioning properties allow you to position an element. It can also place an
element behind another
Types of CSS Positioning
1. Static Positioning
2. Fixed Positioning
3. Relative Positioning
4. Absolute Positioning

Static Positioning
HTML elements are positioned static by default. A static positioned element is always
positioned according to the normal flow of the page.
Fixed Positioning
An element with a fixed position is positioned relative to the browser window, and will
not move even if the window is scrolled:
Relative Positioning
A relative positioned element is positioned relative to its normal position:
Absolute Positioning
An absolute position element is positioned relative to the first parent element that has a
position other than static.
Program

Output
Program

Program
<html>
<head>
<title>CSS example</title>
<link rel="stylesheet" type="text/css" href="M.css">
</head>
<body>
<h3>Program to make a form elements background color change when the user enters any text</h3>
Enter any Name <input type="text">
</body>
</html>
M.css
input:focus
{
background-color:red;
}
Output
HTML Forms

HTML Forms are required when you want to collect some data/input from the site visitor.
For example during user registration you would like to collect information such as name,
email address, credit card, etc.
HTML Form Controls
1. Text Input Controls
2. Checkboxes Controls
3. Radio Box Controls
4. Select Box Controls
5. File Select boxes
6. Hidden Controls
7. Clickable Buttons
8. Submit and Reset Button
Program
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
First Name <input type="text" name="N">
<br><br>
Last Name <input type="text" name="S">
</body>
</html>
Note:
Here, type indicates the type of input and name is used to give a name to the control
which is sent to the server to be recognized and get the value.
Output

Different input types of the <input> element are given below:
1. Input Type: text
2. Input Type: password
3. Input Type: checkbox
4. Input Type: radio
5. Input Type: submit
6. Input Type: button
***Note:
1. Name must be same of all options for radio buttons
2. Combo-box is also known as drop- down box.
HTML5 Input Types
HTML5 added several new input types:
1. color
2. date
3. datetime
4. datetime-local
5. email
6. month
7. number
8. range
9. search
10. tel
11. time
12. url
13. week
Input Restrictions
Here is a list of some common input restrictions (some are new in HTML5):
Attribute Description
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)

required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field
Text Color
The color property is used to set the color of the text. With CSS, a color is most often
specified by:
1. a HEX value - like "#ff0000"
2. an RGB value - like "rgb(255,0,0)"
3. a color name - like "red"
2.7 Document object Model (DOM)
The way that document content is accessed and modified is called the Document Object
Model, or DOM. The Objects are organized in a hierarchy. This hierarchical structure
applies to the organization of objects in a Web document.
The Document Object Model is a platform- and language-neutral interface that will allow
programs and scripts to dynamically access and update the content, structure and style of
documents. The document can be further processed and the results of that processing can
be incorporated back into the presented page.
Document Object Model (DOM) is an API (application programming interface) that
defines how JavaScript programs can access and manipulate the HTML document
currently displayed by a browser.
The Document Object Model (DOM) defines the logical structure of documents and the
way a document is accessed and manipulated.
XML is being used as a way of representing many different kinds of information that
may be stored in diverse systems, and much of this would traditionally be seen as data
rather than as documents. Nevertheless, XML presents this data as documents, and the
DOM may be used to manage this data.
With the Document Object Model, programmers can build documents, navigate their
structure, and add, modify, or delete elements and content. Anything found in an HTML
or XML document can be accessed, changed, deleted, or added using the Document
Object Model.

The DOM represents a document as a tree. The idea of DOM is that every node is
an object.
Let us consider the following code of HTML document:
A graphical representation of the DOM will look like as follows:
Fig. graphical representation of DOM
Let us consider the table given below, taken from an HTML document:
***Remember
The HTML tables allow you to arrange data like text, images, links, other tables, etc. into
rows and columns of cells.
Example Code
<html>
<head>
</head>
<body>
<table border="5" bgcolor="green" bordercolor="red" style="width:100%">

<tr>
<th>Group -1</th>
<th>Group -2</th>
</tr>
<tr>
<td>Harshita</td>
<td>Monika </td>
</tr>
<tr>
<td>Vasundhara</td>
<td>Priyalaxmi</td>
</tr>
</table>
</body>
</html>
Data presentation in table
Here border is an attribute of <table> tag and it is used to put a border across all the
cells. If you do not need a border then you can use border="0".
1. Tables are defined with the <table> tag.
2. Tables are divided into table rows with the <tr> tag.
3. Table rows are divided into table data with the <td> tag.
4. A table row can also be divided into table headings with the <th> tag.
A graphical representation of the DOM

Fig. graphical representation of DOM
2.7.1 History of DOM
1. The first document object model was incorporated in the Netscape 2.0 browser
so that JavaScript could interface with this browser.
[Detail:
The model included a write() method, which could be used to dynamically add content to
a document. It also provided access to form controls and anchor elements, so aspects of
these controls and elements could be changed dynamically by a JavaScript program.
However, many elements of the document displayed by the browser, including the
document’s images, could not be modified through this early model.]
2. The Netscape 3.0 browser’s document object added the ability to modify images,
enabling the rollover effect that we have just seen, which proved to be a popular
feature. Internet Explorer 3.0 contained a similar document object model.
3. The 4.0 versions of the Netscape Navigator and Internet Explorer browsers
opened up essentially the entire document along with style information to access
from scripts, but the two browsers implemented their document object models in
substantially different ways.
4. Differences in document object models were more difficult for developers to
handle than the differences in HTML between the browsers. The W3C responded
quickly to these emerging differences, beginning formal work on developing a
standard DOM in August of 1997 (Netscape 4.0 was released only a few months
earlier, and the final release of IE 4.0 did not come until a few months later).
2.7.2 DOM levels,
DOM Levels are the versions of the specification for defining how the Document Object
Model should work

Various levels of DOM are given below:
1. DOM Level 0
Netscape and IE 3.0 versions are considered as a starting point of initial DOM
recommendation which is referred to as the DOM Level 0, although there is no official
standard by that name.
2. DOM Level 1
The W3C released its initial DOM recommendation in October of 1998 [W3C-DOM-1].
This is known as DOM Level 1.
DOM Level 1, consists of two modules:
1. Core Module,
2. HTML Module
Core Module
Core Module specifies functionality designed to be used with any XML document,
HTML Module
HTML module specifies higher-level DOM access to HTML documents.
3. DOM Level 2
The Level 2 DOM also contains Core and HTML modules along with several others,
particularly Events and Style that extend Level 1 functionality.
4. DOM Level 3
The W3C released its DOM Level 3 recommendation in April of 2004. This version
enhances DOM Level 2 by completing the mapping between DOM and the XML
Information Set, adding the ability to attach user information to DOM Nodes, providing
mechanisms to resolve namespace prefixes or to manipulate "ID" attributes, giving to
type information, etc.
2.7.3 Document tree,
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML Document Object Model is constructed as a tree of Objects. All nodes can be
accessed through the tree. Their contents can be modified or deleted, and new elements
can be created. The document tree shows the set of nodes, and the connections between

them. The tree starts at the root node and branches out to the text nodes at the lowest
level of the tree:
Fig. : The HTML DOM Tree of Objects
The nodes in the node tree have a hierarchical relationship to each other. The terms
parent, child, and sibling are used to describe the relationships. Parent nodes have
children. Children on the same level are called siblings (brothers or sisters).
***Remember
1. In a node tree, the top node is called the root
2. Every node, except the root, has exactly one parent node
3. A node can have any number of children
4. A leaf is a node with no children
5. Siblings are nodes with the same parent
2.7.4 DOM event handling.
Events are actions that can be detected by Java Script. HTML DOM events allow
JavaScript to register different event handlers on elements in an HTML document.
Every element on a web page has certain events which can trigger Java Script functions.
Events are normally used in combination with functions, and the function will not be
executed before the event occurs.
Example

You can use the onClick event of a button element to indicate that a function will run
when a user clicks on the button.
Some common events are:
1. Mouse Event
2. Keyboard Event
3. Form Event
4. Object Event etc
Let us understand any one event from above:
Mouse Event
onclick The event occurs when the user clicks on an element
Program
<html>
<head>
<title>Java Script Program</title>
<script type="text/javascript">
function F()
{
n1=document.f.t1.value;
n2=document.f.t2.value;
result=n1*n2;
alert("Multiplication is="+result)
}
document.write("Addition of a and b = "+ c);
</script>
</head>
<body bgcolor="purple">
<form name = "f">
Enter First Number <input type = "text" name="t1"><br><br>
Enter Second Number <input type = "text" name="t2"><br><br>
<input type="button" name="b1" value="Result of Multiplication" onClick="F()">
</form>
</body>
</html>
Output

***********************************************************************

HTML guide for beginners

More Related Content

What's hot

Similar to HTML guide for beginners

More from Thesis Scientist Private Limited

Recently uploaded

HTML guide for beginners