Scribd
Upload
35 views60 pages

Webtechnologies _CIE-356 T_Unit 1 Notes

HTML (Hyper Text Markup Language) is the standard markup language for creating web pages, consisting of elements that define the structure and content of a page. Key components include the document type declaration, root element, head, and body, along with various tags for headings, paragraphs, links, and images. HTML is not case-sensitive, and attributes provide additional information about elements, such as the href for links and src for images.

Uploaded by

Vidyansh Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
35 views60 pages

Webtechnologies _CIE-356 T_Unit 1 Notes

HTML (Hyper Text Markup Language) is the standard markup language for creating web pages, consisting of elements that define the structure and content of a page. Key components include the document type declaration, root element, head, and body, along with various tags for headings, paragraphs, links, and images. HTML is not case-sensitive, and attributes provide additional information about elements, such as the href for links and src for images.

Uploaded by

Vidyansh Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 60

JIMS Engineering Management Technical Campus

Unit 1 Notes
WebTechnologies(CIE-356T)

HTML Introduction

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

Example

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

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

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

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents
and display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the
document:

HTML Page Structure

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

Below is a visualization of an HTML page structure:

<html>

<head>

<title>Page title</title>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

Note: The content inside the <body> section will be displayed in a browser. The content inside the
<title> element will be shown in the browser's title bar or in the page's tab.

HTML History

Since the early days of the World Wide Web, there have been many versions of HTML:

Year Version

1989 Tim Berners-Lee invented www

1991 Tim Berners-Lee invented HTML

1993 Dave Raggett drafted HTML+

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

The visible part of the HTML document is between <body> and </body>.

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps browsers to display
web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

Example

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

HTML paragraphs are defined with the <p> tag:

Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Links

HTML links are defined with the <a> tag:

Example

<a href="https://www.w3schools.com">This is a link</a>

The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

Example

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

How to View HTML Source

Have you ever seen a Web page and wondered "Hey! How did they do that?"

View HTML Source Code:

Click CTRL + U in an HTML page, or right-click on the page and select "View Page
Source". This will open a new tab containing the HTML source code of the page.

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

Inspect an HTML Element:

Right-click on an element (or a blank area), and choose "Inspect" to see what elements are
made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS
on-the-fly in the Elements or Styles panel that opens.

HTML Elements

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

HTML Elements

The HTML element is everything from the start tag to the end tag:

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

Examples of some HTML elements:

<h1>My First Heading</h1>


<p>My first paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none

Note: Some HTML elements have no content (like the <br> element). These elements are called
empty elements. Empty elements do not have an end tag!

Nested HTML Elements

HTML elements can be nested (this means that elements can contain other elements).

All HTML documents consist of nested HTML elements.

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

The following example contains four HTML elements (<html>, <body>, <h1> and <p>):

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
Example Explained

The <html> element is the root element and it defines the whole HTML document.

It has a start tag <html> and an end tag </html>.

Then, inside the <html> element there is a <body> element:

<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>

The <body> element defines the document's body.

It has a start tag <body> and an end tag </body>.

Then, inside the <body> element there are two other elements: <h1> and <p>:

<h1>My First Heading</h1>


<p>My first paragraph.</p>

The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>:

<h1>My First Heading</h1>

The <p> element defines a paragraph.

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

It has a start tag <p> and an end tag </p>:

<p>My first paragraph.</p>


Never Skip the End Tag

Some HTML elements will display correctly, even if you forget the end tag:

Example

<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>

However, never rely on this! Unexpected results and errors may occur if you forget the
end tag!

Empty HTML Elements

HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without a closing tag:

Example

<p>This is a <br> paragraph with a line break.</p>

HTML is Not Case Sensitive

HTML tags are not case sensitive: <P> means the same as <p>.

The HTML standard does not require lowercase tags, but W3C recommends lowercase in
HTML, and demands lowercase for stricter document types like XHTML.

HTML Attributes

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

HTML attributes provide additional information about HTML elements.

HTML Attributes

• All HTML elements can have attributes


• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link
goes to:

Example

<a href="https://www.w3schools.com">Visit W3Schools</a>

You will learn more about links in our HTML Links chapter.

The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the
path to the image to be displayed:

Example

<img src="img_girl.jpg">

There are two ways to specify the URL in the src attribute:

1. Absolute URL - Links to an external image that is hosted on another website.


Example: src="https://www.w3schools.com/images/img_girl.jpg".

Notes: External images might be under copyright. If you do not get permission to use it, you
may be in violation of copyright laws. In addition, you cannot control external images; it can
suddenly be removed or changed.

2. Relative URL - Links to an image that is hosted within the website. Here, the URL does
not include the domain name. If the URL begins without a slash, it will be relative to the

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

current page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative
to the domain. Example: src="/images/img_girl.jpg".

Tip: It is almost always best to use relative URLs. They will not break if you change domain.

The width and height Attributes

The <img> tag should also contain the width and height attributes, which specify the width
and height of the image (in pixels):

Example

<img src="img_girl.jpg" width="500" height="600">

The alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an image, if the
image for some reason cannot be displayed. This can be due to a slow connection, or an error
in the src attribute, or if the user uses a screen reader.

Example

<img src="img_girl.jpg" alt="Girl with a jacket">

Example

See what happens if we try to display an image that does not exist:

<img src="img_typo.jpg" alt="Girl with a jacket">

The style Attribute

The style attribute is used to add styles to an element, such as color, font, size, and more.

Example

<p style="color:red;">This is a red paragraph.</p>


The lang Attribute

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

You should always include the lang attribute inside the <html> tag, to declare the language of
the Web page. This is meant to assist search engines and browsers.

The following example specifies English as the language:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Country codes can also be added to the language code in the lang attribute. So, the first two
characters define the language of the HTML page, and the last two characters define the
country.

The following example specifies English as the language and United States as the country:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
The title Attribute

The title attribute defines some extra information about an element.

The value of the title attribute will be displayed as a tooltip when you mouse over the
element:

Example

<p title="I'm a tooltip">This is a paragraph.</p>


We Suggest: Always Use Lowercase Attributes

The HTML standard does not require lowercase attribute names.

The title attribute (and all other attributes) can be written with uppercase or lowercase
like title or TITLE.

However, W3C recommends lowercase attributes in HTML, and demands lowercase


attributes for stricter document types like XHTML.

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

We Suggest: Always Quote Attribute Values

The HTML standard does not require quotes around attribute values.

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

Good:

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Bad:

<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>

Sometimes you have to use quotes. This example will not display the title attribute correctly,
because it contains a space:

Example

<p title=Description of W3Schools>

Single or Double Quotes?

Double quotes around attribute values are the most common in HTML, but single quotes 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">


Chapter Summary

• All HTML elements can have attributes


• The href attribute of <a> specifies the URL of the page the link goes to
• The src attribute of <img> specifies the path to the image to be displayed

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

• The width and height attributes of <img> provide size information for images
• The alt attribute of <img> provides an alternate text for an image
• The style attribute is used to add styles to an element, such as color, font, size, and
more
• The lang attribute of the <html> tag declares the language of the Web page
• The title attribute defines some extra information about an element

HTML Headings

HTML headings are titles or subtitles that you want to display on a webpage.

Example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Example

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

<h5>Heading 5</h5>
<h6>Heading 6</h6>

Note: Browsers automatically add some white space (a margin) before and after a heading.

Headings Are Important

Search engines use the headings to index the structure and content of your web pages.

Users often skim a page by its headings. It is important to use headings to show the document
structure.

<h1> headings should be used for main headings, followed by <h2> headings, then the less
important <h3>, and so on.

Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.

Bigger Headings

Each HTML heading has a default size. However, you can specify the size for any heading
with the style attribute, using the CSS font-size property:

Example

<h1 style="font-size:60px;">Heading 1</h1>


HTML Tag Reference

W3Schools' tag reference contains additional information about these tags and their
attributes.

Tag Description

<html> Defines the root of an HTML document

<body> Defines the document's body

<h1> to <h6> Defines HTML heading

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

HTML Layout Elements and Techniques

Websites often display content in multiple columns (like a magazine or a newspaper).

HTML Layout Elements

HTML has several semantic elements that define the different parts of a web page:

• <header> - Defines a header for a


document or a section
• <nav> - Defines a set of navigation
links
• <section> - Defines a section in a
document
• <article> - Defines an independent,
self-contained content
• <aside> - Defines content aside from
the content (like a sidebar)
• <footer> - Defines a footer for a
document or a section
• <details> - Defines additional details
that the user can open and close on
demand
• <summary> - Defines a heading for
the <details> element

You can read more about semantic elements


in our HTML Semantics chapter.

HTML Layout Techniques

There are four different techniques to create multicolumn layouts. Each technique has its pros
and cons:

• CSS framework
• CSS float property
• CSS flexbox
• CSS grid

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

CSS Frameworks

If you want to create your layout fast, you can use a CSS framework,
like W3.CSS or Bootstrap.

CSS Float Layout

It is common to do entire web layouts using the CSS float property. Float is easy to learn -
you just need to remember how the float and clear properties work. Disadvantages: Floating
elements are tied to the document flow, which may harm the flexibility. Learn more about
float in our CSS Float and Clear chapter.

CSS Flexbox Layout

Use of flexbox ensures that elements behave predictably when the page layout must
accommodate different screen sizes and different display devices.

CSS Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns,
making it easier to design web pages without having to use floats and positioning.

HTML Iframes

An HTML iframe is used to display a web page within a web page.

HTML Iframe Syntax

