HTML Notes

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 18

1

III YEAR VI SEMESTER


Paper-VII : Elective-C
Web Technologies

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>

11. sub and sup tag:


These tags are used for subscript and superscript effects on the text.
<sub>.............</sub>
<sup>….........</sup>

12. Break tag:


This tag is used to the break the line and start from the next line.
<br>

13. &amp &lt &gt &nbsp &quot


These are character escape sequence which are required if you want to
display
characters that HTML uses as control sequences.
Example: < can be represented as &lt.

14. Anchor tag:


This tag is used to link two HTML pages, this is represented by <a>
<a href=” path of the file”> some text </a>
href is an attribute which is used for giving the path of a file which you want
to
link.

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,

<ul type=”disc” | “square” | ”circle” > …..</ul>


This tag is used for basic unordered list which uses a bullet in front of each
tag, every
thing between the tag is encapsulated within <li> tags.
2. ordered list,

<ol type=”1” | ”a” | “I” start=”n”>…..</ol>


This tag is used for unordered list which uses a number in front of each list item or it
uses any element which is mentioned in the type attribute of the <ol> tag, start
attribute is used for indicating the starting number of the 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

The HTML code for a link is simple. It looks like this:


<a href="url" target=””>Link text</a>

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.

<form action=”URL” method = “post” | “get”>…….</form>

Cascading Style sheets:

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.

1. Inside the head section.

2. Within the body section.


3. In an external file.
The HTML <script> tag is used to insert a Java Script into an HTML page.
Events
By using JavaScript, we have the ability to create dynamic web pages. Events are actions that
can be detected by Java Script.

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 web page or an image loading

Mousing over a hot spot on the web page

Selecting an input box in an HTML form

Submitting an HTML form

A keystroke

The following table lists the events recognized by JavaScript:

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.

var urArray=new Array()

DOM (document object model)

A DOM (document object model) is an application programming interface (API) for


representing a document (such as an HTML document) and accessing and manipulating the
various elements (such as HTML tags and strings of text) that make up that document. Java
Script-enabled web browsers have always defined a document object model; a web-browser
DOM may specify, for example: that the forms in an HTML document are accessible
through the forms[] array of the Document object.

form validation

Form validation is the process of checking that a form has been filled in correctly or not before
it is processed.

There are two methods for the form

validation. 1: Client-Side validation

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:

An XML document is composed of


1. Declarations (prolog, dtd reference)
2. Elements
3. Comments
4. Entities (predefined, custom defined, character entities)

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

 All XML elements must have a closing tag


 XML tags are case sensitive
 XML Elements Must be Properly Nested
 XML Documents Must Have a Root Element
 Always Quote the XML Attribute Values
 With XML, White Space is Preserved
 Comments in XML <!-- This is a comment -->
 XML Elements have Relationships
o Elements in a xml document are related as parents and children.

XML elements must follow these naming conventions:


Names must not start with a number or punctuation character but it can contain letters,
numbers, and other characters without spaces. Names must not start with the letters
xml (or XML, or Xml, etc)

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">

DTD(Document Type Definition)


A Document Type Definition (DTD) defines the legal building blocks of an XML
document.It defines the document structure with a list of legal elements and attributes.
A DTD can be defined inside a XML document, or a external reference can be
declared .

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.

Building blocks of XML DTD Documents:

 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 &amp , &lt, and &gt 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)>

Elements with Children (sequences)


Elements with one or more children are declared with the name of the children elements
inside the parentheses as :
<!ELEMENT element-name (child1)>
or
<!ELEMENT element-name (child1,child2,...)>

EX:

<!ELEMENT E-mail (To,From,Subject,Body)>

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))>

Special tag Values in DTD

• Tag definition can have following instead of sub-tags:


• ANY
 Indicates that the tag can contain any other defined element or PCDATA.
 Usually used for the root element.
 Elements can occur in any order in such a document.
 Not recommended to be used.
• EMPTY
 It says that the element contains no contents (and consequently no corresponding
end-tag)
 Ex: to allow a tag flag used as <flag/> in a xml file the DTD entry should be
<!ELEMENT flag EMPTY>

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.

Internal Entity Declaration

Syntax:
<!ENTITY entity-name "entity-value">

XML Schema

XML Schemas are more powerful than DTDs.


XML Schema is a W3C Standard. It is an XML-based alternative to DTDs.
It describes the structure of an XML document.
The XML Schema language is also referred to as XML Schema Definition (XSD).
We think that very soon XML Schemas will be used in most Web applications as a
replacement for DTDs. Here are some reasons:

 XML Schemas are extensible to future additions


 XML Schemas are richer and more powerful than DTDs
 XML Schemas are written in XML, supports data types and namespaces.

What is an XML Schema?


 XML Schema is used to define the legal building blocks of an XML document, just
like a DTD.
 An XML Schema defines user-defined integrants like elements, sub-elements and
attributes needed in a xml document.
 It defines the data types for elements and attributes along with the occurrence order .
 It defines whether an element is empty or can include text.
 It also defines default and fixed values for elements and attributes

Features of XML Schemas :

XML Schemas Support Data Types


One of the greatest strengths of XML Schemas is its support for data types. With support for
data types:

 It is easier to describe allowable document content


 It is easier to validate the correctness of data
 It is easier to work with data from a database
 It is easier to define data facets (restrictions on data)
 It is easier to define data patterns (data formats)
 It is easier to convert data between different data types

XML Schemas use XML Syntax


Another great strength about XML Schemas is that they are written in XML. Simple XML
editors are used to edit the Schema files. Even the same XML parsers can be used to parse
the Schema files.
XML Schemas are Extensible
XML Schemas are extensible, because they are written in XML.So a user can reuse a
Schema in other Schemas and can also refer multiple schemas in the same document. He can
also create his own data types derived from the standard types
XML Schemas Secure Reliable Data Communication
When sending data from a sender to a receiver, it is essential that both parts have the same
"expectations" about the content. With XML Schemas, the sender can describe the data in a way
that the receiver will understand. A date like: "03-11-2004" will, in some countries, be
interpreted as 3.November and in other countries as 11.March.However, an XML element with
a data type like this: <datetype="date">2004-03-11</date> ensures a mutual understanding of
the content, because the XML data type "date" requires the format "YYYY-MM-DD".

XSLT

XSLT (Extensible Stylesheet Language Transformations) is a declarative, XML-based


language used for the transformation of XML documents. The original document is not
changed; rather, a new document is created based on the content of an existing one.[2] The new
document may be serialized (output) by the processor in standard XML syntax or in another
format, such as HTML or plain text.[3] XSLT is most often used to convert data between
different XML schemas or to convert XML data into web pages or PDF documents.

Simple API for XML (SAX)

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.

Document Object Model (DOM)

DOM (Document Object Model) is an interface-oriented Application Programming Interface


that allows for navigation of the entire document as if it were a tree of "Node" objects
representing the document's contents. A DOM document can be created by a parser, or can be
generated manually by users (with limitations). Data types in DOM Nodes are abstract;
implementations provide their own programming language-specific bindings. DOM
implementations tend to be memory intensive, as they generally require the entire document to
be loaded into memory and constructed as a tree of objects before access is allowed.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy