Transcript XHTML & CSS
XHTML
By Trevor Adams
Topics Covered
XHTML e
X
tensible
H
yper
T
ext
M
ark-up
L
anguage The beginning – HTML Web Standards Concept and syntax Elements (tags) Attributes Document Types Document level elements – structure of an HTML document
The Beginning - HTML
Invented by Tim Berners-Lee Based on SGML
S
tandardised
G
eneral
M
ark-up
Language
Developed so research documents could be shared via the Internet HTML has had 4 major versions prior to XHTML XHTML introduced after CSS and XML became widely adopted web standards
Hyper Text Mark-up Language
Devised to format textual documents Transported over the HTTP protocol HTTP also invented by Tim Berners-Lee A client browser renders mark-up into an on screen image A user consumes the document using a client browser (user agent) E.g. Internet Explorer, Mozilla Firefox, Opera, Chrome and Safari
Web Standards
The nature of the Internet eventually leads us to agreed standards From a basic entity to transfer textual documents To a platform used to deliver almost any conceivable idea using a multitude of media types The World Wide Web Consortium (W3C) is responsible for maintaining and ratifying web standards Supported by many industry leaders http://www.w3.org/
Web Standards
The idea is quite simple Web site designers create compliant documents Web browser developers ensure their browsers render compliant mark-up correctly End users ensure they use a compliant browser The Web will then work across all platforms and system architectures However, browsers implement bespoke features Site designers wish to utilise these features Users do not care or even think about Web standards (they should not really have to)
Web Standards
Responsible designers create web sites that are standards compliant It is better for the web
It is possible compliant
to design web sites that are to web standards
not
Why do this?
We know better already We shall be creating web sites that are compliant to XHTML 1.0
Supported by major browsers Comes in Strict, Transitional and Frameset flavours
Web Standards
It is not enough to say: “It looks OK with Internet Explorer” or “Checked it with FireFox and it looked ok” It is not enough that mark-up merely looks right in the browser Design for the Internet, design for cross platform compatibility, design for professional pride and most of all… Make your design work in all the ways your users wish to interact with it Do not dictate the Internet to the user – it is not our job to do so!
XHTML
Concept and Syntax
HTML Concepts
HTML is relatively straight forward Individual Elements (tags) Special text strings Interpreted Provide document structure Formatting constructs Every element has a start and end part Contents of which is formatted accordingly
HTML Concepts
Elements may contain attributes Name and value pairs contained within the starting part of the element Attributes are not free form Defined by XHTML document types Used to affect an individual instance of an element
HTML Concepts
Hello, World!
Content Element End Element Start Element (tag) Attribute
HTML Elements (tags)
Begin with left pointing angle bracket < Ends with right pointing angle bracket > Between brackets is a keyword indicating the element type
,Elements that contain content such as
are closed with a / prefix to the element name
This is content
Elements with no content are closed inline E.g. 
HTML Elements (tags)
Some elements must contain other elements
- This is item 1
- This is item 2
| Cell 1,1 | Cell 1,2 |
HTML Attributes
Attributes are contained within the opening part of an element Attributes provide a means to alter an individual instance of an element Some attributes are required (defined by XHTML rules) For example, the element
The img element requires (to be valid) a height, width, source file and alternative text attribute
HTML Attributes
HTML attributes are always in the format: attribname=“attribvalue” They are separated within the start of the element using white space (space, tab, return line) They should always be properly formed to avoid unwanted errors when HTML is rendered
HTML Document Types
A document type defines the structure of the mark up A statement is included at the top of the document to indicate which version of HTML is being used A browser can then render it appropriately A document type declaration must be given for the HTML to be valid You cannot validate a page without declaring how it should be validated Document types are defined by the W3C
HTML Document Types
XHTML 1.0 Strict XHTML 1.0 Transitional Remember them if you can, keep them in a handy place if you cannot!
HTML Document Elements
Every XHTML document requires the following basic structure DTD Declaration element – contains the document element contained within Contains information about the document element contained within Contains the body content of the document (what the user consumes)
First web page
Hello, World!
HTML Element
Indicates the beginning and end of an XHTML document All documents begin with and end with You may find browsers can handle the absence of one or both We strive for valid XHTML – be sure to include both
Head Element
Provides extra information about the document Serves a container for external document linking, such as a style sheet The element is ended with It should always contain a title
Meta Elements
Contained within the element Allow the author to add extra information about the document using format: Support for meta tags is declining Still an important part of the document!
Body Element
Where all visible content appears Appears after the element Within the element This is where novice web designers give most of their attention Often neglecting other important aspects
In the mean time
Complete the tutorial work this week Attempt the further exercises Help you gain understanding Take your time – it is a huge topic Get comfortable with XHTML and editors Notepad++ can be your friend just as much as Microsoft Expression Web Attempt to gain understanding of what WYSIWIG editors are doing for you