Unit 1: Web Page Designing

Web Page Designing

Web Page Designing refers to the process of creating and formatting web pages that are displayed on the internet using web browsers such as Chrome, Edge, or Firefox.

Objectives of Web Page Designing

To present information clearly on the internet
To create user-friendly interfaces
To support business, education, and communication needs
To ensure accessibility and responsiveness

Key Components

Component	Description
Structure	HTML
Presentation	CSS
Behavior	JavaScript
Backend (optional)	PHP, Python, Java

Web Development Strategies

Web development strategies define how a website is planned, developed, and maintained.

Common Strategies

Requirement Analysis – Identify user and business needs
Content Planning – Decide text, images, videos
Design Strategy – Layout, color scheme, navigation
Development – Coding using HTML, CSS, JS
Testing – Check browser compatibility, errors
Deployment – Uploading website to server
Maintenance – Regular updates and security checks

Types of Websites

Type	Example
Static Website	Portfolio
Dynamic Website	E-commerce
Responsive Website	Mobile-friendly sites

History of Web and Internet

History of Internet

1969 – ARPANET introduced
1980s – Email and file transfer developed
1990 – Internet expanded globally

History of Web

1991 – Tim Berners-Lee introduced the World Wide Web
HTML, HTTP, and URL were introduced
Websites became graphical after 1995

Term	Invented By
Internet	US Department of Defense
WWW	Tim Berners-Lee

Protocols Governing the Web

A protocol is a set of rules for communication between computers.

Important Web Protocols

Protocol	Full Form	Use
HTTP	HyperText Transfer Protocol	Web pages transfer
HTTPS	Secure HTTP	Secure websites
FTP	File Transfer Protocol	File sharing
TCP/IP	Transmission Control Protocol / Internet Protocol	Internet communication
SMTP	Simple Mail Transfer Protocol	Email sending

HTML

HTML (HyperText Markup Language) is used to create the structure of web pages.

Features of HTML

Easy to learn
Platform independent
Tag-based language
Supported by all browsers

HTML Tags

HTML uses tags to define elements.

Types of Tags

Type	Example
Paired Tags	`<p></p>`
Unpaired Tags	`<br>`

Common HTML Tags

Tag	Purpose
`<html>`	Root element
`<head>`	Meta information
`<title>`	Page title
`<body>`	Visible content
`<h1>`–`<h6>`	Headings
`<p>`	Paragraph

HTML Grouping Using `<div>` and `<span>`

`<div>` Tag

Block-level element
Used to group large sections

`<span>` Tag

Inline element
Used to style small text

Tag	Type	Usage
`<div>`	Block	Layout
`<span>`	Inline	Text styling

HTML Lists

Lists are used to display data in ordered or unordered form.

Types of Lists

Ordered List (<ol>)
Unordered List (<ul>)
Definition List (<dl>)

List Type	Tag
Ordered	`<ol>`
Unordered	`<ul>`
Definition	`<dl>`

HTML Images

Images make web pages attractive.

`<img>` Tag Attributes

Attribute	Purpose
src	Image path
alt	Alternative text
width	Image width
height	Image height

HTML Hyperlink

Hyperlinks connect web pages.

`<a>` Tag

Used to link one page to another.

Attribute	Use
href	Link destination
target	Open link in new tab

Types of Links:

Internal links
External links
Email links

HTML Table

Tables are used to display data in rows and columns.

Table Tags

Tag	Purpose
`<table>`	Create table
`<tr>`	Table row
`<th>`	Table heading
`<td>`	Table data

HTML Iframe

An iframe is used to embed another webpage inside a webpage.

Uses

Embed YouTube videos
Display maps
Show external pages

Attribute	Description
src	Page URL
width	Width
height	Height

HTML Form

Forms are used to collect user input.

Form Elements

Element	Purpose
`<form>`	Form container
`<input>`	User input
`<textarea>`	Large text
`<select>`	Dropdown
`<button>`	Submit button

Common Input Types

Type	Use
text	Name
password	Password
radio	Single choice
checkbox	Multiple choice
submit	Submit form

Summary Table

Topic	Purpose
HTML	Structure
Div & Span	Grouping
Lists	Organized data
Forms	User input
Tables	Data display

Introduction of CSS

CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation and layout of HTML elements. While HTML defines the structure of a web page, CSS defines how it looks.

Why CSS is Required

Separates content from design
Makes websites attractive
Reduces repetition of HTML code
Improves page loading speed
Enables responsive design

Types of CSS

Type	Description
Inline CSS	Applied directly to an HTML element
Internal CSS	Written inside `<style>` tag
External CSS	Written in a separate `.css` file

CSS Syntax

