BUW3213 Dynamic Web System Development: Chapter 2: HTML

BUW3213 Dynamic
Web System
Development
Dr. Vee Voon Yee
Introduction to HTML
Basic HTML
Elements
Summary
BUW3213 Dynamic Web System Development
Chapter 2: HTML
Dr. Vee Voon Yee
University Malaysia of Computer Science & Engineering
Semester: September 2021
1/37
Table of Contents
BUW3213 Dynamic
Web System
Development
Dr. Vee Voon Yee
Basic HTML 1 Introduction to HTML
Elements
Summary
2 Basic HTML Elements
3 Summary
2/37
HTML: Hypertext Markup Language
BUW3213 Dynamic
Web System
Development HTML5 is the latest standard that replaces previous versions of
Dr. Vee Voon Yee
HTML
Elements are used to structure the page content
Basic HTML
Elements
e.g., <h2> second-level header, <p> paragraph
Summary
XHTML: EXtensible HyperText Markup Language
Stricter, more XML-based version of HTML
Markup language: tags are added to content to give it structure
start tag / open tag: <xyz>
end tag / closing tag: </xyz>
self-closing tag: <xyz />
tags are always surrounded by < >
Coding Conventions:
Google HTML/CSS Style Guide
w3school’s HTML Style Guide and Coding Conventions
3/37
Structure of HTML File; HTML Elements
BUW3213 Dynamic
Web System
<!DOCTYPE html>
Development
<html lang="en">
Dr. Vee Voon Yee <head>
<meta charset="utf-8"/>
Introduction to HTML <title>Basic Web Page</title>

Basic HTML </head>
Elements <body>
Summary 
</body>
</html>
Over 100 different HTML elements

Meta information is placed in the head element
Content information is placed in the body element
Two main kinds of element:
flow elements (or block)
phrasing element (or inline)
4/37
Classification of HTML Elements
BUW3213 Dynamic
Web System
Development Top-level elements: html, head and body
Dr. Vee Voon Yee head elements: placed inside the head
Introduction to HTML title, style, link, meta, base, script
Basic HTML Contents are not directly displayed on the page
Elements
Summary
Block-level elements
Flow elements that behave like paragraphs
Occupy 100% of available width
Stacked vertically with preceding and subsequent block elements
article, h1–h6, header, footer, section, p, figure, canvas,
pre, div
ul, ol, dl, table, form, video
Inline elements
Phrasing elements that behave like words
Flow horizontally
Usually placed inside block elements
a (anchor), audio, br, code, img, em, nav, samp
span, strong, sub, sup, time, var
5/37
HTML Syntax
BUW3213 Dynamic
Web System
Development All tags begin with < and end with >
Dr. Vee Voon Yee
Tag name is given immediately following opening <
Basic HTML Attributes are given following the tag name:
Elements
Summary
<tag attribute1="value" attribute2="value" ...>
’ (single quote) can be used instead of " (double quote)
Forgetting to close a quote can result in a blank page
Names and attributes are lowercase
Values are case sensitive
Boolean attributes: Presence or absence of the attribute
represents the true and the false values respectively

<input type="checkbox" checked name="cheese" disabled>
<input type="checkbox" checked="checked" name="cheese" disabled="disabled">
<input type="checkbox" checked name="cheese" disabled="">
Note: The values "true" and "false" are not allowed. To represent a
false value, the attribute has to be omitted altogether.
6/37
HTML Comments
BUW3213 Dynamic
Web System
Development HTML comments are not displayed in the browser, but can help
Dr. Vee Voon Yee
documenting the HTML source code
Basic HTML
Represented as content between .
Elements

