Web Technologies-II

(SEC103)
 Course Objectives(CO)

CO1:To understand the concepts and architecture of the World Wide Web, Markup
languages along with Cascading Style Sheets.

CO2:To understand the concepts of event handling and data validation mechanisms.

CO3: To understand the concepts of embedded dynamic scripting on client and server side
Internet Programming and basic full stack web development.

CO4:To develop modern interactive web applications

 Unit I
Introduction to HTML, history of HTML, Objective, basic Structures of HTML, Header Tags,
body tags, Paragraph Tags.

Tags for FORM Creation, TABLE, FORM, TEXTAREA, SELECT, IMG, IFRAME FIELDSET,
ANCHOR. Lists in HTML, Introduction to DIV tag, NAVBAR Design.

Introduction to CSS, types, Selectors, and Responsiveness of a web page.

Introduction to Bootstrap, downloads/linking, using classes of Bootstrap, understanding

the Grid System in Bootstrap.

Introduction to www, Protocols and Programs, Applications and development tools, web
browsers, DNS, Web hosting Provider, Setting up of Windows/Linux/Unix web servers,
Web hosting in cloud, Types of Web Hosting.
 Prerequisite for this course

• What is a Web Page?

• What is a Website?
Static vs Dynamic Website

• What is a Web Portal?

• How the Web Works

• What is web server

• What is DNS

• What is hosting.
 Prerequisite for this course

What is a Web Page?

A Web Page is a single document available on the internet that is written using HTML
and displayed in a web browser.

What is a Website?
A Website is a collection of related web pages connected together under a single domain
name.

Key Characteristics
Has a domain name
Hosted on a server
Contains multiple web pages
Connected via hyperlinks
 Prerequisite for this course
Static Vs Dynamic Website
Dynamic Website
Static Website
Definition
Definition
A website whose content changes based
A website whose content does not change
on user interaction or database data.
automatically.
Features
Features
Uses database
Fixed content
User login system
No database connection
Real-time updates
Faster loading
Interactive
Simple HTML + CSS
Example
E-commerce websites
Example
Student portal
Portfolio website
Social media
Company profile
Technology Used
College information page
HTML
CSS
Technology Used
JavaScript
HTML
PHP / [Link] / Python
CSS
MySQL Database
 Introduction to HTML
HTML(Hypertext Markup Language)

A Markup Language is a language used to structure and describe content by

using tags. <Name>Sumit</Name>

Key Characteristics
• Uses tags
• Human-readable
• Platform independent
• Used to structure documents
• Not used for logic or calculations

HTML, XML , SGML…etc

 Introduction to HTML
HTML (HyperText Markup Language) is the basic language used to create web
pages.
It defines the structure of a webpage.
HTML tells the browser:
• What is a heading
• What is a paragraph
• Where to place images
• Where to create links
• It is the foundation of every website
• All web pages are built using HTML
• Without HTML, web pages cannot exist
• It works with CSS (design) and JavaScript (functionality)
 History of HTML
HTML was created by Tim Berners-Lee in 1991 to help scientists share documents
over the internet.

He wanted a way for scientists to:

• Share research documents
• Connect documents using links
• Access information easily over the internet
Before HTML:
• Information sharing was difficult
• No standard format for documents on internet
Tim Berners-Lee created:
• A system to link documents (HyperText)
• A simple markup language (HTML)
• A browser to read those documents
 History of HTML
Evolution of HTML Versions

HTML 1.0 (1991) HTML 4.01 (1999)

Basic version CSS integration
Simple text formatting Better scripting support
Limited tags Widely used for many years

HTML 2.0 (1995) XHTML (2000)

First official standard Stricter version of HTML
Based on XML rules
Forms introduced
Better browser support
HTML5 (2014 – Present Standard)
HTML 3.2 (1997) HTML5 was developed by:
Tables introduced 👉👉 World Wide Web Consortium
Improved layout support (W3C)
 Structure of HTML Page
<html>
<head>
</head>
<body>

All Tags of HTML will be placed over here for running in browser

</body>
</html>

Every HTML file will be saved with .html or .htm extension

 History of HTML
For writing Code of HTML you can use any editor like Notepad,
Notepad++,Atom,Sublime,Visual Studio.

When you save your file remember the extension of file .html or .htm ( .html
Recommended)
 HTML Text Formatting Tags
Text formatting tags in HTML are used to change the appearance and meaning of text on
a web page.

Text formatting tags are mainly divided into:

• Physical Formatting Tags (change appearance only)

• Logical / Semantic Formatting Tags (add meaning to the text)

1. <b> – Bold Text (Physical Tag)

Purpose: Makes text bold without giving special importance.
Example

<p>This is <b>bold</b> text.</p>

Output:
This is bold text.
 HTML Text Formatting Tags
2. <strong> – Important Text (Semantic Tag)
Purpose: Indicates important text.
Example
<p>This is <strong>important</strong> text.</p>

Difference from <b>:

<b> → Only bold appearance
<strong> → Shows importance (SEO & accessibility friendly)

3. <i> – Italic Text (Physical Tag)

Purpose: Displays text in italic style.
Example
<p>This is <i>italic</i> text.</p>

4. <em> – Emphasized Text (Semantic Tag)

Purpose: Emphasizes text.
(Default style: Italic)
Example
<p>This is <em>emphasized</em> text.</p>

Difference from <i>:

<i> → Just italic
<em> → Adds emphasis meaning
 HTML Text Formatting Tags
5. <u> – Underlined Text
Purpose: Underlines text.
Example
<p>This is <u>underlined</u> text.</p>
6. <mark> – Highlighted Text
Purpose: Highlights text (yellow background by default).
Example:
<p>This is <mark>highlighted</mark> text.</p>
7.<small> – Smaller Text
Purpose: Displays text in smaller size.
Example
<p>This is <small>small</small> text.</p>
8.<del> – Deleted Text
Purpose: Shows deleted text (strikethrough).
Example:
<p>Old Price: <del>₹500</del></p>
9. <ins> – Inserted Text
Purpose: Shows inserted text (underlined by default).
Example:
<p>New Price: <ins>₹350</ins></p>
10. <sub> – Subscript Text
Purpose: Displays text slightly below the normal line.
Example: <p>H₂O</p> Output: H₂O
 HTML Text Formatting Tags
11.<sup> – Superscript Text
Purpose: Displays text slightly above the normal line.
Example:
<p>(a + b)²</p>

Output: (a + b)²
Example
 HTML Text Formatting Tags
<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title>
</head>
<body> Output

<p><b>Bold Text</b></p>
<p><strong>Important Text</strong></p>
<p><i>Italic Text</i></p>
<p><em>Emphasized Text</em></p>
<p><u>Underlined Text</u></p>
<p><mark>Highlighted Text</mark></p>
<p><small>Small Text</small></p>
<p><del>Deleted Text</del></p>
<p><ins>Inserted Text</ins></p>
<p>H₂O</p>
<p>(a + b)²</p>

</body>
</html>
 HTML Tags
HTML <img> Tag :
The <img> tag is used in HTML to embed images into a web page.
It is an empty tag, meaning it does not have a closing tag.

The <img> tag is used to display images on a webpage. It requires the src attribute to
specify the image location and the alt attribute to provide alternative text.

Basic Syntax
<img src="[Link]" alt="Description of image">

Important Attributes of <img> Tag

src (Source) – Mandatory

Specifies the path (URL) of the image.

It can be:
Relative URL → images/[Link]
Absolute URL → [Link]
alt (Alternative Text) – Mandatory (Recommended)
Displays text if image does not load.
Important for accessibility and SEO.
<img src="[Link]" alt="Company Logo">
 HTML Tags
width and height
Used to define image size.
<img src="[Link]" alt="Sample" width="300" height="200">

