HTML Notes
HTML Notes
HTML Notes
M.RAJANIKANTH
LECTURER IN COMPUTER SCIENCE
DRG GOVT DEGREE COLLEGE PENTAPADU
2
Detailed Notes
UNIT – 1
OVER VIEW:
Unit-1 demonstrates how to create static web pages using basic HTML tags and presentation of
content using CSS. This unit focuses on how to create tables, forms, and lists to display the
content in web pages.
CONTENTS:
1. Basic HTML Tags
a. List
b. Tables
c. Images
d. Forms
e. frames
2. Cascading Style Sheets
a. Three mechanisms by which we can apply styles
b. Forms of CSS
HTML stands for Hypertext Markup Language. It is used to display the document
in the web browsers. HTML pages can be developed to be simple text or to
be complex multimedia program containing sound, moving images and
java applets. HTML is considered to be the global publishing format for Internet.
It is not a programming language. HTML was developed by Tim Berners-Lee.
HTML standards are created by a group of interested organizations called W3C
(world wide web consortium). In HTML formatting is specified by using tags. A
tag is a format name surrounded by angle brackets. End tags which switch a format
off also contain a forward slash.
3
Basic HTML tags
1. Body tag :
Body tag contain some attributes such as bgcolor, background etc. bgcolor
is
used for background color, which takes background color name
or hexadecimal
number and #FFFFFF and background attribute will take the path of the
image
which you can place as the background image in the browser.
<body bgcolor=”#F2F3F4” background= “c:\amer\imag1.gif”>
2. Paragraph tag:
Most text is part of a paragraph of information. Each paragraph is aligned to
the
left, right or center of the page by using an attribute called as align.
<p align=”left” | “right” | “center”>
3. Heading tag:
HTML is having six levels of heading that are commonly used. The largest
heading tag is <h1> . The different levels of heading tag besides <h1> are
<h2>,
<h3>, <h4>, <h5> and <h6>. These heading tags also contain attribute
called as
align.
<h1 align=”left” | “right” | “center”>........<h2>
4. hr tag:
This tag places a horizontal line across the system. These lines are used to
break
the page. This tag also contains attribute i.e., width which draws the
horizontal
line with the screen size of the browser. This tag does not require an end tag.
<hr width=”50%”>.
5. base font:
This specify format for the basic text but not the headings.
<basefont size=”10”>
6. font tag:
This sets font size, color and relative values for a particular text.
<font size=”10” color=”#f1f2f3”>
7. bold tag:
This tag is used for implement bold effect on the text
<b>..........</b>
8. Italic tag:
This implements italic effects on the text.
<i>…….</i>
9. strong tag:
This tag is used to always emphasized the text
<strong>............</strong>
10. tt tag:
This tag is used to give typewriting effect on the text
<tt>.........</tt>
Lists:
One of the most effective ways of structuring a web site is to use lists. Lists
provides
straight forward index in the web site. HTML provides three types of list i.e.,
1. unordered list,
2. ordered list and
3. definition list.
Lists can be easily embedded easily in another list to provide a complex but
readable structures. The different tags used in lists are
explained below.
<li> …..</li>
The ordered(numbered) and unordered(bulleted) lists are each made up of sets of list
items. This tag is used to write list items
1. unordered list,
3. definition list.
<dl>….. </dl>
This tag is used for the third category i.e., definition list, where numbers or bullet is
not used in front of the list item, instead it uses definition for the items.
<dt>…..</dt>
This is a sub tag of the <dl> tag called as definition term, which is used for marking
the items whose definition is provided in the next data definition.
<dd> ….</dd>
This is a sub tag of the <dd> tag, definition of the terms are enclosed within these
tags. The definition may include any text or block.
Tables:
Table is one of the most useful HTML constructs. Tables are find all over the web
application. The main use of table is that they are used to structure
the pieces of
information and to structure the whole web page. Below are some of the tags used
in
table.
Links
Frames:
Frames provide a pleasing interface which makes your web site easy to navigate.
The frameset contains a set of references to HTML files, each of which is
displayed inside a separate frame.
With frames, you can display more than one HTML document in the same browser
window. Each HTML document is called a frame, and each frame is independent of the
others.
The frameset element holds two or more frame elements. Each frame element holds a
separate document.
Forms:
Forms are the best way of adding interactivity of element in a web page. They are
usually used to let the user to send information back to the server but can also be used to
simplify navigation on complex web sites. The tags that use to implement forms are as
follows.
One of the most important aspects of HTML is the capability to separate presentation
and content. A style is simply a set of formatting instructions that can be applied to a
piece of text.
There are three mechanisms by which we can apply styles to our HTML documents.
· Inline Style Sheet:
Style can be defined within the basic HTML tag.
· Internal Style Sheet:
Style can be defined in the <head> tag
· External Style Sheet:
Styles can be defined in external files called stylesheets which can then be used
in
any document by including the stylesheet via a URL.
UNIT – II
Overview :
Unit-II demonstrates on client side validations using JavaScript. It focuses on how to handle
events, exceptions, etc. This unit also focuses on DHTML concepts.
CONTENTS:
1) JavaScript concepts
2) Objects in java scripts
3) DHTML with JavaScript
JavaScript (also called JScript) is a scripting language with the primary aim of giving life to
our web pages.It is very powerful, flexible, and easy to learn.
Features
Imperative and structured
Dynamic
o dynamic typing
o object based
o run-time evaluation
Functional
o first-class functions
o nested functions
o closures
Prototype-based
Miscellaneous
Vendor-specific extensions
There are three ways by which we can place Javascript for use in a web page.
Every element on a dynamic or static web page has certain events which can trigger Java Script
functions. For example, we can use the onClick event of a button element to indicate that a
function will run when a user clicks on that button. We define the events in the HTML tags.
Examples of events:
A mouse click
A keystroke
Events are normally used in combination with functions, and the function can not be executed
before the event occurs.
JavaScript - Catching Errors
There are two ways of catching errors in a Webpage
Try...Catch Statement
The try...catch statement allows you to test a block of code for errors. The try block contains the
code to be run, and the catch block contains the code to be executed if an error occurs.
try
{
//Run some code here
}
catch(err)
{
//Handle errors here
}
The onerror Event
The onerror event can be explained soon, but first you will learn how to use the throw
statements to create an exception. The throw statements can be used together with the try...catch
statement.
The Date object
The Date class is used to store and retrieve dates in JavaScript.
Array
The Array object is used to holding a set of data or values in a single variable name.
form validation
Form validation is the process of checking that a form has been filled in correctly or not before
it is processed.
In Java Script Client-side form validation is an important part of a web site where data needs to
be collected from the user. Users are innately ignorant, and will mess up data entry in a web
form if given the chance. It is the job of the web programmer, then, to make sure his pages
which use forms include client-side form validation using JavaScript.
2: Server-side validation
In Java Script the server also benefits from client-side validation since it saves a number
of round-trips between the visitor and the server owing to typos and easily spotted
mistakes. This advantage does not alleviate the neccessity of doing server-side
validation.
UNIT - III
Overview :
This unit focuses on creating XML documents that are designed to carry data. XML is all about
describing information. XML was designed to transport and store data. We can create web
documents from XML using XSLT to transform our documents into HTML. We can then send
our XML to an XSLT processor on the web server and serve that result to the web browser. This
makes our documentation available in whatever format we need it to be in.
Contents :
Introduction to XML
DTD
XML Schema
XSLT
DOM
SAX
Introduction to XML
XML describes and focuses on the data while HTML only displays and focuses on how data
looks. HTML is all about displaying information but XML is all about describing information.
The tags used to mark up HTML documents and the structure of HTML documents are
predefined. The author of HTML documents can only use tags that are defined in the HTML
standard.
In HTML some elements can be improperly nested within each other like this:
<b><i>This text is bold and italic</b></i>
In XML all elements must be properly nested within each other like this:
The XML declaration: Always the first line in the xml document:
The XML declaration should always be included. It defines the XML version and the character
encoding used in the document. In this case the document conforms to the 1.0 specification of
XML and uses the ISO-8859-1 (Latin-1/West European) character set.
<?xml version="1.0" encoding="ISO-8859-1"?>
Root Element: The next line defines the first element of the document . It is called as the root
element
<E-mail>
Child Elements: The next 4 lines describe the four child elements of the root (To, From,
Subject and Body).
And finally the last line defines the end of the root element .
</E-mail>
</E-mail>
syntax-rules
XML Attributes
XML elements can have attributes in the start tag, just like HTML.
Attributes are used to provide additional information about elements.
Attribute values must always be enclosed in quotes. Use either single or
double quotes eg. <color="red"> or <color='red'>
If the attribute value itself contains double quotes it is necessary to use single
quotes, like in this example: <name='Rose "India" Net'>
: If the attribute value itself contains single quotes it is necessary to use
double quotes, like in this example: <name="Rose 'India' Net">
Internal DTD
If the DTD is defined inside the XML document, it should be wrapped in a DOCTYPE
definition with the following syntax:
<!DOCTYPE root-element [element-declarations]>
External DTD
If the DTD is defined in an external file, it should be wrapped in a DOCTYPE
definition with the following syntax:
<!DOCTYPE root-element SYSTEM "filename">
Importance of a DTD
With a DTD, a XML file carries a description of its own format.
With a DTD, independent groups of people can agree to use a standard DTD
for interchanging data.
User application can use a standard DTD to verify that the data he receives from the outside
world is valid.
User can also use a DTD to verify his own data.
Elements
Attributes
Entities
PCDATA
CDATA
PCDATA
PCDATA means parsed character data. It can be thought as the character data ( text )
found between the start tag and the end tag of a XML element.
PCDATA is a text to be parsed by a parser. The text is checked by the parser for
entities and markup.
Tags inside the text will be treated as markup and entities will be expanded. However,
parsed character data should not contain any &, <, or > characters. These should be
represented by the & , <, and > entities, respectively.
CDATA:
CDATA is character data that will NOT be parsed by a parser. Tags inside the text
will NOT be treated as markup and entities will not be expanded.
DTD-Elements: Elements are the main constituent components of both XML documents.
Elements can contain text, other elements, or be empty.
Syntax:
<!ELEMENT element-name category>
or
<!ELEMENT element-name (element-content)>
EX: Elements with Parsed Character Data
<!ELEMENT To (#PCDATA)>
<!ELEMENT From (#PCDATA)>
EX:
When children are declared in a sequence separated by commas, the children must
appear in the same sequence in the document.
In a full declaration, the children must also be declared.
Children can have children.
Tag qualifiers
* Indicates zero or more occurrence.
<!ELEMENT color (Fill-Red*)>
? Indicates Zero or one time occurrence.
<!ELEMENT color (Fill-Red?)>
+ Indicates one or more occurrence
<!ELEMENT color (Fill-Red+)>
( ) Indicates a group of expressions to be matched together.
EX:<!ELEMENT E-mail(#PCDATA|To|From|Subject|Body)*>
| Indicates an option.
<!ELEMENT E-mail (To,From,Subject,(Message|Body))>
DTD-Attributes:
Attributes provide extra information about elements.
In a DTD, attributes are declared with an ATTLIST declaration.
Declaring Attributes
The ATTLIST declaration defines the element having a attribute with attribute name ,
attribute type , and attribute default value. An attribute declaration has the following syntax:
<!ATTLIST element-name attribute-name attribute-type default-value>
DTD example:
<!ATTLIST reciept type CDATA "check">
XML example:
<reciept type="check" />
DTD-Entities
Entities are variables used to define shortcuts to standard text or special characters. Entity
references are references to entities Entities can be declared internally or externally.
Syntax:
<!ENTITY entity-name "entity-value">
XML Schema
XSLT
SAX is a lexical, event-driven interface in which a document is read serially and its contents are
reported as callbacks to various methods on a handler object of the user's design. SAX is fast
and efficient to implement, but difficult to use for extracting information at random from the
XML, since it tends to burden the application author with keeping track of what part of the
document is being processed. It is better suited to situations in which certain types of
information are always handled the same way, no matter where they occur in the document.