HTML and XHTML Controlling the Display Of Web Content.
Published byModified over 4 years ago
Presentation on theme: "HTML and XHTML Controlling the Display Of Web Content."— Presentation transcript:
HTML and XHTML Controlling the Display Of Web Content
Markup Languages There are two components to any document What it says (content) How it looks A markup language uses a special syntax to imbed information about how the content should be displayed in the file that contains the content.
Hypertext The basic idea of hypertext has been around since 1945 when Vannever Bush suggested the usefulness of having being able to automatically follow references from one document to another Think of it as providing non-linear access to information
Hypertext Markup Language A markup language designed for displaying information on the web Standard maintained by the World Wide Web Consortium ( w3c.org ) Current standard is 4.01 which is being developed into an ISO standard. Designed using a metalanguage called SGML
XHTML XHTML is very similar to HTML except the syntax is stricter A DTD (Document Type Definition) is used to define the allowed elements which are basically the same as those used in HTML Based on XML instead of SGML
Syntax An XHTML document consists of a hierarchy of elements. Unrecognized tags are ignored by the browser Elements must be closed and well-formed (properly nested) Extra white space is ignored
HTML Elements content tag is one of the pre-defined element names optionally followed by a list of attributes content can include other elements The ending tag needs to have the same name as the start tag In XHTML, all elements must be closed
Elements with no content Some elements have only attributes associated with them for example In HTML, the closing tag could be left out In XHTML, use the form
Tags Tags are enclosed by Tags consist of a name followed by zero or more attributes Attributes are separated by white space Names of tags and attributes are all lower case in XHTML Some tags can appear only in certain contexts
Attributes Attributes have the form Attrname="value" The value must have double quotes around it Attributes may be required or optional
Types of Markup Element Structural - describes purpose (e.g. headers and titles) Presentational - describes how it looks Hypertext -links to other documents or other parts of the document Trend is to move presentational markup into CSS document.
Top-level elements Elements html head Contains elements describing document body Can contain only block-level elements
Head Elements - page title generally appears in browser title bar - related documents - data about document - URL - language for client-side scripting
Block-level Elements Behave like paragraphs Headings … for paragraphs , for pre-formatted text and quotations to create blocks Lists -,, Tables and Forms for horizontal lines
Inline Elements Behave like words, characters, phrases for anchors line break for images Emphasis and styling,,,, … In HTML, there are tags like,, that you should now implement in a stylesheet
Odds and Ends Entities are escape sequences for characters that are used by HTML and some non-keyboard characters < > & Comments are enclosed by There are some elements that come first in the document
Minimal HTML Document Appears in title bar Marked-up content
Page Layout For vertical layout use paragraphs, headings and rules If you need horizontal as well as vertical formatting, use tables A table cell can hold all sorts of other elements
Presentation Style Style sheets are external specifications of desired style linked to the document with a element in the element element in element style attribute in a particular element style="property1=value1; property2=value2; … "
Links The tag is used for making links, either internally or externally Attribute href="location" where location can be a URL or a relative path or a name in the current document Attribute name allows you to create label to a particular part of the document for local links
Images You can link to an image file and have that file open in the browser You use the image tag to embed an image into another document where image is the location of the image file jpg, gif and png formats supported
Tables Use the tag to create a table Use border, cellspacing, cellpadding to control looks … for each row for each cell in the row for column and row labels (bold) colspan and rowspan allow you to make irregular tables
Coming next Forms Stylesheets Anything else?
Sources Web Design and Programming by Paul S. Wang and Sanda S. Katila HTML The Definitive Guide by Chuck Musciano and Bill Kennedy Wikipedia http://en.wikipedia.org/wiki/HTML W3C http://www.w3.org/