Technical

Vocational
Livelihood
QUARTER

Computer Programming

TECHNICAL VOCATIONAL LIVELIHOOD

Computer Programming (ICT) – Grade 11
Quarter 1 – Module 5: HTML5 Syntax and Links First Edition, 2020

Republic Act 8293, section 176 states that: No copyright shall subsist in
any work of the Government of the Philippines. However, prior approval of the
government agency or office wherein the work is created shall be necessary for
exploitation of such work for profit. Such agency or office may, among other things,
impose as a condition the payment of royalties.

Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand

names, trademarks, etc.) included in this module are owned by their respective
copyright holders. Every effort has been exerted to locate and seek permission to use
these materials from their respective copyright owners. The publisher and authors
do not represent nor claim ownership over them.

Published by the Department of Education Division of Pasig City

Development Team of the Module

Writers : John Michael A. Bautista, Dan Reinnier C. Amigo
Editors : Ma. Lerma I. Cantanero
Reviewers : Rowena O. Dimagiba
Illustrator:
Layout Artist:
Management Team: Ma. Evalou Concepcion A. Agustin
Assistant Schools Division Superintendent
OIC-Schools Division Superintendent
Aurelio G. Alfonso, Ed. D.
OIC-Assistant Schools Division Superintendent
Victor M. Javena, Ed. D.
OIC – Chief Curriculum Implementation Division
Chef School Governance and Operation Division

Education Program Supervisors

Librada L. Agon EdD (EPP/TLE/TVL/TVE)
Liza A. Alvarez (Science/STEM/SSP)
Bernard R. Balitao (AP/HUMSS)
Joselito E. Calios (English/SPFL/GAS)
Norlyn D. Conde EdD (MAPEH/SPA/SPS/HOPE/A&D/Sports)
Wilma Q. Del Rosario (LRMS/ADM)
Ma. Teresita E. Herrera EdD (Filipino/GAS/Piling Larang)
Perlita M. Ignacio PhD (EsP)
Dulce O. Santos PhD (Kindergarten/MTB-MLE)
Teresita P. Tagulao EdD (Mathematics/ABM)

Printed in the Philippines by Department of Education – Division of Pasig City

 Computer
Programming

QUARTER 1
Introductory Message

For the facilitator:

Welcome to the Computer Programming for the ICT Module on HTML5 Syntax and
Links!

This module was collaboratively designed, developed and reviewed by educators from
Schools Division Office of Pasig City headed by its Officer-In-Charge Schools Division
Superintendent, Ma. Evalou Concepcion A. Agustin in partnership with the Local
Government of Pasig through its mayor, Honorable Victor Ma. Regis N. Sotto.
The writers utilized the standards set by the K to 12 Curriculum using the Most
Essential Learning Competencies (MELC) while overcoming their personal, social,
and economic constraints in schooling.

This learning material hopes to engage the learners into guided and independent
learning activities at their own pace and time. Further, this also aims to help learners
acquire the needed 21st century skills especially the 5 Cs namely: Communication,
Collaboration, Creativity, Critical Thinking and Character while taking into
consideration their needs and circumstances.

In addition to the material in the main text, you will also see this box in the body of
the module:

Notes to the Teacher

This contains helpful tips or strategies that
will help you in guiding the learners.

As a facilitator you are expected to orient the learners on how to use this module.
You also need to keep track of the learners' progress while allowing them to manage
their own learning. Moreover, you are expected to encourage and assist the learners
as they do the tasks included in the module.
For the learner:

Welcome to the Computer Programming for the ICT Module on HTML5 Syntax and
Links!

The hand is one of the most symbolized part of the human body. It is often used to
depict skill, action and purpose. Through our hands we may learn, create and
accomplish. Hence, the hand in this learning resource signifies that you as a learner
is capable and empowered to successfully achieve the relevant competencies and
skills at your own pace and time. Your academic success lies in your own hands!

This module was designed to provide you with fun and meaningful opportunities for
guided and independent learning at your own pace and time. You will be enabled to
process the contents of the learning material while being an active learner.

This module has the following parts and corresponding icons:

Expectations - These are what you will be able to know after

completing the lessons in the module

Pretest - This will measure your prior knowledge and the

concepts to be mastered throughout the lesson.

Recap - This section will measure what learnings and skills

that you understand from the previous lesson.

Lesson- This section will discuss the topic for this module.

Activities - This is a set of activities you will perform.

Wrap-Up- This section summarizes the concepts and

applications of the lessons.

Valuing-this part will check the integration of values in the

learning competency.

Posttest - This will measure how much you have learned from
the entire module. Ito po ang parts ng module.
 EXPECTATIONS

At the end of this module the learner will be able to:

1. define syntax;
2. understand the importance of using the correct syntax;
2. identify what is a link
3. differentiate link and hyperlink; and
4. utilize links in hmtl document.

PRETEST

Directions: Circle the letter that corresponds to the correct answer.

1. Which of the following refers to the spelling and grammar of a programming

language?
A. Codes B. Syntax C. Semantic D. Markup Language

2. Which of these errors occur when there is a mistake in the spelling of your
command or function?
A. Bug B. Logical error C. Syntax error D. Semantic error

3. All of these are features supported by HTML5 except for one, which is it?
A. Uppercase tag names.
B. Attribute values are optional.
C. Quotes are a must for attributes.
D. Closing empty elements are optional.

4. Which of these tags is used to indicate a link?

A. <a> B. <href> C. <src> D. <script>

5. This is a link that takes you from one domain to another via references called
anchor texts.
A. Cross Link B. Hyperlink C. Internal link D. External Link
 RECAP
We have learned that there should be a proper procedure that a program
should follow in order for it to function properly. In flowchart we have learned that
there is a procedure and proper structure that we follow; a step-by-step process that
we must understand to solve a task.

LESSON

Syntax
In programming, syntax refers to the rules that specify the correct combined
sequence of symbols that can be used to form a correctly structured program using
a given programming language. Programmers communicate with computers through
the correctly structured syntax, semantics and grammar of a programming language.
A syntax contains strings similar to words, much like a human language. Correctly
formed syntax strings produce syntactically correct sentences within a specified
programming language.

Syntax describes how language variables and characters may be combined

into strings. Semantics gives meaning to the combined strings, while grammar
converts characters into tokens or character strings.

Common program errors

Fixing code is easy when you know what’s wrong.

1. Syntax errors: errors due to the fact that the syntax of the language is not
respected. Meaning you misspelled a command or used a function incorrectly,
sometimes this is caused by sloppy typing. These errors are usually called
crashes.

function getPassword(){
var correct "HTML5";
var guess = ";
while (guess != correct){
guess = prompt("Password?");
} // end while
 alert("You may proceed");
} // end getPassword

Figure 1: https://www.dummies.com/web-design-development/javascript/how-to-resolve-javascript-syntax-errors-for-html5-and-css3-programming/

2. Logical errors: errors due to the fact that the specification is not respected.
Normally called bugs, these errors are nearly impossible to solve just by
looking at the codes. Worse, when you run the program in your browser, it
won’t report an error. It won’t work correctly, but the code is all technically
correct. Rather than telling it to do something illegal (which would result in a
syntax error), this code has told the program to do something that’s completely
legal but not logical.

To resolve a logic error, here are few steps:

1. Understand what you’re trying to accomplish.

2. Understand what your code did then form a hypothesis or two before
looking at code.
3. Resolve syntax errors. Start the debugger.
4. Identify key variables or conditions. Look at the relevant variables.
5. Predict what the suspicious line should do and compare your expectations
with reality.
6. Think about your logic then fix it.

HTML5 Syntax
In HTML5, the syntax is not too different from its predecessors. However, the
difference is that HTML5 offers more flexibility and interoperability, and enables more
interactive and exciting websites and applications.

HTML 5 introduces a whole set of new elements that make it much easier to
structure pages.
 HTML5 comes with a lot of flexibility and it supports the following features −

 Uppercase tag names.

 Quotes are optional for attributes.
 Attribute values are optional.
 Closing empty elements are optional.
The DOCTYPE

DOCTYPEs in older versions of HTML were longer. This syntax is case-

sensitive. HTML 5 authors would use simple syntax to specify DOCTYPE as follows:

<!DOCTYPE html>

Character Encoding

HTML 5 authors can use simple syntax to specify Character Encoding as

follows. This syntax is case-insensitive.

<meta charset = "UTF-8">

The <script> tag

It's common practice to add a type attribute with a value of "text/javascript"

to script elements as follows:

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML 5 removes extra information required and you can use simply following
syntax:

<script src = "scriptfile.js"></script>

The <link> tag

So far you were writing <link> as follows:

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML 5 removes extra information required and you can simply use the
following syntax:

<link rel = "stylesheet" href = "stylefile.css">

Link
 A link is nothing but a chain that connects pages within websites and without
links there’s no website. A link, or an anchor, is a word, a group of words or an image
you can click to jump to another document or a specific part of the current document.
The element for links, both internal and external are as simple as <a> (an
abbreviation of anchor). But you cannot just use <a> - you have to add at least one
attribute – the href. Href stand for hypertext reference and the value defines the
address you are linking to. The simplest link looks like this:

<a href="http://www.yoururl.com">Link text</a>

Open in a new window

Sometimes you want the user to keep having your webpage open and you have
the possibility of determining whether or not a link should open in a new window. To
do this, you use the target-attribute.

<a href="http://www.yoururl.com" target="_blank">This is my link</a>

Link to a specific part of your document

If you want to link to a specific part of your document, this can be done in two
ways. Previously, it was done by identifying the place you wanted to link to that
would look like this:

<a name="question-2">This</a> is the answer to the second question

This is called a fragment identifier – it identifies a specific fragment of you

document. The anchor-element is used to define the place you want to link to and
you would also use the fragment identifier when you actually linked to it:

<a href="#question-2">See the answer to question 2</a>

The # indicates that it is a fragment identifier link and the question-2 tells the
browser which fragment to look for.

HTML5 suggests using specific id-attributes instead of the name-attribute if

they are already available and if they are not, to writ the anchor element a bit
different. Here is an example of using id’s

<p id="my-note">This is my first section, with a unique id</p>

<p>This is just a section – no id’s or anything here</p>

<a href="#my-note">Go to the first section</a>

 If there was no id in the paragraph-element, but we still wanted to link to the
first section, HTML5 suggests doing it this way:

<p><a name="my-note" />This is my first section, with a unique id</p>

<p>This is just a section – no id’s or anything here</p>

<a href="#my-note">Go to the first section</a>

As you can see, we use the anchor-element if there is no unique id and then
close the element in the first tag, as the closing tag is not needed.

Difference between Link and Hyperlink

While a link is nothing but a web address or a URL of a web page that allows
you to connect with different servers; A hyperlink is a link that takes you from one
domain to another via references called anchor texts. It is a cross linking tool that
links those pages within same or different websites. The links can be divided into
internal and external links. An internal link is a link that connects two web pages
within the same website, whereas an external link is used to connect two web pages
that belong to two different websites.

Both the terms links and hyperlinks are intertwined and often used
interchangeably, but in a different context. A link when used within a web page is
called a hyperlink. The purpose of both controls is same, except hyperlink control is
an HTML control that provides direct access to the target website when clicked or
hovered upon, whereas a link control is a server control that takes requests to the
server first when clicked, before redirecting access to the target website. In simple
terms, a link can be referred to simply as a web address whereas a hyperlink is a
link that cross link pages within the same or different websites in the context of the
World Wide Web.

The H in HTML stands for hypertext, which is a fancy term for links, which
give life to the web pages you build. It’s very easy to add a link — or even two — to a
web page, as in this screen shot:
 Figure 2: https://www.dummies.com/web-design-development/site-development/how-to-include-links-in-your-html5-web-page/

The code for this page, including the links, is reproduced here:

<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>linkDemo.html</title>
<meta charset = "UTF-8" />
</head>
<body>
<h1>Link Demo</h1>
<h2>Relative reference to an image</h2>
<p>
This paragraph has a link to a
<a href = "monkey.png">monkey picture.</a>
</p>
<h2>Absolute reference to a web page</h2>
<p>
This paragraph contains a link to
<a href = "http://www.aharrisbooks.net">
Andy's main site.
</a>
</p>
</body>
</html>

Links are more than words on a screen. When the user clicks the text, the
browser loads a different page on the Internet.

Building links into your pages is quite straightforward:

1. Begin with an ordinary page.

Links are usually embedded directly into your page. Links cannot stand on their
own, but are usually part of some other block-level element like a paragraph.

2. Use the <a> tag to indicate a link.

 The a stands for anchor. (Of course, it should be the link tag, but that term is used
for something else in HTML.)

