WEB INTERFACE DESIGNING

UNIT-1
HTML
 1.INTRODUCTION TO WEB DESIGNING:
Web designing is the process of planning, conceptualizing, and implementing a website’s
functional and user-friendly design.
Web design is a field related to designing websites on the internet. without a good design, a
website fails to perform well and cannot produce a good impact on the user. It focuses on
improving the user experience rather than development.
In modern days website design a mobile-first approach is being preferred and various other
user-centered designs like dark mode, and 3D elements are being added.
Types of Web design: The following are the types in which you can do Web design:
Static web site: This type of design is used when little or no iteration is required from user.
Dynamic Web site: When user iteration is required and information is to be displayed
according to the request then a dynamic design pattern is followed.
E-commerce Website: This type of website design is required when a business wants to sell
their products to the consumer.
Flat Design: Minimalist approach characterized by clean, simple elements, vibrant colors, and
absence of textures or gradients.
Neuromorphic Design: Mimics physical interactions and textures, creating interfaces that
blend realism with digital functionality.
Minimalism Design: Focuses on stripping away unnecessary elements, favoring simplicity,
clean lines, and white space for an uncluttered user experience.
Elements of Web Design:
While designing websites, one has to keep in mind both the appearance and functionality of
websites. There are basically two elements of web design i.e., visual elements and functional
elements.
1.Visual Elements: simply mean an aspect or representation of something what we see.
Types of visual elements include:
Layout, Shapes, Colors, Images and icons.
2.Functional Elements: Simply mean the aspect or representation of functionalities of
websites.
Types of functional element include:
Navigation, User interaction, Animation.

APPLICATIONS OF WEB DESIGN:

1
1.online representation for businesses in corporate websites.
2.Online stores for selling products/services in E-commerce websites
3.platforms for sharing personal content in blogs and personal websites.
4.Facilitating online reservations and bookings in Booking and Reservation websites.

 2.DIFFERENCES BETWEEN WEB APPLICATIONS AND DESKTOP

APPLICATIONS: In general, computer applications can be distinguished into two
types: desktop applications (desktop apps) and web applications (web apps).
Desktop applications:
Desktop applications are programs or software that run locally on a computer after
installation. Microsoft Office applications, Adobe Illustrator, Adobe Photoshop, media players,
etc. are a few examples of desktop applications.
Web applications:
Web applications are not required to be installed in the computer and are accessible through
web browsers in the presence of an internet connection. Google docs, YouTube, Facebook,
Netflix, etc. are a few examples of web applications.

Differences between desktop and web applications:

DESKTOP APPS WEB APPS

They require installation on the They are accessible through web browsers and
computer to run. do not require installation.

Generally, desktop apps do not Web apps cannot run without an internet
require an internet connection to run. connection.

They are accessible from anywhere and

They are accessible only in the
through any device with an internet
machine they are installed in.
connection and a web browser.

They take space on the hard drive of

They take up space on the remote server.
the local computer.

Deployment and updating are to be Deployment and updating are done only on
done individually on each computer. the server.

Web apps are hardware-independent and just

They have strict hardware
require a web browser and internet
requirements for proper functionality.
connection to function.

As they are confined to a device and As web apps are accessible to all through the
single or limited users, they are highly internet, they are less secure than desktop
secure. apps.

Generally, they are faster than web Generally, they are slower than desktop

2
applications. applications.

HTML
 Introduction to HTML:

HTML (Hyper Text Markup Language) is a markup language used to create the structure and
content of web pages. It defines how text, images, links, and other elements are displayed in
a web browser.
 It is a markup language, not a programming language. This means it annotates text to
define how it is structured and displayed by web browsers.
 It is a static language, meaning it does not inherently provide interactive features but
can be combined with CSS for styling and JavaScript for interactivity.

HTML Page Structure:
The basic structure of an HTML page is shown below. It contains the essential
building-block elements (i.e. doctype declaration, HTML, head, title, and body
elements) upon which all web pages are created.

 <!DOCTYPE html> - This is the document type declaration, not a tag. It declares that
the document is an HTML5 document.
 <html> - This is called the HTML root element. All other elements are contained
within it.
 <head> - The head tag contains the "behind the scenes" elements for a webpage.
Elements within the head aren't visible on the front end of a webpage. Typical
elements inside the <head> include:
 <title>: Defines the title displayed on the browser tab.
 <h2> - The <h2> tag is a second-level heading tag.
 <p>- The <p> tag represents a paragraph of text.

3
  <body> - The body tag is used to enclose all the visible content of a webpage. In other
words, the body content is what the browser will show on the front end.
PROCESS TO EXECUTE:
1. An HTML document can be created using an HTML Text editor, Visual
studio code, etc.
2. Save the text file using the ".html" or ".htm" extension.
3. Once saved as an HTML document, the file can be opened as a
webpage in the browser.

Basic HTML Code Example

<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is my first paragraph of text!</p>
</body>
</html>
output: Welcome to My Webpage. This is my first paragraph of text!

 HTML Elements and HTML Formatting Tags:

