Scribd
Upload
19 views

Unit-II Web Tech

The document discusses HTML attributes and how they provide additional information about HTML elements. It describes common attributes like title, href, src, width, height, and alt and how they are used with different HTML tags. It also provides guidelines that attribute names should be in lowercase and attribute values should be enclosed in quotation marks.

Uploaded by

mishrakhushi2510
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
19 views

Unit-II Web Tech

The document discusses HTML attributes and how they provide additional information about HTML elements. It describes common attributes like title, href, src, width, height, and alt and how they are used with different HTML tags. It also provides guidelines that attribute names should be in lowercase and attribute values should be enclosed in quotation marks.

Uploaded by

mishrakhushi2510
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 55

Unit-2(KCS602)

Web Page Design

HTML:-HTML is the standard markup language for creating Web pages.

What is HTML?

 HTML stands for Hyper Text Markup Language


 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this
is a link", etc.

A Simple HTML Document


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

Example Explained

 The <!DOCTYPE html> declaration defines that this document is an HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the browser's title
bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

What is an HTML Element?


An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
HTML Lists
Unordered lists and ordered lists are commonly used in HTML:

Unordered List

 The first item


 The second item
 The third item
 The fourth item

Ordered List

1. The first item


2. The second item
3. The third item
4. The 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> Unordered List with Default Bullets


<li>Coffee</li>  Coffee
<li>Tea</li>  Tea
<li>Milk</li>  Milk
</ul>

Unordered HTML Lists - The Style Attribute


A style attribute can be added to an unordered list, to define the style of the marker:

Style Description

list-style-type:disc The list items will be marked with bullets (default)

list-style-type:circle The list items will be marked with circles

list-style-type:square The list items will be marked with squares

list-style-type:none The list items will not be marked

Disc:
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Circle:

<ul style="list-style-type:circle"> Unordered List with Circle Bullets


<li>Coffee</li>
<li>Tea</li> o Coffee
<li>Milk</li> o Tea
</ul> o Milk

Square:
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

None:
<ul style="list-style-type:none">
<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

A type attribute can be added to an ordered 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 roman numbers

Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Lowercase Letters:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Uppercase Roman Numbers:


<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Lowercase Roman Numbers:


<ol type="i">
<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

List can be nested (lists inside lists):


Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

NOTE: List items can contain new list, and other HTML elements, like images and links, etc.

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:
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html>

With a little extra style, you can make it look like a menu:
Example
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;
}

Topic Summary

 Use the HTML <ul> element to define an unordered list


 Use the HTML style attribute to define the bullet style
 Use the HTML <ol> element to define an ordered list
 Use the HTML type attribute to define the numbering type
 Use the HTML <li> element to define a list item
 Use the HTML <dl> element to define a description list
 Use the HTML <dt> element to define the description term
 Use the HTML <dd> element to define the description data
 Lists can be nested inside lists
 List items can contain other HTML elements
 Use the CSS property display:inline to display a list horizontally

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

HTML Attributes
Attributes provide additional information about HTML elements.

HTML Attributes

 HTML elements can have attributes


 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes come in name/value pairs like: name="value"

The lang Attribute


 The document language can be declared in the <html> tag.
 The language is declared in the lang attribute.
 Declaring a language is important for accessibility applications (screen readers) and search
engines:
<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

The first two letters specify the language (en). If there is a dialect, use two more letters (US).

The title Attribute


HTML paragraphs are defined with the <p> tag.
In this example, the <p> element has a title attribute. The value of the attribute is "About
W3Schools":
Example
<p title="About AKTU">
W3Schools is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>

 When you move the mouse over the element, the title will be displayed as a tooltip.

The href Attribute


HTML links are defined with the <a> tag. The link address is specified in the href attribute:
Example
<a href="http://www.aktu.ac.in">This is a link</a>
You will learn more about links and the <a> tag later in this tutorial.

Size Attributes
HTML images are defined with the <img> tag.
The filename of the source (src), and the size of the image (width and height) are all provided
as attributes:
Example
<img src="aktu.jpg" width="104" height="142">
The image size is specified in pixels: width="104" means 104 screen pixels wide.
You will learn more about images and the <img> tag later in this tutorial.

The alt Attribute


The alt attribute 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.
Example
<img src="aktu.jpg" alt="www.aktu.ac.in" width="104" height="142">

We Suggest: Always Use Lowercase Attributes


The HTML5 standard does not require lower case attribute names.
The title attribute can be written with upper or lower case like Title and/or TITLE.
W3C recommends lowercase in HTML4, and demands lowercase for stricter document types like
XHTML.

 Lower case is the most common. Lower case is easier to type.At W3Schools we always use lower
case attribute names.
We Suggest: Always Quote Attribute Values
The HTML5 standard does not require quotes around attribute values.
The href attribute, demonstrated above, can be written as:
Example
<a href=http:// www.aktu.ac.in >

W3C recommends quotes in HTML4, and demands quotes for stricter document types like
XHTML.

Sometimes it is necessary to use quotes. This will not display correctly, because it contains a space:
Example
<p title=About aktu >

 Using quotes are the most common. Omitting quotes can produce errors.At W3Schools we
always use quotes around attribute values.

Single or Double Quotes?


Double style quotes are the most common in HTML, but single style can also be used.
In some situations, when the attribute value itself contains double quotes, it is necessary to use single
quotes:
<p title='John "ShotGun" Nelson'>

Or vice versa:
<p title="John 'ShotGun' Nelson">

HTML Attributes
Below is an alphabetical list of some attributes often used in HTML:

Attribute Description

alt Specifies an alternative text for an image

disabled Specifies that an input element should be disabled