The HTML <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Syntax

<iframe src="url" title="description"></iframe>

Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by
screen readers to read out what the content of the iframe is.

Iframe - Set Height and Width

Use the height and width attributes to specify the size of the iframe.

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

The height and width are specified in pixels by default:

Example

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

Or you can add the style attribute and use the CSS height and width properties:

Example

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe


Example"></iframe>
Iframe - Remove the Border

By default, an iframe has a border around it.

To remove the border, add the style attribute and use the CSS border property:

Example

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

With CSS, you can also change the size, style and color of the iframe's border:

Example

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>


Iframe - Target for a Link

An iframe can be used as the target frame for a link.

The target attribute of the link must refer to the name attribute of the iframe:

Example

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>


Summary

• The HTML <iframe> tag specifies an inline frame

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

• The src attribute defines the URL of the page to embed


• Always include a title attribute (for screen readers)
• The height and width attributes specify the size of the iframe
• Use border:none; to remove the border around the iframe

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.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

Note: A link does not have to be text. A link can be an image or any other HTML element!

HTML Links - Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">link text</a>

The most important attribute of the <a> element is the href attribute, which indicates the
link's destination.

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.

Example

This example shows how to create a link to W3Schools.com:

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue


• A visited link is underlined and purple
• An active link is underlined and red

HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window. To change this,
you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

• _self - Default. Opens the document in the same window/tab as it was clicked
• _blank - Opens the document in a new window or tab
• _parent - Opens the document in the parent frame
• _top - Opens the document in the full body of the window

Example

Use target="_blank" to open the linked document in a new browser window or tab:

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in the href attribute.

A local link (a link to a page within the same website) is specified with a relative
URL (without the "https://www" part):

Example

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

<p><a href="html_images.asp">HTML Images</a></p>


<p><a href="/css/default.asp">CSS Tutorial</a></p>
HTML Links - Use an Image as a Link

To use an image as a link, just put the <img> tag inside the <a> tag:

Example

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Link to an Email Address

Use mailto: inside the href attribute to create a link that opens the user's email program (to let
them send a new email):

Example

<a href="mailto:[email protected]">Send email</a>


Button as a Link

To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click of a button:

Example

<button onclick="document.location='default.asp'">HTML Tutorial</button>

Link Titles

The title attribute specifies extra information about an element. The information is most often
shown as a tooltip text when the mouse moves over the element.

Example

<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our


HTML Tutorial</a>

Example

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

Use a full URL to link to a web page:

<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>

Example

Link to a page located in the html folder on the current web site:

<a href="/html/default.asp">HTML tutorial</a>

Example

Link to a page located in the same folder as the current page:

<a href="default.asp">HTML tutorial</a>

Chapter Summary

• Use the <a> element to define a link


• Use the href attribute to define the link address
• Use the target attribute to define where to open the linked document
• Use the <img> element (inside <a>) to use an image as a link
• Use the mailto: scheme inside the href attribute to create a link that opens the user's
email program

HTML Link Tags


Tag Description

<a> Defines a hyperlink

HTML Links - Different Colors

An HTML link is displayed in a different color depending on whether it has been visited, is
unvisited, or is active.

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

HTML Link Colors

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 link state colors, by using CSS:

Example

Here, an unvisited link will be green with no underline. A visited link will be pink with no
underline. An active link will be yellow and underlined. In addition, when mousing over a link
(a:hover) it will become red and underlined:

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

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

}
</style>

Link Buttons

A link can also be styled as a button, by using CSS:

This is a link

Example

<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}
</style>

HTML Link Tags


Tag Description

<a> Defines a hyperlink

HTML Lists

HTML lists allow web developers to group a set of related items in lists.

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

Example

An unordered HTML list:

• Item

• Item

• Item

• Item

An ordered HTML list:

1. First item

2. Second item

3. Third item

4. Fourth item

Unordered HTML List

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) by default:

Example

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

Example

<ol>
<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>
HTML List Tags
Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

HTML Tables

HTML tables allow web developers to arrange data into rows and columns.

Example

Company Contact Country

Alfreds Futterkiste Maria Anders Germany

Centro comercial Moctezuma Francisco Chang Mexico

Ernst Handel Roland Mendel Austria

Island Trading Helen Bennett UK

Laughing Bacchus Winecellars Yoshi Tannamuri Canada

Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Define an HTML Table

A table in HTML consists of table cells inside rows and columns.

Example

A simple HTML table:

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
Table Cells

Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Everything between <td> and </td> are the content of the table cell.

Example

<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Table Rows

Each table row starts with a <tr> and ends with a </tr> tag.

tr stands for table row.

Example

<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

You can have as many rows as you like in a table; just make sure that the number of cells are
the same in each row.

Note: There are times when a row can have less or more cells than another. You will learn about
that in a later chapter.

Table Headers

Sometimes you want your cells to be table header cells. In those cases use the <th> tag
instead of the <td> tag:

th stands for table header.

Example

Let the first row be table header cells:

<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

<td>14</td>
<td>10</td>
</tr>
</table>

By default, the text in <th> elements are bold and centered, but you can change that with
CSS.

HTML Table Tags


Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<caption> Defines a table caption

<colgroup> Specifies a group of one or more columns in a table for


formatting

<col> Specifies column properties for each column within a


<colgroup> element

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

HTML Forms

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

An HTML form is used to collect user input. The user input is most often sent to a server for
processing.

Example

First name:
John

Last name:
Doe

Submit

The <form> Element

The HTML <form> element is used to create an HTML form for user input:

<form>
.
form elements
.
</form>

The <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.

All the different form elements are covered in this chapter: HTML Form Elements.

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

Here are some examples:

Type Description

<input type="text"> Displays a single-line text input field

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

<input type="radio"> Displays a radio button (for selecting one of many


choices)

<input Displays a checkbox (for selecting zero or more of


type="checkbox"> many choices)

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

All the different input types are covered in this chapter: HTML Input Types.

Text Fields

The <input type="text"> defines a single-line input field for text input.

Example

A form with input fields for text:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

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

First name:

Last name:

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

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

The <label> Element

Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read out
loud the label when the user focuses on the input element.

The <label> element also helps users who have difficulty clicking on very small regions
(such as radio buttons or checkboxes) - because when the user clicks the text within
the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element
to bind them together.

Radio Buttons

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Example

A form with radio buttons:

<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>

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

Choose your favorite Web language:

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

HTML
CSS
JavaScript

Checkboxes

The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example

A form with checkboxes:

<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

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

I have a bike
I have a car
I have a boat

The Submit Button

The <input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form's action attribute.

Example

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

A form with a submit button:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

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

First name:
John

Last name:
Doe

Submit

The Name Attribute for <input>

Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.

Example

This example will not submit the value of the "First name" input field:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
HTML Form Attributes

This chapter describes the different attributes for the HTML <form> element.

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

The Action Attribute

The action attribute defines the action to be performed when the form is submitted.

Usually, the form data is sent to a file on the server when the user clicks on the submit button.

In the example below, the form data is sent to a file called "action_page.php". This file
contains a server-side script that handles the form data:

Example

On submit, send form data to "action_page.php":

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

Tip: If the action attribute is omitted, the action is set to the current page.

The Target Attribute

The target attribute specifies where to display the response that is received after submitting
the form.

The target attribute can have one of the following values:

Value Description

_blank The response is displayed in a new window or tab

_self The response is displayed in the current window

_parent The response is displayed in the parent frame

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

_top The response is displayed in the full body of the window

framename The response is displayed in a named iframe

The default value is _self which means that the response will open in the current window.

Example

Here, the submitted result will open in a new browser tab:

<form action="/action_page.php" target="_blank">

The Method Attribute

The method attribute specifies the HTTP method to be used when submitting the form data.

The form-data can be sent as URL variables (with method="get") or as HTTP post
transaction (with method="post").

The default HTTP method when submitting form data is GET.

Example

This example uses the GET method when submitting the form data:

<form action="/action_page.php" method="get">

Example

This example uses the POST method when submitting the form data:

<form action="/action_page.php" method="post">

Notes on GET:

• Appends the form data to the URL, in name/value pairs


• NEVER use GET to send sensitive data! (the submitted form data is visible in the
URL!)

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

• The length of a URL is limited (2048 characters)


• Useful for form submissions where a user wants to bookmark the result
• GET is good for non-secure data, like query strings in Google

Notes on POST:

• Appends the form data inside the body of the HTTP request (the submitted form data
is not shown in the URL)
• POST has no size limitations, and can be used to send large amounts of data.
• Form submissions with POST cannot be bookmarked

The Autocomplete Attribute

The autocomplete attribute specifies whether a form should have autocomplete on or off.

When autocomplete is on, the browser automatically complete values based on values that the
user has entered before.

Example

A form with autocomplete on:

<form action="/action_page.php" autocomplete="on">

The Novalidate Attribute

The novalidate attribute is a boolean attribute.

When present, it specifies that the form-data (input) should not be validated when submitted.

Example

A form with a novalidate attribute:

<form action="/action_page.php" novalidate>

HTML Form Elements

The HTML <form> element can contain one or more of the following form elements:

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>

The <input> Element

One of the most used form elements is the <input> element.

The <input> element can be displayed in several ways, depending on the type attribute.

Example

<label for="fname">First name:</label>


<input type="text" id="fname" name="fname">

All the different values of the type attribute are covered in the next chapter: HTML Input
Types.

The <label> Element

The <label> element defines a label for several form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read out
loud the label when the user focus on the input element.

