Powerpoint: Intro to XHTML

Download Report

Transcript Powerpoint: Intro to XHTML

Web page
- A Web page is a simple text file that
contains a set of HTML tags (code) that
describe (to the browser) what should go
on a web page. It may also contain CSS
styles, which tell it how the page should
look.
-The Web browser interprets these tags to
decide how to format the text onto the
screen.
HTML Review -Basic tag syntax
<tag attribute=“value”> content
</tag>
tag - describes the function or format of the content
 attribute – describes what aspect of the tag you are
changing (there may be MANY attributes for one tag
or none)
 value – describes how you are changing the tag.
 Content – what you want to be visible on the page,
such as a welcome message.
Example:
<body bgcolor=“blue”> welcome!</body>

Anatomy of a Tag
(standalone tags)
<tag attribute=“value” />




See how the tag still has a beginning
and ending />
No content
Not a “containing” tag
Ex. <br /> <img src=“homer.jpg” />
Anatomy of a web page

HTML – HyperText Markup Language
 WHAT content goes in the web browser.
 Not a programming language! But a language for programs to interpret into
web pages.

XHTML – eXtensinble HTML





Latest standard of HTML
XML and HTML have a kid
Stricter, but easier to get what you want on the screen.
Still an .html file, still called “hypertext”
CSS – Cascading Style Sheets
 HOW your content is depicted in the web browser.
 .css files
XHTML
The newest version of HTML
 Has many requirements
 Makes sites more consistent across
browsers (this will increase with time)

1. Declare a DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
This tells the browser what kind of markup it
is dealing with
2. Declare an XML Namespace
<html xmlns="http://www.w3.org/1999/xhtml">
-when a browser needs to know what in a DTD
(Doctype Declaration) this is where it can find
it.
Character Encoding
Many possible characters (chinese, arabic, greek,
latin)
 To keep browsers in “the know” you should have
character encoding at the top of your document

<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />

(note this is only if you are saving your files in ANSI
formatt in notepad!)

NOTE: Dreamweaver takes care of this for you.
3. Declare a content type
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1" />
- This is if your text files are saved in ANSI
format. (This says we are using latin, instead of
chinese, japanese, greek, etc characters)
- Goes in the header of your document
4. Close EVERY tag

Standalone:
<img src=“pixie.jpg” />
<br />

Tag pairs:
<p> </p>
<table> </table>
5. Correctly nested tags
If a tag opens before a preceding one
closes, it MUST be closed before that
preceding one closes:
 <p> It’s <strong> very
important</strong> to nest them
properly </p>

6. Inline tags cannot contain block level tags.
Block level tags (<p><h2><div>) stack on
top of one of each other on the page.
 Inline tags (<a><em><strong>) occurs in
normal flow of text and don’t force a new
line.
 You can do <p> <a> </a> </p> but not the
other way around.

Block vs Inline Tags

Inline tags

Block-level tags
 <a>
 <p>
 <strong><em>
 <h1><h2> etc
 <big><small>
 <ol><ul>
 <span>
 <div>
Block usually cannot contain other
block level tags.
Block level tags cannot be inside other
block level or inline tags
 But <div> tags and the <body> tag (also
block-level) are the exception

It is ok to put <div> <p> </p> </div>
7. Lowercase tags

No capital letters in tags or
attribtues. – The Doctype tag is the
only exception to this.
8. Attributes must have values, values
must be quoted

In HTML you didn’t have to do this. In
XHTML this is crucial.
<img src=“images/monkey.jpg” />
9. Use encoded equivalents for
& ‘ and <

You must use special characters when you
want to use these in your document
Validating your XHTML
Your document’s XHTML must validate at
http://validator.w3.org/
 (You will want to validate via file upload). You
can use the Validator to find errors you may
need to convert into XHTML compliant code.
 Browse to upload your file and click “check”
 Problems are noted, but it may not tell you
exactly what’s wrong.
