Web Technology

Unit-2 - (HTML and DHTML)

HTML :-
o HTML stands for HyperText Markup Language.
o HTML is used to create web pages and web applications.
o HTML is widely used language on the web.
o We can create a static website by HTML only.
o Technically, HTML is a Markup language rather than a programming language.

History of HTML –
Tim Berners-Lee, a physicist at the CERN research institute in Switzerland invented HTML in
1991. This first version consisted of 18 HTML tages. Now, there are currently about 140 HTML
tags, although not all of them are supported by modern browsers.
The Timline of HTML
 1991- Tim Berners-Lee invents HTML 1.0
 1993- HTML 1.0 is released. Not many developers are creating websites at this time.
 1995- HTML 2.0 is published. This contains the features of HTML 1.0 plus new features.
This remained the standard markup language for designing and creating websites until
1997.
 1997- HTML 3.0 was invented. Here, Dave Raggett introduced a fresh draft on HTML,
which improved new features of HTML and gave more powerful characteristics for
webmasters in designing websites. Unfortunately, the powerful features slowed down
the browser in applying further improvements.
 1999- The widely-used HTML 4.0 comes out. It is very successful.
 2014- HTML 5.0 is released and used worldwide. It is said to be the extended version of
HTML 4.01 which was published in 2012.

DHTML :-
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

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
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.
Features of DHTML
o Its simplest and main feature is that we can create the web page dynamically.
o Dynamic Style is a feature, that allows the users to alter the font, size, color, and
content of a web page.
o It provides the facility for using the events, methods, and properties. And, also provides
the feature of code reusability.
o It also provides the feature in browsers for data binding.
o Using DHTML, users can easily create dynamic fonts for their web sites or web pages.
o With the help of DHTML, users can easily change the tags and their properties.
Difference 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 2. It is used for creating and designing the
web pages. animated and interactive web sites or pages.

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

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

5. The files of HTML are stored with the 5. The files of DHTML are stored with the
.html or .htm extension in a system. .dhtm extension in a system.
6. A simple page which is created by a 6. A page which is created by a user using the
user without using the scripts or styles HTML, CSS, DOM, and JavaScript technologies
called as an HTML page. called a DHTML page.

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

Structure Of HTML Document ::-

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

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Explaintion

 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

Text Properties :-

 <b> - Bold text

 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

Element Description
name

<b> This is a physical tag, which is used to bold the text written between it.

<strong> This is a logical tag, which tells the browser that the text is important.

<i> This is a physical tag which is used to make text italic.

<em> This is a logical tag which is used to display content in italic.

<mark> This tag is used to highlight text.

<u> This tag is used to underline text written between it.

<tt> This tag is used to appear a text in teletype. (not supported in HTML5)

<strike> This tag is used to draw a strikethrough on a section of text. (Not

supported in HTML5)

<sup> It displays the content slightly above the normal line.

<sub> It displays the content slightly below the normal line.

<del> This tag is used to display the deleted content.

<ins> This tag displays the content which is added

<big> This tag is used to increase the font size by one conventional unit.

<small> This tag is used to decrease the font size by one unit from base font size.

Image Tag :

The <img> tag is used to embed an image in an HTML page.

Images are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image.

The <img> tag has two required attributes:

 src - Specifies the path to the image

 alt - Specifies an alternate text for the image, if the image for some reason cannot be
displayed

Note: Also, always specify the width and height of an image. If width and height are not
specified, the page might flicker while the image loads.

Syntax :

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Multimedia
Multimedia comes in many different formats. It can be almost anything you can hear or see,
like images, music, sound, videos, records, films, animations, and more.

Web pages often contain multimedia elements of different types and formats.

Browser Support

The first web browsers had support for text only, limited to a single font in a single color.

Later came browsers with support for colors, fonts, images, and multimedia!

Multimedia Formats

Multimedia elements (like audio or video) are stored in media files.

The most common way to discover the type of a file, is to look at the file extension.

Multimedia files have formats and different extensions like: .wav, .mp3, .mp4, .mpg, .wmv, and
.avi.

Common Video Formats

There are many video formats out there.

The MP4, WebM, and Ogg formats are supported by HTML.

The MP4 format is recommended by YouTube.

HTML Multimedia Tags

HTML tags that fall under the category of "multimedia tags" are as follows:

 HTML AUDIO Tag HTML VIDEO Tag HTML EMBED Tag HTML OBJECT Tag

HTML Multimedia: The AUDIO tag

The AUDIO tag is used to display the audio file on the web page. An audio file is a way for
devices like computers, MP3 players, and mobile phones to store audio data.
To store audio data, you need to convert it into a digital format. The process of converting
audio data into a digital file is called "encoding" of the raw audio data. It involves taking
samples of audio data and storing them in a compressed format to reduce the file size.

HTML5's AUDIO tag only supports the following three audio file formats:

 .mp3: The most popular of the three audio file formats supported by the HTML AUDIO
tag is ".mp3." All web browsers support this audio file format.
 .wav: IBM and Microsoft created the ".wav" audio file format. It works well on all
platforms, including Windows, Macintosh, and Linux.
 .ogg: The Xiph.Org Foundation created the ".ogg" audio file format.

Attributes of the AUDIO tag

Attribute Description

autoplay plays the audio file as soon as the web page loads.

controls displays the controls on the web page, such as play and pause buttons.

loop replays the audio file.

preload specifies whether the audio file is preloaded on the web page or not.

src provides the location of the audio file to play.

HTML AUDIO tag example

Consider the following example to learn how to embed audio files into your website.

<audio controls>
<source src="song.mp3" type="audio/mpeg">
The AUDIO tag is not supported by your browser.
</audio>

When the AUDIO tag is not supported by the web browser, the text between the AUDIO tag is
displayed. Because the text "The AUDIO tag is not supported by your browser." is available
between the AUDIO tag in the above code fragment, it will be displayed if the AUDIO tag is not
supported by the web browser.

You can provide multiple audio sources in multiple file formats. For example:
<audio controls>
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
The AUDIO tag is not supported by your browser.
</audio>

The "controls" attribute adds audio controls like play, pause, and volume.

HTML Multimedia: The VIDEO tag

The "VIDEO" tag, like "AUDIO," is used to display video files on a web page.

Following are the three video file formats supported in HTML:

 .mp4: This video file format has been developed by the "Moving Pictures Expert Group."
This video file format is recommended by one of the biggest video sharing platforms,
YouTube.
 .webm: This video file format has been developed by web giants Mozilla, Opera, Adobe,
and Google.
 .ogg: The Xiph.Org Foundation created the ".ogg" video file format.

Attributes of the VIDEO

Attribute Description

audio controls the audio channel's default state in the video.

autoplay plays the audio file as soon as the web page loads.

controls displays the controls on a web page, such as play and pause buttons.

height specifies the height of the video tag.

loop plays the video file again.

preload specifies whether the video file is preloaded on the web page or not.

poster provides an image to be displayed when the video file is not available.

src provides the location of the video file to play.

width specifies the width of the video tag.

HTML Video tag example

To provide the source of the video file, you can also use the SOURCE tag within the opening and
closing tags of the VIDEO tag.

When the location of the video file cannot be determined, the SOURCE tag is used. In this case,
the VIDEO tag plays the first video file found in the specified path. The VIDEO tag is
demonstrated in the following code snippet:

<VIDEO src="video.ogv" autoplay="true" loop="3" controls>

</VIDEO>

In the src attribute of the preceding code snippet, we defined a video.ogv file. We've also set
the autoplay attribute to true, which means the video will begin playing as soon as the web
page loads. Because the loop attribute is set to 3, the video file will be played three times.
Furthermore, the controls attribute shows the controls on the video player.

Consider the following example to learn how to embed video into your website.

<video width="320" height="240" controls>

<source src="song.mp4" type="video/mp4">
<source src="song.ogg" type="video/ogg">
The VIDEO tag is not supported by your browser.
</video>
It is a good idea to always include width and height attributes. If height and width are not set,
the browser does not know the size of the video. The remaining code works similarly to
"AUDIO."

HTML Multimedia: The EMBED tag

HTML allows you to embed plug-ins in a web page using the EMBED tag. This tag lets you
embed multimedia in a web page and play it while opening the page.

