"Mr. Martin, I suppose, is not a man of information beyond the line of his own business. He does not read?"
"Oh yes!—that is, no—I do not know—but I believe he has read a good deal—but not what you would think any thing of. He reads the Agricultural Reports and some other books, that lay in one of the window seats—but he reads all them to himself..."
We're going to use these words as the content in a simple web page.
But first, we need to look at a couple of requirements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> </title> </head> <body> </body> </html>
This is the most minimalistic web page you can create; a blank one.
You don't need to know too much about this stuff, but...
Notice that we have open and close tags, with others inside.
Right now, everything is empty.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>An extract from Emma (Volume 1 Chapter 4)</title> </head> <body> <h1>An extract from Emma (Volume 1 Chapter 4)</h1> <p>"Mr. Martin, I suppose, is not a man of information beyond the line of his own business. He does not read?"</p> <p>"Oh yes!—that is, no—I do not know—but I believe he has read a good deal—but not what you would think any thing of. He reads the Agricultural Reports and some other books, that lay in one of the window seats—but he reads all <em>them</em> to himself..."</p> </body> </html>
Here's the same page, now with content.
We've given our page a title, a heading and a couple of paragraphs.
We've also put in an emphasis tag.
<style type="text/css" media="all"> h1 {color: green; text-align: center;} p {color: blue; font-size: smaller;} .highlight { background-color: #CCC; outline: thin dotted black; text-decoration: blink; } div#notice { background-color: #FFCC00; border: thick solid green; } </style>See sample
The style tag lets the page know that we have some rules to apply.
Inside the style container we provide rules that start with an element (h1, p) to look for, followed by a property (color, font-size) and value (green, smaller).
Then, we stick it in to the head of our XHTML document.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>An extract from Emma (Volume 1 Chapter 4)</title> <style type="text/css" media="all"> h1 {color: green; text-align: center;} p {color: blue; font-size: smaller;} </style> </head> <body> <h1>An extract from Emma (Volume 1 Chapter 4)</h1> <p>"Mr. Martin, I suppose, is not a man of information beyond the line of his own business. He does not read?"</p> <p>"Oh yes!—that is, no—I do not know—but I believe he has read a good deal—but not what you would think any thing of. He reads the Agricultural Reports and some other books, that lay in one of the window seats—but he reads all <em>them</em> to himself..."</p> </body> </html>See result
This is a complete page, with style rules.
Show resulting page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css" media="all"> </style> </head> <body> </body> </html>Plain text version