Summary 
7/37
HTML Syntax
BUW3213 Dynamic
Web System
Development Elements must be well-formed
Dr. Vee Voon Yee
Attributes can be in any order
Basic HTML White space is allowed
Elements
Summary
between tag name and attributes
around the = sign
within attribute value (but should be avoided)
body element may only directly contain block elements
free stranding text
no inline elements
Unrecognized tags and attributes are ignored
No bad nesting
<p>Stuff <strong></p></strong>
8/37
HTML Syntax
Void Elements
BUW3213 Dynamic
Web System
Development Void Element
Dr. Vee Voon Yee
Any element that cannot have any content in between the start and
Introduction to HTML end tags
Basic HTML
Elements Only has start tag
Summary End tags MUST NOT be specified
Syntax
<br>
<br/>: The / character is optional for HTML5, but may be specified for
compatibility with XHTML
Complete list of HTML5 void elements: area, base, br, col,
command, embed, hr, img, input, keygen, link, meta, param,
source, track, wbr
Reference:
https://www.w3.org/TR/html52/syntax.html#void- elements
9/37
HTML Global Attributes
BUW3213 Dynamic
Web System
Development All HTML5 elements can have the following global attributes:
Dr. Vee Voon Yee
id: Uniquely identifies an element in the page
Introduction to HTML class: A space-separated list of classes which allows CSS and
Basic HTML
Elements JavaScript to select and access the elements
Summary style: Specifies presentation style
title: A text representing advisory information; May be presented
as a tooltip
hidden: A Boolean attribute that prevents element from being
displayed
spellcheck: An enumerated attribute that defines whether the
element may be checked for spelling errors
contenteditable, draggable, dropzone, and more
Reference:
https://developer.mozilla.org/en- US/docs/Web/HTML/Global_attributes
10/37
Table of Contents
BUW3213 Dynamic
Web System
Development
Dr. Vee Voon Yee
Elements
Summary
3 Summary
11/37
Typical Webpage Architecture
BUW3213 Dynamic
Web System
Development We will explore the following items:
Dr. Vee Voon Yee
1 html and meta
Basic HTML
2 Headings and Paragraphs
Elements
Summary
3 White space and line wrapping
4 Presentation Styles
5 Lists
6 Links
7 Navbars
8 Images
9 Table
10 Validation
12/37
html and meta
BUW3213 Dynamic
Web System
Development html
Dr. Vee Voon Yee
It is advisable to declare the language of the Web page with lang
Introduction to HTML A list of language code is available here
Basic HTML
Elements meta
Summary
It is advisable to specify the character encoding for the HTML
document with charset
It is recommended to use UTF-8
Statistics shows that 97.3% of all websites use UTF-8 (as of
September-2021)
<html lang="en">
<head>
<meta charset="utf-8">
...
</head>
...
</html>
13/37
Headings and Paragraphs
BUW3213 Dynamic
Web System
Development Six heading levels: h1–h6
Dr. Vee Voon Yee
block elements
Paragraph elements: p
Basic HTML
Elements
can contain text and phrasing elements
Summary
typically has a new line before and after
lines wrapped to fit width
extra white space in text ignored
Break element: <br> for inserting blank line
Line break opportunity: <wbr>
a suggestion to the browser for inserting line break if required, but
don’t insert unnecessarily if possible
e.g.,
<p>Refer to https://www.w3schools.com/<wbr>tags/<wbr>tag_wbr.asp
for more on wbr tag.
The email is some.long.name@<wbr>www.example.com.</p>
recommended to be used for long-running text like urls and emails