HTML Elements and HTML Tags are related but distinct. An HTML element is the
complete structure, including the opening tag, content (if any), and the closing tag (if
applicable).
On the other hand, A tag is the actual keyword or name enclosed in angle brackets
(< >) that tells the browser what kind of content to expect.

HTML Tags

4
 Tag Description

<html> The root element of an HTML document

<head> Contains meta-information about the webpage

<body> Contains the visible content of the webpage

<h1> to
Headings of various levels (h1 being the largest)
<h6>

<p> Defines a paragraph

<a> Defines a hyperlink

<img> Embed an image

<ul> Defines an unordered list

HT
ML
<ol> Defines an ordered list Att
rib
ut
<li> Defines a list item es:

<table> Defines a table

<form> Defines an HTML form

Attributes are special words used within the opening tag of an HTML
element. They provide additional information about HTML elements.
HTML attributes are used to configure and adjust the element's
behaviour, appearance, or functionality in a variety of ways.
Each attribute has a name and a value, formatted as name="value".
Attributes tell the browser how to render the element or how it
should behave during user interactions.

5
 Syntax:
<tag name attribute_ name = "attribute_ value"> content... </tag
name>

Code Example of Using HTML Attributes

This HTML code demonstrates the use of the src attribute within
the <img> tag to display an image.

<!DOCTYPE html>

<html>

<head>

<title>HTML img src Attribute</title>

</head>

<body>

<img src="https://media.geeksforgeeks.org/wp-content/cdn-
uploads/Geek_logi_-low_res.png">

</body>

</html>
In this example:

Tag : <img>

 Attribute : src

 Value of Attribute : "https://media.geeksforgeeks.org/wp-

content/cdn-uploads/Geek_logi_-low_res.png"

 Purpose : The <img> tag is used for embedding images in an

HTML page. The src attribute within the <img> tag specifies the
path to the image file you wish to display. This attribute is crucial as
it directs the browser to the image’s location on the internet or a
local directory.

Components of Attribute

An HTML attribute consists of two primary components:

1. attribute_name: This is the name of the attribute, which

specifies what kind of additional information or property you are
defining for the element. Common attribute names
include href, src, class, id, etc.

6
2. attribute_value: The value is assigned to the attribute to define
the specific setting or behaviour. It is always placed in quotes.

Types of HTML Attributes:

HTML attributes can be broadly categorized based on their function

and the type of elements they modify. For example -Global
Attributes

These attributes can be used with any HTML element (though their
effects might vary based on the element):

Attribute Description

Groups elements and allows

class
styling.

style Inline CSS styles.

Specifies the source of various

resources, such as image URLs for
src the img element, video URLs for
the video element, and audio URLs
for the audio element.

Determines whether the content

contenteditable
within the element is editable.

Specifies the element’s

Role
accessibility role.

Determines the order of focus

tabindex
during keyboard navigation.

Assigns a unique identifier to an

id element, allowing targeting with
CSS or JavaScript.

Defines the hyperlink destination

href within the a element, enabling
navigation.

Provides alternative text for

alt images, essential for accessibility
and SEO.

7
 Attribute Description

Creates a tooltip that appears when

title
a user hovers over the element.

Specifies the language of the

lang element’s content, aiding with
translation and accessibility.

Some other main types of HTML attributes are:

 Event Attributes - These define the actions to be taken on

specific browser events.

 Input Attributes - Specific to input elements within <form> tags.

 Image Attributes - Specific to the <img> element for handling

images.

 Link Attributes - Specific to linking elements

like <a> and <link> .

 Table Attributes - Used with table elements

like <table> , <th> , <tr> , and <td> .

 Style Attributes - Define styles directly on an element.

 Media Attributes - Related to media elements

like <audio> and <video> .

 Accessibility Attributes - Help improve accessibility, such

as alt for images and aria-* attributes.

 Meta Attributes - Used with meta elements to specify metadata

like charset .

Common HTML Attributes

1.Height and Width attribute

Syntax: <img src=

"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-
low_res.png"

width="300px"

height="100px">

2.HTML lang attribute

8
The language is declared with the lang attribute.

Syntax: <html lang="en">

 HTML Heading Tags:

HTML headings are used to define the titles and subtitles of sections on
a webpage. They help organize the content and create a structure that is
easy to navigate.

 Proper use of headings enhances readability by organizing content

into clear sections.

 Search engines utilize headings to understand page structure.

Sample code for headings:

<html>

<body>

<h1>This is the Main Heading</h1>

<h2>This is a Subheading</h2>

<h3>This is a Smaller Subheading</h3>

<h4>This is a Sub-Subheading</h4>

<h5>This is a Minor Subheading</h5>

<h6>This is the Smallest Heading</h6>

</body>

</html>

 This code uses HTML heading tags (<h1> to <h6>) to create

headings that range from the main heading to the smallest
subheading.

 Each tag shoes the hierarchy of the content, helping

organize the structure of the webpage.
 The 'h' inside the tag should always be in lower case.
Levels of HTML Heading Tag s

