Principles of Systems DevelopmentWeek 2 – Tutorial

From HTML Tags to XHTML

Richard DronTechnical Innovation Officer219 Maxwell

t:@seniorenricoe:r.m.dron@salford.ac.uk

2

Hi! I’m Richard …• 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• 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 OutcomesKnowledge 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 OutcomesTransferable/Key Skills and other attributesDevelop 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

The origins of the Web

Open Chrome or Firefox at:

http://b.socrative.comEnter room: ssmm

7

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

8

Defining HTML• 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• 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

• 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• 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• 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?• 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• 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• 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• 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• 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• HTML code - text

<html> <head> Title ... Meta Tags ... </head> <body> Sections… Text ... Images ... Links </body> </html>

19

Structural Markup<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)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)• 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)• 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)<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)<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 ValidationNever supported by any browser – just ignoredNot used for HTML4 or 5

25

Creating Hyperlinks• 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?• 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

28

Activity• 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 …• https://eraseallkittens.com/

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