href Specifies the URL (web address) for a link

id Specifies a unique id for an element


src Specifies the URL (web address) for an image

style Specifies an inline CSS style for an element

title Specifies extra information about an element (displayed as a tool tip)

value Specifies the value (text content) for an input element.

A complete list of all attributes for each HTML element, is listed in our: HTML Tag Reference.

HTML Links
Links are found in nearly all web pages. Links allow users to click their way from page to page.

HTML Links - Hyperlinks


HTML links are hyperlinks.
A hyperlink is a text or an image you can click on, and jump to another document.

HTML Links - Syntax


In HTML, links are defined with the <a> tag:
<a href="url">link text</a>
Example
<a href="http:// www.aktu.ac.in /html/">Visit our HTML tutorial</a>

The href attribute specifies the destination address (http://www.w3schools.com/html/)

The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text, will send you to the specified address.
 The link text does not have to be text. It can be an HTML image or any other HTML element.
 Without a trailing slash on subfolder addresses, you might generate two requests to the server.
Many servers will automatically add a trailing slash to the address, and then create a new request.

Local Links
The example above used an absolute URL (A full web address).
A local link (link to the same web site) is specified with a relative URL (without http://www....).
Example
<a href="html_images.asp">HTML 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

You can change the default colors, by using styles:


Example
<style>
a:link {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover {color:red; background-color:transparent; text-decoration:underline}
a:active {color:yellow; background-color:transparent; text-decoration:underline}
</style>

HTML Links - The target Attribute


The target attribute specifies where to open the linked document.
This example will open the linked document in a new browser window or in a new tab:
Example
<a href="http:// www.aktu.ac.in /" 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 Opens the linked document in the parent frame

_top Opens the linked document in the full body of the window

framename Opens the linked document in a named frame

If your webpage is locked in a frame, you can use target="_top" to break out of the frame:
Example
<a href="http:// www.aktu.ac.in /html/" target="_top">HTML5 tutorial!</a>

HTML Links - Image as Link

It is common to use images as links:


Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>

 border:0 is added to prevent IE9 (and earlier) from displaying a border around the image.

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
First, create a bookmark with the id attribute:
<h2 id="tips">Useful Tips Section</h2>

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

Or, add a link to the bookmark ("Useful Tips Section"), from another page:

Example
<a href="html_tips.htm#tips">Visit the Useful Tips Section</a>

Summary Points

 Use the HTML <a> element to define a link


 Use the HTML href attribute to define the link address
 Use the HTML target attribute to define where to open the linked document
 Use the HTML <img> element (inside <a>) to use an image as a link
 Use the HTML id attribute (id="value") to define bookmarks in a page
 Use the HTML href attribute (href="#value") to link to the bookmark

HTML Images
<!DOCTYPE html>
<html>
<body>

<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

</body>
</html>

 Always specify the width and height of an image. If width and height are not specified, the
page will flicker while the image loads.

HTML Images Syntax


In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:
<img src="url" alt="some_text">

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, or if the user uses a screen
reader).
If a browser cannot find an image, it will display the alt text:
Example
<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
The alt attribute is required. A web page will not validate correctly without it.

HTML Screen Readers


 A screen reader is a software programs that can read what is displayed on a screen.
 Screen readers are useful to people who are blind, visually impaired, or learning disabled.
 Screen readers can read the alt attribute.

Image Size - Width and Height


You can use the style attribute to specify the width and height of an image.
The values are specified in pixels (use px after the value):
Example
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Alternatively, you can use width and height attributes. Here, the values are specified in pixels by
default:
Example
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

Width and Height or Style?

Both the width, height, and style attributes are valid in the latest HTML5 standard.
We suggest you use the style attribute. It prevents styles sheets from changing the original size of
images:
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html>

Images in Another Folder


If not specified, the browser expects to find the image in the same folder as the web page.
However, it is common to store images in a sub-folder. You must then include the folder name in
the src attribute:
Example
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

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:
Example
<img src="http:// www.aktu.ac.in /images/aktu_green.jpg" alt="aktu.ac.in ">

Animated Images
The GIF standard allows animated images:
Example
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Note that the syntax of inserting animated images is no different from non-animated images.

Using an Image as a Link


To use an image as a link, simply nest the <img> tag inside the <a> tag:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

 Add "border:0;" to prevent IE9 (and earlier) from displaying a border around the image.

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:

Example
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.
</p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.
</p>

Image Maps
 Use the <map> tag to define an image-map. 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:
Example
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

Summary Points

 Use the HTML <img> element to define an image


 Use the HTML src attribute to define the URL of the image
 Use the HTML alt attribute to define an alternate text for an image, if it cannot be
displayed
 Use the HTML width and height attributes to define the size of the image
 Use the CSS width and height properties to define the size of the image
(alternatively)
 Use the CSS float property to let the image float
 Use the HTML <map> element to define an image-map
 Use the HTML <area> element to define the clickable areas in the image-map
 Use the HTML <img>'s element usemap attribute to point to an image-map
 Loading images takes time. Large images can slow down your page. Use images
carefully.

HTML Tables

HTML Table Example

Number First Name Last Name Points

1 Eve Jackson 94

2 John Doe 80

3 Adam Johnson 67

4 Jill Smith 50

Defining HTML Tables


Example
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Example explained:
 Tables are defined with the <table> tag.
 Tables are divided into table rows with the <tr> tag.
 Table rows are divided into table data with the <td> tag.
 A table row can also be divided into table headings with the <th> tag.

Table data <td> are the data containers of the table.


They can contain all sorts of HTML elements like text, images, lists, other tables, etc.

An HTML Table with a Border Attribute


If you do not specify a border for the table, it will be displayed without borders.
A border can be added using the border attribute:
Example
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
The border attribute is on its way out of the HTML standard! It is better to use CSS.

To add borders, use the CSS border property:


Example
table, th, td {
border: 1px solid black;
}

Remember to define borders for both the table and the table cells.

An HTML Table with Collapsed Borders


If you want the borders to collapse into one border, add CSS border-collapse:
Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

An HTML Table with Cell Padding


 Cell padding specifies the space between the cell content and its borders.
 If you do not specify a padding, the table cells will be displayed without padding.
 To set the padding, use the CSS padding property:
Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}

HTML Table Headings


Table headings are defined with the <th> tag.
By default, all major browsers display table headings as bold and centered:
Example
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
To left-align the table headings, use the CSS text-align property:
Example
th {
text-align: left;
}

An HTML Table with Border Spacing


Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-spacing property:
Example
table {
border-spacing: 5px;
}
If the table has collapsed borders, border-spacing has no effect.
Table Cells that Span Many Columns
To make a cell span more than one column, use the colspan attribute:
Example
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

Table Cells that Span Many Rows


To make a cell span more than one row, use the rowspan attribute:
Example
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>

An HTML Table With a Caption


To add a caption to a table, use the <caption> tag:
Example
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>

The <caption> tag must be inserted immediately after the <table> tag.

A Special Style for One Table


To define a special style for a special table, add an id attribute to the table:
Example
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Now you can define a special style for this table:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
And add more styles:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}

Summary Points

 Use the HTML <table> element to define a table


 Use the HTML <tr> element to define a table row
 Use the HTML <td> element to define a table data
 Use the HTML <th> element to define a table heading
 Use the HTML <caption> element to define a table caption
 Use the CSS border property to define a border
 Use the CSS border-collapse property to collapse cell borders
 Use the CSS padding property to add padding to cells
 Use the CSS text-align property to align cell text
 Use the CSS border-spacing property to set the spacing between cells
 Use the colspan attribute to make a cell span many columns
 Use the rowspan attribute to make a cell span many rows
 Use the id attribute to uniquely define one table

HTML Forms

The <form> Element


HTML forms are used to collect user input.
The <form> element defines an HTML form:
<form>
.
form elements
.
</form>

HTML forms contain form elements.


Form elements are different types of input elements, checkboxes, radio buttons, submit buttons,
and more.

The <input> Element


 The <input> element is the most important form element.
 The <input> element has many variations, depending on the type attribute.
Here are the types used in this chapter:

Type Description

text Defines normal text input

radio Defines radio button input (for selecting one of many choices)

submit Defines a submit button (for submitting the form)


You will learn a lot more about input types later in this tutorial.

Text Input
<input type="text"> defines a one-line input field for text input:
Example
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
This is how it will look like in a browser:
First name:

Last name:

Note: The form itself is not visible. Also note that the default width of a text field is 20
characters.

Radio Button Input


<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:
Example
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
This is how the HTML code above will be displayed in a browser:

Male

Female

The Submit Button


<input type="submit"> defines a button for submitting a form to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
Example
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
This is how the HTML code above will be displayed in a browser:
First name:
Mickey

Last name:
Mouse

Submit

The Action Attribute


The action attribute defines the action to be performed when the form is submitted.
The common way to submit a form to a server, is by using a submit button.
Normally, the form is submitted to a web page on a web server.
In the example above, a server-side script is specified to handle the submitted form:
<form action="action_page.php">
If the action attribute is omitted, the action is set to the current page.

The Method Attribute


The method attribute specifies the HTTP method (GET or POST) to be used when submitting
the forms:
<form action="action_page.php" method="get">

or:
<form action="action_page.php" method="post">

When to Use GET?


You can use GET (the default method):
If the form submission is passive (like a search engine query), and without sensitive information.
When you use GET, the form data will be visible in the page address:
action_page.php?firstname=Mickey&lastname=Mouse

GET is best suited to short amounts of data. Size limitations are set in your browser.
When to Use POST?
You should use POST:
If the form is updating data, or includes sensitive information (password).
POST offers better security because the submitted data is not visible in the page address.

The Name Attribute


To be submitted correctly, each input field must have a name attribute.
This example will only submit the "Last name" input field:
Example
<form action="action_page.php">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Grouping Form Data with <fieldset>


The <fieldset> element groups related data in a form.
The <legend> element defines a caption for the <fieldset> element.
Example
<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

This is how the HTML code above will be displayed in a browser:


Personal information:First name:
Mickey

Last name:
Mouse
Submit

HTML Form Attributes


An HTML <form> element, with all possible attributes set, will look like this:
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
.
</form>

Here is the list of <form> attributes:

Attribut Description
e

accept- Specifies the charset used in the submitted form (default: the page charset).
charset

action Specifies an address (url) where to submit the form (default: the submitting page).

autocom Specifies if the browser should autocomplete the form (default: on).
plete

enctype Specifies the encoding of the submitted data (default: is url-encoded).

method Specifies the HTTP method used when submitting the form (default: GET).

name Specifies a name used to identify the form (for DOM usage: document.forms.name).

novalida Specifies that the browser should not validate the form.
te

target Specifies the target of the address in the action attribute (default: _self).

You will learn more about attributes in the next chapters.

The <select> Element (Drop-Down List)


The <select> element defines a drop-down list:
Example
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <option> elements defines the options to select.
The list will normally show the first item as selected.
You can add a selected attribute to define a predefined option.
Example
<option value="fiat" selected>Fiat</option>

The <textarea> Element


The <textarea> element defines a multi-line input field (a text area):
Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

This is how the HTML code above will be displayed in a browser:

The <button> Element


The <button> element defines a clickable button:
Example
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
This is how the HTML code above will be displayed in a browser:

Click Me!

Input Types
This chapter describes the input types of the <input> element.
Input Type: text
<input type="text"> defines a one-line input field for text input:
Example
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
This is how the HTML code above will be displayed in a browser:
First name:

Last name:

Input Type: password


<input type="password"> defines a password field:
Example
<form>
User name:<br>
<input type="text" name="username">
<br>
User password:<br>
<input type="password" name="psw">
</form>
This is how the HTML code above will be displayed in a browser:
User name:

User password:

The characters in a password field are masked (shown as asterisks or circles).

Input Type: submit


<input type="submit"> defines a button for submitting form input to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
Example
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
This is how the HTML code above will be displayed in a browser:
First name:
Mickey

Last name:
Mouse

Submit

If you omit the submit button's value attribute, the button will get a default text:
Example
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit">
</form>

Input Type: radio


<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:
Example
<form>
<input type="radio" name="sex" value="male" checked> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>
This is how the HTML code above will be displayed in a browser:
Male
Female

Input Type: checkbox


<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike
<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
This is how the HTML code above will be displayed in a browser:

I have a bike
I have a car

Input Type: button


<input type="button"> defines a button:
Example
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
This is how the HTML code above will be displayed in a browser:

HTML5 Input Types


HTML5 added several new input types:

 color
 date
 datetime
 datetime-local
 email
 month
 number
 range
 search
 tel
 time
 url
 week

Input types, not supported by old web browsers, will behave as input type text.

Input Type: number


The <input type="number"> is used for input fields that should contain a numeric value.
You can set restrictions on the numbers.
Depending on browser support, the restrictions can apply to the input field.
Example
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>

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


You will learn more about input restrictions in the next chapter.
Example
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Input Type: date


The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
Birthday:
<input type="date" name="bday">
</form>
You can add restrictions to the input:
Example
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>

Input Type: color


The <input type="color"> is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.

Example
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>

Input Type: range

The <input type="range"> is used for input fields that should contain a value within a range.
Depending on browser support, the input field can be displayed as a slider control.
Example
<form>
<input type="range" name="points" min="0" max="10">
</form>

You can use the following attributes to specify restrictions: min, max, step, value.

Input Type: month


The <input type="month"> allows the user to select a month and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>

Input Type: week

The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
Select a week:
<input type="week" name="week_year">
</form>

Input Type: time


The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
Example
<form>
Select a time:
<input type="time" name="usr_time">
</form>

Input Type: datetime


The <input type="datetime"> allows the user to select a date and time (with time zone).
Example
<form>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</form>
Input Type: datetime-local
The <input type="datetime-local"> allows the user to select a date and time (no time zone).
Depending on browser support, a date picker can show up in the input field.
Example
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>

Input Type: email


The <input type="email"> is used for input fields that should contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated when
submitted.
Some smartphones recognize the email type, and adds ".com" to the keyboard to match email
input.
Example
<form>
E-mail:
<input type="email" name="email">
</form>

Input Type: search


The <input type="search"> is used for search fields (a search field behaves like a regular text
field).
Example
<form>
Search Google:
<input type="search" name="googlesearch">
</form>

Input Type: tel


The <input type="tel"> is used for input fields that should contain a telephone number.
The tel type is currently supported only in Safari 8.
Example
<form>
Telephone:
<input type="tel" name="usrtel">
</form>

Input Type: url


The <input type="url"> is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
Example
<form>
Add your homepage:
<input type="url" name="homepage">
</form>

What is CSS?
Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to
simplify the process of making web pages presentable.
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 is easy to learn and understand but it provides a powerful control over the presentation of an
HTML document. Most commonly, CSS is combined with the markup languages HTML or
XHTML.
Advantages of CSS
 CSS saves time - You can write CSS once and then reuse the 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.
 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 it to all the occurrences of that tag.
So, less code means faster download times.
 Easy maintenance - To make a global change, simply change the style, and all the
elements in all the web pages will be updated automatically.
 Superior styles to HTML - CSS has a much wider array of attributes than HTML, so you
can give a far better look to your HTML page in comparison to HTML attributes.
 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 cellphones or for
printing.
 Global web standards – Now HTML attributes are being deprecated and it is being
recommended to use CSS. So it’s a good idea to start using CSS in all the HTML pages to
make them compatible with future browsers.
CSS Syntax
CSS syntax includes selectors, properties, values, declarations, declaration blocks, rulesets, at-
rules, and statements.

 A selector is a code snippet used to identify the web page element or elements that are to be
affected by the styles.
 A property is the aspect of the element that is to be affected. For example, color, padding,
margin, and background are some of the most commonly used CSS properties.
 A value is used to define a property. For example, the property color might be given the value of
red like this: color: red;.
 The combination of a property and a value is called a declaration.
 In many cases, multiple declarations are applied to a single selector. A declaration block is the
term used to refer to all of the declarations applied to a single selector.
 A single selector and the declaration block that follows it in combination are referred to as
a ruleset.
 At-rules are similar to rulesets but begin with the @ sign rather than with a selector. The most
common at-rule is the @media rule which is often used to create a block of CSS rules that are
applied based on the size of the device viewing the web page.

An Example of CSS Syntax


Let’s use a block of CSS to clarify what each of these items is.

h1 {
color: red;
font-size: 3em;
text-decoration: underline;
}

In this example, h1 is the selector. The selector is followed by a declaration block that includes three
declarations. Each declaration is separated from the next by a semicolon. The tabs and line breaks are
optional but used by most developers to make the CSS code more human-readable.
By using h1 as the selector, we are saying that every level 1 heading on the web page should follow
the declarations contained in this ruleset.
The ruleset contains three declarations:

 color:red;
 font-size: 3em;
 text-decoration: underline;

color, font-size, and text-decoration are all properties. There are literally hundreds of CSS
properties you can use, but only a few dozen are commonly used.
We applied the values red, 3em, and underline to the properties we used. Each CSS property is
defined to accept values formatted in a specific way.
When to Use Classes
Use classes when there are multiple elements on a single web page that need to be styled. For
example, let’s say that you want links in the page header and footer to be styled in a consistent
manner, but not the same way as the links in the body of the page. To pinpoint those links you could
add a class to each of those links or the container holding the links. Then, you could specify the styles
using the class and be sure that they would only be applied to the links with that class attribute.

When to Use IDs


Use IDs for elements that only appear once on a web page. For example, if you’re using an HTML
unordered list for your site navigation, you could use an ID such as nav to create a unique hook for
that list.
Here’s an example of the HTML and CSS code for a simple navigation bar for a basic e-commerce
site.

<style>
#nav {
background: lightgray;
overflow: auto;
}
#nav li {
float: left;
padding: 10px;
}
#nav li:hover {
background: gray;
}
</style>

<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">Shop</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>

That code would produce a horizontal navigation menu with a light gray background beginning from
the left-hand side of the page. Each navigation item will have 10 pixels of spacing on all sides and
the background of each item will become darker when you allow your mouse to hover over it.
Any additional lists on the same web page would not be affected by that code.
#example-nav {
background: lightgray;
overflow: auto;
}
#example-nav li {
float: left;
padding: 10px;
}
#example-nav li:hover {
background: gray;
}

Ways of Linking CSS Rules to an HTML Document


There are three ways of adding CSS rules to a web page:

 Inline styles
 Internal stylesheets
 External stylesheets

In the vast majority of cases, external stylesheets should be used. However, there are instances where
inline styles or internal stylesheets may be used.
Inline Styles
Inline styles are applied to specific HTML elements. The HTML attribute style is used to define
rules that only apply to that specific element. Here’s a look at the syntax for writing inline styles.

<h1 style="color:red; padding:10px; text-decoration:underline;">Example Heading</h1>

That code would cause just that heading to render with red underlined text and 10 pixels of padding
on all sides. There are very few instances where inline styles should be used. In nearly all cases they
should be avoided and the styles added to a stylesheet.
Internal Stylesheets
The earlier examples in this tutorial make use of internal stylesheets. An internal stylesheet is a block
of CSS added to an HTML document head element. The style element is used between the opening
and closing head tags, and all CSS declarations are added between the style tags.
We can duplicate the inline styles from the code above in an internal stylesheet using this syntax.