title
Displays tooltip when mouse hovers over image.
<img src="[Link]" alt="Nature" title="Beautiful Nature">

Supported Image Formats

JPG / JPEG
PNG
GIF
WebP
SVG
 HTML Tags
HTML <a> (Anchor) Tag

The <a> tag is used to create hyperlinks that connect one webpage to another webpage,
file, email, or location within the same page.

The <a> (Anchor) tag defines a hyperlink.

It allows users to navigate from one page to another.
Unlike <img>, the <a> tag is not an empty tag — it has both opening and closing tags.

Basic Syntax
<a href="URL">Link Text</a>

href → Specifies the destination (Hypertext Reference).

Link Text → Clickable text.

Important Attributes of <a> Tag

*href – (Mandatory Attribute)

Specifies the link destination.
<a href="[Link] Google</a>
 HTML Tags
target attribute
Specifies where to open the linked document.

Value Meaning
_self Opens in same tab (default)
_blank Opens in new tab
_parent Opens in parent frame
_top Opens in full body window

Example :
<a href="[Link] target="_blank">
Open Google in New Tab
</a>
title download
Displays tooltip when mouse hovers over link. Used to download a file instead of opening
it.
<a href="[Link]" title="Go to Home Page"> <a href="[Link]" download>
Home Download PDF
</a> </a>
 HTML Tags
target attribute
Specifies where to open the linked document.

Value Meaning
_self Opens in same tab (default)
_blank Opens in new tab
_parent Opens in parent frame
_top Opens in full body window

Example :
<a href="[Link] target="_blank">
Open Google in New Tab
</a>
title download
Displays tooltip when mouse hovers over link. Used to download a file instead of opening
it.
<a href="[Link]" title="Go to Home Page"> <a href="[Link]" download>
Home Download PDF
</a> </a>
 Anchor Tag Example
<!DOCTYPE html>
<html>
<head>
<title>Anchor Tag Example</title>
</head>
<body>
<h2>Anchor Tag Demonstration</h2>
<p>
<a href="[Link] target="_blank">Visit Google</a>
</p>
<p>
<a href="[Link]">About Page</a>
</p>
<p>
<a href="[Link] Email</a>
</p>
<p>
<a href="#bottom">Go to Bottom</a>
</p>
<br><br><br><br><br><br>
<h3 id="bottom">Bottom Section</h3>
</body>
</html>
 Table in HTML
The <table> tag in HTML is used to display data in rows and columns format.
HTML tables are commonly used to present structured data like marksheets, timetables,
reports, etc.

Important Table Tags

Tag Full Form Description

<table> Table Creates table
<tr> Table Row Creates row
Creates heading cell (bold
<th> Table Header
& center by default)
<td> Table Data Creates normal data cell
<caption> Caption Adds table title
<thead> Table Head Groups header content
<tbody> Table Body Groups body content
<tfoot> Table Footer Groups footer content
 Table in HTML
<!DOCTYPE html>
<html>
<head>
<title>Simple Table</title>
</head>
<body>

<table border="1">
<tr>
<th>Name</th>
<th>Roll No</th>
<th>Course</th>
</tr>
<tr>
<td>Amit</td>
<td>101</td>
<td>BCA</td>
</tr>
</table>

</body>
</html>
 Table in HTML
rowspan Attribute
colspan Attribute
Used to merge rows vertically.
Used to merge columns horizontally.
<table border="1">
<table border="1">
<tr>
<tr>
<th colspan="2">Student Info</th>
<th rowspan="2">Name</th>
</tr>
<th>Subject</th>
<tr>
</tr>
<td>Name</td>
<tr>
<td>Aizaz</td>
<td>Math</td>
</tr>
</tr>
</table>
</table>
 Forms in HTML

The <form> tag is used to collect user input and send the data to a server for processing.
Forms are used for:
• Login pages
• Registration forms
• Feedback forms
• Contact forms
• Online applications

The <form> tag creates an HTML form to collect user input.

