Scribd
Upload
14 views

Week 11 - Introducing HTML5 Basic Tags and Special Tags

The document introduces HTML5 basic tags and special tags. It discusses essential HTML tags like <head>, <body>, and <title> that structure a webpage. It also covers basic text formatting tags, lists tags like <ul> and <ol> to create unordered and ordered lists, and image and hyperlink tags like <img> and <a> respectively. The document provides examples and explanations of how to properly use these common HTML tags to format and structure a webpage.

Uploaded by

Jasmin Gamboa
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

Week 11 - Introducing HTML5 Basic Tags and Special Tags

The document introduces HTML5 basic tags and special tags. It discusses essential HTML tags like <head>, <body>, and <title> that structure a webpage. It also covers basic text formatting tags, lists tags like <ul> and <ol> to create unordered and ordered lists, and image and hyperlink tags like <img> and <a> respectively. The document provides examples and explanations of how to properly use these common HTML tags to format and structure a webpage.

Uploaded by

Jasmin Gamboa
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Computing Fundamentals 1

Introducing HTML5 Basic Tags and Special Tags

Module 009 Introducing HTML5 Basic Tags and Special Tags


At the end of this module you are expected to:
1. Identify and use the essential HTML tags
2. Apply Basic HTML tags
3. Utilize other useful HTML tags for Images and Hypertext

Lesson 1: Essential HTML Tags


HTML Tags
As discussed on the previous topic, the WWW is a set of protocols and software that allows
the global computer network (called the Internet) to display multimedia documents. These
may include text, photographs, illustrations, video, music, or computer programs.

A markup language is being utilized to create a webpage to show the multimedia documents.
The Hypertext Markup language is the standard language used on web for developing
websites which is created by Tim Berners-Lee in 1991.

HTML is the standard markup language for creating Web pages. It describes what a website
looks like. Programmers use HTML tags to design and create websites. HTML 5 is the latest
version of HTML.

HTML documents are text files that contain two parts, the web content and tags.

Content are all that is meant to be displayed on a computer screen, while the Markup or
tags are symbols that tell your browser how to display the text of a webpage and is generally
hidden from the user.

Tags should be enclosed in a pair of angle brackets < >. If you want any formatting in your
page, you have to give the browser instruction by using HTML tags.

Figure 1: Content and Markup


Course Module
Computing Fundamentals 2
Introducing HTML5 Basic Tags and Special Tags

There are two kinds of tags in HTML.


a. Those that can stand alone in your document: <TAG/>.
b. And the tags that require an opening and a closing tag:

 <TAG> - opening tag <>


 </TAG> – closing tag </>

In HTML open tags must be closed to have a valid HTML document or web page.

Figure 2: Opening and Closing Tag

Some tags don’t have text between the opening and closing tag. These are called standalone
tags. They can self-close:

a. <BR/>
Putting a line in between sentences.
b. <HR/>
Inserting a horizontal line in your page.

If you have multiple open tags you must close them in reverse order, to make it more valid
HTML instruction

Figure 3: HTML with Multiple Opening and Closing Tags


Computing Fundamentals 3
Introducing HTML5 Basic Tags and Special Tags

Everything in between the tags is affected by the instructions within the brackets. The
closing tag only differs from the opening tag by adding a ‘/’ at the beginning. Some tags
have attributes set within the brackets such as

Figure 4: HTML Tag with an Attribute

It is a good idea to capitalize the attributes, put quotes around the value of the attribute and
type the value of the attribute in lower case.

HTML5 Structure
Every web page requires five critical tags:
a. !DOCTYPE
b. HTML
c. HEAD
d. TITLE
e. BODY

The following is an example of the structure of a web page:

Figure 5: HTML5 Structure

An HTML 5 documents always begin with the <!DOCTYPE html> tag.

It should be then followed by an opening <HTML> and closing </HTML> tag.

Course Module
Computing Fundamentals 4
Introducing HTML5 Basic Tags and Special Tags

An HTML document has two parts: the HEAD and the BODY, as indicated in the sample
structure above.

As discussed in our previous topic, the purpose of any web browser is to read and display
the content of an HTML document. Browsers do not display HTML tags, and HTML utilize
these tags to determine how the document will be displayed.

<HEAD> & </HEAD> Tags


These tags in your HTML document are required. It defines the title of your page. In this
portion, you may include scripts (other web language) which instruct the browser to load
addition style sheets for your document.

Figure 6: The Head Tag

<BODY> & </BODY> tags


This portion of the HTML document contains the visible page content such as text,
hyperlinks, list, images, tables etc.

Figure 7: The Body Tag


Computing Fundamentals 5
Introducing HTML5 Basic Tags and Special Tags

Lesson 2: Basic HTML Tags


HTML Tags for Formatting Text
Basic HTML tags are divided into two different purposes. There are physical tags that are
used to organize the physical structure of a web page and are also used to tell a browser to
use a certain font style etc. The other kind would be the ones used for logical styles – these
tags are simply used to instruct a browser how the webpage content will be displayed.

Figure 8: List of HTML Tags

List Tags
List tags in HTML are used to create outlines for web pages, describe steps in directions or
in a particular process, and even in enumerating items that do not require a particular
order.
In general, there are 3 kinds of list tags:

1. Unordered lists <UL> </UL


2. Ordered lists <OL> </OL>
3. Definition lists <DL> </DL>

In creating lists, however, it is important to know that each listed item is accompanied by
an <LI></LI> tag.

Unordered List <UL> & </UL>


Use the unordered list <UL> tag to tell the browser that you will display a list of
information in no particular order. The <UL> tag is used whenever you want to display a
collection of related items which do not require a particular order or sequence.
Course Module
Computing Fundamentals 6
Introducing HTML5 Basic Tags and Special Tags