The <label> element also help users who have difficulty clicking on very small regions (such
as radio buttons or checkboxes) - because when the user clicks the text within
the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element
to bind them together.

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

The <select> Element

The <select> element defines a drop-down list:

Example

<label for="cars">Choose a car:</label>


<select id="cars" 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> element defines an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the selected attribute to the option:

Example

<option value="fiat" selected>Fiat</option>


Visible Values:

Use the size attribute to specify the number of visible values:

Example

<label for="cars">Choose a car:</label>


<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one value:

Example

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

<label for="cars">Choose a car:</label>


<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

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>

The rows attribute specifies the visible number of lines in a text area.

The cols attribute specifies the visible width of a text area.

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

You can also define the size of the text area by using CSS:

Example

<textarea name="message" style="width:200px; height:600px;">


The cat was playing in the garden.
</textarea>

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

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!

Note: Always specify the type attribute for the button element. Different browsers may use different
default types for the button element.

The <fieldset> and <legend> Elements

The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

Example

<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

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

Personalia:First name:
John

Last name:
Doe

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

Submit

The <datalist> Element

The <datalist> element specifies a list of pre-defined options for an <input> element.

Users will see a drop-down list of the pre-defined options as they input data.

The list attribute of the <input> element, must refer to the id attribute of
the <datalist> element.

Example

<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>

The <output> Element

The <output> element represents the result of a calculation (like one performed by a script).

Example

Perform a calculation and show the result in an <output> element:

<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

<input type="number" id="b" name="b" value="50">


=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
HTML Form Elements
Tag Description

<form> Defines an HTML form for user input

<input> Defines an input control

<textarea> Defines a multiline input control (text area)

<label> Defines a label for an <input> element

<fieldset> Groups related elements in a form

<legend> Defines a caption for a <fieldset> element

<select> Defines a drop-down list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<button> Defines a clickable button

<datalist> Specifies a list of pre-defined options for input controls

<output> Defines the result of a calculation

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

CSS Introduction

CSS is the language we use to style a Web page.

• What is CSS?
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files
• CSS Demo - One HTML Page - Multiple Styles!

Here we will show one HTML page displayed with four different stylesheets. Click on
the "Stylesheet 1", "Stylesheet 2", "Stylesheet 3", "Stylesheet 4" links below to see the
different styles:

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.

CSS Example

body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p{
font-family: verdana;
font-size: 20px;
}

CSS Solved a Big Problem

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it
started a nightmare for web developers. Development of large websites, where fonts and
color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire website by changing
just one file!

XML DTD

What is DTD

DTD stands for Document Type Definition. It defines the legal building blocks of an XML
document. It is used to define document structure with a list of legal elements and attributes.

Purpose of DTD

Its main purpose is to define the structure of an XML document. It contains a list of legal
elements and define the structure with the help of them.

Checking Validation

Before proceeding with XML DTD, you must check the validation. An XML document is
called "well-formed" if it contains the correct syntax.

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

A well-formed and valid XML document is one which have been validated against DTD.

Visit http://www.xmlvalidation.com to validate the XML file.

Valid and well-formed XML document with DTD

Let's take an example of well-formed and valid XML document. It follows all the rules of
DTD.

employee.xml

. <?xml version="1.0"?>
. <!DOCTYPE employee SYSTEM "employee.dtd">
. <employee>
. <firstname>vimal</firstname>
. <lastname>jaiswal</lastname>
. <email>[email protected]</email>
. </employee>
In the above example, the DOCTYPE declaration refers to an external DTD file. The content
of the file is shown in below paragraph.

employee.dtd

. <!ELEMENT employee (firstname,lastname,email)>


. <!ELEMENT firstname (#PCDATA)>
. <!ELEMENT lastname (#PCDATA)>
. <!ELEMENT email (#PCDATA)>

Description of DTD

<!DOCTYPE employee : It defines that the root element of the document is employee.

<!ELEMENT employee: It defines that the employee element contains 3 elements


"firstname, lastname and email".

<!ELEMENT firstname: It defines that the firstname element is #PCDATA typed. (parse-
able data type).

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

<!ELEMENT lastname: It defines that the lastname element is #PCDATA typed. (parse-
able data type).

<!ELEMENT email: It defines that the email element is #PCDATA typed. (parse-able data
type).

XML DTD with entity declaration

A doctype declaration can also define special strings that can be used in the XML file.

An entity has three parts:

1. An ampersand (&)
2. An entity name
3. A semicolon (;)

Syntax to declare entity:

. <!ENTITY entity-name "entity-value">


Let's see a code to define the ENTITY in doctype declaration.

author.xml

. <?xml version="1.0" standalone="yes" ?>


. <!DOCTYPE author [
. <!ELEMENT author (#PCDATA)>
. <!ENTITY sj "Sonoo Jaiswal">
. ]>
. <author>&sj;</author>
In the above example, sj is an entity that is used inside the author element. In such case, it
will print the value of sj entity that is "Sonoo Jaiswal".

Note: A single DTD can be used in many XML files.

XML Schema

What is XML schema

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

XML schema is a language which is used for expressing constraint about XML documents.
There are so many schema languages which are used now a days for example Relax- NG and
XSD (XML schema definition).

An XML schema is used to define the structure of an XML document. It is like DTD but
provides more control on XML structure.

Checking Validation

An XML document is called "well-formed" if it contains the correct syntax. A well-formed


and valid XML document is one which have been validated against Schema.

Visit http://www.xmlvalidation.com to validate the XML file against schema or DTD.

XML Schema Example

Let's create a schema file.

employee.xsd

. <?xml version="1.0"?>
. <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
. targetNamespace="http://www.javatpoint.com"
. xmlns="http://www.javatpoint.com"
. elementFormDefault="qualified">
.
. <xs:element name="employee">
. <xs:complexType>
. <xs:sequence>
. <xs:element name="firstname" type="xs:string"/>
. <xs:element name="lastname" type="xs:string"/>
. <xs:element name="email" type="xs:string"/>
. </xs:sequence>
. </xs:complexType>
. </xs:element>
.
. </xs:schema>
Let's see the xml file using XML schema or XSD file.

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

employee.xml

. <?xml version="1.0"?>
. <employee
. xmlns="http://www.javatpoint.com"
. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
. xsi:schemaLocation="http://www.javatpoint.com employee.xsd">
.
. <firstname>vimal</firstname>
. <lastname>jaiswal</lastname>
. <email>[email protected]</email>
. </employee>
Test it Now

Description of XML Schema

<xs:element name="employee"> : It defines the element name employee.

<xs:complexType> : It defines that the element 'employee' is complex type.

<xs:sequence> : It defines that the complex type is a sequence of elements.

<xs:element name="firstname" type="xs:string"/> : It defines that the element 'firstname'


is of string/text type.

<xs:element name="lastname" type="xs:string"/> : It defines that the element 'lastname'


is of string/text type.

<xs:element name="email" type="xs:string"/> : It defines that the element 'email' is of


string/text type.

XML Schema Data types

There are two types of data types in XML schema.

1. simpleType
2. complexType

simpleType

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

The simpleType allows you to have text-based elements. It contains less attributes, child
elements, and cannot be left empty.

complexType

The complexType allows you to hold multiple attributes and elements. It can contain
additional sub elements and can be left empty.

The XML DOM

The Document Object Model


The DOM is a programming interface for HTML and XML documents. It defines the way a
document can be accessed and manipulated.
Using a DOM, a programmer can create a document, navigate its structure, and add, modify,
or delete its elements.
As a W3C specification, one important objective for the DOM has been to provide a standard
programming interface that can be used in a wide variety of environments and applications.
The W3C DOM has been
designed to be used with any programming language.

The Node Interface


As you will se in the next section, a program called an XML parser can be used to load
an XML document into the memory of your computer. When the document is loaded, it’s
information can be
retrieved and manipulated by accessing the Document Object Model (DOM).
The DOM represents a tree view of the XML document. The documentElement is the top-
level of the tree. This element has one or many childNodes that represent the branches of the
tree.
A Node Interface is used to read and write (or access if you like) the individual elements in
the XML node tree. The childNodes property of the documentElement can be accesses with a
for/each construct to enumerate each individual node.
The Microsoft XML parser used to demonstrate the DOM in this Web, supports all the
necessary functions to traverse the node tree, access the nodes and their attribute values,
insert and delete nodes, and convert the node tree back to XML.
All the demonstrated Microsoft XML parser functions are from the official W3C XML DOM
recommendation, apart from the load and loadXML functions. (Believe it or not: The official
DOM does not include standard functions for loading XML documents
!!)
A total of 13 node types are currently supported by the Microsoft XML parser. The following
table lists the most commonly used node types:

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

NODE TYPE EXAMPLE

Document type <!DOCTYPE food SYSTEM “food.dtd”>

Processing instruction <?xml version=”1.0″?>

Element <drink type=”beer”>Carlsberg</drink>

Attribute type=”beer”

Text Carlsberg

What is SAX in XML?


The XML-DEV mailing group developed a Simple API for XML also called the SAX,
which is an event-driven online algorithm for parsing XML documents. SAX is a way of
reading data from an XML document that is an alternative to the Document Object Model ’s
mechanism (DOM). Whereas the DOM works on the document as a whole, creating the
whole abstract syntax tree of an XML document for the user’s convenience, SAX parsers
work on each element of the XML document sequentially, issuing parsing events while
passing through the input stream in a single pass. Unlike DOM, SAX does not have a
formal specification.
SAX is a programming interface for processing XML files based on events. The DOM’s
counterpart, SAX, has a very different way of reading XML code. The Java implementation
of SAX is regarded as the de-facto standard. SAX processes documents state-
independently, in contrast to DOM which is used for state-dependent processing of XML
documents.

Why use SAX Parser

Parsers are used to process XML documents. The parser examines the XML document,
checks for errors, and then validate it against a schema or DTD if it’s a validating parser.
The next step is determined by the parser in use. It may copy the data into a data structure
native to the computer language you’re using on occasion. It may also apply styling to the
data or convert it into a presentation format.
Apart from triggering certain events, the SAX parser does nothing with the data. It is up to
the SAX parser’s user to decide. The SAX events include (among others) as follows:
1. XML Text Nodes
2. XML Element Starts and Ends
3. XML Processing Instructions
4. XML Comments
The properties of SAX Parser are depicted below as follows:

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

Note: WHEN SAX is better than DOM


• It parses the XML file as a stream rather than allocating RAM for the
complete file.
• Since, it uses less memory and is faster than the DOM Parser because the
complete file is not stored in memory.
• Therefore, it is considered to be useful in parsing large XML files.

XHTML Introduction
XHTML or EXtensible HyperText Markup Language is a mix of HTML and XML, very
similar to HTML but stricter. It’s like a rulebook for creating web pages that browsers easily
understand. Unlike HTML, you have to be careful and follow the rules exactly. Most
browsers support it. Just think of it as a more precise way to write web code.
History
It was developed by the World Wide Web Consortium (W3C) and helps web developers
transition from HTML to XML. With XHTML, developers can enter the XML world with all
its features while still ensuring backward and future compatibility of the content. The
XHTML family includes three document types; the first is XHTML 1.0, which was
recommended by W3C on January 26, 2000. The second is XHTML 1.1, which was
recommended by W3C on May 31, 2001.
The third is XHTML5, a standard used for developing an XML adaptation of the HTML5
specification. An XHTML document must have an XHTML <!DOCTYPE> declaration.
Elements of XHTML:
XHTML Element Description

Used to declare the Document Type


<!DOCTYPE> Definition (DTD), specifying the rules for
the markup language, ensuring proper

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

XHTML Element Description

rendering in browsers.

Encloses the entire HTML or XHTML


<html>
document, serving as the root element.

Contains meta-information about the


document, such as the title, character set,
<head>
linked stylesheets, and other essential
elements.

Nested within the head section, specifies


<title> the title of the document, displayed in the
browser’s title bar or tab.

Encloses the content of the web page,


including text, images, links, and other
<body> HTML elements. It represents the visible
part of the document displayed in the
browser.

When creating an XHTML web page, it is necessary to include a DTD (Document Type
Definition) declaration. There are three types of DTD which are discussed below:
Transitional DTD:
It is supported by the older browsers which do not have inbuilt cascading style sheets
supports. Several attributes are enclosed in the body tag which are not allowed in strict DTD.

Syntax:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Example: In this example we will see the code for writing an XHTML document with an
example.

• html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Transitional DTD XHTML</title>
</head>

<body bgcolor="#dae1ed">
<div style="color:#090;font-size:40px;
font-weight:bold;text-align:center;
margin-bottom:-25px;">GeeksforGeeks</div>
<p style="text-align:center;font-size:20px;">
A computer science portal</p>
<p style="text-align:center;font-size:20px;">
Option to choose month:
<select name="month">
<option selected="selected">January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>Augusy</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</p>
</body>

</html>

Strict DTD:
Strict DTD is used when XHTML page contains only markup language. Strict DTD is used
together with cascading style sheets, because this attribute does not allow CSS property in
body tag.

Syntax:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

Example 2: In this example we will see the code for writing an XHTML document with an
example for strict DTD.

• html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">

<head>
<title>Strict DTD XHTML</title>
</head>

<body>
<div style="color:#090;font-size:40px;
font-weight:bold;text-align:center;
margin-bottom:-25px;">GeeksforGeeks</div>
<p style="text-align:center;font-size:20px;">
A computer science portal</p>
<p style="text-align:center;font-size:20px;">
Option to choose month:
<select name="month">
<option selected="selected">January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>Augusy</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</p>
</body>

</html>

Frameset DTD:
The frameset DTD is used when XHTML page contains frames. This DTD is identical to the
HTML 4.01 Transitional DTD except for the content model of the HTML element.

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

Syntax:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Why use XHTML?


• XHTML documents are validated with standard XML tools.
• It is easily to maintain, convert, edit document in the long run.
• It is used to define the quality standard of web pages.
• XHTML is an official standard of the W3C, your website becomes more compatible
and accurate with many browsers.
Benefits of XHTML:
• All XHTML tags must have closing tags and are nested correctly. This generates
cleaner code.
• XHTML documents are lean which means they use less bandwidth. This reduces cost
particularly if your web site has 1000s of pages.
• XHTML documents are well formatted well–formed and can easily be transported to
wireless devices, Braille readers and other specialized web environments.
• All new developments will be in XML (of which XHTML is an application).
• XHTML works in association with CSS to create web pages that can easily be
updated.
Difference Between HTML and XHTML:
HTML XHTML

XHTML (Extensible HyperText Markup


HTML or HyperText Markup Language Language) is a family of XML markup
is the main markup language for creating languages that mirror or extend versions
web pages of the widely used Hypertext Markup
Language (HTML)

Flexible framework requiring lenient Restrictive subset of XML which needs to


HTML specific parser be parsed with standard XML parsers

World Wide Web Consortium


Proposed by Tim Berners-Lee in 1987
Recommendation in 2000.

Application of Standard Generalized


Application of XML
Markup Language (SGML).

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

HTML XHTML

Extended from SGML. Extended from XML, HTML

HTML <meta> Tag

Example

Describe metadata within an HTML document:

<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Definition and Usage

The <meta> tag defines metadata about an HTML document. Metadata is data (information)
about data.

<meta> tags always go inside the <head> element, and are typically used to specify character
set, page description, keywords, author of the document, and viewport settings.

Metadata will not be displayed on the page, but is machine parsable.

Metadata is used by browsers (how to display content or reload page), search engines
(keywords), and other web services.

There is a method to let web designers take control over the viewport (the user's visible area
of a web page), through the <meta> tag (See "Setting The Viewport" example below).

Browser Support

Element

<meta> Yes Yes Yes Yes Yes

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

Attributes
Attribute Value Description

charset character_set Specifies the character encoding for the HTML


document

content text Specifies the value associated with the http-equiv or


name attribute

http-equiv content-security- Provides an HTTP header for the information/value of


policy the content attribute
content-type
default-style
refresh

name application-name Specifies a name for the metadata


author
description
generator
keywords
viewport

Global Attributes

The <meta> tag also supports the Global Attributes in HTML.

More Examples

Define keywords for search engines:

<meta name="keywords" content="HTML, CSS, JavaScript">

Define a description of your web page:

<meta name="description" content="Free Web tutorials for HTML and CSS">

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

Define the author of a page:

<meta name="author" content="John Doe">

Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30">

Setting the viewport to make your website look good on all devices:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML frame Tag


HTML <frame> tag is used to divide web browser windows into multiple sections, each
capable of loading content independently. This is achieved using a collection of frames
within a frameset tag.
Note: The <frame> tag is deprecated in HTML 5.
<!DOCTYPE html><html>
<body>
<frameset rows="20%, 60%, 20%">
<frame name="top"
src="./attr1.html" />
<frame name="main"
src="./gradient.html" />
<frame name="bottom"
src="./colLast.html" />
<noframes>
<p>The browser you are using does not support frames.</p>
</noframes>
</frameset></body>
</html>
The above example basically used to create three horizontal frames i.e. top, middle and
bottom using row attribute of frameset tag and the noframe tag is used for those browser who
doesn’t support noframe.

Syntax

<frameset cols="50%, 50%">


<frame src="page1.html">
<frame src="page2.html">
</frameset>
HTML frame Tag Attributes

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida


JIMS Engineering Management Technical Campus
Unit 1 Notes
WebTechnologies(CIE-356T)

HTML <frame> name Attribute

This attribute is used to give names to the frame. It differentiate one frame from another. It is
also used to indicate which frame a document should loaded into.
Example
<frame name = "top" src = "C:/Users/dharam/Desktop/attr1.png" />
<frame name = "main" src = "C:/Users/dharam/Desktop/gradient3.png" />
<frame name = "bottom" src = "C:/Users/dharam/Desktop/col_last.png" />
Here we use three frames with names as left center and right.

HTML <frame> src Attribute

This attribute in frame tag is basically used to define the source file that should be loaded into
the frame.The value of src can be any url.
Example
<frame name = "left" src = "/html/left.htm" />
In the above example name of frame is left and source file will be loaded from
“/html/left.htm” in frame.

HTML <frame> marginwidth Attribute

This attribute in frame tag is used to specify width of the spaces in pixels between the border
and contents of left and right frame.
Example
<frame marginwidth="20">

HTML <frame> marginheight Attribute

This attribute in frame tag is used to specify height of the spaces in pixels between the border
and contents of top and bottom frame.
Example
<frame marginheight="20">

HTML <frame> scrollbar Attribute

To control the appearance of scroll bar in frame use scrollbar attribute in frame tag. This is
basically used to control the appearance of scrollbar. The value of this attribute can be yes,
no, auto. Where the value no denotes there will be no appearance of scroll bar.
Example
<frame scrollbar="no">

Dr. Shilpi Singh,Associate Professor,JIMS,Greater Noida

You might also like