COLLAGE OF COMPUTER ‫ﻛــﻠـــﯿﺔ ﻋــﻠــــــــــﻮم‬

SCIENCE & ENGINEERING ‫و ھـﻨــﺪﺳـــﺔ اﻟﺤـــــــﺎﺳــــﺐ‬

UNIVERSITY OF JEDDAH ‫ﺟــــﺎﻣﻌـــﺔ ﺟــــــــــــــﺪة‬

HTML: Hypertext
Markup Language
CCSW 321 (Web Development)

1
 What will be covered

• HTML Tables

• HTML forms and elements.

• Text autocomplete.

• HTML data validation layer.

• HTML5 Semantic tags.

• Website accessibility.

2
 HTML Tables
• Tables are a fundamental way to organize and present data in
a structured format on web pages.

• Tables organize data into rows and columns.

◦ HTML uses the <table> element to create tables.

◦ Tables are built using rows <tr> and cells <td> within those rows.

◦ Headers are defined using the <th> element.

• The caption element specifies a table’s title.

3
 HTML Tables
A table can be split into three distinct sections:
• Table Head (thead element)
◦ Table titles
◦ Column headers

• Table Body (tbody element)

◦ Primary table data

• Table Foot (tfoot element)

◦ Calculation results
◦ Footnotes
◦ Above body section in the code, but displays at the bottom in the page

4
 HTML Tables
• Table Attributes
◦ border: Specifies the border width.

◦ width: Defines the width of the table.

◦ cellspacing: Defines space between cells.

◦ cellpadding: Defines space between cell content and cell borders.

• Spanning Cells:
◦ colspan: Merges cells horizontally.

◦ rowspan: Merges cells vertically.

5
 HTML Tables
• Table Accessibility:
◦ Proper use of header cells (<th>) improves accessibility.

◦ The summary attribute summarizes the table’s contents and is used by

speech devices to make the table more accessible to users with visual
impairments.

◦ Include a general description of a table’s information in the table

element’s summary attribute—one of the many HTML5 features that
make web pages more accessible to users with disabilities.

◦ Speech devices use this attribute to make the table more accessible to
users with visual impairments.

6
HTML Tables: Example

7
HTML Tables: Example

8
HTML Tables: Example

9
HTML Tables: Example

10
 HTML Forms
• Forms enable us to collect information from users. For
example, to take orders, fill surveys, or process user
registration and so on.

• Visitor will fill in a form then click a button to submit.

• Submitted forms can be processed on the client side (e.g.,

JavaScript functions), or server-side (e.g., PHP code).

• <form> element is not visible, it represents an area that can

contains form elements (other tags).

11
 <form> Attributes
• Attribute method specifies how the form’s data is sent to the
web server. Using method = ”POST" appends form data to
the browser request, which contains the protocol (HTTP) and
the requested resource’s URL.

• The other possible value, method = ”GET", appends the

form data directly to the end of the URL of the script, where
it’s visible in the browser’s Address field. GET is the default method

• The action attribute of the form element specifies where the

information should be sent when the user submit the form.
12
 HTML Forms Elements
• Forms can contain visual and nonvisual components.

• Visual components include clickable buttons and other

graphical user interface components with which users interact.

• Nonvisual components, called hidden inputs, store any data

that you specify, such as e-mail addresses and HTML5
document file names that act as links.

• Every form related element should have a name attribute that

helps the receiving program identify the information.

13
 HTML Forms Elements
• The HTML <form> element can contain one or more form elements. For
example:

• <label>: The element defines a label for a specific form element.

◦ The element is useful for screen-reader users, because the screen-reader will
read out loud the label when the user focus on the input element.

• <select>: defines a drop-down list.

• < textarea>: defines a multi-line input field.

◦ The number of rows is specified with the rows attribute, and the number of
columns (i.e., characters per line) with the cols attribute

14
 HTML Forms: Elements
• <input>: One of the most used form element
◦ The element can be displayed in several ways, depending on the type attribute.

15
 HTML Forms Elements
• Type text input element enables the collection of textual user input.

• Type checkbox input element enables select options.

◦ If selected, a check mark appears in the checkbox.

◦ checked attribute make the option pre-checked.

◦ checkboxes of same group have same name.

• Type radio are similar to checkboxes, except only one radio button in a
group is selected at any time.
◦ All radio buttons of a group have the same name attribute.

16
HTML Forms Elements

17
 HTML Forms Elements
• Type file allows the user to send a locally stored file as part of the form
submission data.

• Type tel enables entering a telephone number.

◦ To ensure that the user enters a phone number in a proper format, you must add a pattern
attribute that uses a regular expression to determine whether the number is in the format.

18
 HTML Forms Elements
• Type password inserts a password box into a form.
◦ Allows users to enter sensitive information, such as credit card numbers and passwords, by
“masking” the information input with another character, usually asterisks.

◦ The actual value input is sent to the web server, not the asterisks that mask the input.

• Type submit creates a button that sends the form data to the
location in the form’s action attribute.

• Type reset allows a user to reset all form elements to their

default values.

19
 Form Element’s Attributes
• The placeholder attribute allows to place temporary text in a text field.
◦ Generally, placeholder text is light gray provides an example of the text and/or text format
the user should enter

20
 Form Element’s Attributes
• The required attribute forces the user to enter a value before submitting
the form.

21
 Form Element’s Attributes
• The autofocus attribute specifies that an <input> element should
automatically get focus when the page loads..

• The minlength attribute specifies the minimum number of characters

required in an input field.

• The maxlength attribute specifies the maximum number of characters

required in an input field.

• The pattern attribute specifies a regular expression that the <input>

element's value is checked against on form submission.

• The disabled attribute disables an input element. It can be set to keep a

user from using the element until some other condition has been met.
22
HTML Forms: Example

23
HTML Forms: Example

24
HTML Forms: Example

25
HTML Forms: Example

26
HTML Forms: Example

27
HTML Forms: Example

28
 HTML Form Autocomplete
• Autocomplete is a feature that allows a user to start typing a
value in a form field, and then the browser suggests possible
values based on previous entries, saved form data, or a pre-
defined list of options.

• This can help users fill out forms faster and reduce errors by
suggesting or completing data that the user may not remember
or know.

29
 HTML Form Autocomplete
• The autocomplete attribute can be used on input types to
automatically fill in the user’s information based on previous
input as name, address or e-mail.

• You can enable autocomplete for an entire form or just for

specific elements. For example, an online order form might set
automcomplete = "on" for the name and address inputs and
set autocomplete = "off" for the credit card and password
inputs for security purposes.

30
 HTML Form Autocomplete
• Datalist is an HTML element that provides a pre-defined list
of options for an input field. It allows users to select from a
list of suggested options as they type.

• The datalist element can be useful for improving the

usability of web forms by providing users with a list of
suggested options to choose from, which can save time and
reduce errors.

31
HTML Form Autocomplete

32
HTML Form Autocomplete

33
HTML Form Autocomplete

34
HTML Form Autocomplete

35
HTML Form Autocomplete

36
HTML Form Autocomplete

37
 Form Data Validation
• HTML data validation is the process of checking that the
data entered by a user into an HTML form meets certain
requirements or constraints such as being of the correct
type, length, format, or within a specified range of values.

• This is an important aspect of web development because it

helps ensure the quality, consistency, and security of user
input, as well as prevent errors, data loss, or security
breaches.

38
 Form Data Validation
• Data validation should be done on two layers:
◦ Client-side validation: is performed in the user's web browser using
HTML and JavaScript.

◦ Server-side validation: is done on the web server using a scripting

language .This can be done using many programming languages.

• The JavaScript data validation for client-side and server-side

will be covered later in the course.

39
 Form Data Validation
To create an HTML validation layer, we should:

• Set the ‘required’ attribute when an input must be filled.

• Set the ‘minlength’ and ‘maxlength’ attributes for all text

fields according to expected range.

• Set the ‘pattern’ attribute for those elements that need to be

in a specific format, e.g., the email or phone number.

40
 Form Data Validation – Example 1
• Task: Create proper HTML data validation for a field that request a
mobile number from a user. Number must be 9 digits exactly.

• Solution:
◦ minlength and maxlength were set to the specific range.

◦ The required keyword used.

◦ The pattern attribute used to accept only digits within range 0-9 and only accept 9 digits.

41
 Form Data Validation – Example 2
• Task: Create proper HTML data validation for a field that requests an
email address from a user with length of 3 to 150 characters.

• Solution:
◦ minlength and maxlength were set to the specific range.

◦ The required keyword used.

◦ The pattern attribute used to accept email format.

<Any number of> [letters, numbers, underscore, dash] followed by <single> @ sign followed by <any
number of> [letters, numbers] followed by <single> dot followed by <2 to 4> [letters]

42
 HTML5 Semantic Tags
• HTML5 semantic tags are HTML elements that have a
specific meaning and purpose in the structure and content of
a web page.

