05 RD PoSD Tutorial_xhtml_to_html5_2016

Principles of
Systems
Development
Week 5 Tutorial:
From XHTML to HTML5,
Creating HTML 4.01 pages
Richard Dron
Technical Innovation Officer
e: r.m.dron@salford.ac.uk
t: twitter.com/seniorenrico

Hi … it’s me, Richard, again …
2
• University Technical Innovation Officer – one
part of my role is to help in the development of
students’ technical skills in the digital area.
• Originally from IS project management
background, implementing solutions for Retail
and hospitality companies
• Worked as a freelance consultant and IS
project manager – various digital projects for
large and small companies including web
development

PoSD Aims
3
• To introduce key principles relating to the
development of robust, reusable and appropriate
information systems
• To introduce the Systems Development Lifecycle
• To introduce the principles of Systems Analysis
• To develop understanding of contemporary
development environments
• To provide an introduction to the development of
web-based software artefacts and their integration
with existing popular web-based systems such as
blogging, micro-blogging and other contemporary
social media

PoSD Learning Outcomes
4
Knowledge and Understanding
• Recognise key technologies underlying social network
technologies
• Analyse and identify the key elements of an information
system
• Create an interactive website/business media presence
• Understand the relationship of an information system to
the wider business context in which it is deployed
• Develop code in a web-based context including user
interaction

PoSD Learning Outcomes
5
Transferable/Key Skills and other attributes
Develop key professional skills, including:
• Self management / time management skills
• Communication
• Learn and develop high professional standards
• Use information technology:
• Process and present information using common
applications
• Review the appropriate use of Information Technology
• Develop communication skills:
• Read and respond to written material
• Produce written material
• Use a range of different technologies to communicate and
collaborate In virtual spaces

Quiz about … what you already know 
6
HTML
Recap!
Open Chrome or Firefox
at, or use your phone:
http://b.socrative.com
Enter room: SOCMED
Quiz = HTML Quiz

Week 5 Introduction
7
• HTML4 Recap
• XHTML – what is it?
• XHTML – the differences
• HTML5 Intro

Quick Exercise - Multi browser Test
8
• Visit
http://browsershots.org/
• Enter your PoSD site
URL
• http://teaching.mysalford.
biz/bns286
• Scroll to bottom deselect
all
• Select Windows
• Hit Submit
• We’ll come back to here
later on

HTML4 Recap - Structural Markup
9
<html lang=“en-gb”>
<head> ..WHAT GOES HERE?.. </head>
<body>
<div id=“header”><h1>Header</h1></div>
<div id=“menu”><ul><li>Navigation</li></ul></div>
<div
id=“content”><h2>Content</h2><p>Detail</p></div
>
<div id=“footer”><p>Footer</p></div>
</body>
</html>

HTML4 Recap - Doctype and Charset
10
HTML 4.01:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01:
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
Careful when copy-pasting this from Microsoft to
Notepad – the quotation marks are not standard
font

5 minutes of fun …
11
Go to http://markup.roppychop.com/

Defining XHTML
13
• Stands for Extensible Hyper-Text Mark-Up
Language.
• Is a stricter version of HTML, thus aiming to
replace HTML.
• Is actually HTML defined as an XML (EXtensible
Mark-Up Language) application.
• Is a W3C (World Wide Web Consortium)
Recommendation.
• Now superseded by HTML5

Differences between HTML & XHTML
14
• XHTML elements must be properly nested.
• XHTML elements must always be closed.
• XHTML elements must be in lowercase.
These things are GOOD PRACTICE and you
should follow these rules with HTML4.01

Good Practice: Structure
15
• Structural Markup:
• Sections with
• Headings, Paragraphs & Lists
• Headers
– H1, H2, H3, … H6
• Paragraphs
– P
• Lists
– UL, LI
– OL, LI
– DL, DT, DD
• Linear Structure
Heading1
Paragraph
Heading2
Paragraph
Heading3
Paragraph
• List item
• List item
• List item
Heading3
Paragraph

Good Practice: Testing
16
• Test it in as many browsers as you can, on Mac
and Linux as well as on Windows
• Test your site on tablets
• Test your site on smartphones

Quick Exercise - Mobile Testing
17
• Try it on your own phone!
https://www.google.co.uk/webm
asters/tools/mobile-friendly/

Quick Exercise - Multi browser Test
18
• Results
• View your site in 3
browser versions,
spot any
differences?

XHTML > HTML 5
20
Web Hypertext Application Technology Working
Group (WHATWG)
• June 2004: Opera and Mozilla set up the mailing list
• HTML5 — Web Applications 1.0 & Web Forms 2.0
• October 2006: Reinventing HTML — Tim Berners-Lee
• May 2007: W3C HTML Working Group
• January 2008: HTML 5
– ?: Last Call Working Draft
– 2012?: Candidate Recommendation
– 2022?: Proposed Recommendation

You don’t get rid of HTML4 standards – you
just improve upon them!
21

It’s easy for web developers to upgrade
their websites to HTML 5
22
Step 1: change the doctype at the top of the page.
OLD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
NEW:
<!DOCTYPE html>

Why do Web Developers love HTML 5 ?
24
Better organization of page content and code
<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

HTML5 is a Collection of Features
25
• HTML5 is not an “all or nothing” capability.
• The HTML5 features available to end users
depend on what browser and what version of
that browser they are using.
•Users: How well does your browser
support html5?
Keep your browser updated so that as they add new feature
support you will have access to these new features!

Who will see your cool new HTML 5
features?
26
Changing the Doctype
will not break your
existing website
People using OLDER
browsers that don’t
support the new HTML5
features will simply miss
out on viewing the
website the way others
do.

Validation
27
• Validation – validate at Strict HTML4 to get into good habits
then convert to HTML5
• DOCTYPE – declare the DTD before <html>
– <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
• Character Encoding
– Latin Western
• Good clean strict code = 90% accessible
– Make sure your code validates correctly to HTML4 strict. Then turn it into
HTML5
– Use of < /> self-closing tags for XHTML unnecessary

Practical Exercise - Update your
PoSD site
28
• Edit your home page
• FTP the file
<html><head>
<title>My first webpage</title></head><body>
<div id=“header”><h1>My first webpage</h1></div>
<div id=“nav”><ul><li><a href=“#”>Item 1</a></li>
<li>Item 2</li><li>Item 3</li></ul></div>
<div id=“content”><h1>Lorem Ipsum Dolor</h1>
<p>….lorem…</p>
<p>….ipsum…</p>
<p>….dolor…</p>
</div>
<div id=“footer”><p>Terms and Conditions</p></div>
</body> </html>

Practical Exercises - Validate
29
http://validator.w3.org/

Practical Exercises – Speed Test
30
https://developers.google.com/speed/pagespeed
/insights/

05 RD PoSD Tutorial_xhtml_to_html5_2016

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (14)

Ähnlich wie 05 RD PoSD Tutorial_xhtml_to_html5_2016

Ähnlich wie 05 RD PoSD Tutorial_xhtml_to_html5_2016 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

05 RD PoSD Tutorial_xhtml_to_html5_2016