HTM L

H y pe r Te xt Ma r k u p Language

HTML is t he code t ha t is us ed t o
stru c tur e a w eb page and i ts con t en t .

The componen t us ed t o des ign t he

stru c tur e of w eb s i t e s a r e called HTML t ag s .
FI RST HTML
FILE
inde x . h t ml

I t is t he defa u l t name fo r a w eb s i t e ' s homepage

HTML
TAG
A con t aine r fo r s ome con t en t o r o t he r HTML t ag s

< p > This is a pa r ag r aph </ p >

Con t en t

Elemen t
BASIC HTML
PAGE
<!DOCTYPE h t ml > t ell s b r o ws e r y o u a r e using HTML 5

< h t ml > r oo t of an h t ml doc u men t

< head > con t aine r fo r me t ada t a

< t i t le > M y Fi rst Page </ t i t le > page t i t le

</ head >

< bod y > con t ain s all da t a r ende r ed b y t he b r o ws e r

< p > hello w o r ld </ p > pa r ag r aph t ag

</ bod y >

</ h t ml >
Q U ICK
POIN TS
H t ml t ag is pa r en t of head & bod y t ag

Mo st of h t ml elemen ts have opening & clo s ing t ags

w i t h con t en t in be tw een

Some t ags have no con t en t in be tw een , eg - < b r >

We can use in s pec t elemen t / v ie w page s o ur ce t o edi t h t ml

COMMEN TS IN
HTML
This is pa rt of code t ha t s ho u ld no t be pa rs ed .

<!-- This is an HTML Commen t -->

HTML IS NOT CASE
S EN S I T I V E
< h t ml > = < HTML >

< p > = <P>

< head > = < HEAD>

< bod y > = < BODY>

BASIC HTML
TAGS
HTML A ttr ib ut e s

A ttr ib ut e s a r e us ed t o add mo r e info r ma t ion t o t he t ag

< h t ml lang =" en ">

HEADING
TAG
Used t o di s pla y heading s in HTML

h1 ( mo st impo rt an t )

h2
h3
h4
h5
h6 (lea st impo rt an t )
PARAGRAPH
TAG
Used t o add pa r ag r aph s in HTML

< p > This is a s ample pa r ag r aph </ p >

ANCHO R
TAG
Used t o add link s t o y o ur page

<a h r ef =" h tt p s :// google . com "> Google </ a >

IMAGE
TAG
Used t o add images t o y o ur page

< img sr c ="/ image . png " al t =" Random Image ">

r ela t i v e ur l
BR
TAG
Used t o add ne xt line ( line b r eak s ) t o y o ur page

<br>
BOLD , I T ALIC &
UNDE R LINE TAGS
Used t o highligh t t e xt in y o ur page

< b > Bold </ b >

< i > I t alic </ i >

< u > Unde r line </ u >

BIG & SMALL
TAGS
Used t o di s pla y big & s mall t e xt on y o ur page

< big > Big </ big >

< s mall > Small </ s mall >

HR
TAG
Used t o di s pla y a ho r i z on t al ru le r , us ed t o s epa r a t e con t en t

<hr>
S u b s c r ip t & S u pe rs c r ip t Tag
Used t o di s pla y a ho r i z on t al ru le r , us ed t o s epa r a t e con t en t

< su b > su b s c r ip t </ su b >

H 2O
< su p > su pe rs c r ip t </ su p >

n
A +B
PRE
TAG
Used t o display t e xt as i t is ( w i t ho ut ignoring spaces & ne xt line)

< p r e > This

is a sample
t e xt .

</ p r e >
PAGE LA Y O UT TECHNIQUES
using Semantic tags for la y o ut
using t he Right Tags

<header>
<main>
< foo t e r >
INSIDE MAIN
TAG
Section Tag Fo r a section on y o ur page

<section>

A rt icle Tag Fo r an a rt icle on y o ur page

< a rt icle >

Aside Tag Fo r con t en t aside main content(ads)

<aside>
REVISITING ANCHOR TAG

< a h r ef =" h tt p s :// google . com " t a r ge t ="_ main "> Google </ a >

for new t ab

< a h r ef =" h tt p s :// google . com "> <img sr c =" link "> </ a >

clickable pic
REVISITING IMAGE
TAG
<img sr c =" link " heigh t =50 px >

s e t height

<img sr c =" link " w id t h = 50 p x >

s e t w idt h
DIV
TAG
Div is a container used for o t he r HTML elements

Block Elemen t (takes full width)

LI ST : DIV
TAGS
<address> <fieldset> <nav >

< a rt icle > < figcapt ion> < noscr ipt >

<aside> <figure> <ol>

< blockqu ot e> < foo t e r > <p>

<canvas> <form> <pre>

<dd> < h 1 >-< h 6 > <section>

<div> <header> <t able >

<dl> <hr> < t foo t >

<dt> <li> <ul>

<main> <video>
SPAN
TAG
Span is also a container used for o t he r HTML elements

Inline Elemen t (takes wid t h as pe r size)

 < o ut p ut >
Li st : Span Tags <dfn> <q>
<a> <em> <samp>
<abbr> <i> < s c r ip t >
<acronym> <img> <s elec t >
<b> < inp ut > <small>
<bdo> <kbd> <span>
<big> <label> <strong>
<br> <map> <sub>
< b utt on > < object > <sup>
< ci t e > < tt > < t e xt a r ea >
< v ar > <t ime >
LI ST IN
HTML
Lists a r e used t o r ep r e s ent r eal life list da t a .

unordered or der ed

< u l> < ol>

<li> Apple </ li > <li> Apple </ li >

<li> Mango </ li > <li> Mango </ li >

< / u l> < / ol>

TABLES IN HTML
Tables a r e used t o r ep r e s en t r eal life table da t a .

< tr > used t o display t able r o w

< t d> used t o display t able dat a

< t h> used t o display t able header

Tables in HTML NAME Roll No

<t able >

Shradha 1664
< tr >
< t h > Name </ t h >
< t h > Roll No </ t h >
</tr>
< tr >
< t d > Shradha </ t h >
< t h > 1664 </ t h >
</tr>
< / t able>
CAPTION IN
TABLES
<caption> S tu den t Dat a </ cap t ion >

S tu den t Da t a
Name Roll No
Shr adha 1664
THEAD & TBODY IN
TABLES
< t head > t o wr ap table head

< t bod y> t o wr ap table body

COLSPAN
A TTR IB UT E
col s pan="n"
used t o c r ea t e cells which spans o v e r multiple columns

Dat a
Shr adha 1664

Aman 1890
<table>
<tr> <table>
<th colspan="2">Name</th> <tr>
<th>Age</th> <th>Name</th>
</tr> <td>Jame</td>
<tr> </tr>
<<td>John/td> <tr>
<td>Doe</td> <th rowspan="2">Phone</th>
<td>40</td> <td>555-4444</td>
</tr> </tr>
<tr> <tr>
<td>Jobs</td> <td>555-8885</td>
<td>Jake</td> </tr>
<td>77</td> </table>
</tr>
</table>
FO R M IN
HTML
Fo r ms a r e used t o collect da t a from t he us e r

Eg- sign u p/ login/ help r equ ests / cont act me

<form>

for m cont ent

</ fo r m >
ACTION IN
FO R M
Action a ttr ib ut e is used t o define w ha t action needs t o be
performed when a form is su bmi tt ed

<form ac t ion ="/ ac t ion . php " >

Fo r m Elemen t : Inp ut

< inp ut ty pe =" t e xt " placeholde r =" En t e r Name ">

LABE
L
<label fo r =" id 1 ">

< input ty pe=" r adio" v alu e=" class X " name=" class " id=" id1 " >

</ label >

<label fo r =" id 2 ">

< input ty pe=" r adio" v alu e=" class X " name=" class " id=" id2 " >

</ label >

CLA SS &
ID
<div id =" id 1 " cla ss =" g r o u p 1 ">

</ di v >

<div id =" id 2 "> cla ss =" g r o u p 1 ">

</ di v >
CHECKB
OX
<label fo r =" id 1 ">

