Html Tutorial Lesson 2: HTML Elements Part 1

TwitterShare/Bookmark

[Lesson 1]<<[Contents]>>[Lesson 3]

In order to create an HTML document, we can use GUI-based editor such as Microsoft Frontpage , Adobe Dreamweaver or other editors, but the best way to learn HTML is to use a plain text editor. Here we recommend using Microsoft’s Notepad.

HTML uses elements to specify a document’s structure,  to provide information and to format its contents(* Element and tag can be used interchangeably). An  HTML element consists of a start tag  <element name>, its contents and  an end tag</element name>. Some elements only consists of a start tag. The structure of an HTML element is

<element name>element content</element name>

For example: <H1>Heading 1</H1>, where <H1> is the open tag and </H1> is an end tag . However, some of the tags such as <IMG> do not required a closing tag.

Here is the summary of some basic elements:

 

Element

Description

<html></html> Element that creates the HTML document
<head></head> Element that denotes the first part of the HTML document. It provides descriptions and information pertaining to the webpage.
<title></title> Element that defines the title of the web page.
<body></body> Element that defines the main contents of the HTML document.
<h1></h1> Element that indicates the headings. There are 6 headings, from h1 to h6.
<b></b> Element that displays bold text.
<i></i> Element that displays italic text.
<u></u> Element that underlines the text.
<br> Element that indicates a line break. No closing tag is required for this element.

 

Example 2.1

Now, open the notepad in windows and type the following codes:
[You might also copy the codes and paste them into your notepad]

<html>
<head>
<title>My sample HTML document</title>
</head>
<body bgcolor=”#ffff99″>
<h1><u>My sample HTML document</u></h1>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<b> Bold text</b>
<br>
<i>Italic text</i>
<br>
<u>Underlined text</u>
<b><i>Bold and italic text</i></b>
<b><i><u>Bold, italic and underlined text</u></i></b>
<h1><i>Italic heading</i></h1>
<h3><u>Underlined heading</u></h3>
</body>
</html>

To save the file, click on the file menu and select Save As, change file type to All files, save the file as example1.html in My document. (You can also use a different file name and folder, just make sure that the file type is .html)

To view the web page, start Firefox, Google Chrome, IE or any web browser and open the above file. Alternatively, you can open the web page by right-clicking on the file then click Open with… and select your desired web browser.

The output

My sample HTML document

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

Bold text

Italic text

Underlined text
Bold and italic text
Bold, italic and underlined text

Italic heading

Underlined heading

 

[Lesson 1]<<[Contents]>>[Lesson 3]