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: this is in bold The turns the bold on and the 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: this is italic text 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 The image tag

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 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 tag will appear in the blue title bar at the top of your user’s browser window The 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

Basic Web Page Creation 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 ) 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”

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   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 The DTD defines all the tags, and all the attributes that can be used within a tag All DTD definitions can be accessed from 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 down to Text level tags, e.g. When you need to convey presentation – formatting -- then Use style sheets to define the styles

Basic Web Page Creation Always write both your opening and closing tags (the “root” element of a web page) Then add content between them

Basic Web Page Creation Create a 'standard' basic page for your own use Simple XHTML document A main heading a simple paragraph

Basic structural tags large and important Down to small to define a paragraph of standard text to collect data from a user used to sub-divide a page