Unit 1 Introduction To HTML and Css
Unit 1 Introduction To HTML and Css
DEVELOPMENT(DWPD)
UNIT 1
Introduction to HTML & CSS
1
SYLLABUS
1a. Design and develop web pages using basic HTML tags.
1.1 History of Html
1.2 Basic Html Tags
(<html>,<head>,<title>,<body>,<hr>,<img>,<embed>,<bgsound>,<blink>,
<font>,<center>,<marquee>,
<a>)
1.3 Coding style ,syntax, Working with Image, Linking a webpage ,
Defination list (<ul>, <li>, <ol>)
1.4 Working with Table ( <th>, <td>, <tr>)
1.5 Division Tags, IDs & Classes
1.6 Special Character or tags
1b. Use of advance HTML 5 Tags.
1c. Design Static Webpage using Html5 tags
1.7 Difference between Html 4.0 & 5.0
1.8 Brief Discuss Html 5 tags with Ex. ( <header>, <aside>, <section>,
<footer>, <article>,<nav>)
2
1.9 Introduction to Html5 Form Input Type ,Elements & Attributes.
1.10 Form Input Type (color, Date, Datetime, Datetime-local, email,
month number, range, search, tel, time, url, Week)
1.11 Form Input Type Elements( Datalist, Keygen, output)
1.12 Html5 video & audio( <Audio>, <Video>)
1.13 Static Webpage Design using Html5 tags
1d. Design and develop web pages using CSS/ CSS 3 styles,
internal and/or external style sheets.
1.14 Introduction to Css/dhtml
1.15 Briefly Discuss to stylesheet ( What is Css? ,Use of Css, Type’s of
Css, Syntax)
1.16 Css margin, padding , Text, Font Properties
1.17 Css and links
1.18 Css Background, Border Properties, Height, width, Css
Positioning, Layout creating
1.19 Css and backgrounds, Css and borders, Float Properties, Css
video, audio Tag, Map Creating
1.20 Diff. between Css2 & Css3
1.21 Css3- Opacity, Box-Shadow, Border- radius, Gradient, Transition, 3
Transform , Animation , Keyframes
1.DESIGN AND DEVELOP WEB
1.1 History of HTML
4
In 1992,Berners-Lee & team released the First Version
of HTML known as HTML 1.0 which was finalized in
5
1.2. BASIC HTML TAGS
1. <html> Tag
It used to give instructs Browser that this is
HTML document.
Example
<html>
</html>
2. <head> Tag
It works as a container for<title>,<link>,<style>,
& <script> tags.
6
Generally <head> tag are used for following
1. To specify Title of Document that is displayed I the
title bar of Web Page.
To specify Style sheet for HTML.
Example
<html>
<head>This is a heading</head>
</html>
7
3. <title> Tag
It is used to specify title for web page.
Example
<html>
<head>
<title>This is document title.</title>
</head>
</html>
4 . <body> Tag
It is used to Defines the document's body.
It works as a container for text, hyperlink,
image, font, list etc.
8
Example : <html>
<head>
<title>My First HTML Page.</title>
</head>
<body>
Welcome To My Website
</body>
</html>
9
5. <hr> Tage
It used to display Horizontal Line on web page.
Same Attribute of <hr> tage
Attribute purpose
Size It used to give Height of horizontal line.<hr
size=“20”>
Width It used to give Width of horizontal line.<hr
width=“40”>
align It used to give specify alignment of
horizontal line.<hr align=“center”>
10
6. <img> Tag
11
7. <embed> Tag
It is used to embed various multimedia objects or
external application.
In this tag must have to use src attribute to
display the file.
Example
12
8. <bgsound> Tag
It is used to embed background sound file in web
page.
In this tag must have to use src attribute to be
embedded within web page.
Example
13
9. <blink> Tag
It is used to blink the Text ON & OFF on a web page.
Example
12.<marquee> Tag
It is used to display scrolling text on a web page.
It is scrolled either horizontally or vertically using
<marquee> tag. By default it scroll Horizontally left
to right.
Example
Example
< a href=“vpmp.html”> VPMP polytechnic </a>
16
1.3. Coding Style, Syntax, Working
with Image, Linking a Webpage.
17
1.3.2. Syntax of Coding
Every programming language having their own syntax
rules. These syntax rules must be followed by developer
for successful execution of code.
The following have same Syntax Rules of HTML
18
5. In same HTML tags have no need to closing tag.
6. The comment must include between <!---and --
- > symbol.
8.
There must be space between tag name & an
attribute name.
19
1.3.3. Working with Image
HTML provides the facility of working with images.
In HTML the <img> tag is used to display an
image on a web page.
In src attribute are used to display the image of web
page.
The general form of <img> tag is
<img src=“Book.jpg”>
For Example
<img src=“book.jpg” alt=“Book Image”
height=“50” width=“60” >
22
Mark Image to work as a hyperlink
The <img> tag can be contained between <a> &
</a> tag to work as a hyperlink.
For Example
<a href=“displaybook.html”>
<img src=“book.jpg” height=“50” width=“60”
border=“2” align =“center”>
</a>
23
1.3.4. Linking a web page
For Example
<a href =“contact.html”> Contact Us</a>
24
1.3.5. List
List is useful to represent information in
structured way.
So that user can easily read the information.
1. Ordered List(ol)
2. Unordered List(ul)
3. Definition List(dl)
</ol>
Output:
1.DWPD
2.JAVA
3.CMTS
4.CNS 26
2. Create Unordered List
Unordered List is used to represent
information in a bullet form.
The <ul> Tag in association with the <li> tag is
used to create unordered list in HTML.
For Example
<ul>
<li> DWPD </li>
<li> JAVA </li>
<li> CMTS </li>
<li> CNS </li>
</ul>
27
Output:
DWPD
JAVA
CMTS
CNS
28
3. Create Definition List(dl)
Definition list is useful for representing in
two levels format.
In two levels format first level contain topic &
second level description of topic.
In HTML definition list can be used creating
using <dl>, <dt>, & <dd> tag.
The <dl> tag is used to represent definition
list.
The <dt> tag is used to represent definition
team.
The <dd> tag is used to represent definition.
HTML
Hyper Text Markup Language
PHP
Hypertext Preprocessor
30
1.4. Working with Table (<table>, <th>,
<tr>, <td>)
The <table> tag is used to create table in
HTML.
Only <table> tag is not enough to create table.
we have to use <tr>, <th> ,<td> tag in a <table>
tag.
Tag Purpose
<table> Used to define table.
<tr> Used to define row within table
<th> Used to define Table Header
<td> Used to define table cell.
31
For Example
<table border=“1”>
<tr>
<th>Enroll. No. </th>
<th> Name of Student </th>
</tr>
<tr>
<td> 156540307001 </td>
<td> Aakruti </td>
</tr>
</table> Output
For Example
<div style="color:blue">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
33
Example-1
<div style=“border:2px solid;”>
<h1> section 1</h1>
<p> welcome to our web site. </p>
</div>
34
Some Attribute of <div> tag
Attribute Purpose
align It Used to specify horizontal alignment for the
contents of <div> tag.
35
title Title attribute is used to specify
title for the <div> tag.
36
1.6 SPECIAL CHARACTER
In HTML some character can not be directly typed
or displayed using keyboard. This character is
known as Special Character.
HTML entity always begins with & (ampersand)
symbol and ends with ; (semicolon).
We can directly place HTML entity in source code
where we want to display special character.
For Example
<p>
© Copyright Reserved
</p>
Output
© Copyright Reserved 37
Special Character Entity Name
space
38
1.7 DIFFERENCE BETWEEN
HTML 5.0 & 4.0
HTML 5.0 HTML 4.0
1. <header>
2. <nav>
3. <section>
4. <article>
5. <aside>
6. <footer>
41
1. <header> Tag
The <header> Tag element allows user to define
a section which define header of web page.
This tag are generally use banner ,logo, title & sub
title of the web site.
<header>
<h1> VPMP POLYTECHNIC</h1>
42
</header>
2. <nav> Tag
The <nav> element allows user to define a
section that contain set of navigation link.
The <nav> element is a section containing links to
other documents or to pars within the current
documents.
For Example
<nav>
<a href=“index.html”> Home </a>
<a href=“loginpage.html”> Log In </a>
<a href=“ registration.html”> Registration </a>
</nav>
43
3. <section> Tag
The <section> Tag allows user to define
various type of section in a web page.
It can be header, footer, chapter etc…
For Example
<section>
<h1>Welcome To My Website. </h1>
</section>
44
4. <article> Tag
The <article> Tag allows user to define a
section which is independent from the
remaining layout of web page.
Example
<article>
<header> <h1> Programming in PHP </h1>
</header>
<p> Hypertext Preprocessor </p>
<footer> sem 5th C.E. Department </footer>
</article>
45
5. <aside> Tag
This Tag used to navigation link, latest news ,user login
etc.. Can be placed inside <aside> Tag.
Example
<aside>
<h3> Latest News </h3>
<marquee direction=“up”> New Programs
Added</marquee>
</aside>
46
6. <footer> Tag
The <footer> element allows user to define a
section which define footer of web page.
Example
<footer>
<p align=“center”> copyright &cpy;2016. All
Right Reserved </p>
</footer>
47
1.9 INTRODUCTION TO HTML 5.O FORM
INPUT TYPE ,ELEMENTS & ATTRIBUTES.
HTML Forms are required when you want to collect
some data from the site visitor.
The HTML <form> tag is used to create an HTML form
and it has
following syntax:
</form>
48
1.10. HTML 5.0 FORM INPUT TYPE
1. Color
The input color type allows user to select color. It
returns Hex value of the selected color.
Example
2. Date
The date input type allows user to enter or select
date.
Example
4. Datetime-Local
The Datetime input type allows user to enter or select
date & time without time zone.
For Example
50
5. email
The email input type allows user to enter valid Email
address.
Example
6. month
The month input type allows user to enter or select a
month of the year.
Example
51
7. number
The number input type allows user to enter a numeric
value.
Example 1
52
8. range
The range input type allows user to select numeric
value between specify range.
Example
9. search
The search input type allows user to create a text field
using which users can search for various contents of
the web site.
Example
53
10. tel
The tel input type allows user to enter a telephone
number.
Example
11. time
The time input type allows user to enter valid time.
Example
54
12. url
The url input type allows user to enter valid url.
It does not allow user to submit invalid URL. Valid
URL must starts with http:// .
Example
13. week
The week input type allows user to enter or select
week number of the year.
Example
55
1.11 FORM INPUT TYPE ELEMENTS
HTML 5 introduces several new form
elements.
The new form elements introduced By HTML 5 as
given below.
1. <datalist> Element
The <datalist> element allows user to define a list
of options which can be associated with the input
element.
We create a list then the use <option> tag.
56
Example
<html>
<body>
<form action="action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
</datalist>
<input type="submit">
</form>
</body>
57
</html>
2. <keygen> Element
58
Example
<html>
<body>
<form action="action_page.php" method="get">
2. novalidate
The novalidate attribute is used to specify that the data
entered in inpute elements are not validated at the time
of submitting form.
61
It represent the Boolean value.
Example
<form action=“home.html” novalidate=“false”>
</form>
3.formaction
The form action attribute is used to specify the filename
or url to which the contents of input element will be
send for processing when user submit form.
Example
62
4. formmethod
The formmethod attribute is used to specify
HTTP method for sending form data to the file
specified in action attribute of the form element
or formaction attribute of the input element.
Example
<form method=“POST” action=“home.html” >
63
New Attribute of Input Type
1.autocomplete
When autocomplete is on,the browser automatically
complete values based on value that the user has
entered before.
Example
2. autofocus
The autofocus attribute is used to set focus
automatically on input element when web page.
64
Example
< form action=“home.html” autocomplete=“on”>
User Name: <input type=“text” name=”uname”
autofocus=“true”>
</form>
3. formtarget
The formtarget attribute is used to specify target
window for the file is open & that is specified in action
attribute of form element or formaction attribute of
input element.
65
The formtarget attribute can be used only with
submit & input type.
Example
< form action=“display.html” autocomplete=“on”>
66
4. Height & width
The height & width attribute are used to specify
the height & width of an input element whose
type is set of image.
Example
5. List
The list attribute is used to associate a list of
option with a particular input element.
The<datalist> tag allows user to create list of
option.
67
Example
<form action=“display.html”>
Select Branch: <input list=“Branch” name=“banch”>
<datalist id=“Branch”>
<option value=“Computer”>
<option value=“Civil”>
<option value=“Mechanical”>
<option value=“Electrical”>
</datalist>
</form>
68
6.Min & Max
The min & max attribute are used to specify the
minimum & maximum limit for the value to be
entered in an input element.
Example
<form action=“display.html”>
7. multiple
It is used to user insert the multiple value of the
web page.
69
Its represent the Boolean value.
1.12 HTML 5.0 VIDEO & AUDIO TAG
HTML 5.0 <video> Tag
It is used to play a video file in HTML 5.0.
Example
70
HTML 5.0 <Audio> Tag
It is used to play a audio file in HTML 5.0.
Example
<audio autoplay=“true”>
<source src=“song.mp3" type=“audio/mpeg">
<source src=“theame.ogg" type=“audio/ogg">
</audio>
71
1.14 Introduction to DHTML/CSS
DHTML stands for Dynamic Hypertext Markup
language.
DHTML allows the facility of combining HTML &
CSS(Cascading Style Sheet) & Scripting
Languages.(javascript , vbscript etc..)
DHTML USE to
72
CSS(Cascading Style Sheet)
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be
displayed on screen, paper, or in other media
Use of CSS
1. it allows designer to separate HTML content from
their design.
2. CSS provide Efficiency in Design & Updates.
73
Syntax of CSS
Css consist of three part:
1. selector
2. Property Name
3. Value
74
Example
p
{
color: red;
text-align: center;
}
75
Type of CSS
Based on the location of css style there are three
type of CSS available.
3. Inline CSS
76
1. Internal CSS /Embedded CSS
An internal style sheet may be used if one single page
has a unique style.
Internal styles are defined within the <style> element,
inside the <head> section of an HTML page
Example
<html>
<head>
<title>HTML Internal CSS</title>
<style type="text/css">
.red{
color: red;
}
p{
color:green;
}
77
</style>
</head>
<body>
<p class="red">This is red</p>
<p>This is green</p>
</body>
</html>
78
2. External CSS
79
Example
Consider we define a style sheet file style.css which
has following
.red{
color: red;
}
p{
color:green;
}
These file name is stylesheet1.css
80
<html>
<head>
<title>HTML External CSS</title>
<link href="stylesheet1.css rel="stylesheet"
type="text/css“ >
</head>
<body>
<p class="red">This is red</p>
<p>This is green</p>
</body>
</html>
81
3. Inline CSS
An inline style may be used to apply a unique style for a
single element.
To use inline styles, add the style attribute to the
relevant element.
Example
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style="color:red;">This is red</p>
<p style="color:green;">This is green</p>
82
</body>
</html>
1.16 CSS margin, Padding, Text, Font
Property
1. CSS Margin Property
The margin property defines the space around an HTML
element.
he margin specifies a shorthand property for setting the
margin properties in one declaration.
1. The margin-bottom
2. The margin-top
3. The margin-left
4. The margin-right
83
Example
P
{
Margin-top:10px;
Margin-bottom:10px;
Margin-right:10px;
Margin-left:10px;
}
Or
<p style=“margin: 10px, 10px, 10px, 10px”>
84
2. CSS Padding Property
The padding property allows you to specify how
much space should appear between the content
of an element and its border .
The Property ofbox using the following
properties −
1. The padding-bottom
2. The padding-top
3. The padding-left
85
4. The padding-right
5. The padding
Example
P
{
Padding-top:10px;
Padding-bottom:10px;
Padding-right:10px;
Padding-left:10px;
}
1. The color
2. The direction
3. The letter-spacing
4. he word-spacing
5. The text-indent
6. The text-align
87
Example
P
{
color:red;
text-align:center;
vertical-align:middle;
letter-spacing: 10px;
}
88
4.CSS Font Property
This chapter teaches you how to set fonts of a content,
available in an HTML element. You can set following
font properties of an element −
1. The font-family
2. The font-style
3. The font-variant
4. The font-weight
5. The font-size
6. The font
89
Example
p
{
font-style:italic;
font-size:24px;
font-weight:500;
font-variant: small-caps;
}
90
5. CSS Background Property
This chapter teaches you how to set backgrounds of
various HTML elements. You can set the following
background properties of an element −
1. The background-color
2. The background-image
3. The background-repeat
4. The background-position
5. The background-attachment
6. The background
91
Example
h1
{
Background-color:red;
}
1. The border-color
2. The border-style
92
3. The border-width
border using the properties −
1. border-bottom-color
2. border-top-color
3. border-left-color
4. border-right-color
Example
p
{
border:4px solid red;
}
93
7. CSS Height Property
The height property sets the height of an element.
The min-height and max-height properties override
height.
94
Example
p{
min-height: 100px;
max-height:500px;
}
95
1. The max-width property is used to set the maximum
width of an element.
2. The min-width property is used to set the minimum
width of an element.
Example
p{
max-width: 500px;
min-width: 150px;
}
96
8. CSS Float Property
The float property specifies whether or not a box (an
element) should float.
Value Description
97
Example
img
{
float: right;
}
98
CSS Link
This chapter teaches you how to set different properties
of a hyper link using CSS. You can set following five
state of hyper link
1.Link
2. Visited
3. Hover
4.Active
5.Focus
99
Example
a : link
{
color:red;
}
a : visited
{
color:green;
}
a : hover
{
color:maroon;
} 100
a : active
{
color:blue;
}
a : focus
{
color:yellow;
}
101
1.17 CSS3
CSS3 is the latest standard for CSS.
CSS3 is completely backwards-compatible with earlier
versions of CSS.
CSS3 is collaboration of CSS2 specifications and new
specifications, we can called this collaboration is module.
Some of the modules are shown below
1. New Selectors
2. New Background & Border Property
3. Gradient Property
4. Box Shadow & Text Shadow Property
5. Transformation
6. Transition 102
7. Animation
1.17.1 Opacity
The opacity-level describes the transparency-
level, where 1 is not transparent at all, 0.5 is 50%
see-through, and 0 is completely transparent.
Setting opacity property to 0 indicates that the
element is fully transparent & Setting opacity
property to 1 indicates that the element is fully
opaque.
Its default value is 1 means fully opaque.
Example-1
h1
{
Opacity : 0.9;
} 103
1.17.2. Box-Shadow
Box-shadow property is used to apply shadow
effects to the Box.
Using this property multiple shadow effect can be
applied.
The general syntax is
1. Linear Gradient
2. Radial Gradient
1. Linear gradients
Linear gradients are used to arrange two or more
colors in linear formats like top to bottom.
Syntax
background: linear-gradient(direction, color-
stop1, color-stop2, ...);
106
Example
h1
{
Background : linear-gradient(to left, red , blue);
}
107
Linear Gradient have following Property
1. Direction
It indicate the direction of color.
value Perpose
To left Transition takes place from right to left(Horizontally)
To right Transition takes place from left to right(Horizontally)
To top Transition takes place from bottom to top(Vertically)
To bottom Transition takes place from top to bottom(Vertically)
108
2. Angle
It indicate direction in a terms of degree.
It represents an angle between a horizontal line & the
gradient line ,going counter – clockwise.
3. Color-stop
It represent name of colors between which you
want smooth transition.
It must use at lease two color.
109
2. Radial Gradient
A radial gradient is defined by its center.
To create a radial gradient you must also define at
least two color stops.
Syntax
background: radial-gradient(shape
size at position, start-color, ..., last-color);
Example-1
h1
{
Background: radial-gradient(red, yellow, green);
}
110
Example-2
h1
{
Background: radial-gradient(circle closest-side,red,
yellow, green);
}
111
1.17.5 Transform
This property allows you to rotate, scale, move, skew,
etc., elements.
The transform property applies a 2D or 3D
transformation to an element.
CSS support following method for transformation
1. Translate
113
3. Scale
This is used to scale an element horizontally as well as
vertically by specific scale factor.
Syntax
114
4. Skew
This is used to turn an element horizontally as well as
vertically by specific angle passed as a parameter.
Syntax
115
1.17.6 Animation & Keyframe
1.Animation
CSS3 animations allows animation of most
HTML elements without using JavaScript
,Flash!,GIF images.
To use CSS3 animation, you must first specify
some keyframes for the animation.
Syntax
@keyframe animation_name
{
Keyframe_selector
{
CSS style;
} 116