Each item on the list uses <LI> tag at the beginning and </LI> to close each item on the list.
The browser will display each item using bullets.

The HTML code above will provide the output below:

Unordered List tags use bullet in each item by default, however, you may change its default
setting by using any of the following <UL> “type” attributes: Circle, Disc, or Square.
A sample for the ‘circle’ attribute is provided below. Try exploring the other attributes by
changing the attribute to any of the remaining attributes.
Computing Fundamentals 7
Introducing HTML5 Basic Tags and Special Tags

he HTML code above will provide the output below:

Ordered List <OL> & </OL>


If it is essential for you to place your item in a numbered list instead of bullets, then you
may use the Ordered List tags <OL> and </OL> respectively at the beginning and end of the
lists.

Course Module
Computing Fundamentals 8
Introducing HTML5 Basic Tags and Special Tags

The above code will display the output below:

Ordered List Type Attribute


Similar with unordered lists, you can also change the manner by which each element in an
ordered list will be displayed using its “type” attribute
<OL type="1"> - Default numeric display.
<OL type="I"> - Upper-Case Roman Numerals.
<OL type="i"> - Lower-Case Roman Numerals.
<OL type="a"> - Lower-Case Letters.
<OL type="A"> - Upper-Case Letters.

Ordered List Start Attribute


In addition, you can also determine the item number your list would start with by using the
attribute “start” with a numeric value.
<OL type="1" start="5"> - Numerals starts with 5.
<OL type="I" start="5"> - Numerals starts with V.
<OL type="i" start="5"> - Numerals starts with v.
<OL type="a" start="5"> - Letters starts with e.
<OL type="A" start="5"> - Letters starts with E.

The above code which uses the OL type=”A” will display the result below:
Computing Fundamentals 9
Introducing HTML5 Basic Tags and Special Tags

Lesson 3: HTML Tags for Images and Hyperlinks


HTML Images
A webpage or website may also display images. An HTML file can support 3 basic image file
formats: JPG (jpeg), GIF, and PNG.
HTML uses the <IMG> tag to insert image into your website. In using the <IMG> tag, it is
important to know that this is a self-closing tag. This means that this tag does not require an
end tag.
The <IMG> tag has the following attributes:
src – a relative path or URL to where the image file is located.
alt – an alternative text which describes the image. It is useful (but optional) to always
include the alt attribute inside the <IMG> tag. The alternate text will be displayed instead of
the image if the browser cannot read or load the image file.
width – use this attribute to change the width of an image. The width value can be changed
using two different units: pixels (px) or through the percentage (%) of the screen’s actual
size.
height – use this attribute to change the height of an image. Similar to the width value, the
height value can also be changed using two different units: pixels (px) or through the
percentage (%) of the screen’s actual size.

The above code will display the output below:

Course Module
Computing Fundamentals 10
Introducing HTML5 Basic Tags and Special Tags

Changing image width using Percentage

The above code will display the output below:


Computing Fundamentals 11
Introducing HTML5 Basic Tags and Special Tags

Changing image width and height using pixels

The above code will display the output below:

Adjusting the width and height of a particular image through pixels will most probably make
image distortion while using percentage will enable you to adjust a picture proportionally.
However, it is still important to note that there are some instances wherein pixel-based
image adjustment would still be useful compared to the latter.

HTML Hyperlinks
HTML Links are called Hyperlinks. You can visit one webpage to another through links.
HTML links or hyperlinks are used as a tool to move from one accessible page or section of a
website to another.
HTML links are defined using the anchor tag or <a> tag. The <a> tag has an attribute “href”
which identifies the URL of the webpage to be opened once the link is clicked.

HTML Hyperlink Syntax

Figure 9: List of HTML Hyperlink Syntax

Course Module
Computing Fundamentals 12
Introducing HTML5 Basic Tags and Special Tags

Note: A link does not have to be a text. Links can also be an image. Anything that will be
placed in between the opening <a> and closing </a> tag, may it be a text or an image, will be
considered as a link

HTML sample codes and each sample’s corresponding results are provided in the succeeding
pages.

The above code will display the output below:

Using image as a link

The above code will display the output below:


Computing Fundamentals 13
Introducing HTML5 Basic Tags and Special Tags

References and Supplementary Materials


Books and Journals
1. Jain, R.K. (2015). IT Tools and Business Systems. Delhi, India: Khanna Book Publishing

2. McFedries, P. (2016). My Office 2016. Pearson Education

3. Rich, J.R. (2017). Working in the Cloud: Using Web-Based Applications and Tools to
Collaborate Online. Indianapolis, Indiana: QUE Publishing

Online Supplementary Reading Materials


1. HTML List. https://www.w3schools.com/html/html_lists.asp Date of Access:
October 15, 2018

2. HTML List. http://www.echoecho.com/htmllists02.htm Date of Access: October 15,


2018

3. HTML Links. https://ryanstutorials.net/html-tutorial/html-links Date of Access:


October 15, 2018

4. HTML Images. https://www.w3schools.com/html/html_images.asp Date of Access:


October 15, 2018

Online Instructional Videos


1. HTML Tutorials for Beginners 03;
https://www.youtube.com/watch?v=09oErCBjVns Date of Access: October 15, 2018
2. HTML Tutorials for Beginners 04;
https://www.youtube.com/watch?v=wvR40su_XBM ; Date of Access: October 15,
2018
3. HTML Tutorials for Beginners 05;
https://www.youtube.com/watch?v=U4UHoiK6Oo4Date of Access: October 15,
2018
4. HTML Tutorials for Beginners 07;
https://www.youtube.com/watch?v=Zy4KJeVN7Gk ; Date of Access: October 15,
2018

Course Module

You might also like