CO1552 – Web Application Development An introduction to the use of Extensible Hypertext Mark-up Language - XHTML

CO1552 – Web Application Development

An introduction to the use of Extensible Hypertext Mark-up Language - XHTML

An introduction to HTML

HTML is an abbreviation for the term: ‘Hypertext Mark-up Language’

HTML has two essential features: ‘Hypertext’ and ‘Universality’

XHTML is the development of HTML 4.01 into a purely structural, descriptive language

Hypertext Hypertext is the ability to create links

within pages of a Web site Visitors can move to other parts of the Site

or even to pages outside of the Web site by following 'links'

The use of Hypertext enables information on the Web/WWW to be accessed from many different directions. Like a reference book as opposed to a novel

Universality Universality - All HTML documents are

saved as either ASCII or text only files They are therefore readable by the

majority of computer systems The web is therefore accessible to

visitors, whether using Windows, Macintosh, Unix, mobile phones or other hand-held devices

HTML Language HTML is not a programming language, or

even a scripting language, but a Mark-up Language.

The mark-up tags are used to indicate which format (or presentation style) should be used when displaying the marked text

It is purely a descriptive language HTML works in a similar way to old-fashioned

word-processor programs such as ‘WordStar’ which embedded mark-up tags in text documents to control the layout

HTML Language continued

With ‘Wordstar’ or similar old fashioned word-processing programs, if you wanted text to appear in bold, you would surround it with control characters such as: /B this is in bold /B

If you want text to appear on a web page in bold, you mark it like this: <strong> this is in bold </strong>

The <strong> turns the bold on and the </strong> turns the bold off.

To use XHTML, you just need to learn which tags do what

XHTML Language continued

XHTML contains two main types of TAGS: Container (closed) tags and non-container (empty) tags.

Container tags are so called as they contain text that needs an attribute attached

They contain both a beginning tag and an end tag, eg: <em>this is italic text</em>

Non-container tags do not contain text that needs to be altered and therefore do not need to be switched on or off

The line break tag <br /> The image tag <img />

XHTML Language continued

Many tags used also to contain one or more attributes such as:

align=“left” or size=“5”. However, in XHTML there are NO

presentational tags, these should be described by a STYLE in a style sheet

Basic Web Page Creation

All HTML documents should contain certain standard HTML tags

Each document should contain head and body data. The <head> will contain the title of your page and

can also include information about your page for use by search engines such as Google, e.g. META tags

The <title> tag will appear in the blue title bar at the top of your user’s browser window

The <body> will contain the actual content of your Web page, this is the part that visitors will see

The body can contain text and other elements such as graphics

Basic Web Page Creation You can create a basic HTML document without the use of any

special tools, but there are lots of good tools for editing HTML or XHTML. Many are 'free'.

You can use a word processor or text editor such as Notepad, TextPad, WordPad or SimpleText.

DON’T use a Word Processor to generate web pages - Why? For the purpose of this course, you will use Dreamweaver to

create and manage your XHTML documents If using a simple text editor, check that the .htm extension is

added after the filename If you do not use this extension then your document may only be

saved as a basic text document that may not be able to be read properly by a browser

Use of Case (upper and lower)

Officially XHTML is case sensitive (most browsers are relaxed about this)

Only use lowercase for XHTML tags. Width="100" and WIDTH="100" are wrong; only

width="100" is correct XHTML ignores spaces that exist between tags Carriage returns and blank lines can be used to make

your XHTML documents easier for you to view while editing

The use of returns or spaces in your XHTML document will not appear on your browser page

Other web languages are not so generous Learn to lay out your XHTML neatly

Accessibility and Equality Whilst all Web pages are accessible, they

may not be equally accessible to 'all' The way that a page will look will depend on

a variety of variables: The type of computer, the monitor, the speed of the Internet connection and most importantly, the software used to view

the page: the browser itself

The Browser This is the software used to view (render) pages on

the web Although there are a variety of browsers available,

the most popular ones are Internet Explorer, Netscape Communicator, Opera and Firefox

Both IE and NN have versions for Windows and Mac, but each displays Web pages in slightly different ways

It is therefore advisable when designing a site to view it with as many browsers as possible to ensure accessibility across all browsers

