|
|
|
|
||
        |
|
 |
|||||||||||||||||||||||||||||||||
 |
 |
|||||||||||||||||||||||||||||||||
|
Down To Basics... Understanding the Tags In my last two columns, I built the foundation for your understanding of the web. If you're new here, I'll wait while you go and review them (September column, October column)... Okay? All Set? Now take your seat and listen up. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=x-mac-roman" /> <title>A Sample Page</title> <meta name="generator" content="BBEdit 6.0" /> </head> <body> <p>This is a sample page, containing a small amount of text in one paragraph. This second sentence contains a <a href="#" title="Go Nowhere">link</a>, which in this example, doesn't do much.</p> </body> </html>
What was that!?! That was a brief bit of HTML which creates a document for display in a web browser. Copy that code, from the opening <!DOCTYPE...> declaration down to the closing </html> tag and paste it into a word processor file (you could use Simpletext or AppleWorks or whatever) and save it as text only. Then drag and drop your new file over your web browser's icon or into an open window in your web browser. A page will appear that says, "This is a sample page, containing a small amount of text in one paragraph. This second sentence contains a link, which in this example, doesn't do much." Don't forget to click the Back button to come back here if you click the link. So what's all that other stuff, if only one line of text appears? That other stuff is what makes this an HTML file and what causes it to appear (to be rendered properly) in your web browser. Everything between any pair of <pointy brackets> is a tag. Tags tell the web browser what to do. They can have attributes, as the opening html tag uses the lang="en" attribute to tell the browser the file is in English. Here's a line-by-line rundown of what's happening... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd"> This is a very complex appearing way to say that this file adheres to the XHTML 1.0 Strict standard, and if the browser needs to know more about this standard it can find out at the URL in the second line. <html lang="en"> ... </html> This pair of tags opens and closes the html file, and tells the browser the page is to be rendered in English. Inside every html file you need a head section and a body section. <head> ... </head> The head section can contain one or more of a variety of tags, which tell the browser something about the file and which can help search engines like Yahoo or Google to know what the file is about and whether to list it. In this case it contains two meta tags and a title tag.
...tells the browser some useful things about the file, including the fact that it's a web page and what character set to assume.
...tells whoever cares that I created (generated) the file using BBEdit 6.0. I'll tell you a lot more about meta tags in a later column. This is also a sneaky plug for my review of BBEdit 6 in this issue. I know, I'm shameless. <title>A Sample Page</title> ...is the title tag for the page. The text between the opening and closing title tags will usually show as the window title in your browser. For example, at the top of this window, you see "Mac OS Journal - November 2000". That's in the title tag of the html file that your browser is displaying right now. <body> ... </body> The body section contains, in this simple example, only one tag pair... <p>This is a sample page, containing a small amount of text in one paragraph. Everything between the opening and closing p tags will appear in the browser window in one paragraph. Within that paragraph is a link tag... <a href="#" title="Go Nowhere">link</a> The 'a' makes this an anchor (aka link), the 'href' makes it a reference to some other file, the title "Go Nowhere" will appear as a tooltip in some browsers when you pause the cursor over the link, and the word 'link' is what shows on the page, and is what you click with your mouse cursor to activate the link. In most browsers the link text will appear underlined and blue by default, and after you've clicked it, it will be underlined and purple (if you happen to return to the page so you can see it.) This default behavior may be over-ridden by style instructions in the page code. (Lots more about style later in this series.) All of that does absolutely nothing in this example, because I didn't want you hopping away somewhere and never coming back! There are many tags you can use in the body of a web page. Some require closing tags (the ones with a slash in front) some do not. Here are a few with their definitions. I've left out the pointy brackets. br - within a paragraph, will cause a line break without causing a space to appear between lines. The list above is displayed using several of those tags. It is all wrapped up in a blockquote tag pair to indent it; it has a br tag at the end of each line; and each tag is formatted as bold using the b tag. So I'm using tags to display my explanation of how you use tags to display explanations of using tags to.... Ewwww! I'm getting dizzy. That last group - em, strong and small - illustrates an important point. You, as the author of a document intended for display in web browsers, can't always tell how a particular browser will display the document. Some browsers will display text in an em tag as italic, some as bold, perhaps some as both. (And yes, I used the em tag pair to emphasize that word 'em'.) With our WYSIWYG computers, we've come to depend on near absolute control of the appearance of our documents, but on the web this is not possible, nor, for a lot of reasons, is it advisable. I will elaborate on this in a future column. There's only so much you can see using a simple example like this. So how do you see real-world, complex examples of html code and how do you compare them to what the browser displays? That's easy. Go up to your browser's menu bar right now and select View/Source (in Internet Explorer) or View/Page Source (in Netscape Navigator). A new window appears with what is probably a very confusing pile of code. That code is what is responsible for displaying this page, this column about the web, in this issue of Mac OS Journal. Somewhere in there, if you search for it, you'll find this sentence tucked inside a p tag pair. Most of the page is wrapped up into chunks of text inside table, tr and td tags. I'll cover those tags right here in this column next month. For now it's enough to know that in this case, they're being used to line things up on the page where the editor wants them to appear.
That's It... For Now Well that's probably enough head spinning for now. Your assignment for the month is to view the source of any interesting page you happen upon on the web, and try to understand how what you see on the page relates to that code. That ought to keep you busy and out of trouble. Next month, more tags!
|
||||||||||||||||||||||||||||||||||
|
 |
|||||||||||||||||||||||||||||||||
