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

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 … Internet and WWW
6
The
origins
of the
Web
Open Chrome or Firefox
at:
http://b.socrative.com
Enter room: ssmm

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

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.

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

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/

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

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

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

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

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.

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.

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

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

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

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

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

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>

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/

Connecting to a server using FTP
27

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.

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

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

02 From HTML tags to XHTML

Recommended

More Related Content

What's hot (13)

Viewers also liked (12)

Similar to 02 From HTML tags to XHTML (20)

Recently uploaded (20)

02 From HTML tags to XHTML

Editor's Notes