<head>
<style>
h1 {
color: red;
padding: 10px;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Example Heading</h1>
</body>

That code would produce the same results as the inline styles. However, the benefit to using internal
stylesheets rather than inline styles is that all h1 elements on the page will be affected by the styles.
External Stylesheets
External stylesheets are documents containing nothing other than CSS statements. The rules defined
in the document are linked to one or more HTML documents by using the link tag within
the head element of the HTML document.
To use an external stylesheet, first create the CSS document.

/*************************************************
Save with a name ending in .css such as styles.css
*************************************************/
h1 {
color: red;
padding: 10px;
text-decoration: underline;
}

Now that we have an external stylesheet with some styles, we can link it to an HTML document
using the link element.

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Example Heading</h1>
</body>
When this HTML document is loaded the link tag will cause the styles in the file styles.css to be
loaded into the web page. As a result, all level 1 heading elements will appear with red text,
underlined, and with 10 pixels of padding applied to every side.

Introduction to XML
XML was designed to describe data.
HTML was designed to display data.

What is XML?

 XML stands for Extensible Markup Language


 XML is a markup language much like HTML
 XML was designed to describe data, not to display data
 XML tags are not predefined. You must define your own tags
 XML is designed to be self-descriptive
 XML is a W3C Recommendation

The Difference between XML and HTML


 XML is not a replacement for HTML.
 XML and HTML were designed with different goals.
 XML was designed to describe data, with focus on what data is.
 HTML was designed to display data, with focus on how data looks.
 HTML is about displaying information, while XML is about carrying information.

XML Does Not DO Anything


Maybe it is a little hard to understand, but XML does not DO anything.
The following example is a note to Tove, from Jani, stored as XML:
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

The note above is quite self-descriptive. It has sender and receiver information, it also has a heading
and a message body.
But still, this XML document does not DO anything. It is just information wrapped in tags. Someone
must write a piece of software to send, receive or display it.

With XML You Invent Your Own Tags


 The tags in the example above (like <to> and <from>) are not defined in any XML standard.
These tags are "invented" by the author of the XML document.
 That is because the XML language has no predefined tags.
 The tags used in HTML are predefined. HTML documents can only use tags defined in the
HTML standard (like <p>, <h1>, etc.).
 XML allows the author to define his/her own tags and his/her own document structure.

XML is Not a Replacement for HTML


XML is a complement to HTML.
It is important to understand that XML is not a replacement for HTML. In most web applications,
XML is used to describe data, while HTML is used to format and display the data.

How Can XML be used?


XML is used in many aspects of web development, often to simplify data storage and sharing.

1. XML Separates Data from HTML


 If you need to display dynamic data in your HTML document, it will take a lot of work to edit the
HTML each time the data changes.
 With XML, data can be stored in separate XML files. This way you can concentrate on using
HTML/CSS for display and layout, and be sure that changes in the underlying data will not
require any changes to the HTML.
 With a few lines of JavaScript code, you can read an external XML file and update the data
content of your web page.

2. XML Simplifies Data Sharing


 In the real world, computer systems and databases contain data in incompatible formats.
 XML data is stored in plain text format. This provides a software- and hardware-independent way
of storing data.
 This makes it much easier to create data that can be shared by different applications.

3. XML Simplifies Data Transport


 One of the most time-consuming challenges for developers is to exchange data between
incompatible systems over the Internet.
 Exchanging data as XML greatly reduces this complexity, since the data can be read by different
incompatible applications.

4. XML Simplifies Platform Changes


 Upgrading to new systems (hardware or software platforms), is always time consuming. Large
amounts of data must be converted and incompatible data is often lost.
 XML data is stored in text format. This makes it easier to expand or upgrade to new operating
systems, new applications, or new browsers, without losing data.
5. XML Makes Your Data More Available
 Different applications can access your data, not only in HTML pages, but also from XML data
sources.
 With XML, your data can be available to all kinds of "reading machines" (Handheld computers,
voice machines, news feeds, etc.), and make it more available for blind people, or people with
other disabilities.

XML Tree
XML documents form a tree structure that starts at "the root" and branches to "the leaves".

An Example XML Document


XML documents use a self-describing and simple syntax:
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

The first line is the XML declaration. It defines the XML version (1.0).
The next line describes the root element of the document (like saying: "this document is a note"):
<note>

The next 4 lines describe 4 child elements of the root (to, from, heading, and body):
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>

And finally the last line defines the end of the root element:
</note>

You can assume, from this example, that the XML document contains a note to Tove from Jani.
Don't you agree that XML is pretty self-descriptive?

XML Documents Form a Tree Structure


XML documents must contain a root element. This element is "the parent" of all other elements.
The elements in an XML document form a document tree. The tree starts at the root and branches to
the lowest level of the tree.
All elements can have sub elements (child elements):
<root>
<child>
<subchild>.....</subchild>
</child>
</root>

The terms parent, child, and sibling are used to describe the relationships between elements. Parent
elements have children. Children on the same level are called siblings (brothers or sisters).
All elements can have text content and attributes (just like in HTML).

Example:

The image above represents one book in the XML below:


<bookstore>
<book category="COOKING">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="CHILDREN">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="WEB">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>

The root element in the example is <bookstore>. All <book> elements in the document are contained
within <bookstore>.
The <book> element has 4 children: <title>,< author>, <year>, <price>.
XML Elements
An XML document contains XML Elements.

What is an XML Element?

An XML element is everything from (including) the element's start tag to (including) the element's
end tag.
An element can contain:
 other elements
 text
 attributes
 or a mix of all of the above...
<bookstore>
<book category="CHILDREN">
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="WEB">
<title>Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>
In the example above, <bookstore> and <book> have element contents, because they contain other
elements. <book> also has an attribute (category="CHILDREN"). <title>, <author>, <year>, and
<price> have text contentbecause they contain text.

Empty XML Elements

An element with no content is said to be empty.


In XML, you can indicate an empty element like this:
<element></element>
or you can use an empty tag, like this (this sort of element syntax is called self-closing):
<element />
The two forms above produce identical results in an XML parser.
Note: Empty elements do not have any content, but they can have attributes!

XML Naming Rules

XML elements must follow these naming rules:

 Element names are case-sensitive


 Element names must start with a letter or underscore
 Element names cannot start with the letters xml (or XML, or Xml, etc)
 Element names can contain letters, digits, hyphens, underscores, and periods
 Element names cannot contain spaces

Any name can be used, no words are reserved (except xml).

Best Naming Practices

 Create descriptive names, like this: <person>, <firstname>, <lastname>.


 Create short and simple names, like this: <book_title> not like this: <the_title_of_the_book>.
 Avoid "-". If you name something "first-name", some software may think you want to subtract
"name" from "first".
 Avoid ".". If you name something "first.name", some software may think that "name" is a
property of the object "first".
 Avoid ":". Colons are reserved for namespaces (more later).
Non-English letters like éòá are perfectly legal in XML, but watch out for problems if your software
doesn't support them.

Naming Styles

There are no naming styles defined for XML elements. But here are some commonly used:

Style Example Description

Lower case <firstname> All letters lower case

Upper case <FIRSTNAME> All letters upper case

Underscore <first_name> Underscore separates words

Pascal case <FirstName> Uppercase first letter in each word

Camel case <firstName> Uppercase first letter in each word except the first

If you choose a naming style, it is good to be consistent!


XML documents often have a corresponding database. A good practice is to use the naming rules of
your database for the elements in the XML documents.

XML Elements are Extensible

XML elements can be extended to carry more information.


Look at the following XML example:
<note>
<to>Tove</to>
<from>Jani</from>
<body>Don't forget me this weekend!</body>
</note>

Let's imagine that we created an application that extracted the <to>, <from>, and <body> elements
from the XML document to produce this output:

MESSAGE

To: Tove
From: Jani
Don't forget me this weekend!

Imagine that the author of the XML document added some extra information to it:
<note>
<date>2008-01-10</date>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

Should the application break or crash?


No. The application should still be able to find the <to>, <from>, and <body> elements in the XML
document and produce the same output.
One of the beauties of XML, is that it can be extended without breaking applications.

XML DTD
An XML document with correct syntax is called "Well Formed".
An XML document validated against a DTD is "Well Formed" and "Valid".

Valid XML Documents


A "Valid" XML document is a "Well Formed" XML document, which also conforms to the rules of a
DTD:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE note SYSTEM "Note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
The DOCTYPE declaration, in the example above, is a reference to an external DTD file. The
content of the file is shown in the paragraph below.

XML DTD
The purpose of a DTD is to define the structure of an XML document. It defines the structure with a
list of legal elements:
<!DOCTYPE note
[
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
The DTD above is interpreted like this:

 !DOCTYPE note defines that the root element of the document is note
 !ELEMENT note defines that the note element must contain four elements: "to, from,
heading, body"
 !ELEMENT to defines the to element to be of type "#PCDATA"
 !ELEMENT from defines the from element to be of type "#PCDATA"
 !ELEMENT heading defines the heading element to be of type "#PCDATA"
 !ELEMENT body defines the body element to be of type "#PCDATA"

#PCDATA means parse-able text data.

Using DTD for Entity Declaration


A doctype declaration can also be used to define special characters and character strings, used in the
document:
Example
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE note [
<!ENTITY nbsp "&#xA0;">
<!ENTITY writer "Writer: Donald Duck.">
<!ENTITY copyright "Copyright: W3Schools.">

<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
<footer>&writer;&nbsp;&copyright;</footer>
</note>
An entity has three parts: an ampersand (&), an entity name, and a semicolon (;).

Why Use a DTD?


With a DTD, independent groups of people can agree on a standard for interchanging data.
With a DTD, you can verify that the data you receive from the outside world is valid.
If you want to study DTD, please read our DTD Tutorial.

XML Schema
An XML Schema describes the structure of an XML document, just like a DTD.
An XML document with correct syntax is called "Well Formed".
An XML document validated against an XML Schema is both "Well Formed" and "Valid".

XML Schema
XML Schema is an XML-based alternative to DTD:
<xs:element name="note">

<xs:complexType>
<xs:sequence>
<xs:element name="to" type="xs:string"/>
<xs:element name="from" type="xs:string"/>
<xs:element name="heading" type="xs:string"/>
<xs:element name="body" type="xs:string"/>
</xs:sequence>
</xs:complexType>

</xs:element>

The Schema above is interpreted like this:

 <xs:element name="note"> defines the element called "note"


 <xs:complexType> the "note" element is a complex type
 <xs:sequence> the complex type is a sequence of elements
 <xs:element name="to" type="xs:string"> the element "to" is of type string (text)
 <xs:element name="from" type="xs:string"> the element "from" is of type string
 <xs:element name="heading" type="xs:string"> the element "heading" is of type string
 <xs:element name="body" type="xs:string"> the element "body" is of type string

Everything is wrapped in "Well Formed" XML.

XML Schemas are More Powerful than DTD

 XML Schemas are written in XML


 XML Schemas are extensible to additions
 XML Schemas support data types
 XML Schemas support namespaces
Why Use an XML Schema?
With XML Schema, your XML files can carry a description of its own format.
With XML Schema, independent groups of people can agree on a standard for interchanging data.
With XML Schema, you can verify data.

XML Schemas Support Data Types


One of the greatest strength of XML Schemas is the support for data types:
 It is easier to describe document content
 It is easier to define restrictions on data
 It is easier to validate the correctness of data
 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:
 You don't have to learn a new language
 You can use your XML editor to edit your Schema files
 You can use your XML parser to parse your Schema files
 You can manipulate your Schemas with the XML DOM
 You can transform your Schemas with XSLT
If you want to study XML Schema, please read our XML Schema Tutorial.

Why Use a DTD?


With a DTD, independent groups of people can agree to use a standard DTD for interchanging data.
Your application can use a standard DTD to verify that the data you receive from the outside world is
valid.
You can also use a DTD to verify your own data.

Internal DTD Declaration


If the DTD is declared inside the XML file, it must be wrapped inside the <!DOCTYPE> definition:
XML document with an internal DTD
<?xml version="1.0"?>
<!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend</body>
</note>
In the XML file, select "view source" to view the DTD.

The DTD above is interpreted like this:

 !DOCTYPE note defines that the root element of this document is note
 !ELEMENT note defines that the note element must contain four elements:
"to,from,heading,body"
 !ELEMENT to defines the to element to be of type "#PCDATA"
 !ELEMENT from defines the from element to be of type "#PCDATA"
 !ELEMENT heading defines the heading element to be of type "#PCDATA"
 !ELEMENT body defines the body element to be of type "#PCDATA"

External DTD Declaration


If the DTD is declared in an external file, the <!DOCTYPE> definition must contain a reference to
the DTD file:
XML document with a reference to an external DTD
<?xml version="1.0"?>
<!DOCTYPE note SYSTEM "note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

And here is the file "note.dtd", which contains the DTD:


<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>

DTD - XML Building Blocks


The main building blocks of both XML and HTML documents are elements.

The Building Blocks of XML Documents


Seen from a DTD point of view, all XML documents are made up by the following building blocks:

 Elements
 Attributes
 Entities
 PCDATA
 CDATA

Elements
Elements are the main building blocks of both XML and HTML documents.
Examples of HTML elements are "body" and "table". Examples of XML elements could be "note"
and "message". Elements can contain text, other elements, or be empty. Examples of empty HTML
elements are "hr", "br" and "img".
Examples:
<body>some text</body>

<message>some text</message>

Attributes
Attributes provide extra information about elements.
Attributes are always placed inside the opening tag of an element. Attributes always come in
name/value pairs. The following "img" element has additional information about a source file:
<img src="computer.gif" />
The name of the element is "img". The name of the attribute is "src". The value of the attribute is
"computer.gif". Since the element itself is empty it is closed by a " /".

Entities
Some characters have a special meaning in XML, like the less than sign (<) that defines the start of
an XML tag.
Most of you know the HTML entity: "&nbsp;". This "no-breaking-space" entity is used in HTML to
insert an extra space in a document. Entities are expanded when a document is parsed by an XML
parser.
The following entities are predefined in XML:

Entity References Character

&lt; <

&gt; >

&amp; &

&quot; "

&apos; '
PCDATA
PCDATA means parsed character data.
Think of character data as the text found between the start tag and the end tag of an XML element.
PCDATA is text that WILL be parsed by a parser. The text will be examined 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 need to be
represented by the &amp; &lt; and &gt; entities, respectively.

CDATA
CDATA means character data.
CDATA is text that will NOT be parsed by a parser. Tags inside the text will NOT be treated as
markup and entities will not be expanded.

XML Parsers

An XML parser is a software library or package that provides interfaces for client applications to
work with an XML document. The XML Parser is designed to read the XML and create a way for
programs to use XML.

XML parser validates the document and check that the document is well formatted.

Let's understand the working of XML parser by the figure given below:

Types of XML Parsers

These are the two main types of XML Parsers:

1. DOM
2. SAX
DOM (Document Object Model)

A DOM document is an object which contains all the information of an XML document. It is
composed like a tree structure. The DOM Parser implements a DOM API. This API is very simple to
use.

Features of DOM Parser

A DOM Parser creates an internal structure in memory which is a DOM document object and the
client applications get information of the original XML document by invoking methods on this
document object.

DOM Parser has a tree based structure.

Advantages
1) It supports both read and write operations and the API is very simple to use.
2) It is preferred when random access to widely separated parts of a document is required.
Disadvantages
1) It is memory inefficient. (consumes more memory because the whole XML document needs to
loaded into memory).
2) It is comparatively slower than other parsers.
SAX (Simple API for XML)

