HTML5 Syntax

and
Links!
Computer Programming Grade 11
 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.

02/21/2023 PRESENTATION TITLE 2

02/21/2023 PRESENTATION TITLE 3
 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.

02/21/2023 PRESENTATION TITLE 4

 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.
02/21/2023 PRESENTATION TITLE 5
 SYNTAX
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.

02/21/2023 PRESENTATION TITLE 6

 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.
02/21/2023 PRESENTATION TITLE 7
 Common program errors
function getPassword(){
var correct "HTML5";
var guess = ";
while (guess != correct){
guess = prompt("Password?");
} // end while
alert("You may proceed");
} // end getPassword
02/21/2023 PRESENTATION TITLE 8
02/21/2023 PRESENTATION TITLE 9
 SYNTAX
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.

02/21/2023 PRESENTATION TITLE 10

 SYNTAX
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.
02/21/2023 PRESENTATION TITLE 11
 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.

02/21/2023 PRESENTATION TITLE 12

02/21/2023 PRESENTATION TITLE 13
02/21/2023 PRESENTATION TITLE 14
 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>

02/21/2023 PRESENTATION TITLE 15

02/21/2023 PRESENTATION TITLE 16
02/21/2023 PRESENTATION TITLE 17
02/21/2023 PRESENTATION TITLE 18
 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.

02/21/2023 PRESENTATION TITLE 19

 Difference between Link and
Hyperlink
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.
02/21/2023 PRESENTATION TITLE 20
 Difference between Link and
Hyperlink
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:

02/21/2023 PRESENTATION TITLE 21

 Difference between Link and
Hyperlink
The code for
this page,
including
the links, is
reproduced
here:

02/21/2023 PRESENTATION TITLE 22

 Difference between Link and
Hyperlink
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.)

02/21/2023 PRESENTATION TITLE 23

 Difference between Link and
Hyperlink
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.

02/21/2023 PRESENTATION TITLE 24

 Difference between Link and
Hyperlink
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.

02/21/2023 PRESENTATION TITLE 25

 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.
Password:hp280g4mt
02/21/2023 PRESENTATION TITLE 26
02/21/2023 PRESENTATION TITLE 27
 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.

02/21/2023 PRESENTATION TITLE 28

 VALUING

02/21/2023 PRESENTATION TITLE 29

 POSTTEST

02/21/2023 PRESENTATION TITLE 30

Thank you
Mirjam Nilsson​
mirjam@contoso.com
www.contoso.com