The data entered by the user is sent to a server using methods like GET or POST.

<form action="[Link]" method="post">

<!-- form elements here -->
</form>
 Forms in HTML

Important Attributes of <form>

Attribute Description
action Specifies where to send form data
method Specifies how to send data (GET / POST)
target Specifies where to display response
autocomplete Enables/Disables auto-fill
enctype Used for file upload

action
Defines the server file that processes form data.
<form action="[Link]">
method
🔹🔹 GET POST
Data visible in URL Data not visible in URL
Used for search forms More secure
Limited data size Used for login/registration
<form method="get"> <form method="post">
 Forms in HTML

Common Form Elements

<input> Tag
Used to take user input.
Type Purpose
text Single line text
password Hidden text
email Email input
number Numeric input
radio Single selection
checkbox Multiple selection
submit Submit button
reset Reset button
file Upload file
date Select date
Example:
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="Login">
 Forms in HTML

Common Form Elements

<label>
Used to define label for input field.
<label for="name">Name:</label>
<input type="text" id="name">

<textarea>
Used for multi-line input.
<textarea rows="4" cols="30"></textarea>

<select> and <option>

Used to create dropdown list.
<select name="course">
<option value="bca">BCA</option>
<option value="mca">MCA</option>
</select>
<button>
Creates clickable button.
<button type="submit">Submit</button>
 Forms in HTML

Common Form Elements

<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h2>Student Registration Form</h2>
<form action="[Link]" method="post">
<label>Name:</label><br>
<input type="text" name="name"><br><br>
<label>Password:</label><br>
<input type="password" name="password"><br><br>
<label>Gender:</label><br>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br><br>
<label>Course:</label><br>
<select name="course">
<option>BCA</option>
<option>MCA</option>
</select><br><br>
<label>Message:</label><br>
<textarea rows="4" cols="30"></textarea><br><br>
<input type="submit" value="Register">
<input type="reset" value="Clear">
</form>

</body>
</html>
 Forms in HTML

GET vs POST Difference

GET POST
Data visible in URL Data hidden
Less secure More secure
Limited data size Large data allowed
Used for search Used for login/registration

Important Points for Exam

<form> is a container tag.
action and method are important attributes.
GET sends data via URL.
POST sends data securely.
name attribute is required to send data to server.
For file upload → enctype="multipart/form-data".
 Lists in HTML
Lists in HTML are used to organize information in a structured and readable format.
HTML provides three types of lists:
Ordered List (<ol>)
Unordered List (<ul>)
Description List (<dl>)

Ordered List (<ol>)

Definition
An ordered list displays items in a numbered format.
Syntax:
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
Example
<ol> Output:
<li>HTML</li> HTML
<li>CSS</li> CSS
<li>JavaScript</li> JavaScript
</ol>
 Lists in HTML
Attributes of <ol>

Attribute Description
type Defines numbering style
start Defines starting number
reversed Displays numbers in reverse order

type Values
Value Output Style
1 1, 2, 3 (default)
A A, B, C
a a, b, c
I I, II, III
i i, ii, iii
<ol type="A" start="3">
<li>Apple</li>
<li>Banana</li>
</ol>
 Lists in HTML
Unordered List (<ul>)

Definition
An unordered list displays items using bullet points.

Syntax:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ul>
<li>Java</li>
<li>Python</li>
<li>C++</li>
</ul>
Value(Old HTML) Style
disc ● (default)
circle ○
square ■
 Lists in HTML
Description List (<dl>)
Definition
A description list is used for terms and their descriptions.

Tag Meaning
<dl> Description List
<dt> Description Term
<dd> Description Data

Example:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>

<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
 Lists in HTML
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists Example</title>
</head>
<body>
<h2>Ordered List</h2>
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>Apple</li>
<li>Mango</li>
</ul>
<h2>Description List</h2>
<dl>
<dt>HTML</dt>
<dd>Markup Language</dd>
</dl>
</body>
</html>