Vocabulary Basics
A little something to get us started
- HTML: Hypertext Markup Language
- XHTML: Extensible Hypertext Markup Language
- XML: Extensible Markup Language
- WYSIWYG: What you see is what you get
<html>
<head>
<title>
Some Title
</title>
</head>
<body>
Your content here
</body>
</html>
XHTML vs. HTML
XHTML vs. HTML
My markup language can beat up your markup language:
You have heard of HTML, but what is XHTML?
- XHTML is replacing HTML
- XHTML is almost identical to HTML, however. . .
- XHTML is a stricter and cleaner version of HTML
- More Accessible
- Extensible
- Works on mobile devices/multiple browsers
- XHTML is a W3C Recommendation
XHTML is Almost Identical
XHTML is Almost Identical?
Creating well formed documents:
- XHTML elements must be properly nested
- XHTML documents must be well-formed
- Tags must be in lowercase (everything except content)
- All XHTML elements must be closed
Good XHTML Habits
Good XHTML Habits
Give it to me straight, doc - what do I need to do?
Properly nest ALL tags (Draw imaginary lines from the opening to closing tag. Those lines must not cross any other lines.)
Well-formed documents simply means you use all necessary tags and attributes (Doctype & XML attribute)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Close ALL tags
<p>Close It</p> If tag is solo <br /> close it with space and slash - <hr /> <img />
lowercase
All attributes MUST be quoted
Special characters must be converted (e.g. NO &, USE & instead)
All content MUST be inside a BLOCK level element (e.g. <p> or <div>)
Doctype
<!Doctype>
Avoid the quirks!
Doctype is necessary for writing valid, standards-based code. The doctype communicates to the browser the version of XHTML that you are using. If the browser doesn't know the doctype you are using it can switch to quirks mode and the resulting output (display) can be unexpected.
Multiple Document Types are available
XHTML 1.0 Strict (Recommended)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Pick one, stick it at the top of your document and move on!
Head Section
The <head> Section
2nd Floor: title, Meta Tags, CSS links and housewares
Web pages can be divided into two sections; head and body. The head section contains all the behind the scenes information. The most common are listed below.
Title - appears on the title bar of the browser
<title>Web Page Example</title>
Meta Tags - provide information that is not visible to browsers. Common meta tags relevant to search engines are keyword and description tags.
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
CSS - inline style or the CSS links
<link rel="stylesheet" href="" media="screen,projection" type="text/css" />
<link rel="stylesheet" href="" media="print" type="text/css" />
Body Section
The <body> Section
3rd Floor: Content is King
Web pages can be divided into two sections: head and body. The body section contains the content!
Remember:
- All content MUST be inside a BLOCK level element (e.g. <p> or <div>)
- Never place anything below the closing </body> or </html> tags
- Close ALL tags
common tags
Commonly Used Tags
Tag Soup. . .yum!
A few tags to get us started:
- <p> Paragraph </p>
- <br /> break
- <img src="filename.gif" alt="alternative text" />
- <a href="http://www.cnn.com" title="CNN News">CNN News</a>
- <div>Some Content </div>
- <span>More Content </span>
