COMP519 Web Programming
Lecture 4: HTML (HTLM5 Elements: Part 2)
Handouts
Ullrich Hustadt
Department of Computer Science
School of Electrical Engineering, Electronics, and Computer Science
University of Liverpool
HTML Elements for the Body Text-level Elements
Text-level Elements
•
A strong-element represents strong importance, seriousness, or urgency
for its content
Can be used in a heading, caption, or paragraph to distinguish the most
important parts
<strong > B eware of the dog </ strong >
•
A b-element highlights its content without marking it as important
Your <b > CV </b > should co ntain the follo win g sec tions ...
•
An em-element represents stress emphasis on its content
<em > Cats </ em > are cute a nimal s i.e. Cats , not dogs , are cute
COMP519 Web Programming Lecture 4 Slide L4 – 2
HTML Elements for the Body Text-level Elements
Text-level elements
•
A code-element represents a fragment of computer code
The <code > begin </ code > keywo rd indicate s the start of
a block
•
The pre-element represents a block of preformatted text (structure in
the block is represented by typographic conventions instead of elements)
<pre >< code class =" language - java " >
if (i > 0) {
i := 1;
}
</ code > </ pre >
•
The var-element represents a (mathematical) variable, constant, or
function
•
The sup-element represents a superscript and the sub-element
represents a subscript
<var >x < sub >< var >i </ var > </sub > </ var > =
<var >y < sup >< var >j </ var > </sup > </ var >
COMP519 Web Programming Lecture 4 Slide L4 – 3
HTML Elements for the Body Images
Images
The void element img allows to include images into an HTML document
<img src =" U R L " alt =" d e s c r " ... />
Attributes include
•
src specifies the URL / file name of the image
(browsers can typically deal with JPEG, GIF and PNG images)
•
alt gives an alternative description that will be shown if the image
cannot be displayed
•
title title of the image
•
width the reserved width to which the image should be scaled in pixels
•
height the reserved height to which the image should be scaled in pixels
•
style can be used as an alternative to height / width
•
srcset responsive images, see https://developer.mozilla.org/
en-US/docs/Learn/HTML/Multimedia_and_embedding/
Responsive_images
COMP519 Web Programming Lecture 4 Slide L4 – 4
HTML Elements for the Body Images
Images
<img src ="/ i mages / ash ton _de tai l . jpg " t it le =" Ashton Build ing "
alt =" The As ht on B uil ding at the U niv ersity of Liverpoo l "
width ="100" >
<!-- I ma ge " a shto n_d eta il . jpg " scaled to 100 px ,
st ring " Ash to n Bui lding " will be shown if the poi nter ho ve rs over
the image ,
st ring " The A sh ton Bui ldi ng at the Uni ver sit y of Li ver pool " will
be s ho wn if im ag e download has been di sable d in the br owser
-- >
<a href =" i nd ex . html "><img src =" home . png " alt =" Home " > </ a >
<!-- A hyp erlin k c ont ain ing an image . Cl ickin g on the image will take
the us er to " index . html "
-- >
COMP519 Web Programming Lecture 4 Slide L4 – 5
HTML Elements for the Body Images
Images
•
For all images in a HTML document, ownership/copyright plus licensing
terms should be indicated in one of the following ways:
•
A copyright notice / attribution below the image
" Edinburgh City " by A . N . Other /
<a href =" https :// cc . org/ licens e s / by /2.0/" > CC BY 2.0 </ a >
•
A copyright notice in the title attribute of the image
title =" Image of a castle .
& copy ; Freeimages /A . N . Other 2019"
•
A copyright notice in the footer of the page
All images & copy ; A. Student , 2019 ,
unless other w i se indicated .
•
Images that you are not allowed to copy should neither be copied nor
embedded via an img element
COMP519 Web Programming Lecture 4 Slide L4 – 6
HTML Elements for the Body Figures
Figures
•
The figure-element represents an image, table, code that
•
is self-contained
•
is referenced from the main text of the document, and
•
can be moved within the document without affecting the document’s
meaning
•
The figcaption-element represents a caption or legend for the figure
in which it is included
<figure >
<img src =" wa rming . png " alt =" A diagram showing that world t emp era tur e
has increa sed sign ificant ly since 1900" >
< figcaption > Fig 1. World Tem per atu re since 1900. </ figcaption >
</ figure >
Fi gure 1 shows t hat two - thi rds of w armin g has occ urred since 1975.
<figure >
<pre > < code > fun ction sort { ... } </code > </ pre >
< figcaption > Fig 2. Heap sort </ figcaption >
</ figure >
The he ap sort a lgorithm shown in Figur e 2 ...
COMP519 Web Programming Lecture 4 Slide L4 – 7
HTML Elements for the Body Tables
Tables
•
Tables are a common way of displaying data
•
The content of tables is divided into rows (horizontal) and columns
(vertical)
•
Each column typically has a header,
one column, typically the left-most one, also has particular significance
•
The whole table typically has a title given by a caption
•
Lines are often used to make rows and columns more easily
distinguishable
COMP516 COMP517 COMP518 COMP519
2015-16 66.0 66.3 73.0 71.9
2016-17 66.5 75.9 70.9 75.9
2017-18 66.2 69.6 70.9 66.4
2018-19 79.2 73.3 66.7 66.4
Average marks on 1st Semester CSMS Modules
COMP519 Web Programming Lecture 4 Slide L4 – 8
HTML Elements for the Body Tables
Tables
A table-element represents
a whole table, including the
caption, consisting of
•
a caption-element
(optional)
•
zero or more
colgroup-elements
•
a thead-element
(optional)
•
zero or more
tbody-elements or one or
more tr-elements
•
a tfoot-element
(optional)
th td tdtfoot
tr
th td td
tr
th td td
tr
th td td
tr
tbody
th th th
tr
thead
colgroup
caption
table
COMP519 Web Programming Lecture 4 Slide L4 – 9
HTML Elements for the Body Tables
Tables
<table >
< caption > Av er age marks on 1 st Semester CSM S Modules </ caption >
<thead >
<tr ><th > </ th > <th > COMP5 16 </th > <th > COMP517 </th >
<th > COMP518 </ th ><th > COMP519 </ th >
</tr >
</thead >
<tbody >
<tr ><th >2015 -16 </ th ><td >66.0 </ td > <td >66.3 </ td >
<td >73.0 </td > <td >71.9 </ td >
</tr >
<tr ><th >2016 -17 </ th ><td >66.5 </ td > <td >75.9 </ td >
<td >70.9 </td > <td >75.9 </ td >
</tr >
<tr ><th >2017 -18 </ th ><td >66.2 </ td > <td >69.6 </ td >
<td >70.9 </td > <td >66.4 </ td >
</tr >
<tr ><th >2018 -19 </ th ><td >79.2 </ td > <td >73.3 </ td >
<td >66.7 </td > <td >66.4 </ td >
</tr >
</tbody >
</table >
Note: There are no lines between columns and rows
Cell content is left-aligned
COMP519 Web Programming Lecture 4 Slide L4 – 10
HTML Elements for the Body Tables
Tables
<table >
< caption > Avera g e marks on 1 st Semes t e r
CSMS M o d ules
</caption >
<thead >
<tr > <th ></ th >< th > COMP516 </ th > <th > COMP517 </ th >
<th > COMP518 </ th >< th > COMP519 </th >
</tr >
</thead >
<tbody >
<tr > <th >2015 -16 </th >< td >66.0 </ td > <td >66.3 </ td >
<td >73.0 </ td >< td > 71.9 </ td >
</tr >
<tr > <th >2016 -17 </th >< td >66.5 </ td > <td >75.9 </ td >
<td >70.9 </ td >< td > 75.9 </ td >
</tr >
<tr > <th >2017 -18 </th >< td >66.2 </ td > <td >69.6 </ td >
<td >70.9 </ td >< td > 66.4 </ td >
</tr >
<tr > <th >2018 -19 </th >< td >79.2 </ td > <td >73.3 </ td >
<td >66.7 </ td >< td > 66.4 </ td >
</tr >
</tbody >
</table >
Note: There are no lines between columns and rows
Cell content is left-aligned
http://cgi.csc.liv.ac.uk/
~
ullrich/COMP519/examples/tables.html
COMP519 Web Programming Lecture 4 Slide L4 – 11
HTML Elements for the Body Tables
Table and Cell Attributes
•
table-elements have a border attribute
Value can be "" or "1"
(browsers typically draw a border around table cells for both)
•
td- and th-elements have attributes rowspan and colspan that specify
how many rows and columns a cell spans
< table border ="1" >
<thead >
<tr > < th > C olumn 1 </ th ><th > Column 2 </ th > < th > C ol umn 3 </ th > </ tr >
</ thead >
<tbody >
<tr > < td > one (1) </ td ><td > two (2) </td ><td > three (3) </td > </ tr >
<tr > < td row span ="2" > four (1) </td >
<td c olspan ="2" > five (2+3) </ td > </ tr >
<tr > < td > six (2) </ td ><td > seven (3) </td > </ tr >
</ tbody >
</ table >
COMP519 Web Programming Lecture 4 Slide L4 – 12
HTML Elements for the Body Tables
Table and Cell Attributes
< table border ="1" >
<thead >
<tr > < th > C olumn 1 </ th ><th > Column 2 </ th > < th > C ol umn 3 </ th > </ tr >
</ thead >
<tbody >
<tr > < td > one (1) </ td ><td > two (2) </td ><td > three (3) </td > </ tr >
<tr > < td row span ="2" > four (1) </td >
<td c olspan ="2" > five (2+3) </ td > </ tr >
<tr > < td > six (2) </ td ><td > seven (3) </td > </ tr >
</ tbody >
</ table >
http://cgi.csc.liv.ac.uk/
~
ullrich/COMP519/examples/tables.html
COMP519 Web Programming Lecture 4 Slide L4 – 13
Further Reading
Revision and Further Reading
Read
•
Chapter 7: Adding Images
•
Chapter 8: Table Markup
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 4 Slide L4 – 14
