Web Page Design The Key to a Successful Web Page by Judy Bogdanets.
Web page - A Web page is a simple text file that contains a set of HTML tags (code) that describe...
19
XHTML
-
Upload
tyler-stanley -
Category
Documents
-
view
213 -
download
0
Transcript of Web page - A Web page is a simple text file that contains a set of HTML tags (code) that describe...
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/xhtml1-transitional.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
<a><strong><em><big><small><span>
Block-level tags<p><h1><h2> etc<ol><ul><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 exceptionIt 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.
