Principles of Systems Development Week 2 Tutorial

1. Principles of
Systems
Development
Week 2 – Tutorial
From HTML Tags to
XHTML
Richard Dron
Technical Innovation
Officer
219 Maxwell
t:@seniorenrico
e:r.m.dron@salford.ac.uk

2. Hi! I’m Richard …
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

3. 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

4. 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

5. 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

6. Quiz about … Internet and WWW
6
The
origins
of the
Web
Open Chrome or Firefox
at:
http://b.socrative.com
Enter room: ssmm

7. Agenda for this session
7
•HTML – what is it?
•HTML – History
•HTML – What version will I learn?
•Document Structure
•Markup Essentials
•Activities

8. Defining HTML
8
• Stands for Hyper-Text Markup Language.
• An HTML file is a text file that contains mark-up tags. These
tags specify the structure and appearance of web
documents.
• Interpreted by Web Browser Software (e.g. Firefox, Mozilla,
Opera, Internet Explorer) and displayed to the user.
• Enables the inclusion of pictures, animations or sounds.
• Possible to link documents on the web using Hyperlinks.
• Interoperable between browsers and operating systems.

9. Key points about HTML
9
• HTML is designed for the web - it is designed to
work anywhere on any machine, and to be easily
transportable over the internet.
• HTML is an open standard - it is not owned by
any company and there is no charge for using the
HTML standards for publishing.
• HTML incorporates hypertext - it is designed to
make adding clickable links easy for web authors
(this was central to its design).
• HTML supports multimedia - it contains support
for sound, images, video etc. (as well as text).

10. The history of HTML
10
• HTML 3.2 - W3C's first
Recommendation for HTML
which represented the
consensus on HTML features for
1996
– Contained lots of new things one
could do towards the design and
visual impact of web pages
– Dropped Maths formulas
– Based on Netscape
• Arguments about <blink> and
<marquee>
• HTML 2 – developed by the The Internet
Engineering Task Force's (IETF) “HTML Working
Group”. Closed in 1996 – now classed as
HISTORIC. (RFC2854)
http://www.ietf.org/

11. HTML 4
11
• First Published 1997,
then revised edition in
December 1999 – HTML
4.01
• HTML 4.01
(Transitional)
– Contains HTML 3 Visual
Formatting code
• HTML 4.01 (Strict)
– Contained no ‘deprecated’
Visual Formatting code
– Contained new
accessibility-friendly
elements and attributes

12. XHTML
12
• XHTML 1.0
– Similar to HTML 4.x but refined to operate with XML
• XHTML 1.1
– Formal recommendation April 2001 – end of
Transition
• XHTML 2.0
– Never

13. What version will I learn?
13
• Strict HTML 4.01 and XHTML both have very good syntax and code
discipline
• The tidiest code will follow the best of XHTML practice, omitting those
elements of it that can safely be dropped in the era of HTML5
• HTML5 can be loose enough to allow the most untidy, bloated, poor
coding – the sort of coding still out there on the web since 1996.
• Professional web developers take pride in tidy, efficient code
• Browsers render tidy, efficient code faster
You will learn what works best in 2016,
with an eye to what will work best in
the future…
Year 1 – HTML 4.01 (Strict), intro to HTML5

14. Tools
14
• Notepad
• W3C (http://www.w3.org/)
– online Validators
(http://validator.w3.org/)
– Document Type Declarations
(DTDs)
– Use HTML 4.01 (Strict) DTD
• Wayback Machine
(http://www.archive.org/web/web.php)
• Filezilla

15. Writing in HTML
15
• In any Text Editor (e.g. Notepad for Windows
users, TextWrangler for Mac users).
• HTML is not case sensitive.
• HTML documents must be saved with the
extension either *.html or *.htm.

16. Markup Vocabulary
16
• Opening & Closing
TAGs:
– < > ... </ >
– Some elements have self-
closing tags, e.g. <br>
• HTML Elements:
– BODY, P, TABLE, TR, TD,
H1, H2, H3, UL, LI etc.
• Attributes:
– href, accesskey, class, etc.
• Values:
– “page2.htm”, “2” etc.
It is also important to get the
order of the syntax of your code
correct – there are some basic
rules that will be explained.

17. Basic HTML document structure
17
• Web documents must comply to a basic
structure in order to be interpreted correctly
by browsers…
• First the page must declare that it is
(X)HTML – i.e. Doctype.
• The head section contains meta
information that categorises page content.
Search engines also use this info to list
pages.
• The body section specifies the content of
the page.
• [A separate CSS (Cascading Style Sheet)
file specifies the presentation of the page.]

18. HTML Contents
18
• HTML code - text
<html>
<head>
Title ... Meta Tags ...
</head>
<body>
Sections… Text ... Images ... Links
</body>
</html>

19. Structural Markup
19
<html lang=“en-gb”>
<head> ..Meta tags, scripts .. </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>
• Example in Note Pad

20. Markup Essentials (1/5)
20
Syntax:
<ELEMENT ATTRIBUTE=“VALUE”> text </ELEMENT>
Example:
<h1> Welcome to my homepage </h1>
<p>
I live in Manchester in a
<a href=“http://www.myhouse.co.uk/”> semi
detached house. </a>
</p>
Nesting : <p> <a> </a> </p> √
NOT : <p> <a> </p> </a> X

21. Markup Essentials (2/5)
21
• Block elements
<h1> ... </h1> From the biggest heading ...
│ │
<h6> ... </h6> To the smallest heading
<p> ... </p> Denotes a paragraph of text
• Inline elements
<em> ... </em> or <i> ... </i> for italics
<strong> ... </strong> or <b> ... </b> for
bold
• Empty elements
<div> ... </div> to create a section of a page - block
<span> ... </span> to apply to a word or two - inline

22. Markup Essentials (3/5)
22
• Lists – Block Elements
<ul> ... </ul> Unordered List
<ol> ... </ol> Ordered List
<li> ... </li> List Item
<dl>
<dt> Term </dt>
<dd> Data </dd> Definition List
</dl>
Example:
<dl>
<dt> Beverages </dt>
<dd> Coffee </dd>
<dd> Tea </dd>
</dl>

23. Markup Essentials (4/5)
23
<img src=“imagefilename.gif” /
alt=“Image Description”>
Used to insert an image. In
this example you’ll need to
place a copy of the image
into the same folder as your
web document.
Alternatively, you may
include an image on the web
using its URL.

24. Mark-Up Essentials (4/5)
24
<br/> - is a line break.
The line break tag of <br /> should only be used
to insert is single line breaks in the flow of
paragraph text to knock a particularly word down
onto a new line.
Essential in XHTML for Validation
Never supported by any browser – just ignored
Not used for HTML4 or 5

25. Creating Hyperlinks
25
• Anatomy of a link tag:
<a href=“another_page.html”> Go to Page 2 </a>
• A hyperlink is denoted by the <a href=“…”> … </a> tag.
href=“…” specifies the location of the document you wish to link to.
• Anything between the <a …> … </a> tags will be displayed
on-screen. In the above example, the linked document will be opened
when the user clicks ‘Go to Page 2’.
• Hyperlink tags may also refer to named anchors within a long html
page:
e.g. <a href=“#anchorname”> anchortext </a>
<a name=“anchorname”> related section </a>

26. Do I need to know all these HTML tags?
26
• It is very useful to be familiar with the basic
anatomy of an HTML document.
• In time you will know them all, and be able to type
code into a text editor.
• See http://www.w3.org/MarkUp/ for a
comprehensive guide to HTML tags.
• A very good site for an HTML tutorial (including
XHTML and XML) is available at:
http://www.w3schools.com/

27. Connecting to a server using FTP
27

28. Activity
28
• Visit -
http://www.w3schools.com/html/html_examples.asp
Have a look at the example pages
that show best practice in creating
your HTML documents.

29. Try this out before you go …
29
• https://eraseallkittens.com/

30. Thanks! 
If you have any questions now is
the time, or drop me an email
r.m.dron@salford.ac.uk