Basic Web Site Organisation

Before you begin to create a Web page or Web site, it is a good idea to organise your file structure:

Create a main folder or directory to contain all the material that will be available at your Web site

Next, divide the main folder with sub-folders that will reflect how you wish to organise your site

A simple division could be to have one folder for images; another for HTML documents and another for external files

Large sites may need to be divided into categories or subject areas with relevant graphics & images within each of these folders

The bigger the site, the more structured it will need to be


What every page must have• A statement that it is written in HTML• A definition of the way the browser should interpret

the HTML● A DOCTYPE definition

• Head information, including a title● This is not the same as a filename – it should describe your

page• Body information

● with a structure indicating the importance of various sections● With well written content

Optional Elements Meta tags (in the <head>)

Keywords Content Description Copyright Instructions to “bots”

Scripting to add interactivity or obtain information from users

Multimedia to add interest and information graphics, photographs, logos, animations, sound, video

Document type definition Why bother with it? Without a DTD, the rules are a lot looser, which is FINE BUT you may see display errors Browsers may not know quite what to do with some of

your HTML instructions Your pages cannot classed as meeting XHTML standards You should use the Strict DTD when possible, which is

“Structured” XHTML with no “hacking”

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Evolution of HTML HTML became full of non-standard tag elements, and so

messy that the W3C had to step in to ensure that standards were enforced

HTML has been static at version 4.01 (strict) since 1999 HTML 4.01 rapidly evolved in to XHTML XHTML is the next generation of HTML and is

intended to replace HTML It is almost identical to HTML 4.01 but stricter and

cleaner and has been stable since January 26, 2000

consists of all the elements of HTML 4.01 and combines some of the features of XML

XHTML It combines some of the features of XML with HTML

4.01 strict By combining HTML and XML, we get a language

which is useful both now and in the future XHTML files can be viewed in any HTML 4.01

compliant browser But, we can also write XML compliant code in the

run up to all people having XML compliant browsers Therefore, by using XHTML, we are making our web

pages backward and forward compatible. Getting it right and tidy now will save us having to

re-write pages later

Key XHTML 'rules' Attribute names must be in lowercase Attribute values must be “quoted” Attribute minimisation is forbidden

<input checked> <input checked=“checked”>

Closing tags must be used Tags must be closed in the correct order

XHTML The XHTML DTD (specification) defines some

mandatory elements The DOCTYPE statement is mandatory: you MUST use it The DOCTYPE statement is the part of a HTML file which

specifies which version of the language is being used if you don’t give a DOCTYPE definition, your page is

invalid. You can get the correct DOCTYPE from www.w3c.org

The DTD defines all the tags, and all the attributes that can be used within a tag

All DTD definitions can be accessed from www.w3.org The XHTML DTD describes in precise detail, in

computer-readable language, the allowed syntax and grammar of XHTML

XHTML DTDs There are three different types of DTDs for XHTML

STRICT TRANSITIONAL FRAMESET

Use the Strict DTD when you want really clean markup, free of presentational clutter

Use the strict DTD with style sheets Use the Transitional DTD when you still want to take

advantage of HTML’s presentational features Use the Frameset DTD if you want to use Frames in

your web pages

XHTML Ideally, XHTML uses ONLY structural tags e.g.

Block level tags <h1> </h1> down to <h7> </h7> <p> </p> <div> </div> <blockquote> </blockquote>

Text level tags, e.g. <span></span> <cite> </cite>

When you need to convey presentation – formatting -- then Use style sheets to define the styles


Always write both your opening and closing tags

<html></html> (the “root” element of a web page)

Then add content between them <html>

<head></head> <body></body>

</html>


Create a 'standard' basic page for your own use

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html> <head>

<title>Simple XHTML document</title> </head> <body>

<h1>A main heading</h1><p>a simple paragraph</p>

</body> </html>

Basic structural tags <h1> </h1> large and important Down to <h7></h7> small <p> </p> to define a paragraph of standard

text <table></table>

<tr></tr> <th></th> <td></td>

<form></form> to collect data from a user <div></div> used to sub-divide a page

Documents

CO1552 – Web Application Development An introduction to the use of Extensible Hypertext Mark-up Language - XHTML