< input ty pe=" checkbox " v alu e=" class X " name=" class " id=" id1 " >

</ label >

<label fo r =" id 2 ">

< input ty pe=" checkbox " v alu e=" class X " name=" class " id=" id2 " >

</ label >

 TEXTARE
A
<textarea name="feedback" id="feedback" placeholder="Please add Feedback ">

</ t e xt a r ea >
SELEC
T
<select name =" ci ty " id =" ci ty ">

<option v al u e =" Delhi "> Delhi </opt ion>

< option v alu e=" M u mbai" > Delhi < / option>

< option v alu e=" Banglor e" > Delhi < / option>

</ s elec t >

IFRAME
TAG
website inside website

< ifr ame sr c=" link" > Link < / option>

VIDEO
TAG
<video sr c =" m y Vid . mp 4 "> M y Video </ v ideo >

Attributes

- controls
- height
- width
- loop
- autoplay
 HTML CSS JS

Structure/layout Style Logic

CSS
Cascading Style Sheet

It is a language that is used of a document.

makeup
not a programming language, but a stying language

But for styling there should be some content, and that's why
we studied html before css

go to websites & remove css

Basic Syntax

Selector

h1 {

}
Property Value

semicolon shows that one property has ended & it is

important to put this even though it won't incurr error
Including Style
Inline
<h1 style="color: red"> PDEU </h1>

<style> tag
<style>
h1 {
color : red;
}
</style> Writing style directly inline on each element
Style is added using the <style> element in the same document
Including Style

External Stylesheet
Writing CSS in a separate document and linking it in your main html file.

best way

An inline style will override external and internal styles

CSS can be added to HTML documents in 3 ways:
Inline - by using the style attribute inside HTML elements
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
Internal - by using a <style> element in the <head> section
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
External - by using a <link> element to link to an external CSS file
<head> <link rel="stylesheet" href="styles.css"> </head>
Color Property
Used to set the color of foreground

color: red;

color: pink;

color: blue;

color: green;
Background Color Property
Used to set the color of background

background-color: red;

C
background-color: purple;
pink;

background-color: blue;

background-color: green;
Color Systems
RGB
color: rgb(255, 0, 0);

color: rgb(0, 255, 0);

we don't have to think on colors on our own, we can just use

color picker tools online or search online
Color Systems
Hex (Hexadecimal)
color: #ff0000;

color: #00ff00;

google color picker

Selectors
Universal Selector • Class Selector

* {}
.myClass {}

Element Selector

h1 { }

Id Selector

#myId { }
Practice Set 1
Q1: Create a simple div with an id "box".
Add some text content inside the div.
Set its background color to blue.

Q2: Create 3 headings with h1, h2 & h3.

Give them all a class "heading" & set color of "heading" to red.

Q3: Create a button & set its background color to :

green using css stylesheet
blue using <style> tag
pink using inline style
Text Properties
text-align

text-align : left / right / center

text alignement doesn't mean align according to the page; i.e.

right does not mean on the page's right side
but the parent's right side

in css3, latest css -> start and end are introduced for language
support like arabic
Text Properties
text-decoration

text-decoration : underline / overline and line through

also add style, wavy, dotted or color like red

can also set to none for hyperlinks

Text Properties
font-weight
font-weight : normal / bold / bolder/ lighter

font-weight : 100-900

font-weight is to show how dark or light our text is

it can be names or in terms of numbers
values from 100 to 900
Text Properties
font-family

arial, roboto
font-family : arial

we can write multiple familiies as a

fall-back mechanism
Units in CSS
Absolute

pixels (px)

96px = 1 inch

font-size: 2px;

cm, mm,inch & others are also there

but pixels is the most used
Text Properties
line-height

line-height : 2px

line-height : 3

line-height : normal
Text Properties
text-transform

text-tranform : uppercase / lowercase/ capitalize/ none

Practice Set 2
Q1: Create a heading centred on the page with all of its text capitalized by default.
Q2: Set the font family of all the to "Heveltica".

Q3: Create one div inside another div.

Set id & text "outer" for the first one & "inner" for the second one.
Set the outer div text size to 25px & inner div text size to 10px.
Box Model in CSS Width

