By Dinesh Sharma

HTML
By
DINESH SHARMA
HTML
• Hypertext Markup Language
• Constitutes a collection of platform
independence style.
• Style indicated by markup tags
• It is effective language for designing
webpages.
What is HTML really
• Plain-text document can be created using any
text editor.
• WYSIWYG editors are also available
• Hypertext– is a kind of textual document
where you can have links to other document.
In HTML this kind of links are allowed. So that
in sense HTML is Hypertext.
• Markup– In HTML all style are specified by
something called markup tags.
What is markup language
• One where we can embed. Special
tags or formatting comments in the
text.
• To describe how the text should be
displayed/printed.
HTML is markup language
• Special formatting codes( called tags) to
adjust fonts, create bulleted lists, create
forms, display images, create tables etc.
HTML tags
• The left and right brackets are used to enclose
all special instructions called tags.
• Two classes of tags :
• <i> Good Morning </i>
• Those which appear individually.
• <img src=“baby.jpg”/>
• most of the tags belongs to first category.
Some Points
• 1. Most of the tags belongs to the first
category.
• 2. Tags are case insensitive
• 3. Tags may be nested
• Most browsers have a view source menu
options.
• 4. Browsers ignore all extra spaces and
carriage returns within a html documents.
• It is good practice to use white sapce in a html
document
• Improve readability
• Some tags can have one or more attributes to
define some additional characteristics of the
tags
• <img src=“baby.img”>
• <body text=“white” bgcolor=“red”>
• Unrecognized tags
• Browsers normally ignore tags it does not
recognize.
Comment Line
• Comment are included between
• 
• Comments can not be nested
• <--- hello html --->
• <--- -------------------------
• --->
Head And Body Tags
• A html documents consists of two major
properties
• HEAD - contains information about the
document like title and “meta” data
describing the contents.
• BODY – contains the actual matter of the
document.
• Gets displayed within the browsers window.
Meta Tag
• Used to provide information about document
• Keyword or description to add search engine.
Title
• Usually appears on the title war of the
browser window.
Body Tag
• Attribute
• Background=url -> specifies an image file to be
used as filling background
• Bgcolor = color -> Set the background color of
the document.
• Text = color -> set the default color for the
normal text of the document.
Cont..
• Alink= color -> set the color of active link
• Link=color -> set the default color for all the
links of the documents
• Vlink =color -> set the color for the visited link
Strike Text
• Anything that appears

within <strike>...</strike> element is displayed
with strikethrough, which is a thin line through
the text as shown below
Example
<html>
<head>
<title>Strike Text Example</title>
</head> <body>
<p>The following word uses a
<strike>strikethrough</strike> typeface.</p>
</body>
</html>
List
• 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.
Example
• <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
−
Example
List</title> </head> <body> <ul type =
"square"> <li>Beetroot</li> <li>Ginger</li>
</html>
Examples
List</title> </head> <body> <ul type = "disc">
</html>
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>.
Example
• <html> <head> <title>HTML Ordered
List</title> </head> <body> <ol>
<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 −
List</title> </head> <body> <ol type = "1">
</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 −
Example
List</title> </head> <body> <ol type = "i" start
= "4"> <li>Beetroot</li> <li>Ginger</li>
</html>
Definition List
• Specified using the tag
• <DL>………</DL>
• Each definition comprises of a definition term
(<DT>) and a definition description (<DD>)
• Web browsers format each definition on a
new line and indent it.
Example
• <h1> Some Important Protocol </h1>
• <DT>
• <DT>TCP
• <DD> Transmission Protocol
• <DT>UDP
• <DD>User Datagram Protocol
• <DT>IP
• <DD> Internet Protocol
• </DT>
Nesting of Lists
• Any List can be nested within another list
• When unnumbered lists are nested , the
browser automatically uses a different bullets
symbol for each level.
• When numbered list are nested by default
every level is numbered using the number
(1,2,3…)
Example
• <OL>
• <li> one</li>
• <li> two</li>
• <OL>
• <li> Inner one</li>
• <li> Inner two</li>
• </OL>
• <li> Three</li>
• </OL>
Hyperlink
• HTML has ability to text and/or images to
another documents or section of a document.
• These links are called Hyperlinks.
• Browsers by default highlights the hyperlinks
with color and/or underline
• Specify using the anchor tag
• <a>…….</a>
Cont..
• Require an attribute called “HREF” which
specify the path of the resources to be linked
• <a href=“google.com”> Search </a>

By Dinesh Sharma

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

By Dinesh Sharma

Uploaded by

Copyright:

Available Formats

HTML

• Anything that appears

• An unordered list is a collection of related

• You can use type attribute for <ul> tag to

• If you are required to put your items in a

• You can use type attribute for <ol> tag to

• You can use start attribute for <ol> tag to

• <a href=“google.com”> Search </a>

You might also like