ICT Programming HTML
Lesson 5
HTML5 Syntax and Links
Objective
•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 hmtldocument.
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.
•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
•Syntaxerrors:errorsduetothefactthatthesyntaxofthe
languageisnotrespected. Meaningyoumisspelledacommandor
usedafunctionincorrectly,sometimesthisiscausedbysloppy
typing.Theseerrorsareusuallycalledcrashes.
Syntax error
Common program errors
•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 Syntax
•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:
Link
•Alinkisnothingbutachainthatconnectspageswithinwebsites
andwithoutlinksthere’snowebsite.Alink,orananchor,isa
word,agroupofwordsoranimageyoucanclicktojumpto
anotherdocumentoraspecificpartofthecurrentdocument.
•Theelementforlinks,bothinternalandexternalareassimpleas
(anabbreviationofanchor).Butyoucannotjustuse-youhaveto
addatleastoneattribute–thehref.Hrefstandforhypertext
referenceandthevaluedefinestheaddressyouarelinkingto.
•Thesimplestlinklookslikethis: