Scribd
Upload
9 views144 pages

HTML Basics: Structure and Tags Guide

HTML, or HyperText Markup Language, is the standard language used to create web pages, developed by Tim Berners-Lee in 1991, with the current version being HTML5 published in 2012. It allows for the structuring of content through various tags, enabling web designers to create responsive and interactive web pages. The document also covers HTML elements, attributes, formatting, and meta tags, providing examples for better understanding.

Uploaded by

nisha raheja
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
9 views144 pages

HTML Basics: Structure and Tags Guide

HTML, or HyperText Markup Language, is the standard language used to create web pages, developed by Tim Berners-Lee in 1991, with the current version being HTML5 published in 2012. It allows for the structuring of content through various tags, enabling web designers to create responsive and interactive web pages. The document also covers HTML elements, attributes, formatting, and meta tags, providing examples for better understanding.

Uploaded by

nisha raheja
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd

HTML Introduction

 HyperText Mark Up Language


 To develop web pages
 Created by: Berners lee in 1991
 HTML 4.01 was major version of HTML

developed in 1999
 Currently using HTML 5 published in 2012
HTML
 Hypertext refers to the way in which Web
pages (HTML documents) are linked
together. Thus, the link available on a
webpage is called Hypertext.
 As its name suggests, HTML is a Markup

Language which means you use HTML to


simply "mark-up" a text document with tags
that tell a Web browser how to structure it
to display.
Advantages of HTML
 Create Web site
 Become a web designer
 Understand web
 Learn other languages
Applications
 Web pages development
 Internet Navigation
 Responsive UI
 Offline support
 Game development
Hello world using HTML
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Hello World!</p>
</body>
</html>
Sr.N Tag & Description
o
1 <!DOCTYPE...>This tag defines the document type and HTML version.

2 <html>This tag encloses the complete HTML document and mainly


comprises of document header which is represented by
<head>...</head> and document body which is represented by
<body>...</body> tags.
3 <head>This tag represents the document's header which can keep
other HTML tags like <title>, <link> etc.
4 <title>The <title> tag is used inside the <head> tag to mention the
document title.
5 <body>This tag represents the document's body which keeps other
HTML tags like <h1>, <div>, <p> etc.
6 <h1>This tag represents the heading.
7 <p>This tag represents a paragraph.
HTML Document Structure
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
HTML Headings
 Any document starts with a heading. You
can use different sizes for your headings.
 HTML also has six levels of headings, which

use the elements <h1>, <h2>, <h3>,


<h4>, <h5>, and <h6>.
 While displaying any heading, browser adds

one line before and one line after that


heading.
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Paragraph Tag

 The <p> tag offers a way to structure your


text into different paragraphs.
 Each paragraph of text should go in

between an opening <p> and a closing


</p> tag as shown in next slide
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of
text.</p>
<p>Here is a second paragraph of
text.</p>
<p>Here is a third paragraph of
text.</p>
</body>
</html>
Output
Here is a first paragraph of text.
Here is a second paragraph of text.
Here is a third paragraph of text.
Line Break Tag
 Whenever you use the <br /> element,
anything following it starts from the next
line.
 Empty element
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br /> You delivered your
assignment ontime.<br /> Thanks<br />
Mahnaz</p>
</body>
</html>
Output
Hello
You delivered your assignment on time.
Thanks
Mahnaz
Centering Content
You can use <center> tag to put any
content in the center of the page or any
table cell.
 <!DOCTYPE html>
<html>
<head>
<title>Centring Content
Example</title> </head>
<body>
<p>This text is not in the
center.</p> <center>
<p>This text is in the center.</p>
</center>
</body>
</html>
Output
This text is not in the center.
This text is in the center.
Horizontal Lines
 Horizontal lines are used to visually break-
up sections of a document.
 The <hr> tag creates a line from the

current position in the document to the


right margin and breaks the line
accordingly.
 Empty Element
Output
This is paragraph one and should be on top

This is paragraph two and should be at


bottom
Preserve Formatting
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting
Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>
Output
function testFunction( strText ){
alert (strText)
}
Nonbreaking Spaces
 Suppose you want to use the phrase "12
Angry Men." Here, you would not want a
browser to split the "12, Angry" and "Men“.
 you should use a nonbreaking space

entity &nbsp; instead of a normal space.


<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces
Example</title>
</head>
<body>
<p>An example of this technique appears
in the movie "12&nbsp;Angry&nbsp;Men."</p>
</body>
</html>
Output
An example of this technique appears in the
movie "12 Angry Men."
HTML Elements
 An HTML element usually consists of
a start tag and an end tag, with the content
inserted in between:
<tagname>
Content goes here...
</tagname>
 The HTML element is everything from the

start tag to the end tag:


<p>My first paragraph.</p>
Void elements

There are some HTML elements which don't


need to be closed, such as <img.../>,
<hr /> and <br /> elements. These are
known as void elements.
Nested HTML Elements
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i>
heading</h1>
<p>This is <u>underlined</u>
paragraph</p>
</body>
</html>
Output
This is italic heading
This is underlined paragraph
HTML Attributes
 An attribute is used to define the
characteristics of an HTML element
 Placed inside the element's opening tag
 All attributes are made up of two parts −

a Name and a value


 The name is the property you want to set.
For example, the paragraph <p> element in
the example carries an attribute whose name
is align, which you can use to indicate the
alignment of paragraph on the page.

The value is what you want the value of the


property to be set and always put within
quotations. The below example shows three
possible values of align attribute: left,
center and right.
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align = "left">This is left
aligned</p>
<p align = "center">This is center
aligned</p>
<p align = "right">This is right
aligned</p>
</body>
</html>
Output
This is left aligned
This is center aligned
This is right aligned
HTML Style Attribute
 The HTML style attribute is used to add styles
to an element, such as color, font, size, and
more.
 The HTML style attribute has the following

syntax:
<tagname style="property:value;">
Properties can be:
a) background-color
b) Color
c) font-family
d) font-size
e) text-align
HTML Formatting
Formatting elements were designed to display
special types of text:
◦ <b> - Bold text
◦ <strong> - Important text
◦ <i> - Italic text
◦ <em> - Emphasized text
◦ <mark> - Marked text
◦ <small> - Small text
◦ <del> - Deleted text
◦ <ins> - Inserted text
◦ <sub> - Subscript text
◦ <sup> - Superscript text
◦ <u>- Underline Text
◦ <strike>- thin line through text
◦ <tt>- Monopaced font
Examples
Grouping Content
The <div> and <span> elements allow you to
group together several elements to create
sections or subsections of a page.

For example, you might want to put all of the


footnotes on a page within a <div> element to
indicate that all of the elements within that
<div> element relate to the footnotes. You
might then attach a style to this <div> element
so that they appear using a special set of style
rules.
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id = "menu" align = "middle" >
<a href = "/[Link]">HOME</a> |
<a href = “/about/contact_us.htm"> CONTACT</a> |
<a href = "/about/[Link]">ABOUT</a>
</div>
<div id = "content" align = "left" bgcolor = "white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div> </body> </html>
HTML Meta Tags
 Additional important information about a
document
 The META elements can be used to include

name/value pairs describing properties of


the HTML document, such as author, expiry
date, a list of keywords, document author
etc.
 Empty element
 Include in the head element
Meta tag attributes
[Link] Attribute & Description
1 Name
Name for the property. Can be anything. Examples include, keywords, description,
author, revised, generator etc.
2 content
Specifies the property's value.

3 scheme
Specifies a scheme to interpret the property's value (as declared in the content
attribute).

4 http-equiv
Used for http response message headers. For example, http-equiv can be used to refresh
the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.
Specifying Keywords
 You can use <meta> tag to specify
important keywords related to the
document and later these keywords are
used by the search engines while indexing
your webpage for searching purpose.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content =
"HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Document Description
 You can use <meta> tag to give a short
description about the document. This again
can be used by various search engines
while indexing your webpage for searching
purpose.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content
= "HTML, Meta Tags, Metadata" />
<meta name = "description" content
= "Learning about Meta Tags." />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Document Revision Date
 You can use <meta> tag to give
information about when last time the
document was updated. This information
can be used by various web browsers while
refreshing your webpage.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content =
"HTML, Meta Tags, Metadata" />
<meta name = "description" content =
"Learning about Meta Tags." />
<meta name = "revised" content =
"Tutorialspoint, 3/7/2014" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Document Refreshing
 A <meta> tag can be used to specify a
duration after which your web page will
keep refreshing automatically.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content =
"HTML, Meta Tags, Metadata" />
<meta name = "description" content =
"Learning about Meta Tags." />
<meta name = "revised" content =
"Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content
= "5" /> </head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Page Redirection
 You can use <meta> tag to redirect your
page to any other webpage. You can also
specify a duration if you want to redirect the
page after a certain number of seconds.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML,
Meta Tags, Metadata" />
<meta name = "description" content =
"Learning about Meta Tags." />
<meta name = "revised" content =
"Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content = "5; url
= [Link] />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Specify Character Set
 You can use <meta> tag to specify
character set used within the webpage
 By default, Web servers and Web browsers

use ISO-8859-1 (Latin1) encoding to process


Web pages. Following is an example to set
UTF-8 encoding
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags,
Metadata" />
<meta name = "description" content = "Learning about
Meta Tags." />
<meta name = "author" content = "Mahnaz
Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html;
charset = UTF-8" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags,
Metadata" />
<meta name = "description" content = "Learning about
Meta Tags." />
<meta name = "author" content = "Mahnaz
Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html;
charset = Big5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
HTML Comments
 Comment is a piece of code which is
ignored by any web browser
 Increase readability
 HTML comments are placed in between <!--

... --> tags. So, any content placed with-in


<!-- ... --> tags will be treated as comment
and will be completely ignored by the
browser.
<!DOCTYPE html>
<html>
<head> <!-- Document Header Starts
-->
<title>This is document title</title>
</head> <!-- Document Header Ends
-->
<body>
<p>Document content goes
here.....</p>
</body>
</html>
HTML Images
Insert Image
 You can insert any image in your web page

by using <img> tag.


Following is the simple syntax to use this tag.
<img src = "Image URL" ...
attributes-list/>

The <img> tag is an empty tag.


<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/[Link]" alt =
"Test Image"/>
</body>
</html>
Set Image Width/Height
 You can set image width and height based
on your requirement
using width and height attributes.
 You can specify width and height of the

image in terms of either pixels or


percentage of its actual size.
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and
Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/[Link]" alt =
"Test Image" width = "150" height = "100"/>
</body>
</html>
Set Image Border
 By default, image will have a border around
it, you can specify border thickness in terms
of pixels using border attribute. A thickness
of 0 means, no border around the picture.
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body> <p>Setting image
Border</p>
<img src = "/html/images/[Link]"
alt = "Test Image" border = "3"/>
</body>
</html>
Set Image Alignment
 By default, image will align at the left side
of the page, but you can
use align attribute to set it in the center or
right.
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/[Link]" alt
= "Test Image" border = "3" align = "right"/>
</body>
</html>
HTML - Tables
 The HTML tables are created using
the <table> tag in which
 the <tr> tag is used to create table rows
 <td> tag is used to create data cells.
 The elements under <td> are regular and

left aligned by default


<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr> <
/table>
</body>
</html>
Table Heading
 Defined by <th> tag
 centered and bold by default.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th> <th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td> <td>5000</td>
</tr>
<tr> <td>Shabbir Hussein</td> <td>7000</td>
</tr>
</table>
</body>
</html>
Cellpadding and Cellspacing
Attributes
 cellspacing attribute defines space
between table cells.
 cellpadding represents the distance

between cell borders and the content


within a cell.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th> <th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td> <td>5000</td>
</tr>
<tr> <td>Shabbir Hussein</td> <td>7000</td>
</tr>
</table>
</body>
</html>
Colspan and Rowspan
Attributes
 colspan attribute if you want to merge two
or more columns into a single column
 rowspan if you want to merge two or more

rows
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr> <th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr> <td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td>
</tr>
<tr> <td colspan = "3">Row 3 Cell 1</td> </tr> </table>
Tables Backgrounds
 You can set table background using one of
the following two ways −
 bgcolor attribute − You can set background

color for whole table or just for one cell.


 background attribute − You can set

background image for whole table or just for


one cell.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr> <th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr> <td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td>
</tr>
<tr> <td colspan = "3">Row 3 Cell 1</td> </tr> </table>
</body> </html>
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1" bordercolor = "green" background =
"/images/[Link]">
<tr> <th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr> <td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td>
</tr>
<tr> <td colspan = "3">Row 3 Cell 1</td> </tr> </table>
</body>
</html>
Table Caption
 The caption tag will serve as a title or
explanation for the table and it shows up at
the top of the table. This tag is deprecated
in newer version of HTML/XHTML.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr> <td>row 1, column 1</td>
<td>row 1, columnn 2</td>
</tr>
<tr> <td>row 2, column 1</td>
<td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>
Table Header, Body, and Footer
 Tables can be divided into three portions − a header, a
body, and a foot. The head and foot are rather similar to
headers and footers in a word-processed document that
remain the same for every page, while the body is the main
content holder of the table.
 The three elements for separating the head, body, and foot
of a table are −
 <thead> − to create a separate table header.
 <tbody> − to indicate the main body of the table.
 <tfoot> − to create a separate table footer.
 A table may contain several <tbody> elements to
indicate different pages or groups of data. But it is notable
that <thead> and <tfoot> tags should appear before
<tbody>
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr> <td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell
4</td> </tr>
</tbody>
</table>
</body>
</html>
Linking Documents
 A link is specified using HTML tag <a>.
 This tag is called anchor tag and anything

between the opening <a> tag and the closing


</a> tag becomes part of the link and a user
can click that part to reach to the linked
document. Following is the simple syntax to
use <a> tag.
<a href = "Document URL" ... attributes-
list>Link Text</a>
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "" target = "_self">Tutorials
Point</a> </body>
</html>
The target Attribute
[Link] Option & Description
1 _blank
Opens the linked document in a new
window or tab.
2 _self
Opens the linked document in the same
window/tab.
3 _parent
Opens the linked document in the parent
frame.
4 _top
Opens the linked document in the full body
of the window.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click any of the following links</p>
<a href = "/html/[Link]" target =
"_blank">Opens in New</a>
<a href = "/html/[Link]" target = "_self">Opens
in Self</a>
<a href = "/html/[Link]" target =
"_parent">Opens in Parent</a>
<a href = "/html/[Link]" target = "_top">Opens
in Body</a>
</body>
</html>
HTML Link color
 By default, a link will appear like this (in all
browsers):
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
Colors of link
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body alink = "#54A250" link = "#040404"
vlink = "#F40633">
<p>Click following link</p>
<a href = "/html/[Link]" target = "_blank"
>HTML Tutorial</a>
</body>
</html>
Image link
<!DOCTYPE html>
<html>
<body>

<h2>Image Links</h2>

<p>The image is a link. You can click on it.</p>

<a href="[Link]">
<img src="[Link]" alt="HTML tutorial"
style="width:42px;height:42px;border:0">
</a>
HTML Block and Inline
Elements
Grouping HTML Elements
 There are two important tags which we use very

frequently to group various other HTML tags (i)


<div> tag and (ii) <span> tag
 The <div> tag

 This is the very important block level tag which

plays a big role in grouping various other HTML


tags and applying CSS on group of elements.
 Even now <div> tag can be used to create

webpage layout where we define different parts


(Left, Right, Top etc.) of the page using <div> tag.
This tag does not provide any visual change on the
block but this has more meaning when it is used
with CSS.
 The <span> tag
 The HTML <span> is an inline element

and it can be used to group inline-


elements in an HTML document. This tag
also does not provide any visual change
on the block but has more meaning when
it is used with CSS.
 The difference between the <span>

tag and the <div> tag is that the


<span> tag is used with inline
elements whereas the <div> tag is
used with block-level elements.
Block Level Element<div>
 A block-level element always starts on a new line
and takes up the full width available (stretches
out to the left and right as far as it can).
 The <div> element is a block-level element.
 The <div> element is often used as a container
for other HTML elements.
 The <div> element has no required attributes,
but style, class and id are common.
 When used together with CSS,
the <div> element can be used to style blocks of
content:
Inline Element<span>
 An inline element does not start on a new line
and only takes up as much width as necessary.
 This is an inline <span> element inside a
paragraph.
 The <span> element is often used as a
container for some text.
 The <span> element has no required
attributes, but style, class and id are common.
 When used together with CSS,
the <span> element can be used to style parts
of the text:
HTML Lists
 HTML offers web authors three ways for
specifying lists of information. All lists must
contain one or more list elements. Lists may
contain −
 <ul> − An unordered list. This will list items
using plain bullets.
 <ol> − An ordered list. This will use different
schemes of numbers to list your items.
 <dl> − A definition list. This arranges your
items in the same way as they are arranged in
a dictionary.
HTML Unordered Lists
 An unordered list is a collection of related
items that have no special order or
sequence. This list is created by using
HTML <ul> tag. Each item in the list is
marked with a bullet.
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
The type Attribute
 You can use type attribute for <ul> tag to
specify the type of bullet you like. By
default, it is a disc. Following are the
possible options −
 Circle

 Square

 Disc
HTML Ordered Lists
 If you are required to put your items in a
numbered list instead of bulleted, then
HTML ordered list will be used. This list is
created by using <ol> tag. The numbering
starts at one and is incremented by one for
each successive ordered list element
tagged with <li>.
<!DOCTYPE html>
<html>
<head>
<title>HTML ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
The type Attribute
You can use type attribute for <ol> tag to
specify the type of numbering you like. By
default, it is a number. Following are the
possible options −
 <ol type = "1"> - Default-Case Numerals.
 <ol type = "I"> - Upper-Case Numerals.
 <ol type = "i"> - Lower-Case Numerals.
 <ol type = "A"> - Upper-Case Letters.
 <ol type = "a"> - Lower-Case Letters.
Example 1
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Example 2
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = “I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Example 3
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = “i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Example 4
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = “A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
The start Attribute
You can use start attribute for <ol> tag to
specify the starting point of numbering you
need. Following are the possible options −

 <ol type = "1" start = "4"> - Numerals


starts with 4.
 <ol type = "I" start = "4"> - Numerals

starts with IV.


 <ol type = "i" start = "4"> - Numerals

starts with iv.


 <ol type = "a" start = "4"> - Letters starts

with d.
 <ol type = "A" start = "4"> - Letters starts
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "1" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
HTML Definition Lists
HTML and XHTML supports a list style which is
called definition lists where entries are
listed like in a dictionary or encyclopedia. The
definition list is the ideal way to present a
glossary, list of terms, or other name/value
list.
 Definition List makes use of following three

tags.
 <dl> − Defines the start of the list
 <dt> − A term
 <dd> − Term definition
 </dl> − Defines the end of the list
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup
Language</dd> <dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer
Protocol</dd>
</dl>
</body>
</html>
HTML-Marquees
 An HTML marquee is a scrolling piece of
text displayed either horizontally across or
vertically down your webpage depending
on the settings.

 This is created by using HTML <marquee>


tag.

<marquee attribute_name =
"attribute_value"....more attributes>
One or more lines or text message or image
</marquee>
[Link] Attribute & Description

1 width
This specifies the width of the marquee. This can be a value like 10 or 20% etc.

2 height
This specifies the height of the marquee. This can be a value like 10 or 20% etc.

3 direction
This specifies the direction in which marquee should scroll. This can be a value like up, down, left or right.

4 behavior
This specifies the type of scrolling of the marquee. This can have a value like scroll, slide and alternate.

5 scrolldelay
This specifies how long to delay between each jump. This will have a value like 10 etc.

6 scrollamount
This specifies the speed of marquee text. This can have a value like 10 etc.

7 loop
This specifies how many times to loop. The default value is INFINITE, which means that the marquee loops
endlessly.

