Basic structure of HTML
<!doctype html>
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
src – source (where the image
is kept on the computer)
alt – alternate text
<img>
height – height of the image
width – width of the image.
href – hyperlink reference (website or
<a> webpage address or another program
address on computer)
<form> Tag : <input> tag inside <form> tag types..
Input Tag Description Input
restricions(attributes)
<Input type=”color”> Color picker – changes
text color
<input type=”number” For entering number data Min and max can be
only defined
<input type=”email” For entering email Multiple -for entering
address multiple email address
<input type=”url”> For entering website
address or image address
or other program address
<input type=”date”> Date picker – dd-mm-yyyy
<input type =”image”> Image as submit button Height and width can be
used
<input type=”month”> Month picker – month and
year
<input type=”range”> Range control. Default 0- Min and max can be
100 defined
<input type=”datetime- Date picker – day, month,
local”> year and hour,minutes.
<input type=”week”> Week picker – week and
year
<input type=”time”> Time picker – hours and
minutes
<Input type=”search”> Defines a text field for
entering a string to search
<input type=”file”> Defines a file-select field Multiple – to add multiple
and a "Browse" button for files at time.
file uploads.
<input type=”tel”> Used to enter mobile no Pattern and placeholder
or telephone no can be used
Disabled – the textbox
becomes grey and you
cannot type anything
there
Readonly -you can read
data only but cannot
change
Required – this field must
be filled compulsory
Autocomplete - form or
input field should have
autocomplete On or Off
Autofocus – the cusor first
goes to that input field
when the page loads.
Meta Tag: example
Meta tag with name and content attributes should be together.
<meta name=”author” content=”Apte College”>
<meta name=”description” content=”Junior College,Apte Rd,”>
<meta name=”keywords”
content=”Commerce,Science,English,Junior College”>
<meta content=”copyright” content=”the rights belong to Apte
College”>
Meta tag with charset attribute
<meta charset=”UTF-8” > - character encoding for Indian languages
<meta charset=”Big5”> - character encoding for Chinese language
Meta tag with http-equiv and content attribute should be together
<meta http-equiv=”refresh” content=”7”> - refreshes page every 7
seconds
<meta http-equiv=”set-cookies”> - The browser sends the cookies
back to the server.
<meta http-equiv=”content-type” content=”text/html”>
<meta http-equiv=”expires” content="userid=pqr;
expires=Wednesday, 23-july-2025 23:59:59 GMT;"> - Here page
session will get expire at specified date and time
CSS Properties
Property Used for Value Example
Color Changes the Color h1{color:
color of the name(blue,green) maroon}
text
Font-weight Used to bold bold or 100, p{font-
text 200…900 weight:300}
Font-style Used to Italic, oblique or p{font-
italicize text normal(by style:italic}
default)
Text- This property 1. line-through p{text-
decoration is used to add 2. underline decoration:
1. strike- 3. overline underline}
through 4. none a{text-
marks decoration:
2. underline none}
3. overstrike
4. to remove
underlines
from links
Text-align This property left, right, center h1{text
is use to or justify align:center}
control the
horizontal
alignment of
any block-
level text that
are
paragraphs,
tables and
other
elements
Font-family This is used to Fonts name p{font
set the fonts (arial,times new family:arial}
roman)
Font-size This is used to px, in, mm, cm, p{font-size:10px}
set the font size pt
Letter-spacing This gives px, in, mm, cm, h1{letter-spacing:
spaces between pt 5pt}
the letters of the
text.
Padding This property px h1{padding:30px}
add the spaces
around the
content.
Border This property Solid, double, h1{border:double}
adds a border to groove, ridge,
a webpage inset, outset,
element dotted or dashed
Background- Sets an image as url(''X'') where X body{background
image an background to is the path of image:
the web page image file url('background.
jpg')}
Background- To set the repeat no-repeat background-
repeat background repeat: repeat
image to repeat background-
or not repeat: no-repeat
Margin-Left Sets margin area px,pt,cm etc. h1{margin-
on the left side of left;10px}
the element.
Cascading style sheet types:
Inline CSS
For inline css style is used as an attribute.
Ex:
<body>
<h1 style=”color:red;border:dashed skyblue 4px”> welcome </h1>
</body>
Internal or Embedded CSS
For internal css style is used as an tag. Style tag is declared in <head> tag.
Ex:
<head>
<style>
body{background-color:pink}
p{font-weight:bold,border:dotted}
</style>
</head>
<body>
<p> This is internal css or called as embedded css. </p>
</body>
</html>
External CSS
CSS properties are defined in different file with extension .css(ex : style.css)
The file is connected with the <link> tag. The <link> tag is declared in
<head>tag.
<head>
<link href=style.css” rel=”stylesheet “ type=”text/css”>
</head>
<body>
<p> This is internal css or called as embedded css. </p>
</body>
</html>
Style.css
body{background-color:pink}
p{font-weight:bold,border:dotted}
Orderd List
Tag Attribute
Type= small alphabets(a..z)
Capital letters(A..Z)
Numbers -default
Roman small numbers(I,ii…)
Roman capital letters(I,II,III..)
<ol> Reversed - to start series in reverse order
Start – to start from given number .
For alpahabets you have to give numbers
Ex: <ol start=1 type=”a”>
For 26 alpabets.
From start=27 it will aa and further
Unordered-list
Tag Attribute
list-style-type=”disc” (default)
<ul> list-style-type=”circle”
list-style-type=”square”
list-style-type=”none”
Definition List <dl> :
<dl>
<dt> </dt>
<dd> </dd>
</dl>
*note* used for term and its definition
Ex :
<body>
<dl>
<dt>Geeks Classes</dt>
<dd>It is an extensive classroom programme
for enhancing DS and Algo concepts.</dd>
<br>
<dt>Fork Python</dt>
<dd>It is a course designed for beginners
in python.</dd>
<br>
<dt>Interview Preparation</dt>
<dd>It is a course designed for preparation
of interviews in top product based companies.</dd>
</dl>
</body>
Output :
Geeks Classes
It is an extensive classroom programme for enhancing DS and Algo concepts.
Fork Python
It is a course designed for beginners in python.
Interview Preparation
It is a course designed for preparation of interviews in top product based
companies.
Audio Tag:
* Single source
<audio src=” “ controls type=”audio/(aac/mp3/ogg)” muted loop=-1
autoplay> </audio>
* Multiple source
<audio controls muted loop=-1 autoplay>
<source src=” “ type=”audio/mp3” >
<source src=” “ type=”audio/aac” >
<source src=” “ type=”audio/ogg” >
</audio>
Tag Attributes
src
controls
<audio> type
muted
loop
autoplay
Video Tag:
* Single source
<video src=” “ controls type=”video/(aac/mp3/ogg)” muted loop=-1 autoplay>
</audio>
* Multiple source
<video controls muted loop=-1 autoplay>
<source src=” “ type=”video/mp4” >
<source src=” “ type=”video/webM” >
<source src=” “ type=”video/ogg” >
</video>
Tag Attributes
Src
controls
<video> type
muted
loop
autoplay
height
width
preload=(auto/metdata/none)
poster= “path of the image “
Image Mapping
Tags Attributes
src
usemap=”# name” (any name can be given)
< img > alt
height
width
<map> Name=( add the name used in usemap)
<area> href
coords
shape=rect/poly/circle
alt
Selectors
CSS Id Selector
The ID selector uses the # sign. The id selector can be used only once in the
the program. It is unique.
<!DOCTYPE html>
<html>
<head>
<style>
#firstname {
background-color: yellow;
border:dashed grey 4px
}
</style>
</head>
<body>
<h1>Demo of the #id selector</h1>
<p id="firstname">My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
</body>
</html>
Output
Note : id firstname cannot be used again.
Class Selector
Class selector uses ‘.’ Class selector can be used any number of times in the
program and to any element(tag).
Ex:
<!DOCTYPE html>
<html>
<head>
<style>
.firstname {
background-color: yellow;
border: grey dashed 4px
}
</style>
</head>
<body>
<h1>Demo of the .class selector</h1>
<p class="firstname">My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
<h1 class="firstname"> Thank you </h1>
</body>
</html>
Ouput
Universal Selector :
Universal selector uses * sign. CSS properties written in universal selector are
applied to all the elements(tags) in the program.
ex:
<!DOCTYPE html>
<html>
<head>
<style>
*{
background-color: yellow;
color: red;
font-size: 18px
}
</style>
</head>
<body>
<h1>Demo of the universal selector</h1>
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
<h1> Thank you </h1>
</body>
</html>
Ouput:
Group Selector :
It is used when you want to apply same CSS properties to different
elements(tags) in the program.
Ex:
<!DOCTYPE html>
<html>
<head>
<style>
h1,h2{
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<h1>Demo of the group selector</h1>
<p>My name is Donald.</p>
<h2> Thank you </h2>
<p>I live in Duckburg.</p>
</body>
</html>
Output:
Position Property : This is used to place the element(tag) at the specified
position on the webpage.
1) static (default position) : output is displayed same as the usual html
program
2) relative: The element(tag) is positioned relative to its normal position usual
html program, so "left:50px" adds 50 pixels to the element's(tag) LEFT
position.
3) absolute: The element(tag) is positioned relative to its first positioned (not
static) ancestor element. Here the h3 tag is postioned 100px left and 150px
down from the h1(non-static) tag. Not from browser window left and top.
4)fixed: The element is positioned relative to the browser window
Ex :
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
position: relative;
left: 100px;
top: 150px;
color :red
}
h3 {
position: absolute;
left: 100px;
top: 150px;
color : green
}
h4 {
position: fixed;
left: 100px;
top: 350px;
color : purple
}
</style>
</head>
<body>
<h1>The position is default static Property</h1>
<h2>This is a heading with an relative position from the left 100px and from
the top 150 px</h2>
<h3>This is a heading with an absolute position with the left 100px and the top
150 px from h1 tag</h3>
<h4>This is a heading with an fixed position from the left 100px and from the
top 350 px from the browser window</h4>
</body>
</html>
Output:
Float Property : Float is a CSS property written in CSS file or directly in the
style of an element. The float property defines the flow of content.
The float property has 3 types
1. none : by default
2. left : This keeps the element float(stays) on left side of the container.
3. right : This keeps the element float(stays) on right side of the container
Ex: image float(stays) to the right
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<h1>The float Property image float to the right</h1>
<p>In this example, the image will float to the right in the text, and the text in
the paragraph will wrap around the image.</p>
<p><img src="pineapple.jpg" alt="Pineapple"
style="width:170px;height:170px;margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet,
nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula
venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae
massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis
sed ornare eu, lobortis in odio. </p>
</body>
</html>
Ouput :
Example : image float(stays) to the left
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
</style>
</head>
<body>
<h1>The float Property image float to the left</h1>
<p>In this example, the image will float to the left in the text, and the text in the
paragraph will wrap around the image.</p>
<p><img src="pineapple.jpg" alt="Pineapple"
style="width:170px;height:170px;margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet,
nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula
venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae
massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis
sed ornare eu, lobortis in odio. </p>
</body>
</html>
Output :
Display property: Display attribute has four values
inline: Displays an element as an inline element (like <span>). Any height
width properties will have no effect. This is default.
block: Displays an element as a block element (like <p>). It starts on a new
line, and takes up the whole width
inline-block: Displays an element as an inline-level block container. The
element itself is formatted as an inline element, but you can apply
height and width values
none: The element is completely removeds
Ex:
<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
</style>
</head>
<body>
<h1>The display Property</h1>
<h2>display: none:</h2>
This is Display property with none value.... <p class="ex1">HELLO
WORLD!</p> Here hello world will be not be displayed
<h2>display: inline:</h2>
This is Display property with inline value.... <p class="ex2">HELLO
WORLD!</p> here everyting will be dispalyed in one line....
<h2>display: block:</h2>
This is Display property with block value.... <p class="ex3">HELLO
WORLD!</p> this will display as block....
<h2>display: inline-block:</h2>
This is Display property with inline-block value.... <p class="ex4">HELLO
WORLD!</p> this is similar to inline property
</body>
</html>
Output:
Inline Frame <iframe > tag: is used to display advertisments on the webpage.
Ex: In Gmail you have advertisements on the right of inbox. Those are
displayed using iframe tag
Tag Attribute
<iframe> src
height
width
name
srcdoc (here we can write
entire html program here)
Example with src attribute:
Example with srcdoc attribute
<!doctype html>
<html>
<head>
<title> html iframe </title>
</head>
<body>
<iframe height=200px width =300px srcdoc="<!doctype html>
<html>
<head>
<title> html iframe </title>
</head>
<body>
<h1> This is iframe example with srcdoc </h1>
<h2> Thank You </h2>
</body>
</html>" >
</body>
</html>
Output:
