JavaScript Tutorial JavaScript Examples JQuery Tutorial CSS Tutorial HTML Tutorial About Us

Lesson 3: HTML Elements


3.1 More HTML Elements

In this lesson , we will show you more HTML elements.  Some elements have properties or attributes. For example, the header element contains attributes such as id and align that specify the header location and position. Take a look at the following examples:

Example 3.1

The align=center attribte will align the heading to the centre position. The HTMLcode is:

<h1 align=center>Welcome to HTML Tutorial</h1>

Example 3.2

The img element comprises height and width attributes that define an image's size and the src attribute that links to the location of the image file. The attribute alt is to show the description of an image if the browser cannot render the image.

<img src="html.jpg"  height="138" width="200" alt="HTML banner">

The following table shows some common elements and some of their attributes:

Element

Description

<h1 align="position"></h1> Element that aligns the heading to the left, right and the centre
<strong></strong> Element that strongly emphasizes the bold format.
<em></em> Element that gives more emphasis to the italic text.
<pre></pre> Element that preserves the original text.
<sub></sub> Element that formats text as subscript.
<sup></sup> Element that formats text as superscript.
<hr> Element that inserts a horizontal ruler. Closing tag is not required here.
<hr width="n%"> Element that sets the width of a horizontal ruler.
<hr size="m"> Element that sets the height of a horizontal ruler.
<hr nonshade> Element that creates a ruler without the shadow.
<p></p> Element that defines a  paragraph.
<p align="position"></p> Element that aligns the paragraph to the left, right or centre.

Example 3.3

Now, copy the following paragraph and paste it into your notepad or any suitable text editor. Save the file as bean.html.

<html>
<head>
<title>Mr Bean</title>
</head>
<body>
<h1 align="center"><u>All about  Mr. Bean</u></h1>
<hr>
<h2 align="right">Date: Nov 30,2000</h2>
<hr width="50%" size="10">
<p> <strong>Mr. Bean</strong>is a 50 years old boy, currently studying at  <em>Cambridge</em>. His  lecturer is <b>Mr. Mike Tyson</b>. There are 33 students in his class.</p>
<p align="center"> Here are some facts about Bean</p>
<pre>
Date of Birth  :01011900
Height            : 100 cm
Weight           : 100 kg
Marital Status : Single
Address           : 1, Wall street, London,UK.
</pre>
<hr nonshade>
<P align="center"> If you wish to match make for Mr. Bean, please contact him through the following phone number:<b>911<b></p>
<hr>
</body>
</html>

The output

All about Mr. Bean


Date: Nov 30,2000


Mr. Bean is a 50 years old boy, currently studying at Cambridge. His lecturer is Mr. Mike Tyson. There are 33 students in his class.

Here are some facts about Bean

Date of Birth  :01011900
Height            : 100 cm
Weight           : 100 kg
Marital Status : Single
Address           : 1, Wall street, London,UK.

If you wish to match make for Mr. Bean, please contact him through the following phone number:911



❮ Previous Lesson Next Lesson ❯


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