Margin

Height
content
Height
Padding
Width Border

Border

Padding

Margin
Height

Height
content
By default, it sets the content area height of the element

div {
height: 50px;
}
 Width

Width
content
By default, it sets the content area width of the element

div {
width: 50px;
}
Border
content
Used to set an element's border

Border

border-width : 2px;
border-style : solid / dotted / dashed
border-color : black;
Border
Shorthand

border : 2px solid black;

Border
Used to round the corners of an element's outer border edge

border-radius : 10px; border-radius : 50 % ;

Padding
content

padding-left
Padding

padding-right

padding-top

padding-bottom
Padding
Shorthand

padding: 50px;
padding: 1px 2px 3px 4px;

C
3
top |right |bottom |left -> clockwise
Margin Margin
content content

margin-right

margin-left

margin-top

margin-bottom
Margin
Shorthand

margin: 50px;
margin: 1px 2px 3px 4px;

top |right |bottom |left -> clockwise

Practice Set 3
Q1: Create a div with height & width of 100px.
Set its background color to green & the border radius to 50%.

Q2: Create the following navbar.

 60px
200px (height)
(gap)
25px
(text) #f08804
#0f1111
anchor tags (yellow)
(black)
(links)
Display Property

display: inline- The inline element takes the required width only. It doesn't
force the line break so the flow of text doesn't break in inline example.

none - The "none" value totally removes the element from the page. It
will not take any space.

inline-block - Similar to inline but we can set margin & padding.

none - To remove element from document flow.

 Visibility

visibility: hidden;
Note : When visibility is set to none, space for the element is reserved.
But for display set to none, no space is reserved or blocked for the
element.
Practice Set 4
Q1: Create a webpage layout with a header, a footer & a content area containing 3 divs.
Set the height & width of divs to 100px.
(add the previous navbar in the header)

Q2: Add borders to all the divs.

Q3: Add a different background color to each div with an opacity of 0.5

Q4: Give the content area an appropriate height.

Units in CSS
Relative

em

rem

more like vh, vw etc

Percentage (%)
It is often used to define a size as relative to an element's parent object.

width : 33% ;

margin-left : 50% ;

show 50% of parent for h1

make one par & one child div

sometimes the relation is also to some other property not

just size, but that is not very commonly used
Em

font size of child will be half of parent for 0.5em

for padding & margin it's relative to same element's font size

show both on same par & div

make a button with border & font-size

then change its border radius from pixel to ems to set a constant shape
Rem (Root Em)

font size of child will be half of parent for 0.5em

for padding & margin it's relative to same element's font size

show both on same par & div

make a button with border & font-size

then change its border radius from pixel to ems to set a constant shape
Others
vh: relative to 1% viewport height

vw : relative to 1% viewport width

Position
The position CSS property sets how an element is positioned in a document.

position : static / relative /

Absolute/ fixed
Position

https://developer.mozilla.org/en-US/docs/Web/CSS/position
 • Static (Default) – It’s like a sticker that you just place on
the page normally. It stays where it is and doesn’t move.
• Relative – Imagine you placed the sticker, but now you

position: static; can move it slightly from its original spot (left, right, up,
position: relative; or down) while still keeping it in the same area.
position: absolute;
• Absolute – This is like taking the sticker off the page and
position: fixed;
position: sticky; putting it anywhere you want, without worrying about
where it was originally placed.
/* Global values */
position: inherit; • Fixed – It’s like sticking the sticker to your screen. No
position: initial; matter how much you scroll, it never moves.
position: revert;
• Sticky – This one is tricky! Imagine a sticker that stays in
position: revert-layer;
position: unset; its original spot at first, but when you scroll past a certain
point, it suddenly sticks to the top of the page like tape.
z-index
It decides the stack level of elements
Overlapping elements with a larger z-index cover those with a smaller one.

z-index : auto (0)

z-index : 1 / 2 / ...

z-index : -1 / -2 / ...

show 3d space
Background Image
Used to set an image as background

background-image: url(“image.jpeg”);
Background Size

background-size : cover / contain / auto

cover = fits with no empty space

contain - fits with image fully visible
auto = original size
Practice Set 5
Qs: Create the following layout using the given html.

Give the div a height, width & some background image.

Use the appropriate position property for the div element to place it at the
right end of the page. (The div should not move even on scroll)

Use z-index to place the div on top of page.

<p> lorem*5 </p>

<div> Love Nature </div>
<p> lorem*5 </p>
Flexbox
Flexible Box Layout

It is a one-dimensional layout method for arranging items in rows or columns.

The Flex Model
flex container

COL
flex item
cross axis

set display property of container to flex first

Flexbox Direction
It sets how flex items are placed in the flex container, along which axis and direction.

flex-direction : row; (default)

flex-direction : row-reverse;

flex-direction : column;

flex-direction : column-reverse;
Flex Properties
for Flex Item

align-self : alignment of individual along the cross axis.

flex-grow : how much a flex item will grow relative to the rest of the flex items if
space is available

flex-shrink : how much a flex item will shrink relative to the rest of the flex items if
space is available

silmilar to align items but for individual element

and it overrides align items

grow & shrink take values like 0, 1, 2, 3

0 = doesn't grow at all
• Inline: Elements are placed side by side but can't have
width/height.

• Inline-block: Elements are side by side but can have

width/height.

• Flex: A powerful layout system for alignment, spacing, and

distribution.
Practice Set 6
Qs: Create a navbar with 4 options in the form of anchor tags inside list items.
Now, use flexbox to place them all spaced equally in a single line.

Qs: Use flexbox to center one div inside another div.

Qs: Which has higher priority - align-items or align-self?

Media Queries
Help create a responsive website

@media (width : 600px) {

div {
background-color : red;
}
}

@media (min-width : 600px) {

div { in today's world everyone has a different device with thousand of
different screen sizes
background-color : red; if you built a website people will use it on laptop, big screen
} computers, an iphone, a big screen android phone or a small screen
one, an ipad
} even orientation is different like landscape or portrait
so it's important that layout looks good on all
so we need design to be responsive, respond to different screen sizes
& orientation
Screen Sizes
@media rule

•1024px: Adjusts navbar padding and reduces font size slightly.

•768px: Handles mobile navigation with a toggle.
•480px: Adjusts the navbar layout for smaller screens
Practice Set 7
Qs: Add a media query to implement the following:

the color of a div changes to green for width less than 300px

the color of a div changes to pink for width between 300px & 400px

the color of a div changes to red for width between 400px & 600px

the color of a div changes to blue for width above 600px

CSS Transform
Used to apply 2D & 3D transformations to an element

rotate
transform: rotate(45deg);

to add some more animation to how an

element looks

rotate is simple to understand, will take

angles and degrees is most common

transform also applies to all content inside

CSS Transform
scale

transform: scale(2);
transform: scale(0.5);
transform: scale(1, 2);

transform: scaleX(0.5);

transform: scaleY(0.5);

x& y axis separately

CSS Transform
translate

transform: translate(20px);

C
transform: translate(20px, 50px);

transform: translateX(20px);

transform: translateY(20px);

we can also give distance in other units like

% ems rems etc
show -ve values too
CSS Transform
skew

transform: skew (30deg);

now that we have done it we can go and make some advanced 3d

objects using transform if we are good at math
Animation
To animate CSS elements

@keyframe myName {
to { font-size : 40px; }
from { font-size : 20px;
}
}
Animation Properties
animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction
AN INTRODUCTION TO
JAVASCRIPT
•
•

•
THE JAVASCRIPT ENGINE
•
• V8
• SPIDERMONKEY
•
•

•
•

•
•
•

•
•

•
•

•
VALIDATING AGAINST A REGULAR EXPRESSION
Interaction: alert, prompt, confirm

• alert("Hello"); prompt
• The function prompt
accepts two arguments:

Txt to show
• result = prompt(title, to visitor
[default]); value
for the
input
field.
JavaScript Functions
• Functions are one of the fundamental building blocks in JavaScript.
function square(number) {
return number * number;
}