<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Page</title>
</head>
<body>
</body>
<html>
That's all well and good, but that doesn't show a single bit of anything in your web browser. We're going to start by building a plain (ugly) page and then I'll show you how to come back and fancy it up.
The Document Structure
The document structure in a web page is based on the typographical structure of printed documents. That's not really surprising since the impetus for HTML was to electronically reproduce printed documents for academic consumption. HTML was created for sharing annotated reports, not for hyping the next best buy. Frankly, I expect that most writers have at least a rudimentary understanding of the difference between a heading, body text, block quotes, data tables, and citations. If you're not exactly sure what I'm talking about, try reading some introductions to Semantic Typography for web designers.
So, all that to say, don't worry about the uglies of the document: tell us what the structure is. We can make it pretty with Cascading Style Sheets, but we have to know what we're doing. And on that note, here are your basic content tags.
Tag | Denotes |
| <h1>...<h6> | These are your heading tags. H1 is your top level heading--like the title of your document. H2 works for sections, H3 for sub-sections, etc. It's really, really rare to get down to H5, let alone H6, but, they're there just in case. |
| <p> | Paragraphs! Need I say more? |
| <q> | Inline quotes, like <q>No man is an island...</q> (which looks like: No man is an island...) |
| <blockquote> | Structurally, text contained by a <blockquote> tag pair will be indented left and right, as most style manuals indicate to do for long quotations. | <
| <em> | Emphasized text, usually shown italicized or oblique |
| <b> | Bolded text |
| <span> | The span tag almost needs a tutorial all on its own. Pretty much, it's a way to introduce new structure elements that are not covered in the HTML vocabulary. When you use it, you need to add an attribute. We'll start with the class attribute, because we'll use that a lot with CSS. The tag pair will look like: <span class=""></span> We define (name and describe) classes inside our style sheets (later article). |
| <a> | A stands for anchor, and it has one unique attribute that we care about: href. href is short for Hyperlink Reference. In use, it looks like: <a href="http://some.webpage.com/">Linked Text</a> |
Now, armed with these tags, let's go show off our opus.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>My Ugly Page</h1>
<p><b>Thank you!</b> ... for visiting my ugly page. Well, it's not <em>really</em> ugly; it just hasn't put on its <q>war paint</q> yet, but we'll get to that in a bit. Read on for an excerpt from my upcoming novel, <span class="bookTitle">What I Wrote, No, Seriously</span>.</p>
<blockquote>
It wasn't dark and stormy, or some other tired cliche. It was Caterday, and I read the <a href="http://www.lolcat.com/">lolcat's blog</a> with glee. The fur ball otherwise known as Cat decided my keyboard would make a great place to lay down his weary carcass. After all, those fingers poking keys belonged to his human, and they had better things to do than entertain their owner. Or maybe I was reading too much into the cat's actions. Maybe all he really wanted was another set of flying lessons.
</blockquote>
<p><a href="#">Buy it now!</a></p>
</body>
<html>
That should now look like:
Posts
No comments:
Post a Comment