Scribd
Upload
14 views

Week 11 - Introducing HTML5 Basic Tags and Special Tags

ITE6101 - Computing Fundamentals

Uploaded by

study.guide
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

ITE6101 - Computing Fundamentals

Uploaded by

study.guide
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

Module 009 Introducing HTMLS 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


HTMLTags
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 web page 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 web page 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.

<TITLE> My First Webpage </TITLE>

content
tags
Figure 1: Content and Markup
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.

<TITLE> My First Webpage </TITLE>

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

<HTML>
<BODY>
<TITLE>
</TITLE>
</BODY>
</HTML>

Figure 3: HTML with Multiple Opening and Closing 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

<TAG ATTRIBUTE="value">

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.

HTMLS 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:

<!DOCTYPE html>
<HTML>
<HEAD>
Head Declarations
<TITLE> Title Declaration </TITLE>
</HEAD>
<BODY>
Body Declarations
</BODY>
</HTML>

Figure 5: HTMLS 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.


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.

<HEAD>
<TITLE> My First Web Page </TITLE>
</HEAD>
<BODY>
</BODY>

My Fim W~b Pag~

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.
..
-·" •
-.;n oovoL>
~ •• t
-~~

•
<HEAD>
<TITLE> My First Web Page </ TITLE>
</ HEAD>
<BODY>
welcome to my Page !
</ BODY>
</h or<oL