9
 HTML offers six levels of heading tags, each serving a different

purpose in structuring your content:

<h1> – Main Heading (Largest)

<h2> – Subheadings

<h3> to <h6> – Smaller Headings

HTML Paragraphs:

A paragraph in HTML is simply a block of text enclosed within the <p>

tag. The <p> tag helps divide content into manageable, readable
sections. It’s the go-to element for wrapping text in a web page that is
meant to be displayed as a distinct paragraph.

Syntax:

<p> Content</p>

In HTML, when you wrap text inside the <p> tag, it automatically:

 Adds space before and after the paragraph to visually separate it

from other content.
 Breaks the text into a single block, creating an easy-to-read section.

HTML Paragraph Code Example:

Example 1: Here’s an example showing two paragraphs in HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<title>The p tag</title>
</head>
<body>
<p>A Computer Science portal for geeks.</p>
<p>It contains well written, well thought articles.</p>
</body>

</html>

Output:

10
 The <br> tag:
The HTML <br> tag element creates a line break, giving you a new
line without starting a new paragraph. Use <br> when you want to
move to the next line without beginning a whole new paragraph.
Syntax:<br>

Horizontal tag:
The HTML <hr> tag is used to create a horizontal rule or line, visually
separating content on a webpage. Use <hr> when you want to insert a
horizontal line to signify a division between sections or elements,
providing a clear visual break in the page.
Syntax: <hr>
Align attribute:
The <p> tag specifically supports the alignment attribute and allows us to
align our paragraphs in left, right, or center alignment.
Syntax: <p align="value">

Example program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML paragraph
</title>
</head>
<body>
<p align="center">
Welcome Geeks
</p>
<p align="left">
A Computer Science portal for geeks.
</p>
<p align="right">
It contains well written, well thought articles.
</p>
</body>
</html>
Output:

11
HTML Styles:

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

Example:

<!DOCTYPE html>

<html>

<body>

<p>I am normal</p>

<p style="color:red;">I am red</p>

<p style="color:blue;">I am blue</p>

<p style="font-size:50px;">I am big</p>

</body>

</html>

The HTML Style Attribute:

Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:

<tagname style="property:value;">

The property is a CSS property. The value is a CSS value.

Background Color:
The CSS background-color property defines the background color for an HTML element.
Example
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">

12
 <h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Set background color for two different elements:

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
</html>

13
 Web Interface Designing Technologies
Department of Computer Science

14
HTML Colors
HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or
HSLA values.
Background Color
You can set the background color for HTML elements:

Example
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
SIR C R REDDY COLLGE
</p>
</body>
</html>
Text Color:
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">SIR C R REDDY COLLEGE.</p>
<p style="color:MediumSeaGreen;">ELURU</p>
</body>
</html>

 HTML FORMATTING TAGS:

Formatting elements were designed to display special types of text:

<b> - Bold text

<strong> - Important text

<i> - Italic text

<em> - Emphasized text

<mark> - Marked text

<small> - Smaller text

15
<del> - Deleted text

<ins> - Inserted text

<sub> - Subscript text

<sup> - Superscript text

The HTML <sub> element defines subscript text. HTML <b> and <strong> Elements
The HTML <b> element defines bold text, without any extra importance.
Example :<b>This text is bold</b>
The HTML <strong> element defines text with strong importance. The content inside is
typically displayed in bold.
Example: <strong>This text is important!</strong>

16
HTML <i> and <em> Elements
The content inside is typically displayed in italic.
Example: <i>This text is italic</i>

The HTML <em> element defines emphasized text. The content inside is typically displayed in italic.

Example: <em>This text is emphasized</em>

HTML <small> Element

The HTML <small> element defines smaller text:
Example: <small>This is some smaller text.</small>

HTML <mark> Element

The HTML <mark> element defines text that should be marked or highlighted:
Example: <p>Do not forget to buy <mark>milk</mark> today.</p>

HTML <del> Element:

The HTML <del> element defines text that has been deleted from a document. Browsers will usually
strike a line through deleted text:
Example:<p>My favorite color is <del>blue</del> red.</p>

HTML <ins> Element:

The HTML <ins> element defines a text that has been inserted into a document.
Browsers will usually underline inserted text:
Example: <p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
HTML <sub> Element
Example : <p>This is _subscripted text.</p>

HTML <sup> Element

The HTML <sup> element defines superscript text.

Example: <p>This is ^{superscripted} text.</p>

<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
<strong>This text is important!</strong>

17
<i>This text is italic</i><br>
<em>This text is emphasized</em>
<small>This is some smaller text.</small>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<p>This is _subscripted text.</p>
<p>This is ^{superscripted} text.</p>
</body>
</html>

18
HTML Quotations:
The Quotation elements in HTML are used to insert quoted texts in a web page, that is portion of
texts different from the normal texts in the web page. Below are some of the most used quotation
elements of HTML:

1. <q> element: The <q> element is used to set a set of text inside the quotation marks. It has
both opening and closing tags.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Quotations</title>
</head>
<body>
<h3>SIR C R REDDY COLLEGE</h3>
<p>DEPARTMENT OF COMPUTER SCIENCE<br></p>
<!--Inside quotes-->
<p><q>Web Interface Designing Technologies</q></p>
</body>
</html>
Output:
SIR C R REDDY COLLEGE

DEPARTMENT OF COMPUTER SCIENCE

“Web Interface Designing Technologies”
2. <blockquote> element: The <blockquote> element is also used for quotations in a different way.
Instead of putting the text in quotes, it adds space before the start of the sentence, with this tag we can
also indent the start of the new paragraph. It has both opening and closing tags.

Example:
<!DOCTYPE html>
<html>
<head>
<title>Blockquote</title>
</head>
<body>
<h3>SIR C R REDDY COLLEGE</h3>
<p>DEPARTMENT OF COMPUTER SCIENCE<br></p>

19
 <!--Inside blockquotes-->
<p><blockquote>Web Interface Designing Technologies</blockquote></p>
</body>
</html>

3. <address> element: Using the <address> element, we can define an address in a webpage
and the text put inside the address tag will be emphasized. Usually line break is added before
and after the address tag and content inside this tag is generally renders in italic format. It
helps screen reader also It has both opening and closing tags.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Address</title>
</head>
<body>
<h3>SIR C R REDDY COLLEGE</h3>
<address>
<p>Address:<br>
Opp. TTD Kalyanamandapam,<br>
Near New Bus stand, Eluru</p>
</address>
</body>
</html>

4. <abbr> element: The <abbr> element is used to define a text as an acronym or abbreviations.
The title attribute can be used to show the full version of the abbreviation/acronym when you
hover the mouse over the <abbr> element. It has both opening and closing tags. This is useful
for browsers and search engines. Example:

<!DOCTYPE html>
<html>
<head>
<title>Abbreviations</title>
</head>
<body>
<h3>SIR C R REDDY COLLEGE</h3>
<!--Here the marked text is the acronym-->

20
 <p>Welcome to <abbr title="C R REDDY">CRR</abbr></p>
</body>
</html>

5. <cite> element: This element is used to define a title of a work and emphasizes a text.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Cite</title>
</head>
<body>
<h3>SIR C R REDDY COLLEGE</h3>
<!--The title is kept in cite tag-->

<p>The <cite>DEPARTMENT OF COMPUTER SCIENCE</cite> has 6<br>

combinations of computers.</p>
</body>
</html>

21
 HTML Comments
HTML comments are not displayed in the browser, but they can help document your HTML source
code.
HTML Comment Tag
You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
Example
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
Hide Inline Content
Comments can be used to hide parts in the middle of the HTML code.
Example
Hide a part of a paragaph:
<p>This <!-- great text --> is a paragraph.</p>

HTML Images:
The HTML <img> tag is used to embed an image in web pages by
linking them. It creates a placeholder for the image, defined by attributes
like src, width, height, and alt, and does not require a closing tag.
There are two ways to insert the images into a webpage:
 By providing a full path or address (URL) to access an internet
file.
 By providing the file path relative to the location of the current
web page file.
Basic Example of the <img> Tag:

In this example:
 The <img> tag is used to embed an image into the webpage.
 src attribute: Specifies the source URL of the image. The image
is loaded from this URL when the webpage is accessed.
 alt attribute: Provides alternative text for the image, "GFG
image," which describes the image content. If, for any reason,
the image cannot be displayed, the text "GFG image" will be
shown instead.

Various HTML <img> Tag Attributes:

22
Attribu
te Description

src Specifies the path to the image file.

Provides alternate text for the image, useful for accessibility

alt
and when the image cannot be displayed.

height Specifies the height of the image.

width Specifies the width of the image.

ismap Specifies an image as a server-side image map.

sizes Specifies image sizes for different page layouts.

Set Image Size - Width and Height Attribute, style:

<html>
<head>
<title>HTML TAGS</title>
</head>
<body bg color=”red”>
<img src =”logo.jpg” alt=”HTML”
width=”400”height=”400”border=”5”>
</body>
</html>
Adding Animated Image:
To add an animated image in HTML, use the <img> tag with the src
attribute pointing to a GIF file, providing engaging motion to enhance
webpage content.
<html>
<body>
<img src="smiley.gif"
alt="smiley"style="width: 200px; height: 200px" />
</body>

23
</html>

HTML Tables:

Basic HTML Table Structure

An HTML table is created using the <table> tag. Inside the table, we
use:
<table>: table tag
 <tr>: Table Row
 <th>: Table Header
 <td>: Table Data
Each <tr> represents a row, and within each row, <th> and <td> tags
represent the cells in that row, which can contain text, images, lists, or even
another table
Creating a Table:
Everything between these two tags will be a part of the table. These attributes control the
formatting of the table as a whole, not that of the items in each cell.

Syntax :
<table border=”n” cellpadding=”n” cellspacing=”n” height=”n” width=”n%”>
-----------------
-----------------
</table>

Cellpadding It represents the distance between cell borders and the content within a cell.
Cellspacing It sets the amount of white space between cells.
Border : To display a table with borders, specify the border attribute.
Width : It sets the amount of screen that the table will use

