Course Roadmap HTML for page
content & structure
Frontend
development CSS for styling
Web Client
JavaScript for
Response
Request
interaction
Web API
Backend
development Data Management
Dynamic Content
Web Server
2
Outline
• Introduction to HTML
• Page Structure
• Tables
• Media tags
• Forms
2
3
HTML, CSS & JavaScript
• HTML
– HTML stands for Hyper Text Markup Language
– An HTML file is a text file containing markup tags
– Describe the content & the logical structure of a page
using markup tags
• HTML page consists of a base HTML-file which may
includes several referenced resources such as:
– CSS is a style sheet language used to control the presentation
and formatting of an HTML document
– Javascript used for client side scripting of behavior/
functionality such as validation, animation and partial page
refresh (by asynchronously getting content from the server)
– Images, audio files, etc.
4
Html page has head and body
• HTML uses tags to differentiate between
document content
• Tags are enclosed in angle brackets < … >
• Generally come in pairs <tag> … </tag>
Page settings Page Content
<head> <body>
<title>Page Title</title> <h1>Heading 1</h1>
<meta name="description" <h2>Sub heading 2</h2>
content="This is an <h3>Sub heading 3</h3>
example.">
<p>First paragraph</p>
</head>
<p>Second paragraph</p>
</body>
5
HTML – Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Example</title>
<meta charset="UTF-8">
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<p>This is a paragraph</p>
<div>This is a div</div>
</body>
</html>
6
HTML key capabilities
• Define the logical structure of the HTML
document
• Collect input from users using Forms
• Display data using tables
• Embed media (e.g., audio and video) into
HTML documents
• Other capabilities such drawing graphics in
canvas, etc.
7
Page Structure
8
Page Structure
<header>
<nav>
<main>
<section>
<article>
• We can use Semantic Tags to define the
<aside> logical structure of the page
• We can use css to arrange elements into the
<footer> desired layout
Which one to use? http://html5doctor.com/downloads/h5d-sectioning-flowchart.png 9
Header, Nav, Aside & Footer
<header>
a container for introductory content, logo or a set
of navigational links
<nav>
contains primary navigation (frequently inside a header)
<footer>
contains information about copyright, contact
info, facebook/twitter links etc.
<aside>
may contain sidebars, pullquotes, ads, etc.
(can be removed without reducing the meaning of the main content)
10
Article & Section
• <article>
defines self-contained content that would make
sense when read on its own (e.g., blog post). e.g.,
https://www.w3schools.com/tags/tag_main.asp
• <section>
a thematic grouping of content. It is used to divide
either the page into different subject areas, or to
section an individual article.
Think of it like a newspaper: You will find many articles in each
section. e.g., Film review articles in the Entertainment section.
12
<main> contains blog entries. Each blog An article can be structured using
entry would make sense when read on its sections. For example, a blog post can
own have an introduction, a body content and
a summary.
<div> vs. Semantic tags
– a <div> element is used a generic container of other
elements
– semantic tags are designed to describe the page content in
a more meaningful way
• Use semantic tags to "mark up" content in a
meaningful way
– The elements that you choose to mark up your content
should describe the content
• Mark your document elements based on on their role
– If you need an element to describe a paragraph of content
then use a <p>
– If you need a generic container then use a <div>
13
37
HTML Tables
• Tables represent tabular data
– A table consists of one or several rows
– Each row has one or more columns
• Tables comprised of several core tags:
<table></table>: begin / end the table
<tr></tr>: create a table row
<td></td>: create a table column
38
Simple HTML Tables – Example
<table>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture 2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecturedemos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table> 39
Complete HTML Tables
• Table rows split into three semantic sections:
header, body and footer
– <thead> denotes table header and contains
<th> elements, instead of <td> elements
– <tbody> denotes collection of table rows that
contain the data
– <tfoot> denotes table footer but comes BEFORE
the <tbody> tag
41
Complete HTML Table: Example
<table>
<thead> header th
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
footer
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
Last comes the body (data)
<tbody>
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
</tbody>
</table>
42
Complete HTML Table: Example (2)
<table>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot> Although the footer is
<tbody> before the data in the
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr> code, it is displayed last
<tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
</tbody>
</table>
43
45
Img / Audio / Video Tag
<img src="cat.jpg" alt="A black, brown, and white cat">
22
14
Forms
• Forms are used to collect input from the user and
submitting it to a Web server
• A form can have many input elements each has a
name and id
– Name identifies the input when the form is submitted
– Id is used to access the element from JavaScript or CSS
15
Text input
18
HTML 5 input fields
• Input element enables multiple input types
<input type="search"> search box
<input type="number"> spinbox
<input type="range"> slider
<input type="color"> color picker
<input type="tel"> telephone number
<input type="url"> web address
<input type="email"> email address
<input type="date"> calendar date picker
<input type="month"> month
<input type="week"> week
<input type="time"> time
<input type="datetime"> date time
<input type="datetime-local"> local date and time
Selections
• Select, checkbox and radio enable pre-defined input
20
Dropdown and List Examples
• Dropdown
• Multi selections list
21
Radio button and Checkbox Examples
• Radio button
• Checkbox
22
Input attributes
• Apply attributes to control rendering
23
Input commands
24
Form organization
• Labels
– Text explicitly associated with an input
– Interaction with label moves focus to input
• Fieldsets
– Groups form input fields
– Optionally label the group
25
26
<input placeholder=“Full Name”>
• Disappears as the user types.
• NOT a replacement for a proper label
<input required>
• Validated by the browser
<input autofocus>
• Auto selects the first input field with autofocus
• Will scroll the page to give it focus. 27
<input pattern="[a-zA-Z0-9]+"
title=“Letters and numbers only please”>
• Matches a regular expression
• Only validates if something has been entered
• Error message is non-specific. Some browsers will use
title attribute to explain
• Use the title attribute to add additional help text
- This works with all the input types
28
<input type=“email”>
• For email addresses
• Is validated as an email address
• Gives email keyboard
29
<input type=“url”>
• For urls
• Gives url keyboard
• Is loosely validated as a url
- Use in combination with pattern if you want something specific
30
<input type=“tel”>
• For phone numbers
• Gives number pad
• Very loosely validated
o Handy since the nice big number pad is handy
for inputting any number so you can use it for
anything else you like
o Use with pattern if you have
something specific in mind
31
<input type=“number”>
• For numbers. Also called a “spinbox”
• Gives number keypad
• Special attributes:
• min
• max
• step
33
<input type=“range”>
• For numbers. Also called a “slider”
• Exact number not displayed to user
• Special attributes:
• min
• max
• step
34
<input type=“date”>
• Displays a date picker
• Configurable formats:
• type=“date”
• type=“datetime”
• type=“datetime-local”
• type=“month”
• type=“week”
• type=“time”
35
<input type=“text”
list=“sources">
<datalist id=“sources">
<option>Professor</option>
<option>Master</option>
</datalist>
• Text box with filtered list of
suggestions
• Entire list isn’t usually visible,
appears as user types, filtered
by what they’ve entered
36
References
• Mozilla Development Center HTML5
o https://developer.mozilla.org/en-
US/docs/Web/Guide/HTML/HTML5
o https://developer.mozilla.org/en-
US/docs/Learn/HTML/Introduction_to_HTML
• HTML tutorial
o http://www.w3schools.com/html/
• Cheat sheet
o https://htmlcheatsheet.com/
44