A SAX Parser implements SAX API. This API is an event based API and less intuitive.

Features of SAX Parser


It does not create any internal structure.
Clients does not know what methods to call, they just overrides the methods of the API and place his
own code inside method.
It is an event based parser, it works like an event handler in Java.
Advantages
1) It is simple and memory efficient.
2) It is very fast and works for huge documents.
Disadvantages
1) It is event-based so its API is less intuitive.
2) Clients never know the full information because the data is broken into pieces.

Dynamic HTML: -
DHTML stands for Dynamic Hypertext Markup language i.e., Dynamic HTML.

Dynamic HTML is not a markup or programming language but it is a term that combines the features of
various web development technologies for creating the web pages dynamic and interactive.

The DHTML application was introduced by Microsoft with the release of the 4 th version of IE (Internet Explorer)
in 1997.
Components of Dynamic HTML

DHTML consists of the following four components or languages:

o HTML 4.0
o CSS
o JavaScript
o DOM.

HTML 4.0

HTML is a client-side markup language, which is a core component of the DHTML. It defines the structure of a
web page with various defined basic elements or tags.

CSS

CSS stands for Cascading Style Sheet, which allows the web users or developers for controlling the style and
layout of the HTML elements on the web pages.

JavaScript

JavaScript is a scripting language which is done on a client-side. The various browser supports JavaScript
technology. DHTML uses the JavaScript technology for accessing, controlling, and manipulating the HTML
elements. The statements in JavaScript are the commands which tell the browser for performing an action.

