HTML 2 - Review
What You Should Already Know |
XHTML Rules:
- All basic tags are included in each web page - html, head, meta, title, and body. For best results use the template at the bottom of this page to start every web page.
- All tags are written in lower case. In XHTML, <em> is not the same as <EM>.
- All tags are ended with another tag, e.g., <em> ... </em>, or they are stand-alone tags, as described below.
- All stand-alone, sometimes referred to as "empty", tags are ended with a space and a forward slash, e.g., <br />. Stand-alone tags include: <br />, <hr />, <meta />, <link />,and <img />.
- All tag pairs should be properly nested. That is, if a series of tags surround some content, the most recently opened tag should be closed first.
- All HTML attributes must have values and those values must be in quotes. This includes numbers!
Note: attributes that affect the appearance of your pages are handled primarily by CSS.
XHTML Tags:
- !DOCTYPE - content is used by validator
- html
- head
- title - use meaningful content, search engines use this information
- meta
- link - used to attach an external CSS file
- style - used to embed CSS rules
- body
Two categories of tags can occur between the open and close body tags - block elements and inline elements. Here are the rules:
- Block elements MUST occur directly within the body tag.
- Inline elements MUST appear within a block element - and the body is not considered a block element.
- Block elements may NOT occur within another block element, EXCEPT that the blockquote tag REQUIRES another block element directly within it. Another exception is lists. All list tags are considered block elements, but only li elements can be placed directly inside the ol or ul tag.
- blockquote - block
- p - block
- h1 - h6 - block
- ul, ol, li - block
- li tags are placed within ul or ol tags
- lists may be nested within lists, but the new list must be inside an li tag
- all content in a list must appear inside an li tag - it can contain text, inline elements, block elements, or other lists
- pre - block
- hr - block
- em - inline
- strong - inline
- br - inline
- img - inline
- a - inline
CSS Properties:
- background-color
- color
- font-family
- font-size
- font-weight
- font-style
- font-variant
- text-decoration
- border-bottom
- Note: you may have used many other CSS properties, but the above are the only ones you are responsible for now.
Template used to start all pages:
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Place a title here</title>
<link type="text/css" rel="stylesheet" href="yourcssfile.css" />
</head>
<body >
content, content, content ...
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" height="31" width="88" /></a>
</p>
</body>
</html>
|
|
Return to Top
|