|
HTML, Hypertext Markup Language has up to now been the most important internet standard apart from the communication protocols. It is used to describe the pages of the World Wide Web. XHTML is the new XML-based version of HTML. It's actually an application of XML. HTML may never be developed further than version 4.01, but XHTML will, and is being developed for the future. Consquently you may as well learn XHTML right away, or learn the difference between HTML and XHTML if you already know HTML. There are very few differences between HTML 4.01 and XHTML 1.0, and most browsers accept XHTML files.
Let's take a look at the following XHTML document:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
Hello World!
</body>
</html>
It consists of a DOCTYPE declaration (don't worry about it right now) and the three main elements: html
, head
, and body
. One element, the body
element, also has some content: Hello World!
. Notice how each element starts with the name of the element surrounded by <
and >
--the elements start tag, and ends with the element name surrounded with </
and >
--the elements end tag. Also notice that the html
element contains both the head
element and the body
element. head
and body
are child elements of html
and consequently html
is the parent element of head
and body
.
Elements are the building blocks of HTML/XHTML documents. They have element names so that the web browser can tell them apart and the <
(or </
) and >
surrounds the names so that the browser can tell the difference between an element and any other text, like the content. Most elements have element content (but some are empty elements). The element content is what you find between the start tag and the end tag, apart from other elements (child elements). To add more information about how an element should behave in a document we must introduce attributes. An attribute describes how an element should function, how it should be formatted, how it should be interpreted, what it should reference etc. It consists of an attribute name and an attribute value. Attributes are placed in the start tag after the element name like this:
<element_name attribute_name="attribute_value">
...element_content...</element_name>
Here's an example:
<h1 style="color:red">This is a header</h1>
The h1
element is a header. It has an attribute, style
, with the value color:red
. The code tells the browser to print "This is the coolest header" according to the style rules defined by the style attribute. In this case the text will be red. (learn more about style in the CSS tutorial). It also tells the browser that the text is a header of the first order.
All HTML documents must have the elements html
, head
, and body
. They also have to be nested (have parent-child relationships) as in the first example above. In other words, the root element of a HTML document must be html
, and all other elements must be decendants of the html
element. There are a few more general rules, but let's not complicate things further right now.
/>
).id
attribute instead of the name
attribute.Now that you know the basics about HTML/XHTML documents and how elements are built up it's time to take a closer look at what you can do with this mark-up language, and which elements to use where.
Elements: base, head, html, link, meta, script, style, title
Document type declaration:
Elements: body, div, h1, h2, h3, h4, h5, h6, hr, p, !-- (comment)
body
elementElements: abbr, acronym, address, b, bdo, big, blockquote, br, cite, code, del, dfn, em, h1, h2, h3, h4, h5, h6, i, ins, kbd, p, pre, q, samp, small, span, strong, sub, sup, tt
Basic elements: br, em, h1, h2, h3, i, p, span, strong, sub, sup
Elements: ol, ul, li, dl, dt, dd
Elements: a, link
Elements: area, img, map
Elements: table, caption, col, colgroup, tbody, td, tfoot, th, thead, tr
Basic elements: table, tr, td
Elements: frameset, frame, noframes, iframe
Elements: button, form, fieldset, input, label, legend, textarea, select, optgroup, option
Basic elements: form, input, textarea, select, option
Elements: object, param, script
CSS, Cascading Style Sheets, is a web standard for adding style to web content. It can be used with HTML and XML, including applications of XML, such as XHTML, SVG, and MathML. Any element of a document can be formatted with CSS. There are three ways to do this and each has it's pros and cons. Take a look at the following (X)HTML examples:
Inline CSS using the style
attribute:
<html>
<head>
</head>
<body>
<h1 style="color: red; font-size: 36px">Header</h1>
</body>
</html>
Document-wide CSS using the HTML style
tag:
<html>
<head>
<style>h1 { color: red; font-size: 36px }
</style>
</head>
<body>
<h1>Header</h1>
</body>
</html>
Using an external CSS file to format HTML elements:
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Header</h1>
</body>
</html>
The external CSS file stylesheet.css
:
h1 { color: red; font-size: 36px }
All three methods will give you the same result. The size of the header will be 36 pixels and the text color will be red. Other properties (such as margins, borders, background, font, alignment etc.) are not specified in our example and will be rendered according to the browsers default settings for h1 elements.
Now let's look at the pros and cons of the three approaches. The first alternative will give you full freedom to format elements independently, but this can make sites and documents very difficult to edit and maintain. If you want to make all paragraphs in a (X)HTML document black instead of brown you need to edit every single p
tag. Avoid this method unless you need to make a formatting exception for a certain element.
The second alternative will put all the formatting in the document head. This makes editing easier but the freedom of independent formatting is limited. To change the look of all paragraphs you only need to edit the CSS in the style
element in the document head. Use this method when you want consistent formatting all through a document.
The third alternative will put all the formatting in a separate file. This makes editing easier for sites with many pages, but the freedom of independent formatting is limited. To change the look of all documents that uses a style sheet you only need to edit the CSS file. Use this method when you want the same formatting in several documents.
In a typical web site all three approaches may be used. One or more separate CSS-files may describe site-wide formatting and local exceptions are handled in the respective documents or elements.
Here is a sample CSS file where most applicable CSS1 properties are specified with sample values for the p
tag:
p {
color: #ffffcc;
background-image: url(tiles.gif);
background-repeat: repeat-y;
background-attachment: fixed;
background-position: center top;
display: block;
clear: left;
float: none;
white-space: normal;
text-decoration: underline;
word-spacing: 1em;
letter-spacing: 3px;
vertical-align: middle;
text-transform: none;
text-align: right;
text-indent: 10%;
line-height: 18px;
font-family: verdana, helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
margin-top: 1em;
margin-right: 2px;
margin-bottom: 0.5em;
margin-left: 1em;
padding-top: 1em;
padding-right: 2em;
padding-bottom: 0.5em;
padding-left: 1em;
border-top-width: 1mm;
border-right-width: 2px;
border-bottom-width: 0.5em;
border-left-width: 1em;
border-top-color: red;
border-right-color: lightgreen;
border-bottom-color: white;
border-left-color: #457654;
border-top-style: solid;
border-right-style: groove;
border-bottom-style: ridge;
border-left-style: outset;
}
Here is the same stylesheet using shorthand properties:
p {
background: url(tiles.gif) repeat-y fixed center top;
color: #ffffcc; display: block; clear: left; float: none; white-space: normal;
text-decoration: underline; word-spacing: 1em; letter-spacing: 3px;
vertical-align: middle; text-transform: none; text-align: right;
text-indent: 10%; line-height: 18px;
font: verdana, helvetica, sans-serif 12px bold italic small-caps;
margin: 1em 2px 0.5em 1em; padding: 1em 2em 0.5em 1em;
border-top: 1mm red solid;
border-right: 2px lightgreen groove;
border-bottom: 0.5em white ridge;
border-left: 1em #457654 outset;
}
Note: The CSS above is valid CSS1, CSS2 and CSS3. There are just more formatting options in the newer standards.
Download the CSS standards and learn more about style sheets at W3C - Style.
© Copyright CARPE 2003-. All rights reserved.