0% found this document useful (0 votes)
45 viewsLecture 5 - HTML Attributes
The document discusses various HTML attributes that can be added to tags to define element characteristics. It explains that attributes have a name and value and provides examples of common attributes like id, title, class, and style. It also demonstrates how attributes can be used to align paragraphs and uniquely identify elements.
Uploaded by
Tanveer Ahmed HakroCopyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
45 viewsLecture 5 - HTML Attributes
The document discusses various HTML attributes that can be added to tags to define element characteristics. It explains that attributes have a name and value and provides examples of common attributes like id, title, class, and style. It also demonstrates how attributes can be used to align paragraphs and uniquely identify elements.
Uploaded by
Tanveer Ahmed HakroCopyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
/ 54
HTML Attributes
Dr. Fareed Ahmed Jokhio
HTML Attributes
• We have seen few HTML tags and their usage
like heading tags <h1>, <h2> paragraph tag
<p> and other tags.
• We used them so far in their simplest form,
but most of the HTML tags can also have
attributes, which are extra bits of information.
HTML Attributes
• An attribute is used to define the
characteristics of an HTML element and is
placed inside the element's opening tag.
• All attributes are made up of two parts: a
name and a value:
HTML Attributes
• 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.
HTML Attributes
• 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.
HTML Attributes
• Attribute names and attribute values are case-
insensitive.
• However, the World Wide Web Consortium
(W3C) recommends lowercase
attributes/attribute values in their HTML 4
recommendation
HTML Attributes
• <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>
HTML Attributes
• This will display following result:
Core Attributes
• The four core attributes that can be used on
the majority of HTML elements are:
• id
• title
• class
• style
The id Attribute
• The id attribute of an HTML tag can be used to
uniquely identify any element within an HTML
page.
• There are two primary reasons that you might
want to use an id attribute on an element:
The id Attribute
• If an element carries an id attribute as a
unique identifier it is possible to identify just
that element and its content.
• If you have two elements of the same name
within a Web page (or style sheet), you can
use the id attribute to distinguish between
elements that have the same name.
The id Attribute
• let's use the id attribute to distinguish
between two paragraph elements as shown
below.
• <p id="html">This para explains what is
HTML</p>
• <p id="css">This para explains what is
Cascading Style Sheet</p>
The title Attribute
• The title attribute gives a suggested title for
the element.
• The syntax for the title attribute is similar as
explained for id attribute:
The title Attribute
• The behavior of this attribute will depend
upon the element that carries it, although it is
often displayed as a tooltip when cursor
comes over the element or while the element
is loading.
The title Attribute
• <html>
• <head>
• <title>The title Attribute Example</title>
• </head>
• <body>
• <h3 title="Hello HTML!">Titled Heading Tag
Example</h3>
• </body>
• </html>
The title Attribute
• This will produce following result:
• Now try to bring your cursor over "Titled
Heading Tag Example" and you will see that
whatever title you used in your code is coming
out as a tooltip of the cursor.
The class Attribute
• The class attribute is used to associate an
element with a style sheet, and specifies the
class of element.
• You will learn more about the use of the class
attribute when you will learn Cascading Style
Sheet (CSS).
• So for now you can avoid it.
The style Attribute
• The style attribute allows you to specify
Cascading Style Sheet (CSS) rules within the
element.
The style Attribute
• <html>
• <head>
• <title>The style Attribute</title>
• </head>
• <body>
• <p style="font-family:arial; color:#FF0000;">Some
text...</p>
• </body>
• </html>
The style Attribute
• This will produce following result:
HTML Formatting
• If you use a word processor, you must be
familiar with the ability to make text bold,
italicized, or underlined; these are just three
of the ten options available to indicate how
text can appear in HTML and XHTML.
Bold Text
• Anything that appears within <b>...</b> element is
displayed in bold as shown below:
• <html>
• <head>
• <title>Bold Text Example</title>
• </head>
• <body>
• <p>The following word uses a <b>bold</b> typeface.</p>
• </body>
• </html>
Bold Text
• This will produce following result:
Italic Text
• Anything that appears within <i>...</i> element is displayed
in italicized as shown below:
• <html>
• <head>
• <title>Italic Text Example</title>
• </head>
• <body>
• <p>The following word uses a <i>italicized</i> typeface.</p>
• </body>
• </html>
Italic Text
• This will produce following result:
Underlined Text
• Anything that appears within <u>...</u> element is displayed
with underline as shown below:
• <html>
• <head>
• <title>Underlined Text Example</title>
• </head>
• <body>
• <p>The following word uses a <u>underlined</u> typeface.</p>
• </body>
• </html>
Underlined Text
• This will produce following result:
Strike Text
• Anything that appears within
<strike>...</strike> element is displayed with
strikethrough, which is a thin line through the
text as shown below:
Strike Text
• <html>
• <head>
• <title>Strike Text Example</title>
• </head>
• <body>
• <p>The following word uses a
<strike>strikethrough</strike> typeface.</p>
• </body>
• </html>
Strike Text
• This will produce following result:
Monospaced Font
• The content of a <tt>…</tt> element is written
in monospaced font.
• Most of the fonts are known as variable-width
fonts because different letters are of different
widths (for example, the letter ‘m’ is wider
than the letter ‘i').
• In a monospaced font, however, each letter
has the same width.
Monospaced Font
• <html>
• <head>
• <title>Monospaced Font Example</title>
• </head>
• <body>
• <p>The following word uses a <tt>monospaced</tt>
typeface.</p>
• </body>
• </html>
Monospaced Font
• This will produce following result:
Superscript Text
• The content of a <sup>…</sup> element is
written in superscript; the font size used is the
same size as the characters surrounding it but
is displayed half a character's height above the
other characters.
Superscript Text
• <html>
• <head>
• <title>Superscript Text Example</title>
• </head>
• <body>
• <p>The following word uses a
<sup>superscript</sup> typeface.</p>
• </body>
• </html>
Superscript Text
• This will produce following result:
Subscript Text
• The content of a <sub>…</sub> element is
written in subscript; the font size used is the
same as the characters surrounding it, but is
displayed half a character's height beneath the
other characters.
Subscript Text
• <html>
• <head>
• <title>Subscript Text Example</title>
• </head>
• <body>
• <p>The following word uses a <sub>subscript</sub>
typeface.</p>
• </body>
• </html>
Subscript Text
• This will produce following result:
Inserted Text
• Anything that appears with-in <ins>...</ins> element is
displayed as inserted text.
• <html>
• <head>
• <title>Inserted Text Example</title>
• </head>
• <body>
• <p>I want to drink <del>cola</del> <ins>wine</ins></p>
• </body>
• </html>
Inserted Text
• This will produce following result:
Deleted Text
• Anything that appears within <del>...</del> element is
displayed as deleted text.
• <html>
• <head>
• <title>Deleted Text Example</title>
• </head>
• <body>
• <p>I want to drink <del>cola</del> <ins>wine</ins></p>
• </body>
• </html>
Deleted Text
• This will produce following result:
Larger Text
• The content of the <big>…</big> element is displayed one font
size larger than the rest of the text surrounding it as shown
below:
• <html>
• <head>
• <title>Larger Text Example</title>
• </head>
• <body>
• <p>The following word uses a <big>big</big> typeface.</p>
• </body>
• </html>
Larger Text
• This will produce following result:
Smaller Text
• The content of the <small>…</small> element is displayed one
font size smaller than the rest of the text surrounding it as shown
below:
• <html>
• <head>
• <title>Smaller Text Example</title>
• </head>
• <body>
• <p>The following word uses a <small>small</small> typeface.</p>
• </body>
• </html>
Smaller Text
• This will produce following result:
Grouping Content
• The <div> and <span> elements allow you to
group together several elements to create
sections or subsections of a page.
Grouping Content
• 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.
Grouping Content
• <html>
• <head>
• <title>Div Tag Example</title>
• </head>
• <body>
• <div id="menu" align="middle" >
• <a href="/index.htm">HOME</a> |
• <a href="/about/contact_us.htm">CONTACT</a> |
• <a href="/about/index.htm">ABOUT</a>
• </div>
• <div id="content" align="left" bgcolor="white">
• <h5>Content Articles</h5>
• <p>Actual content goes here.....</p>
• </div>
• </body>
• </html>
Grouping Content
• This will produce following result:
Grouping Content
• The <span> element, on the other hand, can
be used to group inline elements only.
• So, if you have a part of a sentence or
paragraph which you want to group together,
you could use the <span> element as follows
Grouping Content
• <html>
• <head>
• <title>Span Tag Example</title>
• </head>
• <body>
• <p>This is the example of <span style="color:green">span
tag</span> and the <span style="color:red">div
tag</span> along with CSS</p>
• </body>
• </html>
Grouping Content
• This will produce following result:
• These tags are commonly used with CSS to
allow you to attach a style to a section of a
page.
