DRAVIDIAN UNIVERSITY, KUPPAM
STAFF NAME: Dr [Link] CLASS: IV [Link] CS
SUBJECT: WEB INTERFACE DESIGNING TECHNOLOGIES DATE: 27.07.26
UNIT I
INTRODUCTION TO WEB DESIGNING
WWW is a collection of internet resources (such as FTP, telnet), hyperlinked text, audio, and video
files, and remote sites that can be accessed and searched by browsers based on standards such as HTTP and
TCP/IP. The Web, or World Wide Web, is basically systems that support specially formatted documents. The
documents are formatted in a mark up language called HTML (Hyper Text Markup Language) that supports
links to other documents, as well as graphics, audio, and video files. This means you can jump from one
document to another simply by clicking. There are several applications called Web browsers that make it
easy to access the World Wide Web. Example Firefox, Microsoft’s Internet Explorer, crome etc
Basic Elements (components):
HTML: Hyper Text Markup Language. The markup (formatting) language for the Web.
URI: Uniform Resource Identifier. A kind of “address” that is unique and used to identify to each resource
on the Web. It is also commonly called a URL.
HTTP: Hypertext Transfer Protocol. Allows for the retrieval of linked resources from across the Web.
DIFFERENCE BETWEEN WEB APPLICATIONS AND DESKTOP APPLICATIONS
What is a Web App?
A web app or web service is a program configured and installed on a remote server, whose services
can be availed using a browser and network access. These applications are developed to run in browsers and
don’t require any installation on the physical machine.
For Example, end-user access Google Docs from the browser and use it to create files without
downloading the software on their device.
What is a Desktop App?
A software program created to run on a computer system with and without internet access and
browser is a desktop application. To run these solutions, users have to download its packages to install them
on the machine. For instance, Microsoft Word, Excel, Games, Windows Media Player, and so forth. All
these applications require a part of storage space on primary memory to run.
INTRODUCTION TO HTML
HTML stands for Hypertext Markup Language. It is a Language used to create Web Pages or
Hypertext document. A Markup Language is a set of instructions often called TAGS which can be added to
text files. HTML is only a formatting language is not a programming language. The idea behind hypertext is
that instead of reading text in a right linear structure we can easily jump from one point to another
[Link] is all about specifying the structure and format of our webpage i.e, it is mainly used for
describing the structure document.
HTML is platform independent i.e, for example if we can access internet, we can access WORLD
WIDE WEB (WWW) irrespective of client OS and OS of the web server are accessing. So, we can view one
download HTML files on www through browser.
Elements of a web document are labeled through the usage of HTML tags. It is the tags that describe
the document. Anything that is not a tag will be displayed in the document itself. HTML does not describe
any page layout i.e, for example, word for windows have different styles for headings, font size etc. But
HTML doesn’t have all these. Based on the Platforms, appearance of any element will change. The
formatted text will appear differently on different machines / Platforms. By separating the Structure of the
document and appearance, a Program that reads and Understands HTML can make formatting decision
based on capabilities of individual Platform. Web Browsers are best examples of HTML formatters.
1
Advantages of HTML:-
A HTML document is small and hence easy to send over the net. It is small because it doesn’t
include format information.
HTML documents are cross platform compatible and device independent. We need a HTML
readable browser to view them.
Basic HTML tags:-
(1) <!doctype> : This tag formally starts an HTML document and it also indicates the version of HTML
used.
<!doctype HTML PUBLIC “//w3c//DTDHTML Q.o//EN”>
(2) <HTML>: Every HTML document starts with a <html> tag and it is always the first tag in a html
page and indicates that the document is a HTML document. The end tag <html> is </html>.
<html>……..</html>
(3) <head>: It contains the head of an html document, which holds about the document such as title.
Each property defined html page should have a head which we create with <head> tag. It has header
information and it isdisplayed at the top of the browser. Each tag for <head> is </head>.
<head>…….</head>
(4) <title>: It contains the title of the html document which includes the content that will actually appear in
the web browser. The entire content of the web page is placed in the pages <body> tag. The end tag
<body> is </body>
<title>…….</title>
(5) <body>:
It contains the body of the HTML Document , which includes the content that will actuall appear in
the web browser. The entire content of the webpage will be placed in the pages <body> tag. The end
tag of the <body> tag will be </body>.
<body>………</body>
HTML STRUCTURE
The HTML Program is generally divided into two sections i.e head and body. We use <head> and
<body> tags to indicate these two sections. <head> section holds the header information of a webpage
document indicated by a title that is provided by using <title> tag in the <head>. The title helps us to refer to
the webpage. <body> section contains the content which we want to display which the webpage. Anything
that is not a tag will be displayed within the webpage.
Example:
<html>
<head>
<title>First Webpage</title> </head>
<body> This is my first page </body>
</html>
Output:
2
Attribute:
An Attribute is a Keyword we use in an opening tag to give more information to the web browser.
HTML tags tell the web browsers how to format and organize our web pages. But we can customize tags
using attributes. The Format of an attribute is:
<tag name Attribute=value>
Attributes of the <body> tag:
(1)Background: The URL or a graphic file to be used in the filling the browser’s Background.
(2)Bgcolor: The color of the browser’s background.
(3)Bgproperties: It Indicates if the background should scroll when text does. If we set it to“FIXED”, the
background will not scroll when the text does.
(4)Bottom margin: Specifies the bottom margin ,the empty space at the bottom of the document in pixels.
(5)Id: It is a unique alphanumeric identifier for the tag which we can use to refer to it.
(6)Language: Scripting language used for the tag.
(7)Leftmargin: Specifies the left margin, the empty space at the left of the document.
(8)Marginheight: Gives the height of the margin at the top and bottom of the page in pixels.
(9)MarginWidth: Gives the width of the left and right margins of the page in pixels.
(10) Rightmargin: It specifies the right margin, the empty space to the right margin of the document in
pixels.
(11) Scroll: It specifies whether a vertical scrollbar appears to the right of the document can be yes (or) no.
(12) Style: Inline style indicating how to render the element.
(13) Text: Color of the in the document.
(14) Topmargin: It specifies the top margin the space at the top of the document in pixels.
(15) Link: It specifies the color of hyperlinks that have not yet been visited.
(16) Alink: It specifies the color of hyperlinks as they are being clicked.
(17) Vlink: It specifies the color of hyperlinks as they have been visited.
(18)<!-- --> Comment tag: Annotates a web page with a comment. In the HTML that we can by look in the
HTML but it will not be displayed in the web browser.
<! ------ This is a comment--------- >
ELEMENTS
HTML (Hyper Text Markup Language) elements are the building blocks of a web page. An HTML
element tells the browser how to display or structure content.
Structure of the HTML element
<tagname>Content</tagname>
Ex:
<p>This is a paragraph.</p>
<p> → Opening tag
This is a paragraph. → Content
</p> → Closing tag
Some elements are empty elements and do not have a closing tag.
Element Purpose Example
<html> Root element of an HTML document <html>...</html>
<head> Contains metadata <head>...</head>
<title> Sets the page title <title>My Page</title>
<body> Contains visible content <body>...</body>
<h1> to <h6> Headings <h1>Welcome</h1>
<p> Paragraph <p>Hello World</p>
<br> Line break Line1<br>Line2
<hr> Horizontal line <hr>
<b> Bold text <b>Bold</b>
<i> Italic text <i>Italic</i>
3
Element Purpose Example
<u> Underlined text <u>Underline</u>
<a> Hyperlink <a href="[Link]
<img> Displays an image <img src="[Link]" alt="Image">
<ul> Unordered list <ul><li>Apple</li></ul>
<ol> Ordered list <ol><li>One</li></ol>
<li> List item <li>Item</li>
<table> Creates a table <table>...</table>
<tr> Table row <tr>...</tr>
<th> Table heading <th>Name</th>
<td> Table data <td>John</td>
<form> Creates a form <form>...</form>
<input> Input field <input type="text">
<button> Button <button>Submit</button>
<div> Division/Container <div>Content</div>
<span> Inline container <span>Text</span>
ATTRIBUTES
HTML attributes provide additional information about HTML elements. They are written inside the
opening tag and usually appear as name="value" pairs.
Syntax:
<tagname attribute="value">Content</tagname>
Example:
<a href="[Link] Google</a>
Here:
o href is the attribute.
o "[Link] is the attribute value.
Attribute Purpose Example
href Specifies the URL of a link <a href="[Link]
src Specifies the image source <img src="[Link]">
alt Alternative text for an image <img src="[Link]" alt="Flower">
width Sets the width <img width="200">
height Sets the height <img height="150">
id Gives a unique identifier <p id="para1">Hello</p>
class Assigns a class name <p class="text">Hello</p>
style Applies inline CSS <p style="color:red;">Red Text</p>
title Displays a tooltip <p title="Greeting">Hello</p>
type Specifies the input type <input type="text">
value Sets the initial value <input value="John">
placeholder Displays a hint <input placeholder="Enter your name">
disabled Disables an element <button disabled>Submit</button>
4
HEDINGS
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Ex:<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2><h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
PARAGRAPHS
HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's take a simple
example to see how it works. It is a notable point that a browser itself adds an empty line before and after a
paragraph. An HTML <p> tag indicates starting of new paragraph.
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white space (a
margin) before and after a paragraph.
Example:
<!DOCTYPE html>
<html>
<head>
<title>paragraph</title>
</head>
<body>
<p>This is a paragraph1.</p>
<p>This is a paragraph2.</p>
<p>This is a paragraph3.</p>
</body>
</html>
IMAGES
The HTML <img> tag is used to embed an image in a web 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 is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
Syntax:
<img src="url" alt="alternate text">
Ex:
<!DOCTYPE html>
<html>
<head>
<title>images in html</title>
5
</head>
<body>
<center>
<img src="[Link]" alt="Flowers" width="400" height="500">
<center>
</body></html>
Output:
TABLES
HTML tables help organize data into rows and columns, making information easy to read and
compare. They are useful for displaying schedules, price lists, product details, and more. Can include text,
images, links, and other elements. Built using tags like <table>, <tr>, <th>, and <td>. Allow clear
presentation of data for comparison. Can be styled with CSS for better design and readability.
An HTML table is created using the <table> tag.
<tr> defines a table row.
<th> defines a table header cell (usually bold and centered).
<td> defines a table data cell that holds actual content.
Each <tr> represents one row containing <th> or <td> cells.
Cells can include text, images, lists, links, or even another table (nested table).
HTML Tables Tags
List of all the tags that we used in table formation in html:
<table> : <table> defines the structure for organizing data in rows and columns within a web page.
<tr> : <tr> represents a row within an HTML table containing individual cells.
<th> : <th> shows a table header cell that typically holds titles or headings.
<td> : <td> represents a standard data cell, holding content or data.
<caption> : <caption> provides a title or description for the entire table.
<thead> : <thead> defines the header section of a table, often containing column labels.
<tbody> : <tbody> represents the main content area of a table, separating it from the header or footer.
<tfoot> : <tfoot> specifies the footer section of a table, typically holding summaries or totals.
<col> : <col> defines attributes for table columns that can be applied to multiple columns
simultaneously.
<colgroup> : <colgroup> groups together a set of columns in a table to which you can apply formatting
or properties collectively.
Example:
<!DOCTYPE html>
<html>
<head>
6
<title>HTML Table Example</title>
</head>
<body>
<h2>Student Details</h2>
<table border="1" cellpadding="8" cellspacing="0">
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Department</th>
<th>Marks</th>
</tr>
<tr>
<td>101</td>
<td>Rahul</td>
<td>CSE</td>
<td>85</td>
</tr>
<tr>
<td>102</td>
<td>Priya</td>
<td>IT</td>
<td>90</td>
</tr>
<tr>
<td>103</td>
<td>Arun</td>
<td>ECE</td>
<td>88</td>
</tr>
</table>
</body>
</html>
Output:
LISTS
HTML offers web authors three ways for specifying lists of information. All lists must contain one or
more list elements. Lists may contain
<ul> - An unordered list. This will list items using plain bullets.
7
<ol> - An ordered list. This will use different schemes of numbers to list your items.
<dl> - A definition list. This arranges your items in the same way as they are arranged in a dictionary.
Nested list – Combine one or more list
1) 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 tag. Each item in the list is marked with a bullet.
Eample:
Output:
Attribute
1. Type: 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”>
8
2) Ordered Lists:
If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list
will be used. This list is created by using tag. The numbering starts at one and is incremented by one for each
successive ordered list element tagged with.
Example:
Output:
Attributes
1. Type
9
2. Start
3) Definition Lists:
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
Example:
Output:
10
4) Nested Lists:
A nested list is a list inside another list. The following are different combination of nested list
1. Unordered List within Unordered List
2. Ordered List within ordered List
3. Unordered List within ordered List
4. Ordered List within Unordered List
1. Unordered List within Unordered List
<!DOCTYPE html>
<html>
<head>
<title>Nested Unordered List</title>
</head>
<body>
<h2>Nested Unordered List Example</h2>
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Broccoli</li>
<li>Spinach</li>
</ul>
</li>
<li>Dairy
<ul>
<li>Milk</li>
<li>Cheese</li>
<li>Yogurt</li>
</ul>
</li>
</ul>
</body>
</html>
Output:
11
2. Ordered List within ordered List
<html>
<head>
<title>Nested Ordered List</title>
</head>
<body>
<h2>Nested Ordered List Example</h2>
<ol>
<li>Proramming Languages
<ol>
<li>Python</li>
<li>Java</li>
<li>C++</li>
</ol>
</li>
<li>Web Technologies
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</li>
<li>Databases
<ol>
<li>MySQL</li>
<li>Oracle</li>
<li>MongoDB</li>
</ol>
</li>
</ol>
</body>
</html>
Output:
3. Unordered List within ordered List
<html>
<head>
<title>Unordered List within Ordered List</title>
</head>
12
<body>
<h2>Courses Offered</h2>
<ol>
<li>Programming Languages
<ul>
<li>C</li>
<li>C++</li>
<li>Java</li>
</ul>
</li>
<li>Web Technologies
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Database
<ul>
<li>MySQL</li>
<li>Oracle</li>
</ul>
</li>
</ol>
</body>
</html>
Output:
4. Ordered List within Unordered List
<html>
<head>
<title>Ordered List within Unordered List</title>
</head>
<body>
<h2>Subjects</h2>
<ul>
<li>Computer Science
<ol>
<li>Programming in C</li>
<li>Data Structures</li>
13
<li>Java</li>
</ol>
</li>
<li>Mathematics
<ol>
<li>Algebra</li>
<li>Calculus</li>
<li>Statistics</li>
</ol>
</li>
<li>Languages
<ol>
<li>English</li>
<li>Tamil</li>
</ol>
</li>
</ul>
</body>
</html>
Output:
BLOCKS
Block elements are HTML elements that start on a new line and occupy the full width available in the
browser by default. They are mainly used to structure the content of a web page.
Characteristics of Block Elements
Start on a new line.
Take up the entire width of their parent element.
Can contain inline elements and other block elements.
Used for organizing and structuring web page content.
Element Purpose
<div> Creates a division or section
<p> Defines a paragraph
<h1> to <h6> Defines headings
<ul> Unordered list
<ol> Ordered list
14
Element Purpose
<li> List item
<table> Creates a table
<form> Creates a form
<header> Header section
<footer> Footer section
<section> Defines a section
<article> Defines an article
<nav> Navigation links
SYMBOLS
Definition:
HTML symbols are special codes used to display reserved characters and symbols in a web page.
Example:
<html>
<head>
<title>HTML Symbols</title>
</head>
<body>
<h2>HTML Symbols Example</h2>
<p>Less than: <</p>
<p>Greater than: ></p>
<p>Ampersand: &</p>
15
<p>Copyright: ©</p>
<p>Registered: ®</p>
<p>Trademark: ™</p>
<p>Rupee: ₹500</p>
</body>
</html>
ENBEDDING MULTI-MEDIA COMPONENTS IN HTML
Definition:
Embedding multimedia in HTML means adding images, audio, video, and other media to a web
page using HTML tags.
1. Embedding an Image
Syntax:
<img src="[Link]" alt="Image" width="300" height="200">
Example:
<html>
<head>
<title>Image Example</title>
</head>
<body>
<h2>Image</h2>
<img src="[Link]" alt="Flower" width="300" height="200">
</body>
</html>
2. Embedding Audio
Syntax:
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
Example:
<html>
<head>
<title>Audio Example</title>
</head>
<body>
<h2>Audio</h2>
<audio controls>
<source src="song.mp3" type="audio/mpeg">
16
</audio>
</body>
</html>
3. Embedding Video
Syntax:
<video width="400" height="300" controls>
<source src="video.mp4" type="video/mp4">
</video>
Example:
<html>
<head>
<title>Video Example</title>
</head>
<body>
<h2>Video</h2>
<video width="400" height="300" controls>
<source src="video.mp4" type="video/mp4">
</video>
</body>
</html>
HTML FORMS
HTML Forms are required to collect some data from the site visitor. For example, during user
registration you would like to collect information such as name, email address, credit card, etc. A form will
take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or
PHP script etc. The back-end application will perform required processing on the passed data based on
defined business logic inside the application. There are various form elements available like text fields, text
area fields, drop-down menus, radio buttons, checkboxes, etc.
Syntax:
<form action="Script URL" method="GET|POST"> form elements like input, text area etc. </form>
Example:
<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.
Form Control Tag Purpose
Text Box <input type="text"> Accepts single-line text input
Password <input type="password"> Accepts hidden password input
Radio Button <input type="radio"> Selects one option from a group
Check Box <input type="checkbox"> Selects one or more options
Submit Button <input type="submit"> Submits the form
Reset Button <input type="reset"> Clears all form fields
Button <button> Creates a clickable button
Text Area <textarea> Accepts multi-line text input
Drop-down List <select> Displays a list of options
17
Form Control Tag Purpose
File Upload <input type="file"> Uploads a file
Email <input type="email"> Accepts an email address
Number <input type="number"> Accepts numeric input
Date <input type="date"> Selects a date
Example:
<html>
<head>
<title>HTML Form Controls</title>
</head>
<body>
<h2>Student Registration Form</h2>
<form>
Name: <input type="text"><br><br>
Password: <input type="password"><br><br>
Gender: <input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female<br><br>
Hobbies: <input type="checkbox"> Reading
<input type="checkbox"> Sports<br><br>
Department: <select>
<option>Computer Science</option>
<option>Commerce</option>
<option>Mathematics</option>
</select><br><br>
Address:<br>
<textarea rows="4" cols="30"></textarea><br><br>
Upload Photo: <input type="file"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
(i) INPUT element
The HTML <input> element is the most used form [Link] <input> element can be displayed in many
ways, depending on the type attribute.
Here are the different input types you can use in HTML:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="date time-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
18
<input type="reset">
<input type="search">
<input type="submit">
Input Type Text:
<input type="text"> defines a single-line text input field
Ex:
<html>
<body>
<h2>Text field</h2>
<form action=" ">
<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"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Input Type Password
<input type="password"> defines a password field
Ex:
<html>
<body>
<h2>Password field</h2>
<form action="/action_page.php">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
19
Radio Buttons :
The <input type="radio"> defines a radio [Link] buttons let a user select ONE of a limited
number of choices.
Example:
<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>
Checkboxes:
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example:
<form>
<input type="checkbox" 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>
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:
<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>
HTML Form Attributes: Form attributes are properties of the <form> tag that control how form data is
sent to the server and how the form behaves.
Attribute Purpose Example
action Specifies the URL where the form data is sent <form action="[Link]">
method Specifies the HTTP method (GET or POST) <form method="post">
name Assigns a name to the form <form name="studentForm">
target Specifies where to display the response <form target="_blank">
autocomplete Enables or disables auto-complete <form autocomplete="on">
novalidate Disables form validation <form novalidate>
Specifies how form data is encoded (used for file <form enctype="multipart/form-
enctype
upload) data">
accept-
Specifies the character encoding <form accept-charset="UTF-8">
charset
***** UNIT I COMPLETED *****
20