Please note: You are responsible for whatever content you write. This
information is provided to help users write HTML and understand the world
of the web developing. Technical Support is not responsible for writing or
trouble shooting user's HTML.
| HTML: The Language of the Web |
So you've been surfing the Web, checking out everyone from the White House to the British Monarchy, from Bateman Editorial Cartoons to the Dilbert Zone, from The Economist to the New York Daily News. You keep saying to yourself, "Boy, that's cool. How did they do that?" Eventually, you start to wonder, "OK, now how can I do that?"
Well, wonder no more. In this introduction to HTML, you can pick up the basics of the Hypertext Markup Language. Armed with that knowledge, you can jump onto the bandwagon and put yourself on the Web. Trust us. It's cool.
This is the first of a two-part series, to be continued in the next Newswire. In this part, we'll cover:
Part two will include an in-depth examination of HTML authoring programs.
Getting Started
There are certain things you'll need to get started. The bare minimum:
Any text editor. If it can save in plain (ASCII) text, it will do. This means that anything from Microsoft Notepad or Word to the DOS Edit program to SimpleText to UNIX vi will work. All it has to do is save the documents in plain, flat, unstyled ASCII-style text.
Microsoft Internet Explorer, Netscape Navigator, Opera, whatever. In fact, it's a good idea to keep more than one browser around for testing purposes.
This gets a bit trickier. Sure, you can draw pictures with no problem, but can you get them into the right format? In order to include a picture in a Web page, it needs to be one of these formats: Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), or Portable Network Graphics (PNG). JASC Paint Shop Pro and Adobe Photoshop will save indexed color files as GIF, JPEG, or PNG files, and there are a number of format converters on the market. Whatever graphics program you choose, make sure you can get your files into GIF, JPEG, or PNG.
Strictly speaking, this is optional. You can write Web pages in a text editor, save them to your machine's hard drive, and load the pages into your Web browser in order to see how they look. You don't even need a network connection to do this. The option to load pages from your hard drive is typically called something like "File | Open" (Internet Explorer) or "File | Open Page" (Netscape's Navigator and Communicator).
However, if you plan to publish your documents so the rest of the world can benefit from them, you'll need to put them on a Web server. You can:
- Put them on a shared server at Northwest Nexus
Most of our services include this ability -- take a look at our FAQs on the subject for information about how to get going. If you'd like information about more sophisticated Web hosting options, our sales department would be happy to help.
- Use your own computer as a Web server
As long as you're using a Windows-based PC, a Macintosh, or a UNIX box, and it's connected to the Internet, you can set your machine up to do this. For example, Mac OS v. 8.x and Windows 95 OSR v. 2.x both include a personal Web server, and the freeware version of Quid Pro Quo for Macintosh accomplishes this as well. Check around to see if you can locate something for your platform of choice.
What is HTML?
All Web pages are created using a special language known as HTML (Hypertext Markup Language), which allows authors to organize text, graphics, animation, and sound into documents that a browser can understand. HTML is the glue that holds the Web together -- without it, Web pages wouldn't exist.
With HTML, you can convert any blasé text document into a hypermedia tour de force, complete with links to any object residing on the World Wide Web. But you're not limited to enhancing existing text documents -- you can create razzle-dazzle Web pages from scratch using this flexible markup language.
Markup language? Yes indeed. HTML is a markup language; it's not one of those complex programming languages that computer scientists discuss using cryptic jargon and lots of math. HTML is not something you use to create a software program, such as a word processor or a video game. Instead, it's a friendly language with the singular purpose of creating Web pages.
Marking up text is nothing new, really. Think for a moment about how you highlight a word or phrase in a word processor document and then apply a special format to it. You can change the font type and size; specify bold, italic, or underlined; and even change the color of the highlighted text. In essence, you are marking up a document. But, rather than going onto the Web where browsers view them, word processor documents usually remain on a personal computer to be viewed by word processors.
Generally speaking, a markup language is a formal set of rules and procedures for preparing text to be electronically interpreted and presented. In the case of HTML, you create documents to present on the Web, where they're interpreted by browsers. When preparing documents for the Web, you apply special keywords, or tags, to portions of the text.
How HTML works: Playing tag
Tags are the fundamental building blocks of HTML. You apply tags to parts of a text document to specify how browsers should interpret that text and the document itself. Do you want portions of the text to appear big, small, bold, or italicized? How about making a word or phrase hyperlink to another Web page? And don't forget hypermedia -- why not add a few nice-looking graphics to the document to jazz it up a bit, and make a few of these graphics link to other places on the Web?
Using tags to mark up a document for electronic publication is easy. You can take a standard word processor document, add a dash or two of HTML, and voila -- you've created a Web page. Not bad, considering the whole process can take less than fifteen minutes when creating simple pages.
HTML tags are very easy to create and use. They're nothing more than a keyword (or even a single letter) inside a pair of less-than (<) and greater-than (>) characters. For example, to indicate the beginning of bold text, HTML uses the tag <B>. You simply type the opening tag <B> at the beginning of any text that you want browsers to display as bold:
This text isn't bold ... <B> but this text is!
Easy enough, eh? When viewed with a browser, all the text appearing after the <B> is bold.
But how about turning off the bold format? That's easy too; simply create a closing tag by putting a forward slash mark before the HTML keyword you want to turn off. For example, to turn off the bold format, you place the tag </B> after the last piece of text you want to appear bold:
This text isn't bold ... <B> but this </B>text is!
In the preceding code line, the words "but this" are bold, like so:
This text isn't bold ... but this text is!
All the other words are normal because they appear before the opening <B> tag or after the closing </B> tag. Pretty simple stuff, isn't it? This structure forms the basis of HTML:
In HTML, you cannot include any spaces between the < > characters and the text inside them. If you type < B>, the browser won't know what you mean because a space appears before the B. To create a tag, squish the < > characters right up against whatever you put inside them -- no spaces allowed.
Specifying an HTML document
If a Web page is nothing more than a text document marked up with a bunch on HTML tags, how does the Web browser know the difference between the two? What happens, for example, when a browser comes across a regular text file? And, better yet, what happens when a browser encounters a document full of HTML tags?
Depending on how they're designed, browsers have two different methods of identifying an HTML document:
Because you have no foolproof way to knowing which method a particular browser will use to view your Web document, you should use both methods of identification.
Consider, if you will, this poem. It has no HTML tags and is stored in a file with a .txt extension, making this nothing more than standard text.
Since the poem has a .txt extension, every browser recognizes it as a plain text document and displays the contents as you would expect. In fact, even if this file's extension were .abc, the contents would be treated as plain text because the text itself contains nothing special to tell the browser otherwise. If, however, the file contained more than just text, and instead was marked up with HTML tags, some browsers would actually disregard the extension and display the document as if it had an .html extension.
Because not all browsers go the extra distance and bother to look inside the files they display for the presence of HTML tags, giving your pages the proper extension is critical. Whenever your Web files contain HTML tags (which they almost always do, unless you have a need to display plain text), they should also have the .html extension (or .htm, for computers that can only handle three-letter extensions). The .html file extension is the standard way of telling browsers to expect HTML code inside.
When plain text resides in a file having the .html extension, browsers treat that text as if it were marked up with HTML. But in the case of our sample poem, there are no HTML tags. As a result, when this document has the .html extension, everything is jumbled together.
As you can see in our jumbled example, creating an HTML document involves more than just saving text in a file format that has an .html extension. In order for a text file to truly be considered an HTML document, the text in that document must, at a minimum, be enclosed in the opening <HTML> and closing </HTML> tags:
<HTML> One Perfect Rose A single flow'r he sent me, since we met. All tenderly his messenger he chose; Deep-hearted, pure, with scented dew still wet - One perfect rose. I knew the language of the floweret; "My fragile leaves," it said, "his heart enclose." Love long has taken for his amulet One perfect rose. Why is it no one ever sent me yet One perfect limousine, do you suppose? Ah no, it's always just my luck to get One perfect rose. - Dorothy Parker, 1926 </HTML>
When these two tags are present, together with an .html extension, any browser knows immediately that it should treat whatever's between these tags as HTML instead of plain text.
Getting the text in order
You might think that the presence of the opening and closing <HTML> tags should make a big difference in how a browser displays your document, but it doesn't. The opening <HTML> tag just tells the browser "Hey, you're dealing with an HTML file -- keep your eyes peeled for more tags from now on." The closing </HTML> tag, on the other hand, just says "OK, you've reached the end of the HTML file -- you won't see any tags from here on out."
In effect, the opening <HTML> and closing </HTML> tags just define the beginning and ending of the file. What falls between these two tags is what matters. And because nothing but plain text falls between these two tags in our poem example, the browser doesn't do anything special with it. HTML doesn't even recognize carriage returns (that is, paragraph marks) the way that your word processor does. Instead, you must supply carriage returns the HTML way -- as tags.
The paragraph-break <P> tag and the line-break <BR> tag can be used to format the document so it displays the way you'd like it to -- in this case, it's important to separate the title, the stanzas, and the authors name. A line break acts much like a single carriage return, forcing the text following it to begin on a new line; a paragraph break acts like a couple of carriage returns, adding a line of blank space between it and the text following it. (These two tags don't require a closing companion tag because they simply tell the browser to insert a paragraph break or line break wherever they appear.)
<HTML> One Perfect Rose <P>A single flow'r he sent me, since we met.<BR> All tenderly his messenger he chose;<BR> Deep-hearted, pure, with scented dew still wet-<BR> One perfect rose. <P>I knew the language of the floweret;<BR> "My fragile leaves," it said, "his heart enclose."<BR> Love long has taken for his amulet<BR> One perfect rose. <P>Why is it no one ever sent me yet<BR> One perfect limousine, do you suppose?<BR> Ah no, it's always just my luck to get<BR> One perfect rose. <P>- Dorothy Parker, 1926 </HTML>
The addition of the <P> and <BR> tags results in the correct layout.
Some more advanced HTML features
The "One Perfect Rose" example in the preceding sections shows how HTML markup tags function to format text so browsers can view it. HTML has many other tags and structures that you can use to create cool Web pages. The following list gives you an idea of some of the other important HTML functions and characteristics:
- You can use nested tags (one tag inside another) to apply more than one type of formatting to the same text. For both bold and italic:
<B><I>Drink to me only with thine eyes</I></B>results in this:Drink to me only with thine eyes
- You can organize your text into logical, easy-to-read sections by using tags for different levels of headings. For a bold, italic, level 3 heading:
<H3><B><I>Drink to me only with thine eyes</I></B></H3>yields:
Drink to me only with thine eyes
- You can supply certain HTML tags with attributes (special keywords that help qualify how the tag acts). To include a graphic image on your Web page, use the image tag <IMG> with the source (SRC) attribute:
<IMG SRC="coolgraphic.gif">which causes the graphic file in question to be loaded.
- What really makes HTML powerful is its ability to organize any number of files onto a single page. Files appearing on a page may be physically located on the same computer as the page itself, or anywhere else on the Web. Each file is stored independently of the pages in which they appear; that is, files aren't stored inside of the Web pages that display them. Instead, HTML merely references, or points to, these files, telling the browser exactly where they're located so it can go out and get them when the time comes for the page to be displayed. In truth, a Web page is nothing more than a text file that may contain references to any number of image, animation, and sound files that the browser will retrieve, assemble, and display when that page is accessed.
You can include hyperlinks to any other type of object residing on the Web. You only need two things to create hyperlinks: The object that will serve as your link (for example, a word, phrase, image, or animation) and the location of the object to which you want the link to lead.
Suppose you want to link the word "Tarot" to a distant Web site dedicated to the reading of Tarot cards. As long as you know the URL for the site, you're all set. Your code might look like this:
<A HREF="http://www.facade.com/attraction/tarot/">Tarot</A>results in:
TarotHere, the word "Tarot" has been associated with a Web page by combining the <A> anchor tag with a hypertext reference attribute (HREF=" ") containing a URL (http://www.facade.com/attraction/tarot/). As a result, the opening <A> tag is augmented with the special information that is required to create a hyperlink, making it much longer than other tags.
Even though this tag is quite long, the browser treats it as just another opening tag. This tag, however, creates a hyperlink reference for the text that follows. All text following this opening tag is treated as a hyperlink until the browser encounters a closing </A> tag. In this example, only the word "Tarot" is marked as a hyperlink, and whenever it is selected the Web browser connects to the associated site.
Go to the source
While there are lots of online resources to help you learn HTML, the best place to start is to study the code on Web pages you like. When you look at a page and its source you can quickly see the tags used to create certain effects and answer your own "Hey, how did they do that?" questions.
Both Netscape's and Microsoft's browsers allow you to "View Source" on a Web page, to see the HTML document on which the page is based:
- In Netscape Communicator, go to View | Page Source --- or, for older versions of Netscape Navigator, View | Document Source.
- In Internet Explorer, go to View | Source.
Tip -- Here's a little undocumented feature you can use in both Navigator and Internet Explorer: In the URL address window of your browser, click in the field before the http:// part and type "view-source:" and hit return, like this:
view-source:http://www.yahoo.com
HTML authoring tools
If you're a glutton for laborious,
detail-oriented work, you can go ahead and type out every single tag and piece of text on
your page. All it takes is a missing "/" to ruin your whole page,
though, so an HTML-authoring tool can save you a tremendous amount of time and
aggravation. These tools fall into two camps: text editors and WYSIWYG ("What You See
Is What You Get") editors.
Return to FAQ Index |
Return to Topic Index |
|||