8 bgcolor
This specifies background color in terms of color name or color hex value.

9 hspace
This specifies horizontal space around the marquee. This can be a value like 10 or 20% etc.

10 vspace
This specifies vertical space around the marquee. This can be a value like 10 or 20% etc.
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of
marquee</marquee> </body>
</html>
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee width = "50%">This example will
take only 50% width
</marquee>
</body>
</html>
Example 3:
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction = "right">This text will
scroll from left to right
</marquee>
</body>
</html>
HTML-Forms
 An HTML form is used to collect user input.
The user input can then be sent to a server
for processing.
 For example, during user registration you

would like to collect information such as


name, email address, credit card, etc.
 A form will take input from the site visitor

and then will post it to a back-end


application such as CGI, ASP Script or PHP
script etc. The back-end application will
perform required processing on the passed
data based on defined business logic inside
The <form> Element
The HTML <form> element defines a form
that is used to collect user input:
<form>
.
form elements
.
</form>

<form action = "Script URL" method = "GET|


POST"> form elements like input, textarea
etc.
</form>
[Link] Attribute & Description
1 action
Backend script ready to process your passed data.

2 method
Method to be used to upload data. The most frequently used are GET and POST methods.

3 target
Specify the target window or frame where the result of the script will be displayed. It takes values
like _blank, _self, _parent etc.

4 enctype
You can use the enctype attribute to specify how the browser encodes the data before it sends it to
the server. Possible values are −
application/x-www-form-urlencoded − This is the standard method most forms use in simple
scenarios.
mutlipart/form-data − This is used when you want to upload binary data in the form of files like
image, word file etc.
HTML Form Controls
There are different types of form controls that
you can use to collect data using HTML form −
 Text Input Controls
 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 File Select boxes
 Hidden Controls
 Clickable Buttons
 Submit and Reset Button
The <input> Element
 The <input> element is the most important
form element.
 The <input> element is displayed in several

ways, depending on the type attribute.


Type Here are some examples:

Description

<input type="text"> Defines a single-line text input field

<input type="radio"> Defines a radio button (for selecting one of many


choices)

<input type="submit"> Defines a submit button (for submitting the form)


<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name =
"first_name" /> <br>
Last name: <input type = "text" name =
"last_name" /> </form>
</body>
</html>
[Link] Attribute & Description

1 type
Indicates the type of input control and for text input control it will be set to text.

2 name
Used to give a name to the control which is sent to the server to be recognized and get the
value.

3 value
This can be used to provide an initial value inside the control.

4 size
Allows to specify the width of the text-input control in terms of characters.

5 maxlength
Allows to specify the maximum number of characters a user can enter into the text box.
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id"
/> <br> Password: <input type = "password"
name = "password" /> </form>
</body>
</html>
Multiple-Line Text Input
Controls
 This is used when the user is required to
give details that may be longer than a
single sentence. Multi-line input controls are
created using HTML <textarea> tag.

<textarea rows = "5" cols = "50" name =


"description"> Enter description here...
Checkbox Control
 Checkboxes are used when more than one
option is required to be selected. They are
also created using HTML <input> tag but
type attribute is set to checkbox..
<form>
<input type = "checkbox" name = "maths"
value = "on"> Maths
<input type = "checkbox" name = "physics"
value = "on"> Physics
</form>
[Link] Attribute & Description

1 type
Indicates the type of input control and for checkbox input control it
will be set to checkbox..

2 name
Used to give a name to the control which is sent to the server to be
recognized and get the value.

3 value
The value that will be used if the checkbox is selected.

4 checked
Set to checked if you want to select it by default.
Radio Button Control
 Radio buttons are used when out of many
options, just one option is required to be
selected. They are also created using HTML
<input> tag but type attribute is set
to radio.

<form>
<input type = "radio" name = "subject" value
= "maths"> Maths <input type = "radio" name
= "subject" value = "physics"> Physics
</form>
[Link] Attribute & Description

1 type
Indicates the type of input control and for checkbox input control it will be set
to radio.

2 name
Used to give a name to the control which is sent to the server to be recognized
and get the value.

3 value
The value that will be used if the radio box is selected.

4 checked
Set to checked if you want to select it by default.
Select Box Control
 A select box, also called drop down box
which provides option to list down various
options in the form of drop down list, from
where a user can select one or more
options.
<form>
<select name = "dropdown">
<option value = "Maths"
selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
Attributes of <option> tag
[Link] Attribute & Description

1 name
Used to give a name to the control which is sent to the server to
be recognized and get the value.

2 size
This can be used to present a scrolling list box.

3 multiple
If set to "multiple" then allows a user to select multiple items from
the menu.
Attributes of <option> tag
[Link] Attribute & Description

1 value
The value that will be used if an option in the select box box is
selected.

2 selected
Specifies that this option should be the initially selected value
when the page loads.

3 label
An alternative way of labeling options
Button Controls
 There are various ways in HTML to create
clickable buttons. You can also create a
clickable button using <input>tag by setting
its type attribute to button.

<form>
<input type = "submit" name = "submit" value
= "Submit" /> <input type = "reset" name =
"reset" value = "Reset" />
<input type = "button" name = "ok" value =
"OK" />
</form>
[Link] Type & Description

1 submit
This creates a button that automatically submits a form.

2 reset
This creates a button that automatically resets form controls to their initial values.

3 button
This creates a button that is used to trigger a client-side script when the user clicks that
button.

4 image
This creates a clickable button but we can use an image as background of the button.
The <fieldset> and <legend> Elements
 The <fieldset> element is used to group related data
in a form.
 The <legend> element defines a caption for

the <fieldset> element.


<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value=
"John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value=
"Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
The <datalist> Element
 The <datalist> element specifies a list of pre-defined
options for an <input> element.
 Users will see a drop-down list of the pre-defined

options as they input data.


 The list attribute of the <input> element, must refer to

the id attribute of the <datalist> element.


<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
HTML Input Type
 Here are the different input types you can use in
HTML:
 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="number">
 <input type="password">
HTML Input types
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">
 <input type="time">
 <input type="url">
 <input type="week">
HTML – Style Sheet
You can use CSS in three ways in your HTML
document −
 External Style Sheet − Define style sheet

rules in a separate .css file and then include


that file in your HTML document using HTML
<link> tag.
 Internal Style Sheet − Define style sheet

rules in header section of the HTML


document using <style> tag.
 Inline Style Sheet − Define style sheet

rules directly along-with the HTML elements


using style attribute.
External Style Sheet
 If you need to use your style sheet to
various pages, then its always
recommended to define a common style
sheet in a separate file.
 A cascading style sheet file will have

extension as .css and it will be included in


HTML files using <link> tag.
Example: [Link]
.red { color: red; }
.thick { font-size:20px; }
.green { color:green; }
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel = "stylesheet" type = "text/css" href =
"/html/[Link]">
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body> </html>
Internal Style Sheet
 If you want to apply Style Sheet rules to a
single document only, then you can include
those rules in header section of the HTML
document using <style> tag.
 Rules defined in internal style sheet

overrides the rules defined in an external


CSS file.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type = "text/css">
.red { color: red; }
.thick{ font-size:20px; }
.green { color:green; } </style>
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
Inline style Sheet
 You can apply style sheet rules directly to
any HTML element using style attribute of
the relevant tag. This should be done only
when you are interested to make a
particular change in any HTML element only.
 Rules defined inline with the element

overrides the rules defined in an external


CSS file as well as the rules defined in
<style> element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style = "color:red;">This is red</p>
<p style = "font-size:20px;">This is thick</p>
<p style = "color:green;">This is green</p>
<p style = "color:green;font-size:20px;">This is
thick and green</p>
</body>
</html>
HTML Class
 The HTML class attribute is used to define
equal styles for elements with the same
class name.
 All HTML elements with the

same class attribute will get the same style.


 Here we have three <div> elements that

point to the same class name:


Example:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>

<div class="cities">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
Example:
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>
CSS: Position property
 Static
 Relative
 Absolute
 Fixed
 Sticky

You might also like