I
I I
-
17' D My First Web Page jx •
co <D "'' .1 ,,.._,.,
(L:{ YY~w •lte

\\·elcome to my Page!

Figure 7: The Body Tag


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.

Physical Tags Function Logical Tags Function

<B> </B> BOLD <EM> </EM> Emphasized Text

<I> </I> Italics <STRONG> </STRONG> Strongly'


emphasized Text

<U> </U> Underline <CITE> </CITE> Text in Citation

<TT> </TT> Monospace <HR/> Horizontal Line

<SUB> </SUB> Subscript <BR/> Line Break

<SUP> </SUP> Superscript <PRE> </PRE> Pre-Formatted


Text

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 <Ll></Ll> 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.
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.

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> Unordered list </TITLE>
</HEAD>
<BODY>
list of Colors
<Ul>
<LI> Red </LI>
<LI> Blue </LI>
<LI> Green </ LI>
<LI> Black </LI>
</Ul >
</BODY>
</HTML>

The HTML code above will provide the output below:

List of Colors

• Red
• Blue
• Green
• Black
List of Colors

• Red
• Blue
• Green
• Black

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.
<!DOCTYPE ht mt>
<HTHL>
<HEAD>
<TITLE> Unordered Lis t </TITLE>
</HEAD>
<BODY>
Lis t of Cotors
<U L type = "ci rcte">
<LI > Red </ LI>
<LI> Btue </LI>
<LI> Green </LI>
<LI> Btack </LI>
</U L>
</BODY>
</HTHL>

he HTML code above will provide the output below:

List of Colors

o Red
o B lue
o Green
o Black
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.
<! DOCTYPE html>
<HTML>
<HEAD>
<TITLE> Ordered List </TITLE>
</HEAD>
<BODY>
List of Colors
<OL>
<LI> Red </LI>
<LI> Blue </LI>
<LI > Green </LI>
<LI> Black </LI>
</OL>
</BODY>
</HTML>
The above code will display the output below:

L ist of C o lo rs

1. R ed
~ - Blue
3 . Green
4 . B lack

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="l">- 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.

<!DO CTYPE html>


<HTML>
<HEAD>
<TITLE> Ordered list </TITLE>
</ HEAD>
< BO DY>
List o f Colors
<Ol type = "A">
<LI> Re d </LI>
< LI> Blue </LI>
<L I > Green </ll>
<L I > Black </L I >
</Ol>
Another List of Colors
<Ol type "A" start = " 5">
<LI> Red </LI>
<LI> Blue </L I >
<L I > Green </L I >
<Ll> Black </ll>
</OL>
</BODY>
</HTML>

The above code which uses the OL type="A" will display the result below:
ltst of Co!Of'l

ARtd
BB~
C Green
D Black

Anomer Lm of Co!Ofi

E. \\lute
F Orange
G \!olet
I! Gray
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), GlF, 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(%) ofthe screen's actual size.

<!DOCTYPE html.>
<HTM L>
<H EAD>
<TITLE> Images </TITLE>
</HEAD>
<BODY>
<img src = " AMA_Unive rsity_ l.ogo . png" al.t="AMA Universi ty Logo"/>
</BODY>
</HTML>

The above code will display the output below:


UNIVERSITY

Changing image width using Percentage

<!DOCTYPE htmt>
c:HTML>
<HEAD>
<TITLE> Images </TITLE>
</HEAD>
<BODY>
Act ual image size
<br><br>
<img src ~ "AMA_University_logo . png" att~"AMA University Logo"/>
<br><br>
Image r esized using pe rcentage
<br><br>
<img src ~ "AMA_Un ive rs i ty_logo . png" alt="AMA Unive r sity Logo" width ~ "50%"/>
</BODY>
</HTM L>

The above code will display the output below:


e mal unage s1ze

UNIVERSITY
Changing image width and height using pixels
< !DDCTYPE html>
<HTML>
<HEAD>
<TITLE> I mages </TITLE>
</HEAD>
<BODY>
Actual image size
<br><br>
<img src a " AMA_University_logo.png" alt5"AMA Unive rsity Logo" />
<br><br>
Image resized us ing Pixel
<br><b r>
<i mg src = "AMA_University_logo . png" alt•"AMA University Logo" width • "290px" height • "12Bpx"/>
</BODY>
</HTML>

The above code will display the output below:

Actual unage s tze

UNIVERSITY
Image restZed usmg PL-<el

M~
UNIVERSITY
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 web page to be opened once the link is clicked.

HTML Hyperlink Syntax

J <a href="URL"> text link </a>


Figure 9 : List of HTML Hyperlink Syntax
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.

<! DO CTYPE html>


<HTML>
<HEAD>
<TITLE> Links </TITLE>
</HEAD>
<BODY>
Below ~s a link to fac ebook page .
<br>
<a href = "www. face book . com"> Click ME </a>
</BO DY>
</ HTM L>

The above code will display the output below:

Below is a link t o facebook p age_


Click :\1£
Using image as a link

<IDOCTYPE html>
<HTML>
<HEAD>
<TITLE> Links </TITLE>
</HEAD>
<BODY>
Below 1s a link to facebook page .
<br>
<a href = "www. facebook . com">
<img src="fb . png" alt="FB logo" width="50px" height="50px"/>
</a>
</BODY>
</HTML>

The above code will display the out ut below:


~~~~~~~----------------~
Below is a link to facebook page.
References and Supplementary Materials
Books and Journals
1. Jain, R.K. (2015).1T 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:jjwww.w3schools.comjhtml/html lists.asp Date of Access:
October 15, 2018

2. HTML List. http:ffwww.echoecho.comfhtmllists02.htm Date of Access: October 15,


2018

3. HTML Links. https:/fryanstutorials.netfhtml-tutorialjhtml-links Date of Access:


October 15, 2018

4. HTML Images. https:fjwww.w3schools.comfhtmlfhtml images.asp Date of Access:


October 15, 2018
Online Instructional Videos
1. HTML Tutorials for Beginners 03;
https:f/www.youtube.comfwatch?v=09oErCBjVns Date of Access: October 15, 2018
2. HTML Tutorials for Beginners 04;
https:jjwww.youtube.comjwatch?v=wvR40su XBM ; Date of Access: October 15,
2018
3. HTML Tutorials for Beginners OS;
https:ffwww.youtube.comjwatch?v=U4UHoiK60o4Date of Access: October 15,
2018
4. HTML Tutorials for Beginners 07;
https:jjwww.youtube.comfwatch?v=Zy4K]eVN7Gk ; Date of Access: October 15,
2018

You might also like