HTML Tutorial Lesson 19: Other HTML Elements

TwitterShare/Bookmark

[Lesson 18]<<[Contents]>>[Lesson 20]

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: 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 starts 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 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}

</style>
<head>
<body>

<h1 id=”Myheading”> Other Elements in HTML</h1>

<p id=”quotation”> The ship is more than the Crews</p>
</body>
</html>

You can save the file as example19.1.html

View Example 19.1 to see the effects.

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>

To view the output, click on 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 Mark-up 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>

Click on Example 19.4 to view the output

 19.5 The Iframe Element

The iframe element creates a small window on a web page. It is often used to show an advertisement, image , google map and more as shown in Example 19.5

Example 19.5

<!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>

Click on Example 19.5 to view the output.

 

[Lesson 18]<<[Contents]>>[Lesson 20]