DOM

DOM is the document object model. It is a w3c standard, which is a standard interface of programming for
HTML. It is mainly used for defining the objects and properties of all elements in HTML.

Uses of DHTML

Following are the uses of DHTML (Dynamic HTML):

o It is used for designing the animated and interactive web pages that are developed in real-time.
o DHTML helps users by animating the text and images in their documents.
o It allows the authors for adding the effects on their pages.
o It also allows the page authors for including the drop-down menus or rollover buttons.
o This term is also used to create various browser-based action games.
o It is also used to add the ticker on various websites, which needs to refresh their content automatically.

Difference between HTML and DHTML


Following table describes the differences between HTML and DHTML:
HTML (Hypertext Markup language) DHTML (Dynamic Hypertext Markup language)

1. HTML is simply a markup language. 1. DHTML is not a language, but it is a set of


technologies of web development.

2. It is used for developing and creating web pages. 2. It is used for creating and designing the
animated and interactive web sites or pages.

3. This markup language creates static web pages. 3. This concept creates dynamic web pages.

4. It does not contain any server-side scripting code. 4. It may contain the code of server-side scripting.

5. The files of HTML are stored with the .html or .htm 5. The files of DHTML are stored with the .dhtm
extension in a system. extension in a system.

6. A simple page which is created by a user without using 6. A page which is created by a user using the
the scripts or styles called as an HTML page. HTML, CSS, DOM, and JavaScript technologies
called a DHTML page.

7. This markup language does not need database 7. This concept needs database connectivity
connectivity. because it interacts with users.

DHTML JavaScript

JavaScript can be included in HTML pages, which creates the content of the page as dynamic. We can easily
type the JavaScript code within the <head> or <body> tag of a HTML page. If we want to add the external
source file of JavaScript, we can easily add using the <src> attribute.

Following are the various examples, which describes how to use the JavaScript technology with the DHTML:

Document.write() Method

The document.write() method of JavaScript, writes the output to a web page.

Example 1: The following example simply uses the document.write() method of JavaScript in the DHTML. In
this example, we type the JavaScript code in the <body> tag.

1. <HTML>
2. <head>
3. <title>
4. Method of a JavaScript
5. </title>
6. </head>
7. <body>
8. <script type="text/javascript">
9. document.write("JavaTpoint");
10. </script>
11. </body>
12. </html>

Output:

You might also like