Module 15
Web Engineering
Introduction to HTML
Introduction to HTML
HTML
• Hypertext Transfer Markup
Language
• markup is a way to indicate
information about the content that
is distinct from the content
• HTML has been through many
versions and branches, the details
of which might matter if you ever
see old HTML code
Introduction to HTML
Markup
Introduction to HTML
(X)HTML and Validation
• https://validator.w3.org/
Introduction to HTML
HTML 5
• Widely implemented in modern
browsers
• The current W3C recommendation
for web development
Introduction to HTML
Elements and Attributes
• HTML documents are
composed of textual content
and HTML elements
• HTML element
encompasses
• the element name within
angle brackets (i.e., the tag)
and
• HTML elements can also contain
attributes, the content
within the tag.
Introduction to HTML
An empty element
• An empty element does not
contain any text content; instead, it
is an instruction to the browser to
do something.
• In XHTML, empty elements had to
be terminated by a trailing slash.
• In HTML5, the trailing slash in
empty elements is optional
Introduction to HTML
Nesting elements
• Correct nesting
• Nested element must be closed first
• Incorrect nesting
• Outer element is closed first
Introduction to HTML
Nesting elements
Introduction to HTML
Tree of nested elements
END
Module 16
Web Engineering
Common HTML tags
Common HTML Tags
A simple example
Common HTML Tags
DOCTYPE
• DOCTYPE Short for Document
Type Definition tells the browser
what type of document it is about
to process
• Written at the start of the HTML
document
<!DOCTYPE html>
Common HTML Tags
Another example
Common HTML Tags
Head and Body tags
• HTML5 does not require the use of the
<html> , <head> , and <body> elements
(most developers still use them)
• <html> contains all the other HTML elements
in the document (Item 2)
• <head> contains descriptive elements about
the document, such (title, style sheets,
JavaScript files etc.) (Item 3)
• <body> contains content to be displayed by
the browser (Item 4)
Common HTML Tags
Meta, link, and script tags
• The <meta> element (Item 5) declares
that the character encoding for the
document is UTF-8.
• Item 6 specifies an external CSS style
sheet file with <link> that is used with
this document.
• Item 7 references an external JavaScript
file using <script>
Common HTML Tags
Another example
Common HTML Tags
Rendered Document
Common HTML Tags
HTML is for structure!
• CSS is used for styling
Common HTML Tags
Headings
• HTML provides six levels of
headings
(h1 - h6)
• Headings are also used by the
browser to create a document
outline for the page
• Don't use different headings for
setting font size (will be covered in
CSS)
Common HTML Tags
Paragraphs and Divisions
• <p> tag is a container for text and
other HTML elements
• <div> also a container element
and is used to create a logical
grouping of content
Common HTML Tags
Inline text elements
• Do not disrupt the flow
• <a>
• <abbr>
• <br>
• <cite> … <inline element> …
• <code>
• <em>
• <mark>
• <small>
• <span>
• <strong>
• <time>
• …
Common HTML Tags
Block elements
• Disrupt the existing flow and take
their own space
• <div>
• <h1>-<h6>
• <hr>
• <li> …
• <ol>
<block element>
• <ul>
• <p>
…
• <table>
• …
Common HTML Tags
Images
Common HTML Tags
Character entities
• These are special characters for
symbols for which there is either no
easy way to type them via a
keyboard
• or which have a reserved meaning
in HTML (like "<")
Entity Description
Nonbreakable space
< <
> >
© ©
™ ™
Module 17
Web Engineering
Links
Links
Links (Anchor tags)
• Links are an essential feature of all
web pages
• Links use the <a> element (the “a”
stands for anchor).
Links
Examples
Links
Examples
Links
Relative Referencing
Relative Link Type Example
Same directory <a href="example.html">
Child Directory <a href="images/logo.gif">
Grandchild/ <a href="css/images/background.gif">
Descendant
Directory
Parent/Ancestor <a href="../about.html">
Directory <a href="../../about.html”>
Sibling Directory <a href="../images/about.html">
Root Reference <a href="/images/background.gif">
Module 18
Web Engineering
Lists
Lists
Unordered Lists
Lists
Ordered Lists
Lists
Nested Lists
Lists
Description Lists
• Used for definitions and
descriptions
END
Module 19
Web Engineering
Semantics in HTML 5
Semantics in HTML 5
Semantic Markup
• Semantic tags are used for
organizing contents and labeling
contents (adding meaning)
• Do not change the structure of the
document
• Make HTML code
• maintainable
• accessible
Semantics in HTML 5
Semantic tags
Jandi soon, CC BY-SA 3.0
Semantics in HTML 5
Header and Footer
Jandi soon, CC BY-SA 3.0
Semantics in HTML 5
Header
• Intended to usually contain the
section’s heading (an h1– h6
element), but not required
• The header element can also be
used to wrap a section’s table of
contents, a search form, or any
relevant logos.
Semantics in HTML 5
Navigation (nav)
Jandi soon, CC BY-SA 3.0
Semantics in HTML 5
Main
• <main> is meant to contain the
main unique content of the
document.
Jandi soon, CC BY-SA 3.0
Semantics in HTML 5
Section and Article
• <section> is a much broader element,
while the
• <article> element is to be used for
blocks of content that could potentially
be read or consumed independently of
the other content on the page
Jandi soon, CC BY-SA 3.0
Semantics in HTML 5
Aside
• The <aside> element can be used
for sidebars, pull quotes, groups of
advertising images, or any other
grouping of nonessential elements
Jandi soon, CC BY-SA 3.0
Semantics in HTML 5
Figures and Figure Captions
Semantics in HTML 5
Details and Summary
Module 20
Web Engineering
Tools Insight
Tools Insights
A variety of tools available
for web development
• WYSIWYG
• Code editors
• IDEs
• Cloud based environments
• Code playgrounds
Tools Insights
WYSIWYG Editors
• Dreamweaver
• Google Web Designer
• Seamonkey composer
Tools Insights
Code editors
Tools Insights
IDEs
Tools Insights
Cloud-based Environments
Tools Insights
Code playgrounds
END