CSS follows a simple rule-based syntax.

Basic CSS Structure


selector {
    property: value;
}

Example


p {
    color: blue;
    font-size: 16px;
}

Part	Description
Selector	HTML element to be styled
Property	Attribute to change
Value	Assigned setting

External Style Sheet using `<link>`

An external stylesheet is a separate CSS file linked to an HTML document.

Advantages

One CSS file can style multiple pages
Easy maintenance
Cleaner HTML code

Syntax


<link rel="stylesheet" href="style.css">

Attribute	Purpose
rel	Relationship (stylesheet)
href	CSS file path

Multiple Style Sheets

Web pages can use more than one CSS file.

Example


<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="theme.css">

CSS Priority (Cascading Order)

Inline CSS
Internal CSS
External CSS
Browser default

If two rules conflict, the last loaded file takes priority.

Value Lengths and Percentages

CSS uses different units to define size, spacing, and layout.

Absolute Units

Unit	Meaning
px	Pixels
cm	Centimeters
in	Inches

Relative Units

Unit	Meaning
%	Relative to parent element
em	Relative to font size
rem	Relative to root font size
vw	Viewport width
vh	Viewport height

Example


div {
    width: 50%;
    font-size: 1.2em;
}

CSS Selectors

Selectors are used to target HTML elements.

Types of Selectors

Selector	Symbol	Example
Element	none	`p`
ID	#	`#header`
Class	.	`.menu`
Group	,	`h1, h2`
Universal	*	`*`

Attribute Selector Example


input[type="text"] {
    border: 1px solid black;
}

CSS Box Model

The CSS Box Model defines how space and layout are calculated.

Components

Component	Description
Content	Actual content
Padding	Space inside border
Border	Edge around padding
Margin	Space outside border

Diagram Order


Margin → Border → Padding → Content

Example


div {
    margin: 10px;
    padding: 15px;
    border: 2px solid black;
}

Floats

The float property positions elements left or right.

Syntax


img {
    float: left;
}

Float Values

Value	Meaning
left	Element floats left
right	Element floats right
none	Default

Used mainly in layout design and image alignment.

Clear

The clear property controls elements after floating elements.

Syntax


div {
    clear: both;
}

Clear Values

Value	Description
left	Clears left float
right	Clears right float
both	Clears both

Introduction to Bootstrap

Bootstrap is a popular CSS framework used to create responsive and mobile-friendly websites quickly.

Developed By

Twitter developers (2011)

Features

Pre-designed CSS classes
Responsive grid system
Mobile-first approach
JavaScript components

Key Components

Component	Purpose
Grid System	Layout design
Buttons	Styled buttons
Forms	Responsive forms
Navbar	Navigation menus
Cards	Content display

Example Bootstrap Class


<button class="btn btn-primary">Submit</button>

Difference Between CSS and Bootstrap

CSS	Bootstrap
Custom styling	Pre-built styling
Time-consuming	Faster development
Manual responsiveness	Automatic responsiveness

Summary Table

Topic	Key Use
CSS	Styling
Selectors	Target elements
Box Model	Layout spacing
Float & Clear	Positioning
Bootstrap	Responsive design

Unit 1: Web Page Designing

Web Page Designing

Objectives of Web Page Designing

Key Components

Web Development Strategies

Common Strategies

Types of Websites

History of Web and Internet

History of Internet

History of Web

Protocols Governing the Web

Important Web Protocols

HTML

Features of HTML

HTML Tags

Types of Tags

Common HTML Tags

HTML Grouping Using <div> and <span>

<div> Tag

<span> Tag

HTML Lists

Types of Lists

HTML Images

<img> Tag Attributes

HTML Hyperlink

<a> Tag

HTML Table

Table Tags

HTML Iframe

Uses

HTML Form

Form Elements

Common Input Types

Summary Table

Introduction of CSS

Why CSS is Required

Types of CSS

CSS Syntax

Basic CSS Structure

Example

External Style Sheet using <link>

Advantages

Syntax

Multiple Style Sheets

Example

CSS Priority (Cascading Order)

Value Lengths and Percentages

Absolute Units

Relative Units

Example

CSS Selectors

Types of Selectors

Attribute Selector Example

CSS Box Model

Components

Diagram Order

Example

Floats

Syntax

Float Values

Clear

Syntax

Clear Values

Introduction to Bootstrap

Developed By

Features

Key Components

Example Bootstrap Class

Difference Between CSS and Bootstrap

Summary Table

You might like

HTML Grouping Using `<div>` and `<span>`

`<div>` Tag

`<span>` Tag

`<img>` Tag Attributes

`<a>` Tag

External Style Sheet using `<link>`