3. Use the href attribute to describe where the link will go.

Most links have an href (hypertext reference) attribute, which describes what
page should load when the user clicks the link. The href can be a relative or absolute
address:

o Relative: The href can be a simple filename, and if you’re linking to a file in
the same directory as the web page you’re writing, you can simply indicate the
filename. This is s a relative reference because the browser assumes the linked
file is in the current directory of the current server.

o Absolute: The href can also be a complete web address, which is called
an absolute reference because it explains how to find the file regardless of the
location of the current page. To point to pages or files on somebody else’s
server, you must use absolute references.

4. Place the visible text between the <a> and </a> tags.

Any text between these tags is displayed on the screen in a format that
indicates a link. The default format is blue underlined text.
 ACTIVITIES

Create a simple html file about yourself using any programming software
available or by using notepad. Make sure that it is error-free. Be creative and include
links.
Submit a soft copy of your completed activity to your subject teachers on the
following meeting.

This guide serves as basis for scoring, in-line with simple html file activitiy.
Needs work Developing Meets Standard Score
Information is not Some of Information is
always clear or information is always clear or
Content correct. clear and correct. correct.

10 points 15 points 20 points

With syntax and Syntax is correct There are no
logical errors. but with logical logical and syntax
Code errors. errors.
10 points 20 points 30 points
Output is not Output is needs Output is
well-structured. improvement. well-organized
Visual
Design

10 points 15 points 20

Total /50

WRAP–UP

In not less than five (5) sentences, write your takeaways from the lesson
discussed that you think would be important for you to remember in
doing / developing programs.

________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
 VALUING

Directions: Read the questions carefully. Write your answers on the space
provided. Use a separate sheet if needed.

1. What is the importance of understanding the correct syntax?

___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
2. Do you agree in this statement: Don’t worry if you find debugging difficult; It
does get much easier with practice and experience? Why or why not?
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
3. Pretend you are a web developer; how can you use what you learned in this
lesson to make an interesting website?
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________

POSTTEST

Directions: Identify what is being asked by the statements below. Write your
answer on the space provided.

_____________ 1. Known as syntax errors, these is normally seen when there is a

mistake in the syntax. It can also be seen when you run the program.

_____________ 2. Known as logical errors, these are codes that does not work correctly
but are technically correct.

_____________ 3. The successor of HTML4 which offers more flexibility and

interoperability.

_____________ 4. It is a reference that contains a link.

_____________5. This attribute describes where the link will go.

 KEY TO CORRECTION

href 5.
Absolute reference 4.
HTML5 3.
Bugs 2.
Crashes 1.

Post-test:

5. B

4. A

3. C

2. C

1. B

Pre-test:

References

“Syntax”. Accessed June 22, 2020, 11:24:04AM

https://www.techopedia.com/definition/3959/syntax

“A preview of HTML”. Accessed June 22, 2020, 1:34:50AM

https://alistapart.com/article/previewofhtml5/

“Types of Program Errors”. Accessed June 25, 2020, 12:13:34PM

https://www.inf.unibz.it/~calvanese/teaching/06-07-ip/lecture-
notes/uni10/node2.html

“How to Resolve JavaScript Logic Errors for HTML5 and CSS3 Programming’.
Accessed June 25, 2020, 2:10:44PM https://www.dummies.com/web-design-
development/javascript/how-to-resolve-javascript-logic-errors-for-html5-and-
css3-programming/

“HTML5 - Syntax”. Accessed June 25, 2020, 3:15:12PM

https://www.tutorialspoint.com/html5/html5_syntax.htm

“What is the difference between link and hyperlink?”. Pathak, Web Developer and
Designer at Quickensol IT Solutions Accessed June 30, 2020, 11:15:09AM
https://www.quora.com/What-is-the-difference-between-link-and-hyperlink,
Pradeep
“Links”. Accessed June 30, 2020, 11:56:17AM https://html5-tutorial.net/html-
basics/links/

Photo Credit:

Figure 1: Accessed June 25, 2020, 3:30:01PM https://www.dummies.com/web-

design-development/javascript/how-to-resolve-javascript-syntax-errors-for-
html5-and-css3-programming/

Figure 2: Accessed June 25, 2020, 2:10:34PM https://www.dummies.com/web-

design-development/site-development/how-to-include-links-in-your-html5-web-
page/