• This include elements such as header, nav, section, article,

aside, footer, main, figure, figcaption, and others.

• They were introduced in HTML5 to provide a more

descriptive, meaningful, and accessible way of organizing
and presenting web content, especially for search engines,
screen readers, and other assistive technologies.
43
 HTML5 Semantic Tags
• HTML5 semantic tags are HTML elements that have a
specific meaning and purpose in the structure and content of
a web page.

• This include elements such as header, nav, section, article,

aside, footer, main, figure, figcaption, and others.

• They were introduced in HTML5 to provide a more

descriptive, meaningful, and accessible way of organizing
and presenting web content, especially for search engines,
screen readers, and other assistive technologies.
44
 HTML5 Semantic Tags
Prior to HTML5 After HTML5

45
HTML5 Semantic Tags

46
HTML5 Semantic Tags

47
HTML5 Semantic Tags

48
HTML5 Semantic Tags

49
HTML5 Semantic Tags

50
HTML5 Semantic Tags

51
HTML5 Semantic Tags

52
HTML5 Semantic Tags

53
HTML5 Semantic Tags

54
HTML5 Semantic Tags

55
HTML5 Semantic Tags

56
HTML5 Semantic Tags

57
HTML5 Semantic Tags

58
 What is Website Accessibility?
• Website accessibility is the practice of making websites
usable by people of all abilities and disabilities.

• It involves designing and developing websites in a way that

ensures equal access to information and functionality for all
users, regardless of their abilities or disabilities.

59
 Why is Website Accessibility important?

• There are millions of people with disabilities around the

world who rely on the internet to access information, services,
and products.

• Websites that are inaccessible can prevent people with

disabilities from accessing important information and services,
and can limit their ability to participate fully in society.

• In addition, website accessibility is a legal requirement in

many countries, and failing to comply with accessibility
standards can result in lawsuits and legal penalties.
60
 Examples of Disabilities
• Visual impairments, such as blindness or low vision

• Hearing impairments, such as deafness or hard-of-hearing

• Motor impairments, such as paralysis or tremors

• Cognitive impairments, such as dyslexia or ADHD

• Other disabilities, such as color blindness or epileps

61
 Website Accessibility Standards
• There are several accessibility standards that have been developed
to ensure that websites are accessible to people with disabilities.

• The most widely used standard is the Web Content Accessibility

Guidelines (WCAG), which provides a set of guidelines for
making websites accessible to people with disabilities.

• Other standards include Section 508, the Americans with

Disabilities Act (ADA), and the Accessible Rich Internet
Applications (ARIA) specification.

62
 Techniques for Website Accessibility
• There are several techniques that can be used to make websites accessible to
people with disabilities:

◦ Providing alternative text for images and other non-text content

◦ Ensuring that website functionality can be accessed using only the

keyboard.

◦ Using HTML5 semantic tags to organize content.

◦ Using <labels> with form elements.

◦ Using high-contrast colors and clear typography.

◦ Providing captions and transcripts for videos and audio content.

◦ Using ARIA attributes to improve accessibility for screen readers.

63
 Website Accessibility: ARIA
• ARIA (Accessible Rich Internet Applications) is a set of
attributes that can be added to HTML elements to improve the
accessibility of web content for users with disabilities,
particularly those who use assistive technologies.

• ARIA attributes provide additional information about the

purpose, function, and state of elements on a web page that
may not be readily apparent from the visual presentation alone.

64
 Website Accessibility: ARIA
• ARIA Roles define the purpose and structure of an element. For
example, stating role as a button, checkbox, menu, dialog, etc.

• ARIA States and Properties describe the current state or value

of an element. For example, aria-checked, aria-disabled, aria-
haspopup, aria-selected, etc.

• ARIA Labels and Descriptions provide additional context and

information about an element. For example, aria-label, aria-
labelledby, aria-describedby.

65
 Website Accessibility: ARIA
• ARIA attributes do not modify the visual appearance or behavior
of an element on their own. Only users who rely on assistive
technologies will notice the differences between a digital product
with ARIA and one without it.

• For more details on ARIA and its specifications, you can refer to
the W3C document [Link]

66
 Testing Website Accessibility
• It's important to test your website for accessibility to ensure that
it is usable by people with disabilities.

• There are several tools available for testing website

accessibility, including:
◦ Web Accessibility Evaluation Tools, such as the WAVE tool and the Axe tool

◦ Screen readers, such as JAWS and NVDA

◦ User testing with people with disabilities

67
 Any questions?
Please feel free to raise your
hands and ask.

68