1

Web Design/Development More

on HTML5
Lists: Unordered
Unordered list element ul: creates a list in which each item begins with a
bullet symbol (called a disc)

2
Lists: Unordered (Output)

3
Lists: Nested

4
Lists: Nested

Lists may be nested to represent hierarchical relationships,

5

Ordered lists (element ol): creates a list in which each item begins with a
bullet symbol (called a disc)
Nested and ordered lists: Output

6
Tables
• Used to organize data into rows and columns
• <table> … </table>: defines an HTML table
• Element caption: describes table’s content, text inside the
<caption> tag is rendered above the table in most browsers
• A table can be split into three distinct sections:
• Head (thead element): a. table titles, b. column headers
• Body (tbody element): primary table data
• Foot (tfoot element): a. calculation results, b. footnotes,
c. above body section in the code, but displays at the
bottom in the page
• Element tr: defines individual table rows
• Element th: defines a header cell
7
• Element td: contains table data elements
Tables (cont.)
• Merge data cells with the rowspan and
colspan attributes:
• values of these specify the number of rows or columns
occupied by the cell,
• can be placed inside any data cell or table header cell
• Element border: specifies the browser should
place borders between around the table and the
table’s cells,
• Summary attribute: one of the HTML5 features
that make web pages more accessible to users
with disabilities, speech devices use it for
8
accessibility purposes.
Tables

9
Tables (cont.)

10
Tables and images

11
Tables and images (cont.)

12
Forms
• HTML provides forms for collecting information from users
• Contain visual components, e.g. buttons, for users to interact
• Hidden inputs: nonvisual components in forms, used to store
data that needs to be sent to server, but not entered by the user
• A form begins with the form element
• Attribute method specifies how the form’s data is sent to
the web server
• If, as is usually, the “post” method is used then the data
input into the form are sent to the server
• The action attribute of the form element specifies the script
to which the form data will be sent
• The script on the server, called server-side script, is
13
responsible to receive the data from the form sent by the
“post” method and act on it
Form input elements
• Provides data to the script that processes the form
• Text input: inserts a text box into the form, allows the user
to input data; for default value use the value attribute
• Label element: provides information about the input
element’s purpose
• Size attribute: specifies the number of characters visible in
the input element
• Maxlength: optional attribute, limits the number of
characters input into a text box
• Textarea element: a multiline text area; the number of
rows is specified by the rows attribute, the number of
characters by the cols attribute; for default text place it
between the <textarea> and </textarea> tags
• Submit input: submits the data entered in the form to the
web server for processing, most web browsers create a
button that submits the form data when clicked 14

• Reset input: allows a user to reset all form elements to their

default values
Forms example

15
Forms example (cont.)

16
 More on forms
• Password input: inserts a password box in a form, allows to enter
sensitive information, e.g. credit card numbers and passwords, by
“masking” the information input with another character, e.g.
asterisks, actual value is sent to the web server, not the masked
input
• Checkbox input: allows user to make selection, when checkbox is
selected a check mark appears in it, otherwise checkbox is empty,
can be used individually and in groups, if part of the same group
they have the same name
• Radio button: similar in function and use to checkbox, except only
one radio button in a group can be selected at any time, all radio
buttons in a group have the same name attribute but different value
attributes
• Select input: provides a drop-down list of items, the name
attribute identifies the drop-down list, the option element adds
items to the drop-down list
17
• br element: any markup or text following a br element is rendered
on the next line
18
19
20
 Internal Linking – Meta elements
• a tag: can be used to link to another section of the same
document by specifying the element’s id as the link’s href.
• To link internally: use the syntax #id.
• Meta element’s: a way that search engines catalog pages, not
visible to users, must be placed inside the head section of
the HTML document or will not be read by search engines
• name attribute: identifies the type of meta element
• content attribute:
• keywords meta element: provides search engines a list
of words that describe a page, which are compared with
words in search requests
• description meta element: provides a 3-4 line
description of a site in sentence form, used by search 21

engines to catalog your site, text sometimes displayed as

part of the search result
22
23
24
25
26
 HTML5 Form Input Types: color, date
• input Type color: enables
to enter a color, display the
color picker, i.e. a palette
to pick a color from like in
the side image,
• input Type date: enables to
enter a date in the form
yyyy-mm-dd, display a
spinner control starting
with the current date like
in the side image
27
HTML5 Form Input Types:
datetime, datetime-local, email
• input Type datetime: enables to enter a date (year, month, day), time
(hour, minute, second, fraction of a second) and the time zone set to
UTC (Coordinated Universal Time), render a up-down control,
• input Type datetime-local: enables to enter the date and time in a
single control as year, month, day, hour, minute, second and fraction
of a second,
• input Type email: enables to enter an email address or a list of email
addresses separated by commas (if the multiple attribute is
specified), if the user enters an invalid email address and clicks the
submit button, a callout is activated asking for correction, no
validation done on the actual email address but only on its format

28
 HTML5 Form Input Types: number,
range
• input Type number: enables to enter a numerical value, min
attribute sets the minimum valid number, max sets the
maximum, step determines the increment, value sets the initial
value, if a user attempts to enter an invalid value by typing in the
text field, a callout occurs,
• input Type range: appears a slider control, min, max and
value specify the minimum, maximum and starting values

29
 HTML5 Form Input Types: search, tel
• input Type search: similar to the text field but when user begins
typing the browser displays an X that can be clicked to clear the field

• input Type tel: enables to enter a telephone number, does not validate
the user input by itself but need to add a pattern attribute for that
purpose

30
 HTML5 Form Input Types: time, url, week
• input Type time: enables to enter an hour, minute, seconds and fraction of
second, planned to display a spin control

• input Type url: enables the user to enter a URL, if improper URL is entered
no validation happens, only format is validated not actual url

• input Type week: enables to enter a year and week number in the format
yyyy-Wnn where n is between 01 and 53, plans to render a week control with 31

a down arrow that, when clicked, brings up a calendar for the current month
with the corresponding week numbers listed down the left side,
Input Types: example (part 1)

32
Input Types: example (part 2)

33
Input Types: example (part 3)

34
Input Types: example (part 4)

35
 HTML5 New Attributes
• autofocus: optional, used in only one input element on a form, automatically
gives the focus to the input element, allows start typing immediately,
• validation: HTML5 input types are self validating on the client side,
eliminate the need to add complicated JavaScript code, the server should still
validate all user input,
• placeholder: allows to place a temporary text in a text field, generally
appears as light grey, when focus is placed in the text field it disappears, not
submitted when the user clicks the Submit button,
• required: forces the user to enter a value before submitting the form, could be
used in any input type, if asked but not provided then, when the user clicks
the Submit button, a callout asks for correction,
• autocomplete: can be used on input types to automatically fill in the user’s
information based on previous input, e.g. name, address or email, can enable
autocomplete for an entire form or just specific elements,
36

• datalist: provides input options for a text input element.

Autocomplete and datalist: example

37
Autocomplete and datalist: example (2)

38
Autocomplete and datalist: example (3)

39
Autocomplete and datalist: example (4)

40
Autocomplete and datalist: example (5)

41