Create a Table Row:

The <tr> tag defines a row in an HTML table.
A <tr> element contains one or more <th> or <td> elements.

Syntax :
<tr align=”right / left / center / justify” bgcolor=”colorname”>
-----------------
-----------------
</tr>
Align attribute is used to Align the content in a table row
Bgcolor attribute is used to set background color for a table row

Create a Table Header:

24
 Table heading can be defined using <th> tag.
These are table cells which are used for heading.
The text in <th> elements are bold and centered by default.

Syntax :
<th align=”right / left / center / justify” bgcolor=”colorname” rowspan=”n”
colspan=”n” nowrap width=”n%” height=”n” >
-----------------
-----------------
</th>
Align attribute is used to Align the content in a cell
Bgcolor attribute is used to set background color of cell
Rowspan attribute sets the number of rows a cell should span
Colspan attribute sets the number of columns a cell should span
Width attribute Specifies the width of a cell in pixels
Height attribute sets the height of a cell in pixels
Nowrap specifies that the content inside a cell should not wrap

Create a Table cell:

The <td> tag defines a standard cell in an HTML table.
These are table cells which are used to display text.
The text in <td> elements are regular and left-aligned by default..
Syntax :
<td align=”right / left / center / justify” bgcolor=”colorname” rowspan=”n”
colspan=”n” nowrap width=”n%” height=”n” >
-----------------
-----------------
</td>
Align attribute is used to Align the content in a cell
Bgcolor attribute is used to set background color of cell
Rowspan attribute sets the number of rows a cell should span
Colspan attribute sets the number of columns a cell should span
Width attribute Specifies the width of a cell in pixels
Height attribute sets the height of a cell in pixels
Nowrap specifies that the content inside a cell should not wrap
Example 1:

25
 <table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Output:

Example 2 : Cell that spans two columns

<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Lakshmi</td>
<td>9441133445</td>
<td>9581506222</td>
</tr>
</table>
Output:

26
Example 3: Cell that spans two rows
table border="1">
<tr>
<th>First Name:</th>
<td>Lakshmi</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>9441133445</td>
</tr>
<tr>
<td>9581506222</td>
</tr>
</table>

Output:

Example:
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>

27
 <tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
Output:

Example: Addition of the border to the HTML Table.

<!-- index.html -->

<!DOCTYPE html>

<html>

<head>

<style>table,th,td {

border: 1px solid black;}

</style>

</head>

<body>

<table style="width:100%">

<caption>DETAILS</caption>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

<tr>

<td>Priya</td>

<td>Sharma</td>

<td>24</td>

</tr>

<tr>

28
 <td>Arun</td>

<td>Singh</td>

<td>32</td>

</tr>

<tr>

<td>Sam</td>

<td>Watson</td>

<td>41</td>

</tr>

</table>

</body>

</html>

Output: DETAILS

29
Adding Cells that Span Many Columns in HTML Tables:
To make a cell span more than one column, we must use the colspan
attribute.
Example: Use of colspan attribute in HTML.

30
31
<!-- index.html -->

<!DOCTYPE html>

<html>

<head>

