Scribd
Upload
74 views35 pages

By Dinesh Sharma

This document provides an overview of HTML (Hypertext Markup Language) including what it is, how it works using tags to structure and style text, common tags like headings, paragraphs, lists, and links, and attributes that can be included with tags. It also discusses nesting of lists, definition lists, comments, and more. The goal is to explain the basics of HTML for designing web pages.

Uploaded by

DrDinesh Sharma
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
74 views35 pages

By Dinesh Sharma

This document provides an overview of HTML (Hypertext Markup Language) including what it is, how it works using tags to structure and style text, common tags like headings, paragraphs, lists, and links, and attributes that can be included with tags. It also discusses nesting of lists, definition lists, comments, and more. The goal is to explain the basics of HTML for designing web pages.

Uploaded by

DrDinesh Sharma
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
You are on page 1/ 35

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
• <!--- and --->
• 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
• <html> <head> <title>HTML Unordered
List</title> </head> <body> <ul type =
"square"> <li>Beetroot</li> <li>Ginger</li>
<li>Potato</li> <li>Radish</li> </ul> </body>
</html>
Examples
• <html> <head> <title>HTML Unordered
List</title> </head> <body> <ul type = "disc">
<li>Beetroot</li> <li>Ginger</li>
<li>Potato</li> <li>Radish</li> </ul> </body>
</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>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 −
• <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>
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
• <html> <head> <title>HTML Ordered
List</title> </head> <body> <ol type = "i" start
= "4"> <li>Beetroot</li> <li>Ginger</li>
<li>Potato</li> <li>Radish</li> </ol> </body>
</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>

You might also like