UNIT – 1

Introduction to HTML and CSS

1. Introduction to HTML

What is HTML?

HTML (HyperText Markup Language) is the standard markup language used to create web pages.

HTML describes the structure of a webpage.
HTML consists of elements (tags).
HTML tells the browser how to display content.
HTML is not a programming language; it is a markup language.

Features of HTML

Easy to learn
Platform independent
Supports multimedia
Hyperlink support
Compatible with all browsers
Supports CSS and JavaScript
Open standard maintained by W3C

Structure of HTML Document


<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>

<body>

<h1>Welcome</h1>

<p>This is my first webpage.</p>

</body>
</html>

HTML Document Explanation

Tag	Purpose
<!DOCTYPE html>	Declares HTML5 document
<html>	Root element
<head>	Contains metadata
<title>	Browser title
<body>	Visible webpage contents

HTML Basic Tags

1. Heading Tags

Used to display headings.


<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>

Largest = h1

Smallest = h6

2. Paragraph Tag


<p>
This is paragraph.
</p>

3. Line Break


<br>

Moves text to next line.

4. Horizontal Line


<hr>

Creates horizontal line.

5. Bold


<b>Bold Text</b>

6. Strong


<strong>Important Text</strong>

7. Italic


<i>Italic Text</i>

8. Emphasis


<em>Emphasized Text</em>

9. Underline


<u>Underline</u>

10. Highlight


<mark>Highlighted</mark>

11. Small Text


<small>Small Text</small>

12. Delete Text


<del>Deleted</del>

13. Inserted Text


<ins>Inserted</ins>

14. Superscript


x<sup>2</sup>

15. Subscript


H<sub>2</sub>O

HTML Comments


<!-- This is comment -->

HTML Attributes

Attributes provide additional information.

Syntax


<tag attribute="value">

Example


<img src="photo.jpg" width="300">

Global HTML Attributes

Attribute	Purpose	Example Values
id	Unique identifier	"header"
class	CSS class	"menu"
style	Inline CSS	color:red
title	Tooltip	"Click here"
lang	Language	en, hi
dir	Text direction	ltr, rtl
hidden	Hide element	hidden
draggable	Draggable	true, false
spellcheck	Spell check	true, false
tabindex	Tab order	1,2,3
contenteditable	Editable	true,false

HTML Links


<a href="https://google.com">
Google
</a>

Attributes

Attribute	Values
href	URL
target	_blank, _self, _parent, _top
download	filename
title	text

HTML Images


<img src="flower.jpg"
alt="Flower"
width="300"
height="200">

Attributes

Attribute	Values
src	Image path
alt	Alternate text
width	pixels
height	pixels
loading	lazy,eager

HTML Lists

Ordered List


<ol>
<li>HTML</li>
<li>CSS</li>
</ol>

type values


1
A
a
I
i

Unordered List


<ul>
<li>Apple</li>
<li>Mango</li>
</ul>

type values


disc
circle
square

Description List


<dl>

<dt>HTML</dt>

<dd>Markup Language</dd>

</dl>

HTML Tables


<table border="1">

<tr>

<th>Name</th>

<th>Age</th>

</tr>

<tr>

<td>Raj</td>

<td>20</td>

</tr>

</table>

Table Tags

Tag	Purpose
table	Table
tr	Row
th	Heading
td	Data
caption	Table title
thead	Header
tbody	Body
tfoot	Footer

Table Attributes

Attribute	Values
border	0-10
cellpadding	pixels
cellspacing	pixels
colspan	number
rowspan	number

HTML Forms


<form>

<input type="text">

</form>

Form Attributes

Attribute	Values
action	URL
method	GET / POST
autocomplete	on off
enctype	multipart/form-data

Input Types (HTML5)

Type	Purpose
text	Text
password	Password
email	Email
number	Number
tel	Phone
url	Website
date	Date
datetime-local	Date Time
month	Month
week	Week
time	Time
color	Color Picker
range	Slider
file	Upload
radio	Radio Button
checkbox	Checkbox
hidden	Hidden
image	Image Button
reset	Reset
submit	Submit
button	Button
search	Search

Common Input Attributes

Attribute	Values
name	text
value	text
placeholder	text
required	required
readonly	readonly
disabled	disabled
maxlength	number
minlength	number
pattern	regex
min	value
max	value
step	number
checked	checked
selected	selected
autofocus	autofocus
multiple	multiple

HTML5 Semantic Tags

Tag	Purpose
header	Header
nav	Navigation
main	Main Content
section	Section
article	Article
aside	Sidebar
footer	Footer
figure	Image Block
figcaption	Caption
details	Expandable section
summary	Heading
address	Contact info
time	Time

Example


<header>

<nav>

</nav>

</header>

<section>

<article>

</article>

</section>

<footer>

</footer>

Multimedia Tags

Audio


<audio controls>

<source src="song.mp3">

</audio>

Attributes


controls
autoplay
loop
muted
preload

Video


<video width="500" controls>

<source src="movie.mp4">

</video>

Attributes


width
height
controls
autoplay
loop
muted
poster

HTML5 Canvas


<canvas
width="300"
height="300">
</canvas>

Used for graphics.

SVG

HTML Meta Tags


<meta charset="UTF-8">

<meta name="viewport"
content="width=device-width">

<meta name="description"
content="Website">

<meta name="keywords"
content="HTML,CSS">

<meta name="author"
content="ABC">

CSS (Cascading Style Sheets)

What is CSS?

CSS is used to style HTML webpages.

CSS controls

Color
Size
Layout
Fonts
Animation
Responsive Design

Types of CSS

1 Inline CSS


<p style="color:red;">
Hello
</p>

2 Internal CSS


<style>

p{

color:red;

}

</style>

3 External CSS

HTML


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

CSS


p{

color:red;

}

CSS Syntax


selector{

property:value;

}

Example


h1{

color:blue;

font-size:40px;

}

CSS Selectors

Selector	Example
Universal	*
Element	p
Class	.box
ID	#header
Group	h1,p
Descendant	div p
Child	div > p
Adjacent	h1 + p
Attribute	input[type=text]
Pseudo Class	:hover
Pseudo Element	::before

Important CSS Properties

Text


color
text-align
text-transform
text-decoration
letter-spacing
word-spacing
line-height
text-indent

Font


font-family
font-size
font-style
font-weight
font-variant

Background


background-color
background-image
background-repeat
background-size
background-position
background-attachment

Border


border
border-style
border-width
border-color
border-radius

Margin


margin
margin-top
margin-right
margin-bottom
margin-left

Padding


padding
padding-top
padding-right
padding-bottom
padding-left

Size


width
height
min-width
max-width
min-height
max-height

Display


display

Values

block
inline
inline-block
none
flex
grid
table

Position


position

Values

static
relative
absolute
fixed
sticky

Float


left
right
none

Overflow


visible
hidden
scroll
auto

CSS Units

Unit	Description
px	Pixels
%	Percentage
em	Relative to parent font size
rem	Relative to root font size
vw	Viewport width
vh	Viewport height
cm	Centimeter
mm	Millimeter
in	Inch
pt	Point

CSS Colors


Named

red
green
blue
black

RGB

rgb(255,0,0)

RGBA

rgba(255,0,0,0.5)

HEX

#FF0000

HSL

hsl(0,100%,50%)

CSS3 Features

Rounded Corners (border-radius)
Box Shadow (box-shadow)
Text Shadow (text-shadow)
Gradients (linear-gradient(), radial-gradient())
Transitions (transition)
Transform (transform)
Animations (@keyframes)
Flexbox (display: flex)
Grid Layout (display: grid)
Media Queries (@media)
Multiple Backgrounds
Opacity (opacity)
Filters (filter)

Advantages of HTML5 and CSS3

Faster web development
Mobile-friendly webpages
Semantic structure
Better accessibility
Multimedia support without plugins
Responsive layouts
Cleaner and maintainable code
Improved SEO
Rich visual effects and animations

Viva/Exam Important Questions

Define HTML and explain its features.
Explain the structure of an HTML document.
Differentiate HTML4 and HTML5.
Explain semantic HTML5 tags with examples.
Explain all HTML form input types.
Differentiate inline, internal, and external CSS.
Explain CSS selectors with examples.
Explain the CSS box model.
Differentiate id and class.
Explain CSS3 features with examples.
Write an HTML program using tables, lists, forms, images, and hyperlinks.
Design a static webpage using HTML5 semantic tags and external CSS.

What have to achieve in this Unit

1. Design and develop web pages using basic HTML tags

HTML (HyperText Markup Language) is the standard language for creating web pages.
Basic HTML page structure:

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text.</p>
    <a href="https://example.com">Click here</a>
    <img src="image.jpg" alt="Sample Image" width="300">
</body>
</html>

Common HTML Tags:

Tag	Description
`<h1>`–`<h6>`	Headings (h1 is largest)
`<p>`	Paragraph
`<a>`	Hyperlink
`<img>`	Image
`<ul>`, `<ol>`, `<li>`	Lists
`<table>`, `<tr>`, `<td>`	Tables
`<br>`	Line Break
`<hr>`	Horizontal line

2. Use of Advanced HTML5 Tags

HTML5 introduced new semantic and media elements.

Example:

<header>
    <h1>Website Header</h1>
</header>

<nav>
    <a href="#">Home</a> | <a href="#">About</a>
</nav>

<main>
    <section>
        <h2>About Us</h2>
        <p>Some details here...</p>
    </section>

    <article>
        <h2>News Article</h2>
        <p>Latest updates...</p>
    </article>

    <video width="320" controls>
        <source src="video.mp4" type="video/mp4">
    </video>

    <audio controls>
        <source src="audio.mp3" type="audio/mp3">
    </audio>
</main>

<footer>
    <p>Copyright © 2025</p>
</footer>

HTML5 Key Tags:

Semantic tags: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>
Media tags: <audio>, <video>, <source>
Form enhancements: <input type="email">, <input type="date">, <datalist>

3. Design Static Webpage using HTML5 tags

Static webpage example:

<!DOCTYPE html>
<html>
<head>
    <title>Static Webpage</title>
</head>
<body>
    <header>
        <h1>My Portfolio</h1>
    </header>
    <main>
        <section>
            <h2>About Me</h2>
            <p>Hi! I am a web developer.</p>
        </section>
        <section>
            <h2>Projects</h2>
            <ul>
                <li>Website Design</li>
                <li>Mobile App</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>Contact: myemail@example.com</p>
    </footer>
</body>
</html>

4. Design and develop web pages using CSS / CSS3 styles

Ways to add CSS:

Inline CSS – inside HTML tag:
```
<p style="color: red;">Hello</p>
```

Internal CSS – inside <style> tag:

<style>
    body { background-color: lightblue; }
</style>

External CSS – in a separate .css file:

body {
    background-color: lightblue;
    font-family: Arial;
}

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

CSS3 Features:

Rounded corners: border-radius: 10px;
Shadows: box-shadow: 2px 2px 5px gray;
Gradients: background: linear-gradient(to right, red, yellow);
Transitions: transition: all 0.5s ease;

UNIT II: Working with Basic Building Blocks of PHP

1. Understand PHP file structure

PHP files have .php extension and contain HTML + PHP code:

<!DOCTYPE html>
<html>
<body>
    <?php
        echo "Hello, PHP!";
    ?>
</body>
</html>

2. Steps to Install & Test Web Server

Install XAMPP or WAMP
Start Apache and MySQL
Save PHP files in htdocs (XAMPP) folder
Open in browser: http://localhost/filename.php

3. Working of PHP

Client sends request via browser.
Apache processes PHP file.
PHP code runs on server, output is HTML.
Browser displays HTML.

4. Steps to Configure Apache to use PHP

If using XAMPP, PHP is already configured.

In manual setup:

Install PHP

Edit Apache’s httpd.conf file to add:

LoadModule php_module "C:/php/php7apache2_4.dll"
AddType application/x-httpd-php .php

Restart Apache.

5. PHP Variables, Data Types, and Operators

<?php
$name = "John"; // String
$age = 25; // Integer
$price = 19.99; // Float
$isActive = true; // Boolean
?>

Data types:

String
Integer
Float
Boolean
Array
Object
NULL

6. PHP Operators

Arithmetic: +, -, *, /, %
Assignment: =, +=, -=
Comparison: ==, ===, !=, >, <
Logical: &&, ||, !

7. Control Structures in PHP

<?php
// if-else
if ($age > 18) {
    echo "Adult";
} else {
    echo "Minor";
}

// switch
switch ($day) {
    case "Monday": echo "Start of week"; break;
    default: echo "Another day";
}

// loop
for ($i = 1; $i <= 5; $i++) {
    echo $i;
}
?>

Short Overview on Unit - I

UNIT – 1

Introduction to HTML and CSS

1. Introduction to HTML

What is HTML?

Features of HTML

Structure of HTML Document

HTML Document Explanation

HTML Basic Tags

1. Heading Tags

2. Paragraph Tag

3. Line Break

4. Horizontal Line

5. Bold

6. Strong

7. Italic

8. Emphasis

9. Underline

10. Highlight

11. Small Text

12. Delete Text

13. Inserted Text

14. Superscript

15. Subscript

HTML Comments

HTML Attributes

Global HTML Attributes

HTML Links

Attributes

HTML Images

Attributes

HTML Lists

Ordered List

type values

Unordered List

Description List

HTML Tables

Table Tags

Table Attributes

HTML Forms

Form Attributes

Input Types (HTML5)

Common Input Attributes

HTML5 Semantic Tags

Multimedia Tags

Audio

Video

HTML5 Canvas

SVG

HTML Meta Tags

CSS (Cascading Style Sheets)

What is CSS?

Types of CSS

1 Inline CSS

2 Internal CSS

3 External CSS

CSS Syntax

CSS Selectors

Important CSS Properties

Text

Font

Background

Border

Margin

Padding

Size

Display

Position

Float

Overflow

CSS Units

CSS Colors

CSS3 Features

Advantages of HTML5 and CSS3

Viva/Exam Important Questions

What have to achieve in this Unit

1. Design and develop web pages using basic HTML tags

2. Use of Advanced HTML5 Tags

3. Design Static Webpage using HTML5 tags

4. Design and develop web pages using CSS / CSS3 styles