454 Rizal Ave Ext Cor 9th Ave, Grace Park, Caloocan

COLLEGE OF COMPUTER STUDIES

Course Code : ITFUND

Course Title : Introduction to Computing

Module 2
HTML Tags

In this course, the students will be taught to create basic structure and syntax of HTML.

At the end of this lesson, the student will be able to:

1. Use the heading and paragraph tags.

2. Create different HTML formatting tags

3. Input a line breaks and spaces.

2.1 HTML Elements

An HTML element is defined by a start tag, some content, and an end tag:

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Note: Some HTML elements have no content (like the <br> element). These elements are called empty
elements. Empty elements do not have an end tag!

HTML is Not Case Sensitive

HTML tags are not case sensitive: <P> means the same as <p>.

The HTML standard does not require lowercase tags, but W3C recommends lowercase in HTML, and
demands lowercase for stricter document types like XHTML.
 454 Rizal Ave Ext Cor 9th Ave, Grace Park, Caloocan

2.2 HTML Heading

Heading elements have opening (e.g., <h3>) and closing (e.g., </h3>) tags to enclose the topic or section
title to be used. There are six levels of headings and all except the first level (i.e., <h1>) can be employed
over and over throughout the HTML document. The first level heading should be your main or umbrella
topic, and the other levels only your subtopics, so that the Web users will not be confused.

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Headings Are Important

Search engines use the headings to index the structure and content of your web pages. Users often skim
a page by its headings. It is important to use headings to show the document structure. <h1> headings
should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

2.3 HTML Paragraph

Headings may be used to introduce paragraphs. The paragraph element tags are simply <p> and </p>.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin)
before and after a paragraph.
 454 Rizal Ave Ext Cor 9th Ave, Grace Park, Caloocan
As much as possible, paragraphs must be kept short. Try typing the following in your Notepad and see
what happens:

If you want to break the paragraph into three, enclose each sentence in paragraph tags. Each sentence
will now become its own paragraph.

2.3 HTML Line Breaks

The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph.

Remember that there is always a line break between paragraphs so you do not have to put <br />,
unless you want another Enter key effect. Look at the lower half of the screenshot.
 454 Rizal Ave Ext Cor 9th Ave, Grace Park, Caloocan

2.4 Space

Spacing in HTML is overlooked by browsers. For example, browsers interpret an entry like “t h i s” (with
two spaces between each letter) as only “t h i s” (with only one space between each letter), because
multiple spaces are still considered as one. You can, however tell the browser to register spaces by typing
“&nbsp;” for each space that you want. You can also use the “&nbsp;” command to connect two words
that should always be seen together in the same line, rather than having those two words broken up by a
line break if it reaches the limit of the paragraph length allowed in the browser window display.

For example:

<p>My favorite band is blink 182. I bought all the CDs of blink 182

because I like their music so much.</p>

To make sure that “blink” and “182” are not split in the second sentence due to space constraints of the
browser window, you need to type out “blink&nbsp;182” instead of simply typing “blink 182”. In this case,
“&nbsp;” is a special character set that the browser translates as non-breaking space.

2.5 HTML Text Formatting

Some of Formatting elements, it was designed to display special types of text:

• <b> - Bold text

• <strong> - Important text
• <i> - Italic text
• <u> - Underline
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
 454 Rizal Ave Ext Cor 9th Ave, Grace Park, Caloocan
The following is an example using some of these tags:

APPLICATION:

Create a webpage about your autobiography. It should contain at least 5 paragraphs, consist of no less
500 words using different formatting tags.

ASSESSMENT

NAME: _______________________________________________ SCORE: _________________

YEAR & SECTION: _______________________________________ DATE: _________________

A. Answer the following.

1. When and how do you use the line break tag?

________________________________________________________________
2. What is the tag used for creating paragraphs?
________________________________________________________________
3. How many levels of headings does HTML support?
________________________________________________________________
4. How is a non-breaking space represented in HTML?
________________________________________________________________
5. Give example of Text Formatting tag and its effect.
________________________________________________________________
 454 Rizal Ave Ext Cor 9th Ave, Grace Park, Caloocan
B. Match the HTML tags with the correct function.

Write the letter of the correct answer on the blank.

1. <H1></H1> _____ a. defines the largest header

2. <br /> _____ b. has the same effect as <i></i> tag

3. <em></em> _____ c. inserts a single line break

4. <strong></strong> _____ d. inserts a non-breaking space

5. &nbsp; _____ e. has the same effect as <b></b> tag