What is HTML?
•HTML stands for Hyper Text Markup Language
•HTML is the standard markup language for creating
Web pages
•HTML describes the structure of a Web page
•HTML consists of a series of elements
•HTML elements tell the browser how to display the
content
1
What is a Website ?
• A website is a collection of many web pages, and
web pages are digital files that are written using
HTML(HyperText Markup Language).
• To make your website available to every person
in the world, it must be stored or hosted on a
computer connected to the Internet round a
clock(Web Server).
• The website’s web pages are linked with
hyperlinks and hypertext and share a common
interface and design.
• The website might also contain some additional
documents and files such as images, videos, or
2
other digital assets.
Why to learn HTML ?
•Create web pages
•Make websites accessible
•Make websites search engine friendly
•Make websites easy to view on small screens
•Use HTML for other purposes
•Understand how websites work
3
History of HTML?
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
4
2017 W3C Recommendation: HTML5.2
HTML 4 Document Structure
HTML 4 document structure composed of three
parts:
• A line containing HTML version information
• A declarative header section (delimited by
the HEAD element)
• A body, which contains the document's actual
content. The body may be implemented by
the BODY element or the FRAMESET element.
5
What is an HTML element?
An HTML element is defined by a start tag,
some content, and an end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start
tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
6
Static HTML
• A static web page is a web page that is delivered
to the user exactly as stored
7
HTML <meta> Tag
Describe metadata within an HTML document:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
</head>
<body>
<p>All meta information goes in the head section...</p>
</body>
</html> 8
Section Tag Elements
• The Section tag defines the section of documents
such as chapters, headers, footers, or any other
sections.
• The section tag divides the content into sections and
subsections.
• The section tag is used when requirements of two
headers or footers or any other section of documents
are needed.
• Section tag grouped the generic block of related
contents.
• The main advantage of the section tag is, it is a
semantic element, that describes its meaning to both
the browser and the developer. 9
Syntax: <section> Section Contents </section>
<!DOCTYPE html>
<html>
<body>
<!-- html section tag is used here -->
<section>
<h1>
Web Development:HTML Section 1
</h1>
<p>
Content of section 1
</p>
</section>
<section>
<h1>
Web Development:CSS Section 2
</h1>
<p>
Content of section 2
</p> 10
</section>
</body>
</html>
Embedded Content
Elements
The <embed> tag defines a container for an external
resource, such as a web page, a picture, a media player,
or a plug-in application.
An embedded image:
<embed type="image/
jpg" src="pic_trulli.jpg" width="300" height="200">
An embedded HTML page:
<embed type="text/
html" src="snippet.html" width="500" height="200">
An embedded video:
<embed type="video/
webm" src="video.mp4" width="400" height="300">
To display a picture, it is better to use the <img> tag.
To display HTML, it is better to use the <iframe> tag.
To display video or audio, it is better to use the <video>
and <audio> tags. 11
Image Tag
• <img> tag defines an image in an HTML page
• Has two required attributes: src & alt
• Images are not technically inserted into an HTML page,
images are linked to HTML pages
• Example,
<img src="smiley.gif" alt="Smiley face" height="42"
width="42">
12
HTML <video> Tag
• The <video> tag specifies video, such as a movie clip
or other video streams
• The <video> tag is new in HTML5
• Example,
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
13
HTML <video> Tag
• Optional Attributes of video tag
Attribute Value Description
Specifies that the video will start playing as
autoplay autoplay
soon as it is ready
Specifies that video controls should
controls controls
be displayed (such as a play/pause
button etc).
height pixels Sets the height of the video player
src URL Specifies the URL of the video file
width pixels Sets the width of the video player
14
HTML Frames
• The <frame> tag defines one particular window
(frame) within a <frameset>
• Each <frame> in a <frameset> can have different
attributes, such as border, scrolling, the ability to resize,
etc.
Attribute Value Description
frameborder 0 or 1 Specifies whether or not to display a border around a
frame
name text Specifies the name of a frame
src URL Specifies the URL of the document to show in a frame
15
HTML <frameset> Tag
• The <frameset> element holds one or more
<frame> elements
• Each <frame> element can hold a separate document
• The <frameset> element specifies HOW MANY columns or
rows there will be in the frameset
• And HOW MUCH percentage/pixels of space will occupy
each of them.
16
HTML <frameset> Tag
• Optional Attributes of frameset tag
Attribute Value Description
pixels Specifies the number and size of columns in a
cols % or * frameset
pixels
rows % or * Specifies the number and size of rows in a frameset
17
HTML <table> Tag Attributes
• The <table> tag defines an HTML table
• An HTML table consists of the <table> element and one or
more <tr>, <th>, and <td> elements
– tr = table row
– th = table header
– td = table cell (data)
18
HTML <table> Tag Attributes
Attribute Value Description
left
center Specifies the alignment of a table according to
align surrounding text
right
rgb(x,x,x)
bgcolor #xxxxxx Specifies the background color for a table
colorname
border 1 Specifies whether the table cells should have borders or
"" not
pixels
width % Specifies the width of a table
19
Grouping Content Elements(Grouping tags)
• The <optgroup> tag is used to group related options in a
<select> element (drop-down list).
• If you have a long list of options, groups of related options
are easier to handle for a user.
Example
Group related options with <optgroup> tags:
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</opt
ion> 20
<option value="audi">Audi</option>
</optgroup>
</select>
Output
21
Linking in HTML
• <a> tag i.e. anchor tag defines a hyperlink
• A hyperlink (or link) is a word, group of words, or image
that you can click on to jump to another document.
• The most important attribute of the <a> element is the
href attribute, which indicates the link's destination
• Syntax
• <a href=“url” target=“value”>Link text</a>
22
Linking in HTML
• Value= _blank / _self / _parent / _top /framename
Value Description
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it
was clicked (default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the
window
framena Opens the linked document in a named frame
me
23
HTML Background
• By default, webpage background color is white
• HTML provides two good ways to decorate background
– HTML Background with Colors
– HTML Background with Images
24
HTML Background with Colors
• The bgcolor attribute is used to control the background
of an HTML element
• Specifically page body and table backgrounds
• Syntax
<tagname bgcolor="color_value"...>
25
HTML Background with Colors
• color_value can be given in any of the following
formats
– <!-- Format 1 - Use color name -->
<table bgcolor="lime" >
– <!-- Format 2 - Use hex value -->
<table bgcolor="#f1f1f1" >
– <!-- Format 3 - Use color value in RGB terms -->
<table bgcolor="rgb(0,0,120)" >
26
HTML Background with Images
• The background attribute can also be used to control the
background of an HTML element
• You can specify an image to set background of your HMTL
page or table
• Syntax
• <tagname background="Image URL"...>
• The most frequntly used image formats are JPEG, GIF
and PNG images
27
HTML Colors
• Colors are displayed in the combination of RED,
GREEN, and BLUE (RGB)
• CSS colors are defined using a hexadecimal (hex)
notation
• The lowest value of the light sources is 0 (hex 00) & the
highest value is 255 (hex FF)
• Hex values are written as 3 double digit numbers,
starting with a # sign
28
HTML Colors Examples
Color HEX Color RGB
#000000 RGB(0,0,0)
#FF0000 RGB(255,0,0)
#00FF00 RGB(0,255,0)
#0000FF RGB(0,0,255)
#FFFF00 RGB(255,255,0)
#00FFFF RGB(0,255,255)
#FF00FF RGB(255,0,255)
#C0C0C0 RGB(192,192,192)
#FFFFFF RGB(255,255,255)
29
HTML Formatting Tags
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or mood
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text 30
HTML Citations, Quotations and Definition Tags
Tag Description
<abbr> Defines an abbreviation or acronym
Defines contact information for the
<address>
author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another
source
<q> Defines an inline (short) quotation
<cite> Defines the title of a work
<dfn> Defines a definition term
31
HTML <font> Tag
• The <font> tag specifies the font face, font size and color
of text
• Example
– <font size="2" color="blue“>Text</font>
– <font face="verdana" color="green“>Text</font>
32
HTML Forms
• HTML forms are used to pass data to a server
• An HTML form can contain input elements like text
fields, checkboxes, radio-buttons, submit buttons and
more
• <form> tag is used to create an HTML form
<form>
:
input elements
:
</form>
33
HTML <input> Tag
• The <input> tag specifies an input field where the user
can enter data
• <input> elements are used within a <form>
element to declare input controls that allow users
to input data
• An input field can vary in many ways,
depending on the type attribute
34
HTML <input> Tag Attributes
Attribut Value Description
e
audio/*
video/* Specifies the types of files that the
accept
image/* server accepts (only for type="file")
MIME_ty
pe
Left/ right/ Specifies the alignment of an image
align
top/ input (only for type="image")
middle/
bottom
Specifies an alternate text for
alt text
images (only for type="image")
Specifies that an <input> element
checked checked should be pre- selected when the page
loads (for type="checkbox" or
type="radio")
name text Specifies the name of an <input> 35
element
Specifies the width, in characters,
size number
HTML <input> Tag Attributes
Attribute Value Description
Specifies the URL of the image to use as a
src URL submit button (only for type="image")
Button/ checkbox/
color/ date
/datetime
/ email/ file/ hidden/
type image/ month/ Specifies the type <input> element to display
number/ password/
radio/ range/ reset/
search/ submit/
text/ time/ url/
week
Specifies the value of an <input> element
value text
36
HTML <textarea> Tag
• The <textarea> tag defines a multi-line text input
control
• A text area can hold an unlimited number of characters
• the text renders in a fixed-width font usually Courier
• The size of a text area can be specified by the cols and
rows attributes
37
HTML <textarea> Tag
• The size of a text area can also be specified through
CSS height and width properties
• Attributes,
Attribut Value Description
e
cols number Specifies the visible width of a text
area
disabled disabled Specifies that a text area should be
disabled
name text Specifies a name for a text area
rows number Specifies the visible number of lines in
a text area 38
HTML <select> Tag
• The <select> element is used to create a drop- down list
• The <option> tags inside the <select> element define the
availableValue
Attribute optionsDescription
in the list
disabled disable Specifies that a drop-down list should be
d disabled
multiple multipl Specifies that multiple options can be
e selected at once
name name Defines a name for the drop-down list
size number Defines the number of visible options in a
drop-down list
39
HTML <option> Tag
• The <option> tag defines an option in a select list
• The <option> elements go inside a <select> or
<datalist> element
Attribut Value Description
e
disabled disabled Specifies that an option should be
disabled
label text Specifies a shorter label for an option
Specifies that an option should be pre-
selected selected
selected when the page loads
value text Specifies the value to be sent to a
server
40
HTML <button> Tag
• The <button> tag defines a clickable button
• Inside a <button> element you can put content,
like text or images (This is the difference between
<button> & <input>)
Attribu Value Description
te
disabled disabled Specifies that a button should be
disabled
name name Specifies a name for the button
Button/
type Specifies the type of button
reset/
submit
value text Specifies an initial value for the button
41
Thank You
42
