A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.
It's fast and free.
processing...Retrieve Sign In
Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.
processing...Welcome to Webmonkey
- edit articles
- add to the code library
- design and write a tutorial
- comment on any Webmonkey article
Sign In Information Sent
Make an HTML Document
/skill level/
/viewed/
HTML is the lingua franca of the Net. It's a simple, universal mark-up language that allows web publishers to create complex pages of text and images that can be viewed by anyone else on the web, regardless of what kind of computer or browser is being used.
Despite what you might have heard, you don't need any special software to create an HTML page; all you need is a word processor (such as SimpleText, BBEdit, or Microsoft Word) and a working knowledge of HTML. And lucky for all of us, basic HTML is dead easy.
Contents |
It's All About the Tags
HTML is just a series of tags that are integrated into a text document. They're a lot like stage directions -- silently telling the browser what to do, and what props to use.
HTML tags are usually English words (such as blockquote) or abbreviations (such as "p" for paragraph), but they are distinguished from the regular text because they are placed in small angle brackets. So the paragraph tag is <p>, and the blockquote tag is <blockquote>.
Some tags dictate how the page will be formatted (for instance, <p> begins a new paragraph), and others dictate how the words appear (<b> makes text bold). Still others provide information -- such as the title -- that doesn't appear on the page itself.
The first thing to remember about tags is that they travel in pairs. Every time you use a tag - say <blockquote> - you must also close it off with another tag - in this case, </blockquote>. Note the slash - / - before the word "blockquote"; that's what distinguishes a closing tag from an opening tag.
The basic HTML page begins with the tag <html> and ends with </html>. In between, the file has two sections - the header and the body.
The header - enclosed by the <head> and </head> tags - contains information about a page that won't appear on the page itself, such as the title. The body - enclosed by <body> and </body> - is where the action is. Every thing that appears on the page is contained within these tags.
A Basic HTML Document
So let's create a simple sample page, shall we? The first step, of course, is to create a new text document (remember, it should be saved as "Text Only" or "Plain Text" if you're using a word processor that's fancier than, say, SimpleText) and name it "anything.html" where "anything" is, uh, anything.
Your basic document will look something like this:
<html> <head> <title>Summer</title> </head> <body> <h1>Summer Vacation</h1> <p>My summer vacation was sunny, silly, and far too short.</p> <p>How many days till Christmas?</p> </body> </html>
So within the <head> tags, we have the title "Summer," which will appear in the bar across the top of your browser.
Within the body tags, we have everything that will appear on the page. In this case it would look something like this:
Summer Vacation
My summer vacation was sunny, silly, and far too short.
How many days till Christmas?
As you might have guessed, <h1> is the tag for a headline (the largest headline, in fact) and <p>, of course, marks the beginning of a new paragraph. Each paragraph is closed off by a corresponding </p> tag.
Seems simple, huh? Well, it is.
Especially since you can see what HTML people have used to build any web page you find by simply viewing source. Oh, and don't go thinking you need your own homepage to practice, either. You can save HTML documents on your local drive and then open them up using the Open option under the File menu on your browser.
Introduction
What you'll need
At the least, you need some type of text editor, preferably NoteTab.
You can use Notepad to make these, but the best Text Editor around is Notetab, I use Notetab Light, The free version, and it has less features than Notetab pro, but the Maker and a guy who uses NoteTab Pro says there is not much a difference.
Materials:
1) Basic Text Editor (Notetab will work)
2) Some time
Steps
1) Get A Basic Text Editor (Notepad will work)
2) If willing to download, download from [3] If not, Skip step
3) Open up notepad/notetab
4) Go to [4]
Alternate methods
You can download " Notetab " or just use " Notepad or Wordpad "
Suggested readings
- This page was last modified 01:03, 23 May 2008.
/related_articles/
Special Offer For Webmonkey Users
WIRED magazine:
The first word on how technology is changing our world.
Brides | Cookie | Condé Nast Portfolio | Domino | Glamour | Lucky | Men's Vogue | Self | Teen Vogue | The New Yorker | Vanity Fair | W
- View Special Offers
- View All Titles
- Allure
- Architectural Digest
- Bon Appétit
- Brides
- Condé Nast Portfolio
- Condé Nast Traveler
- Cookie
- Details
- Domino
- Elegant Bride
- GQ
- Glamour
- Golf Digest
- Golf World
- Golf For Women
- Gourmet
- Lucky
- Men's Vogue
- Modern Bride
- Self
- Teen Vogue
- The New Yorker
- Vanity Fair
- Vogue
- W
- Wired
Use of this site constitutes acceptance of our User Agreement and Privacy Policy