<style>table,th,td {

border: 1px solid black;

border-collapse: collapse;

th,td {

padding: 5px;

text-align: left;

</style>

</head>

<body>

<h2>Cell that spans two columns:</h2>

<table style="width:100%">

<tr>

<th>Name</th>

<th colspan="2">Telephone</th>

</tr>

<tr>

<td>Vikas Rawat</td>

<td>9125577854</td>

<td>8565557785</td>

</tr>

</table>

</body>

</html>

Output:

32
 Adding Cells that span many rows in HTML Tables:
To make a cell span more than one row, we must use the rowspan
attribute.
Example: Use of the rowspan attribute in HTML.

<!-- index.html -->

<!DOCTYPE html>

<html>

<head>

<style>

table,

th,

td {

border: 1px solid black;

border-collapse: collapse;

th,

td {

padding: 5px;

text-align: left;

</style>

</head>

<body>

<h2>Cell that spans two rows:</h2>

33
 <table style="width:100%">

<tr>

<th>Name:</th>

<td>Vikas Rawat</td>

</tr>

<tr>

<th rowspan="2">Telephone:</th>

<td>9125577854</td>

</tr>

<tr>

<td>8565557785</td>

</tr>

</table>

</body>
</html>

Output:

Adding a Background Colour to the Table :

A color can be added as a background in an HTML table using the
"background-color" option.
Syntax:
table#t01 {
width: 100%;
background-color: #f2f2d1;
}
Example: Addition of the Table background color in HTML
<!-- index.html -->
<!DOCTYPE html>

34
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f2f2d1;
}
</style>
</head>
<body>
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>

35
 <td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
Output:

HTML Lists

An HTML List allows you to organize data on web pages into an ordered
or unordered format to make the information easier to read and visually
appealing. HTML Lists are very helpful for creating structured, accessible
content in web development.
Types of HTML Lists:
There are three main types of lists in HTML:
1. Unordered Lists (<ul>): These lists are used for items that do
not need to be in any specific order. The list items are typically
marked with bullets.
2. Ordered Lists (<ol>): These lists are used when the order of
the items is important. Each item in an ordered list is typically
marked with numbers or letters.
3. Description Lists (<dl>): These lists are used to contain terms
and their corresponding descriptions.
Using HTML Unordered List or Bulleted List:
The unordered list items are marked with bullets, also known as bulleted
lists. An unordered list starts with the <ul> tag, and each list item begins
with the <li> tag.
Syntax:
<ul>
<li>Item 1</li>
<li>Item 2</li>

36
 <li>Item 3</li>
</ul>

Attribute: This tag contains two attributes which are listed below:
 compact: It will render the list smaller.
 type: It specifies which kind of marker is used in the list.

Example:
<!DOCTYPE html>
<html>
<body>
<h2>Grocery list</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
</html>

Output:
Grocery list
 Bread
 Eggs
 Milk
 Coffee

Using HTML Ordered List:

Ordered lists are used when the items need to follow a specific
sequence.
In an ordered list, all list items are marked with numbers by
default. An ordered list starts with the <ol> tag, and each list
item begins with the <li> tag.
<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
Attributes:
 compact: It defines the list should be compacted
(compact attribute is not supported in HTML5. Use CSS
instead.).
 reversed: It defines that the order will be descending.
 start: It defines from which number or alphabet the order
will start.

37
  type: It defines which type(1, A, a, I, and i) of the order
you want in your list of numeric, alphabetic, or roman
numbers.

HTML Unordered Lists

 An unordered list is a collection of related items that have no special order or sequence.
This list is created by using HTML <ul> tag.
 Each item in the list is marked with a bullet.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Maths</li>
<li>Physics</li>
<li>Computers</li>
<li>Chemistry</li>
</ul>
</body>
 </html>
Output:
 Maths
 Physics
 Computers
 Chemistry
The type Attribute
You can use type attribute for <ul> tag to specify the type of bullet you like. By default,
it is a disc. Following are the possible options −
<ul type = "square">
<ul type = "disc">
<ul type = "circle">

Example:
<!DOCTYPE html>
<html> <head>
<title>HTML Unordered List</title> </head>
<body>
<ul type="square">
<li>Maths</li>
<li>Physics</li>
<li>Computers</li>
<li>Chemistry</li>
</ul>
</body>
</html>

Output:
 Maths
 Physics
 Computers

38
  Chemistry

HTML Ordered Lists

 This list is created by using <ol> tag.

 The numbering starts at one and is incremented by one for each successive ordered list
element tagged with <li>.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Programming in C</li>
<li>Data Structures</li>
<li>DBMS</li>
<li>OOPS through JAVA</li>
<li>Web technology</li>
</ol>
</body>
</html>

Output:
1. Programming in C
2. Data Structures
3. DBMS
4. OOPS through JAVA
5. Web technology

The type Attribute

You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is
a number. Following are the possible options −
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

39
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="I">
<li>Programming in C</li>
<li>Data Structures</li>
<li>DBMS</li>
<li>OOPS through JAVA</li>
<li>Web technology</li>
</ol>
</body>
</html>

Output:
I. Programming in C
II. Data Structures
III. DBMS
IV. OOPS through JAVA
V. Web technology

40
The start Attribute
You can use start attribute for <ol> tag to specify the starting point of numbering you need.
Following are the possible options −
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.
Example:
<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="I" start="5">
<li>Programming in C</li>
<li>Data Structures</li>
<li>DBMS</li>
<li>OOPS through JAVA</li>
<li>Web technology</li>
</ol>
</body>
</html>

Output:

V. Programming in C

VI. Data Structures

VII. DBMS

VIII OOPS through JAVA

.
IX. Web technology

41
HTML Definition Lists

HTML and XHTML supports a list style which is called definition lists where entries are
listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a
glossary, list of terms, or other name/value list.

Definition List makes use of following three tags.

 <dl> − Defines the start of the list

 <dt> − A term

 <dd> − Term definition

 </dl> − Defines the end of the list

Example:

<!DOCTYPE html>

<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>
Output:

HTML
This stands for Hyper Text Markup Language

HTTP
This stands for Hyper Text Transfer Protocol

42
*****

19

43
HTML FORMS
 The HTML <form>
The HTML <form> tag is used to create an HTML form and it has following syntax:
<form action="Script URL" method="GET|POST">
form elements like input, textarea etc.
</form>
Action : Specifies where to send the form-data when a form is submitted.

Method: Method to be used to upload data. The most frequently used are GET &POST
methods. HTML Forms - The Input Element:
 The input element is used to select user information.
 An input element can vary in many ways, depending on the type attribute. An input
element can be of type text field, checkbox, password, radio button, submit button, and
more.
Text Fields:
<input type="text" /> defines a one-line input field that a user can enter text into:
<input type="text" name="string" value=””string” size=”n” maxlength=”n” >

Type : Indicates the type of input control and for text input control it will be set to text.
Name : Used to give a name to the control which is sent to the server to be recognized
and get the value.
Value : This can be used to provide an initial value inside the control.
Size : Allows to specify the width of the text-input control in terms of characters.
Maxlength: Allows to specify the maximum number of characters a user can enter
into the text box.
Example : First name: <input type="text" name="first_name" value=”srijay” />
Password
This is also a single-line text input but it masks the character as soon as a user enters it.They
are also created using HTML <input> tag but type attribute is set to password.
<input type="password" name="string" value=””string” size=”n” maxlength=”n” >
Type : Indicates the type of input control and for password input control it will be set to
password
Name : Used to give a name to the control which is sent to the server to be recognized and
get the value.
Value : This can be used to provide an initial value inside the control.
Size : Allows to specify the width of the text-input control in terms of characters.
Maxlength : Allows to specify the maximum number of characters a user can enter into the
text box.

44
Example :
User ID : <input type="text" name="user_id" /> <br>

Password : <input type="password" name="password" />

20

45
TextArea:

This is used when the user is required to give details that may be longer than a single
sentence. Multi-line input controls are created using HTML <textarea> tag.

<textarea rows="m" cols="n" name="string">

Name : Used to give a name to the control which is sent to the server to be recognized and get
the value.
Rows : Indicates the number of rows of text area box.
Cols : Indicates the number of columns of text area box

Example Description: <textarea rows="5" cols="50" name="description">

Enter description here...
</textarea>
Checkbox Control:
Checkboxes are used when more than one option is required to be selected. They are also
created using HTML <input> tag but type attribute is set to checkbox.

<input type="checkbox" name="string" value="string" [checked]>

Type : Indicates the type of input control and for checkbox input control it will be
set to checkbox.
Name : Used to give a name to the control which is sent to the server to be recognized and get
the value.
Value : The value that will be used if the checkbox is selected.
Checked : Set to checked if you want to select it by default.

Example : <input type="checkbox" name="physics" value="on" checked > Physics

<input type="checkbox" name="maths" value="on"> Maths

Radio Button Control:

Radio buttons are used when out of many options, just one option is required to be selected.
They are also created using HTML <input> tag but type attribute is set to radio.

<input type="radio" name="string" value="string" [checked]>

46
Type : Indicates the type of input control and for checkbox input control it will be set to radio.
Name : Used to give a name to the control which is sent to the server to be recognized and get
the value.
Value: The value that will be used if the radio box is selected.
Checked: Set to checked if you want to select it by default.

Example : <input type="radio" name="subject" value="maths"> Maths

<input type="radio" name="subject" value="physics"> Physics

Button Controls:
There are various ways in HTML to create clickable buttons. You can also create a
clickable button using <input> tag by setting its type attribute to button. The type
attribute can take the following values:
Type Description
Submit This creates a button that automatically submits a form.
Reset This creates a button that automatically resets form controls to their initial values.

21

47
Button This creates a button that is used to trigger a client-side script when the user
clicks that button.
<input type="submit" name=" String " value="String" />
<input type="reset" name=" String " value=" String " />
<input type="button" name=" String " value=" String " />
<input type="image" name=" String " src="URL" />
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML form Tag</title></head>
<body>
<form>
First name:

<input type = "text" name = "first_name" value = "" maxlength = "100" /> <br /> Last name:

<input type = "text" name = "last_name" value = "" maxlength = "100" /><br /> Email :
<input type = "text" name = "email" value = "" maxlength = "100" /><br />
User ID :
<input type="text" name="user_id" /> <br>
Password:
<input type="password" size=”11” maxlength=”11” > <br/>
Gender :
<input type = "radio" name = "Male" />Male<br />
<input type = "radio" name = "Female" />Female<br />
Description:<br/>
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea> <br>
Select your Favorite Subject:<br/>

<input type="checkbox" name="Computers" value="on" checked > Computers <br/> <input

type="checkbox" name="physics" value="on" > Physics <br/>
<input type="checkbox" name="maths" value="on"> Maths

48
<br/> <input type = "submit" value ="Submit" />
</form>
</body>
</html>

22

49
  
 HTML5

  HTML 5 is the fifth and current version of HTML.
  It has improved the markup available for documents and has introduced application

programming interfaces(API) and Document Object Model(DOM).


Features:
  It has introduced new multimedia features which support 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″>
 Advantages:
  All browsers supported.
  More device friendly.
  Easy to use and implement.
  HTML 5 in integration with CSS, JavaScript, etc. can help build beautiful

websites.
 Disadvantages:
  Long codes have to be written which is time consuming.
 
   Only modern browsers support it.



 HTML graphics
 1.SVG

  SVG stands for Scalable Vector Graphics.
  SVG defines vector-based graphics in XML format.
 Example:
 <!DOCTYPE html>
 <html><body>
 <h1>My first SVG</h1>
 <svg width="100" height="100">
 <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> Sorry,
 your browser does not support inline SVG.
 </svg>
 </body></html>

50

 23

51
 
 Department of Computer  Web Interface Designing
Science Technologies


 Output:

 What is SVG?
  SVG stands for Scalable Vector Graphics
  SVG is used to define vector-based graphics for the Web
 SVG defines the graphics in XML format
 
   Every element and every attribute in SVG files can be animated


 SVG Advantages

 Advantages of using SVG over other image formats (like JPEG and GIF) are:
  SVG images can be created and edited with any text editor
  SVG images can be searched, indexed, scripted, and compressed
  SVG images are scalable
  SVG images can be printed with high quality at any resolution
  SVG images are zoomable
  SVG graphics do NOT lose any quality if they are zoomed or resized
  SVG is an open standard
  SVG files are pure XML

 2.HTML Canvas
  The HTML <canvas> element is used to draw graphics, on the fly, via scripting
(usually JavaScript).
  The <canvas> element is only a container for graphics. You must use a script to
actually draw the graphics.
  Canvas has several methods for drawing paths, boxes, circles, text, and adding
images.

 HTML Canvas Can Draw Text

  Canvas can draw colorful text, with or without animation.

 HTML Canvas Can Draw Graphics

  Canvas has great features for graphical data presentation with an imagery of graphs
and charts.

 HTML Canvas Can be Animated

52

  Canvas objects can move. Everything is possible: from simple bouncing balls to
complex animations.

 24

53
 
 Department of Computer  Web Interface Designing
Science Technologies


 HTML Canvas Can be Interactive

  Canvas can respond to JavaScript events.
  Canvas can respond to any user action (key clicks, mouse clicks, button clicks,
finger movement).

 HTML Canvas Can be Used in Games

  Canvas' methods for animations, offer a lot of possibilities for HTML
gaming applications.

 Canvas Example

  In HTML, a <canvas> element looks like this:
 <canvas id="myCanvas" width="200" height="100"></canvas>

 Example:

 <!DOCTYPE html>
 <html>
 <body>

 <canvas id="myCanvas" width="200" height="100"
 style="border:2px solid #000000;">
 </canvas>

 </body>
 </html>
 Output:

 HTML media
 Multimedia on the web is sound, music, videos, movies, and animations.


What is 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!

54
 Multimedia Formats
 Multimedia elements (like audio or video) are stored in media files.

 25

55
 
 Department of Computer  Web Interface Designing
Science Technologies


 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.

 Common Audio Formats

 MP3 is the best format for compressed recorded music. The term MP3 has become
synonymous with digital music.

56


 26

57
 
 Department of Computer  Web Interface Designing
Science Technologies




HTML plug INS
 Plug-ins are computer programs that extend the standard functionality of the browser.

Plug-ins
 Plug-ins were designed to be used for many different purposes:
  To run Java applets
  To run Microsoft ActiveX controls
  To display Flash movies
  To display maps
  To scan for viruses
 
   To verify a bank id

 The <object> Element

 
   The <object> element is supported by all browsers.
   The <object> element defines an embedded object within an HTML document.
   It was designed to embed plug-ins (like Java applets, PDF readers, and Flash Players)
in web pages, but can also be used to include HTML in HTML:


 Youtube

 The easiest way to play videos in HTML, is to use YouTube.
 YouTube Video Id
  YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a video. 
 You can use this id, and refer to your video in the HTML code.
 Playing a YouTube Video in HTML

 To play your video on a web page, do the following:
 
   Upload the video to YouTube
   Take a note of the video id
   Define an <iframe> element in your web page
   Let the src attribute point to the video URL
   Use the width and height attributes to specify the dimension of the
  player Add any other parameters to the URL

 Ex
a
m
pl
e

 <!DOCTYPE html>
 <html>

58
 <body>

 <iframe width="420" height="345"
 src="https://www.youtube.com/embed/nR3ok_P2gzI">
 </iframe>

 </body>
 </html>


 27

59



60

 YouTube Autoplay + Mute
  Video start playing automatically when a user visits the page, by adding autoplay=1 to the
YouTube URL.
  Add mute=1 after autoplay=1 to let your video start playing automatically (but
 muted).
 Example:
 <!DOCTYPE html>
 <html>
 <body>

 <iframe width="420" height="345"
 src="https://www.youtube.com/embed/nR3ok_P2gzI?autoplay=1&mute=1">
 </iframe>

 </body>
 </html>

 YouTube - Loop

  Add loop=1 to let your video loop forever.
  Value 0 (default): The video will play only once.
  Value 1: The video will loop (forever).

 Example:
 <!DOCTYPE html>
 <html>
 <body>

 <iframe width="420" height="345"
 src="https://www.youtube.com/embed/nv=nR3ok_P2gzI?playlist=tgbNymZ7vqY&lo
 op=1">
 </iframe>

 </body>
 </html>
 YouTube Controls
  Add controls=0 to not display controls in the video player.
  Value 0: Player controls does not display.
  Value 1 (default): Player controls display.
 Example:
 <!DOCTYPE html>
 <html>
 <body>

 <iframe width="420" height="345"
 src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
 </iframe>
 </body>
 </html>


61
 *****


62