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.