without it, the browser might break the text at the wrong place
14/37
Headings and Paragraphs
BUW3213 Dynamic
Web System
Development Inline (phrasing) elements can be placed in a paragraph
Dr. Vee Voon Yee
em: emphasis
Introduction to HTML q: quote
Basic HTML
Elements mark: highlight
Summary strong: text with strong importance, typically displayed in bold
Paragraphs and headings are left aligned by default
15/37
White Space and Wrapping
BUW3213 Dynamic
Web System
Development In HTML white space separates text into words
Dr. Vee Voon Yee
space (ASCII 32, entity )
Introduction to HTML tab (ASCII 9, entity )
Basic HTML
Elements formfeed (ASCII 12, entity )
Summary zero-width space (entity &#200B;)
Whitespace collapsing
only one white space is rendered between characters
Line-breaking white space entities
return (ASCII 13)
newline (ASCII 10)
only linebreak the code, not the content
References:
https://www.fileformat.info/info/unicode/category/Zs/list.htm
https://en.wikipedia.org/wiki/Whitespace_character
16/37
White Space and Wrapping
BUW3213 Dynamic
Web System
Development Only whitespace separates words:
Dr. Vee Voon Yee
tags don’t
Introduction to HTML e.g., <p>The HTML<strong>5</strong> standard.</p>
Basic HTML
Elements
yields: The HTML5 standard.
Summary
To force a line break: <br>
To indicate where a word can be broken across a line
with a hyphen: (soft hyphen)
without a hyphen: <wbr>
To force two words to stay on a line:
non-breaking white space: or
17/37
Phrasing (Inline) Elements
BUW3213 Dynamic
Web System
Development link: a
Dr. Vee Voon Yee
line break: br
Basic HTML citation: cite
Elements
Summary emphasis (usually italics): em
strong emphasis (usually bold): strong
stronger emphasis (usually highlight): mark
computer code: code
deleted words (crossed out): del
subscript: sub
superscript: sup
sample computer output: samp
general phrasing element that can contain other phrasing
elements: span
18/37
Presentation Styles
BUW3213 Dynamic
Web System
Development To add non-default presentation style we use style rules
Dr. Vee Voon Yee
The style rules are part of CSS
Introduction to HTML We will introduce some useful style rules here, and will cover CSS
Basic HTML
Elements more in the next chapter
Summary
Three ways (roughly from lower to higher precedence):
1 Place rules in a style sheet
2 Include <style> elements in the head element
3 Use the style attribute for individual elements
<h1 style=“color: darkgreen”>This is Green</h1>
Generally, style attribute takes precedence over styles in the style

element, which in turn takes precedence over style sheets
Reference: https://vecta.io/blog/definitive- guide- to- css- styling- order
19/37
Some Style Properties
BUW3213 Dynamic
Web System
Development foreground colour: color*
Dr. Vee Voon Yee
e.g., color: red
background colour: background-color
Basic HTML
Elements
e.g., background-color: green
Summary
text alignment: text-align
e.g., (left justified) text-align: left
font size: font-size
e.g., font-size: x-small
indentation: text-indent
e.g., text-indent: 3em
margin: margin margin-top margin-right margin-bottom
margin-left
e.g., margin-left: 10px
* Note: US (color) instead of UK spelling (colour)! 20/37

Style Length Units
BUW3213 Dynamic
Web System
Development Relative lengths:
Dr. Vee Voon Yee
em: font-size of the current font
Introduction to HTML ex: the x-height of the current font
Basic HTML
Elements ch: the size of 0 in the current font
Summary vw: relative to 1% of the width of the viewport
vh: relative to 1% of the height of the viewport
fr: fraction
Absolute lengths (avoid!): Not sensitive to resolution, or font size
cm: centimeters
in: inches
mm: millimeters
pc: picas (1pc = 12pt)
pt: points (1pt = 1/72in)
px: pixels (1px = 1/96in)
References:
https://www.w3schools.com/cssref/css_units.asp
21/37
Colours
BUW3213 Dynamic
Web System
Development There are a number of ways to specify colours
Dr. Vee Voon Yee
1 By Name:
Basic HTML e.g., red, green, magenta
Elements
Summary
Reference:
https://www.w3.org/TR/css-color-3/#svg-color
2 By RGB (red, green, blue) value:
#rrggbb
#rgb
rgb(r,g,b) — base 10 numbers from 0 to 255
rgb(r%, g%, b%)
rgba(r,g,b,a) — a is alpha, ranging from 0 to 1
rgba(r%, g%, b%, a)
3 By HSL (hue, saturation, light) value:
hsl(h, s%, l%) — h is degrees 0–360
hsla(h, s%, l%, a)
22/37
Font
BUW3213 Dynamic
Web System
Development font-family property lets you set font
Dr. Vee Voon Yee
e.g., font-family: Times
Can list more than one font
Basic HTML
Elements e.g., font-family: Arial, Helvetica, sans-serif
Summary
Always good to list a generic font family last, in case fonts are not
found on host
Common generic font families: serif, sans-serif, monospace,
cursive, fantasy
Multi-word font family names enclosed single or double quotes
e.g., font-family: "Apple LiGothic Medium", "Microsoft
JhengHei", sans-serif
font-weight property controls how heavy the font is
e.g., font-weight: bolder
font-size property controls size of font
1 to a specific size: e.g., small
2 to an absolute size: e.g., 16pt
3 relatively: e.g., smaller (or percentage)
23/37
Lists
BUW3213 Dynamic
Web System
Development Three kinds of list element in HTML5:
Dr. Vee Voon Yee 1 bullet list: ul
Introduction to HTML can only contain list elements: li
Basic HTML li can contain block elements like paragraphs, headings and other lists
Elements
Summary 2 ordered list: ol
can only contain list elements: li
3 definition list: dl
Each term dt is given a definition dd
dt element can contain inline elements
dd element can contain inline and block elements
<ol>
<li>bullet list</li>
<li>ordered list</li>
<li>definition list</li>
</ol>
<dl>
<dt>Teh O Ais Limau</dt>
<dd>Malaysia version of iced lemon tea</dd>
<dt>Roti Banjir</dt>
<dd>Roti canai drenched in dahl and curry</dd>
</dl>
24/37
List Styles
BUW3213 Dynamic
Web System
Development Default list item marker for ul and ol is browser-dependent
Dr. Vee Voon Yee
list-style-type property lets you customize list:
Basic HTML
e.g., <ul style="list-style-type: circle"> ... </ul>
Elements
e.g., <ol style="list-style-type: upper-alpha"> ... </ol>
Summary
style types include:
disc, circle, square, none, decimal, lower-roman,
lower-alpha, . . .
you can make an ul numbered
you can make an ol with bullets
list-style-image: url(imageURL ) lets you customize bullet
with an image
list-style-position: position of the list-item markers:
outside or inside
25/37
Hyperlinks
BUW3213 Dynamic
Web System
Development Anchor tag: a
Dr. Vee Voon Yee href attribute indicates the link’s destination
Introduction to HTML e.g., <a href="URL">anchor</a>
Basic HTML
Elements Clicking on the anchor will send the reader to the specified
Summary
destination
Can be linked to other web page, optionally to an element of the
page with a specified id
Specify the absolute URL (e.g.,
http://www.example.com/homepage.html) or relative URL (e.g.,
homepage.html, /info/contact_us.html)
Use / append #id to link to the element with the specified id
E.g., <a href="#top">
E.g., <a href="http://www.example.com/what.html#top">
When opening external links (outside your site) it is usually a good
practice to open link in separate browser window with the target
attribute
<a href="http://www.w3.org/" target="_blank">The W3C Consortium</a>
Otherwise, make it clear that click will leave your site

26/37
Hyperlinks
BUW3213 Dynamic
Web System
Development <a> tag can also be used create an anchor to be linked to:
Dr. Vee Voon Yee
<a href="#about-this">About This</a>
<a href="#about-that">About That</a>
Introduction to HTML ...
Basic HTML <h1 id="about-this">About This</h1>
Elements ...
<a id="about-that">
Summary
<h1>About That</h1>
...
Hyperlink can also be attached to part of an image map

An image map is an image with clickable areas
Can be linked to local files
<a href="file:///C:/Program%20Files/" target="_blank">Program Files</a>
Don’t be fooled by this trick from some evil websites!

Linked to a script
<a href="javascript:alert(’Hello!’);">An Alert</a>
27/37
Hyperlinks
Linking to Services
BUW3213 Dynamic
Web System
Development To email
Dr. Vee Voon Yee
<a href="mailto:lecturer@example.com?SUBJECT=Very%20important">
To download link
Basic HTML
Elements
<a href="ftp://somewhere.com/something.pdf">
Summary
To telephone/SMS/fax:
<a href="tel:12345670">
<a href="sms:12345671">
<a href="fax:12345672">
To VoIP
<a href="callto:12345673">
28/37
Site Organization
BUW3213 Dynamic
Web System
Development Place home file (usually index.html) in root directory
Dr. Vee Voon Yee
Use directories to organize files:
Basic HTML
images/, videos/, css/, js/, products/, services/
Elements
an index.html within each of these directories can be used as the
Summary
lead page for that heading
keep organization simple
generally no more than depth 3
make sure navigation is simple and straightforward for user
/
css/
my_styles.css
js/
scripts.css
media/
images/
logo1.jpg
logo2.jpg
videos/
video1.mp4
video2.mp4
index.html
29/37
Navbars (Navigation Bars)
BUW3213 Dynamic
Web System
Development Common to have horizontal and vertical navbars
Dr. Vee Voon Yee
Main navigation commonly on horizontal
Basic HTML Secondary navigation in vertical
Elements
Summary nav element creates navbars
We will revisit this, including side nav and styling later
30/37
Images
BUW3213 Dynamic
Web System
Development To include an image in a page:
Dr. Vee Voon Yee
<img src="hat.jpg" alt="A nice hat" style="width:160px; height:200px">
Basic HTML
Elements
a void element
Summary src attribute gives URL to download image to be displayed
it replaces the img tag in content of page
do not hotlink images
you find an image on the internet somewhere and use the URL of the
image directly on your site
hotlinking is generally bad (any exception?) as it steals the hosting
bandwidth and costs site owner’s money
alt tag is required, gives alternate text (not tool tip)
optional height and width attributes
best practice is to make sure it matches original, or very close to it
To make a clickable image link
place an image tag in the anchor of <a>
31/37
Table
BUW3213 Dynamic
Web System
Development Tabular data (info presented in 2D table) can be constructed with
Dr. Vee Voon Yee the following tags:
Introduction to HTML table; thead, tbody, tfoot; colgroup, col; caption; tr, th, td
Basic HTML
Elements <table style="border: 1px solid green;">
<caption>Info of Jack & Jill</caption>
Summary
<thead> 
<tr> 
<th>Name</th> 
<th colspan="2">Gender & Age</th>
</tr>
</thead>
<tbody> 
<tr>
<td>Jack</td> 
<td>Male</td>
<td>10</td>
</tr>
<tr>
<td>Jill</td>
<td>Female</td>
<td>8</td>
</tr>
</tbody>
</table>
32/37
How Well Do Browsers Support HTML5?
BUW3213 Dynamic
Web System
Development https://html5test.com/: How well does your browser support
Dr. Vee Voon Yee HTML5?
Introduction to HTML How well does each browser support certain HTML element,
Basic HTML
Elements attribute, or some feature?
Summary
Browser support of <input type="date">; Taken from

https://www.w3schools.com/tags/att_input_type_date.asp
Browser compatibility with <input type="date">;
Taken from https://developer.mozilla.org/
en- US/docs/Web/HTML/Element/input/date
33/37
Debugging and Validation
BUW3213 Dynamic
Web System
Development After you’ve written your code:
Dr. Vee Voon Yee
spell check
Introduction to HTML test with many browsers
Basic HTML
Elements test on different platforms
Summary test on different screen size/resolution
can be done within browser too, but best to also test on devices
test all links
https://validator.w3.org/checklink
use a validator
https://validator.w3.org/ for HTML
https://jigsaw.w3.org/css-validator/ for CSS
34/37
Table of Contents
BUW3213 Dynamic
Web System
Development
Dr. Vee Voon Yee
Elements
Summary
3 Summary
35/37
Summary
BUW3213 Dynamic
Web System
Development HTML is used to structure content
Dr. Vee Voon Yee
We’ve seen a number of different kinds of elements
Basic HTML Block and inline elements
Elements
Summary Basic structure and contents of a web page
36/37
Readings
BUW3213 Dynamic
Web System
Development The Missing Links: Chapters 7–13
Dr. Vee Voon Yee
MDN Introduction to HTML
Basic HTML w3schools HTML tutorial (up to and including HTML Block & Inline)
Elements
Summary
37/37

BUW3213 Dynamic Web System Development: Chapter 2: HTML

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

BUW3213 Dynamic Web System Development: Chapter 2: HTML

Uploaded by

Copyright:

Available Formats

BUW3213 Dynamic

Dr. Vee Voon Yee

Dr. Vee Voon Yee

University Malaysia of Computer Science & Engineering

Semester: September 2021

Dr. Vee Voon Yee

2 Basic HTML Elements

Over 100 different HTML elements

Dr. Vee Voon Yee

2 Basic HTML Elements

recommended to be used for long-running text like urls and emails

Generally, style attribute takes precedence over styles in the style

* Note: US (color) instead of UK spelling (colour)! 20/37

Otherwise, make it clear that click will leave your site

Hyperlink can also be attached to part of an image map

Don’t be fooled by this trick from some evil websites!

Browser support of <input type="date">; Taken from

Dr. Vee Voon Yee

2 Basic HTML Elements

You might also like