COMP519 Web Programming
Lecture 3: HTML (HTLM5 Elements: Part 1)
Handouts
Ullrich Hustadt
Department of Computer Science
School of Electrical Engineering, Electronics, and Computer Science
University of Liverpool
HTML HTML5 Documents
HTML5 Documents
•
An HTML5 document has a very simple form:
It consists of a DOCTYPE-declaration and an html-element
<! DOCTYPE html >
htm l - ele m e nt
•
An html-element has the form
<html >
hea d - ele m e nt
bod y - ele m e nt
</ html >
•
It is recommended that the start tag of an html-element specifies the
language used in the document
< html lang =" en-GB ">
COMP519 Web Programming Lecture 3 Slide L3 – 2
HTML The head-element
Head
•
The head-element should include a title-element
(typically appears in the (tab) title bar of a browser)
•
The head-element should also include meta data
such as the author of the page, a description of its content, keywords
•
The head-element can also include Cascading Style Sheet (CSS)
definitions or links to external style sheets
•
The head-element can also include JavaScript code or links to files
containing such code
<head >
<title > The Hig hwa y Code </ title >
< me ta chars et =" UTF -8" >
< me ta name =" autho r " conte nt =" John Doe ">
< me ta name =" d esc r ipt i on " co nte nt =" Rules of the UK Hi ghw ay Code " >
< me ta name =" key wor d s " co nte nt =" b ritish , highway , highways ,car , ped estr ian ">
< li nk rel =" s tyl eshe et " hre f =" defau lt . css ">
< scr ipt src =" code . js " > </ script >
</head >
COMP519 Web Programming Lecture 3 Slide L3 – 3
HTML The body-element
Body
•
The body-element contains the content that is to be displayed by a
web browser including
•
Articles, sections, footers, and navs
•
Headings
•
Paragraphs
•
Lists and tables
•
Images
•
The body-element may contain PHP code that is executed by the
web server, producing HTML markup, that is then merged with the
other content before being send to a web browser
•
The body-element may contain JavaScript code that reacts to events in
the web browser and can dynamically change the content
COMP519 Web Programming Lecture 3 Slide L3 – 4
HTML Elements for the Body Structure
Structuring the Body
•
The main-element contains the main content
•
An article-element contains text that makes
sense on its own
•
A section-element contains text on the same
theme
•
A header-element contains introductory text
for a document, article, or section
•
A footer-element typically contains the
author of the document, copyright information,
links to terms of use, contact information, etc
•
A nav-element contains a set of navigation
hyperlinks
•
An aside-element contains related but
independent content to the articles/sections
header-
element
nav-
element
section-
elements aside-
article- element
elements
footer-
element
Several of these could be
in one body-element
The elements are seman-
tic, not layout related
COMP519 Web Programming Lecture 3 Slide L3 – 5
HTML Elements for the Body Structure
Structuring the Body
article-elements and section-elements
are typically nested inside each other:
•
In an HTML document corresponding to a
scientific paper one expects several
section-elements (for introduction,
conclusion, etc) inside one article-element
•
In an HTML document corresponding to a
newspaper one expects several
article-elements (one for each report/story)
inside one section-element
The whole newspaper would consist of several
section-elements (sport, business, etc),
possibly inside a main-element
header-
element
nav-
element
section-
elements aside-
article- element
elements
footer-
element
COMP519 Web Programming Lecture 3 Slide L3 – 6
HTML Elements for the Body Headings
Headings
•
Sections are meant to be organised into a hierarchy
(not necessarily using nested section-elements)
•
The hierarchy can be up to six levels deep
•
The heading elements h1 to h6 allow to specify a heading for a section
at the corresponding level, with h1 being the highest level and
h6 the lowest
•
Web browsers typically use font-size and font-weight to distinguish
between headings at different levels
<h1 > Fruit </ h1 >
<h2 > Apples </ h2 >
<h3 > Colour </ h3 >
<h3 > Taste </ h3 >
<h2 > Or anges </ h2 >
<h3 > Colour </ h3 >
<h3 > Taste </ h3 >
http://cgi.csc.liv.ac.uk/
~
ullrich/COMP519/examples/headings.html
COMP519 Web Programming Lecture 3 Slide L3 – 7
HTML Elements for the Body Headings
Structure and Headings
<body >
<main >
< article >
<header >
<h1 > Te mp or al Logic Reaso nin g </ h1 >
< address > U ll ri ch Hust adt , Un i ve rs ity of Li verpool , UK </ addre ss >
</header >
<nav >
<ul ><li > < a hr ef ="# Intr o " > In tr od uc ti on </ li >
<li ><a href ="# Exp "> Expe ri me nts </li > </ ul >
<nav >
< se ct ion id=" Intro " >
<h2 > I nt ro du ct ion </ h2 >
</ section >
< se ct ion id=" E xp " >
<h2 > E xp eriment s </ h2 >
< section >
<h3 > Ex per ime nt a l Setup </ h3 >
</ section >
< section >
<h3 > O bs er va ti ons </ h3 >
</ section >
</ section >
<footer > & copy ;2019 Ul lr ic h Hus ta dt </ footer >
</ article >
</main >
</body >
COMP519 Web Programming Lecture 3 Slide L3 – 8
HTML Elements for the Body Headings
Structure and Headings
<body >
<header >
<h1 > D aily News paper </ h1 >
</header >
<nav >
<ul ><li > < a hr ef ="# Ne ws "> News </ li >
<li ><a href ="# Sp ort " > Sport </ li > </ ul >
<nav >
<main >
< se ction id=" New s " >
<h2 > News </ h2 >
< article >
<h3 > F irst News Item </ h3 >
</ article >
< article >
<h3 > S ec on d News I tem </ h3 >
</ article >
</ section >
< se ction id=" Sport " >
<h2 > Sport </ h2 >
< article >
<h3 > T hird News Item </ h3 >
</ article >
</ section >
</main >
<footer > & copy ;2019 Ul lr ic h Hus ta dt </ footer >
</body >
COMP519 Web Programming Lecture 3 Slide L3 – 9
HTML Elements for the Body Lists
Lists
There are three different types of lists:
•
Ordered list: ol-element with li-elements as content
<ol >
<li > Item 1</ li >
<li > Item 2</ li >
</ol >
Typically uses numbers or letters to label each item in the list
•
Unordered list: ul-element with li-elements as content
<ul >
<li > Item 1</ li >
<li > Item 2</ li >
</ul >
Typically uses bullet points to label each item in the list
•
Definition list: dl-element typically with pairs of
dt-elements and dd-elements as content
http://cgi.csc.liv.ac.uk/
~
ullrich/COMP519/examples/lists.html
COMP519 Web Programming Lecture 3 Slide L3 – 10
HTML Elements for the Body Lists
Lists
There are three different types of lists:
•
Ordered list: ol-element with li-elements as content
Typically uses numbers or letters to label each item in the list
•
Unordered list: ul-element with li-elements as content
Typically uses bullet points to label each item in the list
•
Definition list: dl-element typically with pairs of
dt-elements and dd-elements as content
<dl >
<dt > Intern et </ dt >
<dd > is a phy sic al n etw ork of network s <dd >
<dt > World Wide Web </ dt >
<dd > is a col l ect i on of i nter link e d mul tim e dia documents </ dd >
</dl >
http://cgi.csc.liv.ac.uk/
~
ullrich/COMP519/examples/lists.html
COMP519 Web Programming Lecture 3 Slide L3 – 11
HTML Elements for the Body Paragraphs
Paragraphs
•
A paragraph is a group of sentences that is centred on a single idea
•
HTML5 provides the p-element for paragraphs
<p > Th is Web s ite p rov ides clients , customers , in t ere s ted p artie s and
our staff with all of the i n for m ati o n that they could want on
our produ cts , servi ces , su cce ss and fa ilu res .
</p >
•
Several spaces within a paragraph will always be rendered as just one
•
Line breaks will not be preserved
•
The void element br can be used to force a line break
•
Alignment will be determined by the style that applies
(typically, by default, paragraphs are only left-aligned)
•
The p-element should not be used when a more specific element is
more appropriate
COMP519 Web Programming Lecture 3 Slide L3 – 12
HTML Elements for the Body Div- and Span-element
Div and Span
•
The div-element and the span-element are used as containers for a
group of consecutive elements
•
A common semantics or a common style can then be applied to all
elements of that container
<div lang =" en - US " >
<p > C ompr omi s e in c olo rs is gray . </p >
<p > Mo st bad be hav ior comes from in s ecu r ity . </ p >
</div >
<div lang =" en - GB " >
<p > C ompr omi s e in colo urs is grey . </p >
<p > Mo st bad be h avi our comes from in s ecu r ity . </ p >
</div >
<div lang =" en - US " > DIV : A te mpe st in a te apot . </ div >
<div lang =" en - GB " > DIV : A s torm in a te acup . </ div >
< sp an lang =" en - US " > SPAN : A te mpest in a te ap ot . </ span >
< sp an lang =" en - GB " > SPAN : A s torm in a teac up . </ span >
COMP519 Web Programming Lecture 3 Slide L3 – 13
HTML Elements for the Body Div- and Span-element
Div and Span
<div l a n g =" en - US ">
<p> C omp r omi s e in col o r s is gray . </p >
<p> Most bad beha v ior comes f r o m ins e cur i ty . </p >
</div >
<div l a n g =" en - GB ">
<p> C omp r omi s e in co l o urs is grey . </p >
<p> Most bad beh a viou r comes from i n sec u rit y . </p >
</div >
<div l a n g =" en - US "> A t e mpes t in a te a pot . </ div >
<div l a n g =" en - GB "> A s t o r m in a teacup . </ div >
< s p a n lang =" en - US "> A t empes t in a t e a pot . </ span >
< s p a n lang =" en - GB "> A s t o rm in a teacup . </ span >
The difference between div and span is that by default:
•
span-elements are phrasing content (HTML4: inline content)
; Two consecutive span-elements are placed side-by-side
; span-elements have neither width nor height
•
div-elements are floating content (HTML4: block content)
; Each div-element starts on a new line and ends a line
; div-elements have width and height
COMP519 Web Programming Lecture 3 Slide L3 – 14
HTML Elements for the Body Div- and Span-element
Paragraphs, Divs and Lists
•
List elements cannot be children of p-elements
Wrong:
<p > The body - e le me nt of an HT ML document may i nc lu de
<ul >
<li > h ea di ng s and
<li > p ara gr ap hs
</ul >
as well as many o the r th ings . </ p >
Better (maybe only slightly):
<p > The body - e le me nt of an HT ML document may in clud e </p >
<ul >
<li > he adi ngs , and
<li > p ara gr ap hs
</ul >
<p > as well as many other t hings . </p >
Best:
<div > The body - e le ment of an HT ML document may i nc lu de
<ul >
<li > he adi ngs , and
<li > p ara gr ap hs
</ul >
as well as many o the r th ings . </ div >
COMP519 Web Programming Lecture 3 Slide L3 – 15
HTML Elements for the Body Address
Address
•
The address element represents contact information for a person
organization
•
It is one of the few elements in which the use of a br element makes
sense though paragraph, span or div could also be used
< address >
Dr Ul l rich Hustadt <br >
Dep a r t ment of Comp u ter Science < br >
Uni v e r sity of L iverpool < br >
Email : U . Hustadt@liverpool . ac . uk
</ address >
COMP519 Web Programming Lecture 3 Slide L3 – 16
HTML Elements for the Body Hyperlinks
Hyperlinks
•
Hyperlinks are created using
<a href =" url " > text </ a >
where text is what the web browser will show to the user and url is
the URL of a web page / resource that the web browser would visit if
the user clicks on text
•
The a-element has an optional attribute target
Possible values include
•
_blank:
Opens the linked web page in a new window or tab
With HTML5 alone it is not possible to force whether a window or a tab is
opened
•
_self:
Opens the linked web page in the same window or tab (default)
<a href =" http :// cgi . csc . liv . ac . uk /" tar get =" _ blank "> CS Website </a >
COMP519 Web Programming Lecture 3 Slide L3 – 17
HTML Elements for the Body Hyperlinks
Hyperlinks
•
Instead of a whole document, a URL can also refer to a particular
element within a document, provided that element has an id
•
In HTML5 any element can be given an id via the id attribute:
< tagName id =" ID "> ... </ tagName >
where ID is non-empty sequence of characters without spaces, unique
within the document
•
It is then possible to internally link to that element using
<a href ="# ID "> text </ a >
•
It is also possible to externally link to that element using
<a href =" url #ID "> text </a >
assuming url is the URL of the document containing the element with
id ID
COMP519 Web Programming Lecture 3 Slide L3 – 18
HTML Elements for the Body Hyperlinks
Hyperlinks
http://w3.f.org/f.html
<! DOC TYPE html >
< html lang =" en - GB " >
<head >
<title > D ocument A </ title >
</head >
<body >
<h1 > Fruit </ h1 >
<h2 id =" a"> Apples </h2 >
<h3 > Colour </ h3 >
<h3 > Taste </ h3 >
<h2 id =" o"> Oranges </ h2 >
<h3 > Colour </ h3 >
<h3 > Taste </ h3 >
</body >
</html >
http://www.cb.com/b.html
<! DOC TYPE html >
< html lang =" en - GB " >
<head >
<title > D ocument B </ title >
</head >
<body >
<h1 > Fruit </ h1 >
<h2 id =" p"> Peaches </ h2 >
<h3 > Colour </ h3 >
<h3 > Taste </ h3 >
<h2 id =" o"> Other </ h2 >
<a href =" http :// w3 . f . org / f . html #a " >
Apples </ a > ,
<a href =" http :// w3 . f . org / f . html #o " >
Oranges </a >.
<a href ="# p " > Peaches </ a >
were co v ered ab ove .
</body >
</html >
See http://cgi.csc.liv.ac.uk/
~
ullrich/COMP519/examples/fruit.html
and http://cgi.csc.liv.ac.uk/
~
ullrich/COMP519/examples/links.html
COMP519 Web Programming Lecture 3 Slide L3 – 19
Further Reading
Revision and Further Reading
Read
•
Chapter 4: Creating a Simple Web Page
•
Chapter 5: Marking Up Text
•
Chapter 6: Adding Links
of
J. Niederst Robbins: Learning Web Design: A Beginner’s Guide to
HTML, CSS, JavaScript, and Web Graphics (5th ed).
O’Reilly, 2018.
E-book https://library.liv.ac.uk/record=b5647021
COMP519 Web Programming Lecture 3 Slide L3 – 20