The EMBED tag uses the three mandatory attributes, namely src, height, and width.

Attributes of the EMBED tag

Attribute Description
height specifies the height of the embedded component.

hspace sets the horizontal padding around the tag.

specifies the Multipurpose Internet Mail Extension (MIME) type for the
type
components.

width sets the width of the page's embedded component.

HTML EMBED tag example

Following is an example of using the EMBED tag.

<EMBED src="Music.mp3" width=600 height=100></EMBED>

In the previous example, we used the src attribute to tell the browser which multimedia file to
play while the web page loads. We have also defined the height and width attributes to specify
the height and width of the embedded multimedia component on the page, respectively.

HTML Multimedia: The OBJECT tag

Objects like images, sounds, videos, Java applets, ActiveX controls, Portable Document Format
(PDF), and Flash objects can be added to a web page using the HTML OBJECT tag.

An object tag can also be used inside the body tag. The text between the starting and ending
tags of the OBJECT tag is the alternate text for browsers that do not support this tag.

Attributes of the OBJECT tag

The following table shows various attributes of the OBJECT tag.

Attribute Description

data specifies the URL of the object's data.

form specifies which form(s) the object belongs to.

height specifies the height of the object in pixels.

name specifies the object's name.

type specifies the MIME type for the component.

width sets the width of the page's embedded components.

HTML OBJECT tag example

The OBJECT tag initializes the object by passing the parameters to the object, which can be
done using the PARAM tag.

In HTML, you can use the PARAM tag to define parameters or variables for an OBJECT tag. An
OBJECT tag can contain multiple PARAM tags, as shown in the following code snippet.

<OBJECT data="movie.avi" type="video/quicktime" id="video" width="200" height="100">

<PARAM name="BorderStyle" value="1" />
<PARAM name="autoplay value=true />
</OBJECT>

In the above code snippet, we have defined an OBJECT tag, which includes a video file in a web
page. We have also used the PARAM tags to pass the parameters for the OBJECT tag.

The following table shows the various attributes of the PARAM tag.

Attribute Description

name specifies the name of the parameter.

value specifies the value of the parameter.

HTML Links

HTML links or hyperlinks connect one resource on the web to another. The resource may be an
image, a web page, a program, a video clip, an audio clip, an element within a web page, etc, or
anything that can be hosted on the internet.

We use the HTML <a> tag to create hyperlinks. The syntax for the <a> tag is

<a href="URL"> Text </a>

Here,

 URL - the destination of the link

  Text - the part that will be visible as a link

Clicking on the text will navigate you to the resource in the URL.

Input :

<!DOCTYPE html>

<html>

<h3>Example
h3>Example Of Adding a link</h3>

<body>

<p>Click on the following link</p>

<a href="https://www.geeksforgeeks.org
https://www.geeksforgeeks.org">GeeksforGeeks</a>

</body>

</html>

Output :

HTML Lists

HTML lists are used to display related information in an easy

easy-to-read
read and concise way as lists.
We can use three types of lists to represent different types of data in HTML:

1. Unordered List <ul>

2. Ordered List <ol>
3. Description List <dl>

Unordered List

The unordered list is used to represent data in a list for which the order of items does not
matter.

In HTML, we use the <ul> tag to create unordered lists. Each item of the list must be a <li> tag
which represents list items. For example,

<ul>

<li>Apple</li>

<li>Orange</li>

<li>Mango</li>

</ul>

Browser Output

Ordered List

The ordered list is used to represent data in a list for which the order of items has significance.

The <ol> tag is used to create ordered lists. Similar to unordered lists, each item in the ordered
list must be a <li> tag. For example,

<ol>

<li>Ready</li>
 <li>Set</li>

<li>Go</li>

</ol>

Browser Output

Description List

The HTML description list is used to represent data in the name

name-value
value form. We use
the <dl> tag to create a definition list and each item of the description list has two elements:

 term/title - represented by the <dt> tag

 description of the term - represented by the <dd> tag

<dl>

<dt>HTML</dt>

<dd>Hyper-Text
Text Markup Language</dd>

<dt>CSS</dt>

<dd>Cascading StyleSheets</dd>

<dt>JS</dt>

<dd>Javascript</dd>

</dl>
Browser Output

Tags used in HTML lists

Tag Explanation

<ol> Defines an ordered list.

<ul> Defines an unordered list.

<dl> Defines a description list.

<li> Defines a list item in ordered or unordered lists.

<dt> Defines a term in description list.

<dd> Defines the description of a term in the description list

list.

HTML Table

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc.
into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table
rows and <td> tag is used to create data cells. The elements under <td> are regular and left
aligned by default
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Tables</title>
</head>

<body>
<table border = "1">
<tr>
 <td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>

<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

</body>
</html>

Here, the border is an attribute of <table> tag and it is used to put a border across all the cells. If you do
not need a border, then you can use border = "0".

HTML Table Tags

Tag Description

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for formatting.

<col> It is used with <colgroup> element to specify column properties for each
column.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

Html Forms
<form> is an HTML element to collect input data containing interactive controls. It provides
facilities to input text, number, values, email, password, and control fields such as checkboxes,
radio buttons, submit buttons, etc., or in other words, form is a container that contains input
elements like text, email, number, radio buttons, checkboxes, submit buttons, etc. Forms are
generally used when you want to collect data from the user. For example, a user wants to buy a
bag online, so he/she has to first enter their shipping address in the address form and then add
their payment details in the payment form to place an order.
Syntax:
<form>
<!--form elements-->
</form>

HTML Form Tags

Tag Description

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

 <button> It defines a clickable button.

Example:

1. <form>
2. <label for="name">Enter name
name</label><br>
3. <input type="text" id="name"
"name" name="name"><br>
4. <label for="pass">Enter Password
Password</label><br>
5. <input type="Password" id="pass"
"pass" name="pass"><br>
6. <input type="submit" value="submit"
"submit">
7. </form>

Output:

HTML Layouts

HTML layouts provide a way to arrange web pages in well

well-mannered, well-structured,
structured, and in
responsive form or we can say that HTML layout specifies a way in which the web pages can be
arranged. Web-page
page layout works with arrangement of visual elements of an HTML document.

Web page layout is the most important part to keep in mind while creating a website so that
our website can appear professional with the great look. You can also use CSS and JAVASCRIPT
based frameworks for creating layouts for responsive an
andd dynamic website designing.
HTML Layout Elements
 <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

HTML Meta Tag

HTML lets you specify metadata - additional important information about a document in a
variety of ways. The META elements can be used to include name/value pairs describing
properties of the HTML document, such as author, expiry date, a list of keywords, document
author etc.
The <meta> tag is used to provide such additional information. This tag is an empty element
and so does not have a closing tag but it carries information within its attributes.
Attributes : This tag accepts four attributes which are mentioned and described below.
 name: This attribute is used to define the name of the property.
 http-equiv: This attribute is used to get the HTTP response message header.
 content: This attribute is used to specify properties value.
 charset: This attribute is used to specify a character encoding for an HTML file.
 scheme: Determines a scheme to be utilized to decipher the value of the substance
attribute.
Key Points:
 The <meta> tag contents are not visible on your browser, but they can be parsed by the
machine.
 They are just used to give additional information about the HTML document.
  The <meta> tags are added to our HTML document for the purpose of Search Engine
Optimisation.
 They are added inside the <head> tag & are used by browsers, search engines & other
web services.
 Through <meta> tag, designer can control the viewport.
Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
maximum-scale=1">
<meta name="description"
content="A Computer Science portal for geeks.It contains well written, well thought
and well explained computer science and programming articles,practice/ competitive
programming/company interview Questions.">
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
</head>
<body>
<h2>GeeksforGeeks</h2>
<p>This is an example of meta tag</p>
</body>
</html>
Output:

Browser Architecture
The browser’s main functionality is to fetch the file from the server and to display them on the
screen.it basically displays HTML files containing images, PDF, videos, flashes, etc in an ordered
layout.

User interface:
The user interface is the space where interaction between users and the browser occurs. Most
of the browsers have common inputs for the user interface. Some of them are an address bar,
next and back button, home button, refresh and stop button, etc.
Browse Engine:
It is the peace of code that communicates the inputs of the user interface with the rendering
engine. It is responsible for querying and manipulating the rendering engine according to the
inputs from various user interfaces.
Rendering Engine:
It is the part thoroughly responsible for displaying the requested content on the screen. It first
parses the HTML tags and then using the styles, it deals with a render tree and finally a render
layout that displays the content on the screen.
Networking:
The function of the code written in the browser is responsible to sent various network calls. For
example, sending the HTTP request to the server.
JavaScript Interceptor:
It is the component of the browsers written to interpret the javascript code presented on a web
page.
UI Backend:
This draws basic widgets on the browser like combo boxes, windows, etc. The rendering engine
uses the UI backend layer during the layout and painting stages to display the web page on the
browser.
Data Persistence:
It is a small database created on the local file system of the computer where the browser is
installed. The database stores various files like Cache, Cookies etc.

HTML 5
HTML5 is a next version of HTML. Here, you will get some brand new features which will make
HTML much easier. These new introducing features make your website layout clearer to both
website designers and users. There are some elements like <header>, <footer>, <nav> and
<article> that define the layout of a website.
Features of HTML 5:
 It has introduced new multimedia features which supports both audio and video
controls by using <audio> and <video> tags.
 There are new graphics elements including vector graphics and tags.
 Enrich semantic content by including <header> <footer>, <article>, <section> and
<figure> are added.
 Drag and Drop- The user can grab an object and drag it further dropping it to a new
location.
 Geo-location services- It helps to locate the geographical location of a client.
 Web storage facility which provides web application methods to store data on the web
browser.
 Uses SQL database to store data offline.
  Allows drawing various shapes like triangle, rectangle, circle, etc.
 Capable of handling incorrect syntax.
 Easy DOCTYPE declaration i.e., <!doctype html>
 Easy character encoding i.e., <meta charset=”UTF-8″>

New Added Elements in HTML 5:

 <article>: The <article> tag is used to represent an article. More specifically, the content
within the <article> tag is independent from the other content of the site (even though
it can be related).
 <aside>: The <aside> tag is used to describe the main object of the web page in a
shorter way like a highlighter. The <aside> tag contains mainly author information, links,
related content and so on.
 <figcaption>: The <figcaption> tag in HTML is used to set a caption to the figure element
in a document.
 <figure>: The <figure> tag in HTML is used to add self-contained content like
illustrations, diagrams, photos or codes listing in a document.
 <header>: It contains the section heading as well as other content, such as a navigation
links, table of contents, etc.
 <footer>: The <footer> tag in HTML is used to define a footer of HTML document. This
section contains the footer information (author information, copyright information,
carriers etc.). The footer tag is used within body tag. The <footer> tag is new in the
HTML 5.
 <main>: Delineates the main content of the body of a document or web app.
 <mark>: The <mark> tag in HTML is used to define the marked text. It is used to
highlight the part of the text in the paragraph.
 <nav>: The <nav> tag is used to declaring the navigational section in HTML documents.
 <section>: It demarcates a thematic grouping of content.
 <details>: The <details> tag is used for the content/information which is initially hidden
but could be displayed if the user wishes to see it.
 <summary>: The <summary> tag in HTML is used to define a summary for the <details>
element. The <summary> element is used along with the <details> element and
provides a summary visible to the user.
 <time>: The <time> tag is used to display the human-readable data/time. It can also be
used to encode dates and times in a machine-readable form.
 <wbr>: The <wbr> tag in HTML stands for word break opportunity and is used to define
the position within the text which is treated as a line break by the browser.
 <datalist>: The <datalist> tag is used to provide autocomplete feature in the HTML files.
It can be used with input tag, so that users can easily fill the data in the forms using
select the data.
 <output>: The <output> tag in HTML is used to represent the result of a calculation
performed by the client-side script such as JavaScript.
 <svg>: It is the Scalable Vector Graphics.
 <canvas>: The <canvas> tag in HTML is used to draw graphics on web page using
JavaScript. It can be used to draw paths, boxes, texts, gradient and adding images. By
default, it does not contain border and text.
 <audio>: It defines the music or audio content.
 <embed>: Defines containers for external applications (usually a video player).
 <source>: It defines the sources for <video> and <audio>.
 <track>: It defines the tracks for <video> and <audio>.
 <video>: It defines the video content.