JavaScript Tutorial JavaScript Examples CSS Tutorial HTML Tutorial About Us

Lesson 19: Other HTML Elements


In preceding lessons, we have learned how to use many types of HTML elements in designing a web page. Now we shall examine some other elements which we have not encounter before. The elements we are going to learn in this lesson are id attribute, class attribute, div, span, and iframe.

19.1: The Id Attribute

We can include an id attribute in any HTML element. The function of the id attribute is to identify a particular element uniquely. The value of an id should start with a letter or an underscore, not any other characters. No two elements should have the same id value. The structure is shown in the following example:

<html>
<h1 id="Myheading"> Other  Elements in HTML</h1>
<p id="quotation"> The ship is more than the Crews</p>
</html>

The id is used by CSS in creating a unique style for the text enclosed between the tags. Please use a text editor such as Notepad to enter the following HTML codes that incorporate some CSS code. Don't worry about the CSS code first as we will learn it in CSS Tutorial.

Example 19.1

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#myheading {
color= white;
background-color: blue;
text-transform: uppercase;}
#quotation{
color:red;
font-size:15pt;
font-weight:bold;
   }
</style>
<head>
<body>
<h1 id="Myheading"> Other Elements in HTML</h1>
<p id="quotation"> The ship is more than the Crews</p>
</body>
</html>
The Output

Other HTML Elements

The ship is more than the Crews

19.2  The Class Attribute

The class attribute is also a kind of identifier in HTML but instead of uniquely identifying one single element, it identifies several elements together. It can be used with any html element. Its usage is demonstrated in Example 19.2

Example 19.2

<!DOCTYPE html>
<head>
<title> The Class Attribute</title>
<style type="text/css">
.redBold{ color:red;
font-weight: bold}
.blueText{color:blue}
</style>
<body>
<h2 class="redBold"> The Class attribute</h2>
<p class="blueText">The class attribute is also a kind of identifier in HTML but instead of uniquely identifying one single element, it identifies several elements together. It can be used with any html element. Its usage is demonstrated in Example 19.2
</p>
</body>
</html>
The Output

The Class attribute

The class attribute is also a kind of identifier in HTML but instead of uniquely identifying one single element, it identifies several elements together. It can be used with any html element. Its usage is demonstrated in Example 19.2

19.3  The div Element

The div element is used to group a set of elements together. It will create a new section on the web page defined by the <div> tag, as shown in Example 19.3.

Example 19.3

<!DOCTYPE html>
<html>
<head>
<title>The div element</title>
</head>
<body>
<div id="intro">
<p>This is the one-stop HTML tutorial and resource centre. We present our tutorial in a straight forward manner to help everyone master HTML effortlessly.
Besides, you can learn how to build a website by learning HTML. On top of that, We publish articles from time to time to update knowledge on Hypertext Markup Language.
The tutorial topics are:
</p>
</div>
<div>
<ol>
<li>Introduction</li>
<li>HTML Elements</li>
<li>Creating Listson</li>
<li>Creating Tables</li>
<li>Creating Frames</li>
<li>Building Links</li>
</ol>
</div>
</body>
</html>

Click on Example 19.3 to view the output. Note that adding an id can allow styling using CSS later.

19.4 The span Element

The span element allows us to format or create style  a part of the paragraph so that it can be differentiated with the surrounding text.  It is usually used together with the class attribute in CSS, as shown in Example 19.4

Example 19.4

<!DOCTYPE html>
<html>
<head>
<title>The Span element</title>
<Style type="text/css">
.BoldRed{font-weight: bold;
color:red}
.ItalicBlue{ font-style: italic;
color:blue}
.UnderlineBoldGreen{font-weight: bold;
color:green;
font-style: italic;
font-size:1.2em }
</style>
</head>
<body>
<h1>The Span Element</h1>
<p><span class="BoldRed">The span element</span> allows us to format or create style for a part of the paragraph
<span class="ItalicBlue">so that it can be differentiated with the surrounding text.</span>
It is usually used together with the class attribute in CSS, <span class="UnderlineBoldGreen">as shown in Example 19.4</span>
</body>
</html>
The Output

The Span Element

The span element allows us to format or create style for a part of the paragraph so that it can be differentiated with the surrounding text. It is usually used together with the class attribute in CSS, as shown in Example 19.4

19.5 The Iframe Element

The iframe element cr

<!DOCTYPE html>
<head>
<title> The Iframe Element</title>
</head>
<body>
The following iframe displays a book advertised by Amazon.com.
<p><iframe style="width: 120px; height: 240px;" src="http://rcm-na.amazon-adsystem.com/e/cm?t=liewvoonkiong&amp;o=1&amp;p=8&amp;l=as1&amp;asins=1467975192&amp;ref=qf_sp_asin_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr" height="240" width="320" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
The following iframe element shows a Google map
<p>
<iframe src="https://www.google.com/maps/embed?
pb=!1m18!1m12!1m3!1d24180.66877716423!2d-73.98581672337055!3d40.74918724635399!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!
1s0x0000000000000000%3A0x79997d3983197d7c!2sMadison+Square+Park!5e0!3m2!1sen!2smy!4v1416822103588"
width="600" height="450" frameborder="0" style="border:0"></iframe></p>
</body>
</html>
The Output

The following iframe element shows a Google map


❮ Previous Lesson Next Lesson ❯


Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy