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/
| (2 intermediate revisions not shown.) | |||
| Line 1: | Line 1: | ||
| - | + | 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. |
| - | + | ||
| - | == | + | ===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. |
| - | <p> | + | |
| - | + | 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 <tt><p></tt>, and the blockquote tag is <tt><blockquote></tt>. | |
| + | |||
| + | Some tags dictate how the page will be formatted (for instance, <tt><p></tt> begins a new paragraph), and others dictate how the words appear (<tt><b></tt> 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 <tt><blockquote></tt> - you must also close it off with another tag - in this case, <tt></blockquote></tt>. 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 <tt><html></tt> and ends with <tt></html></tt>. In between, the file has two sections - the header and the body. | ||
| + | |||
| + | The header - enclosed by the <tt><head></tt> and <tt></head></tt> tags - contains information about a page that won't appear on the page itself, such as the title. The body - enclosed by <tt><body></tt> and <tt></body></tt> - is where the action is. Every thing that appears on the page is contained within these tags. | ||
| + | |||
| + | ===A Basic HTML Document=== | ||
| + | <html> | ||
| + | <head> | ||
| + | <title>Summer </title> | ||
| + | </head> | ||
| + | |||
| + | <body> | ||
| + | <h1>Summer Vacation</h1> | ||
| + | |||
| + | <p>My summer vacation was sunny, silly, and far to short.</p> | ||
| + | |||
| + | <p>How many days until winter, it���s far to hot?</p> | ||
| + | |||
| + | </body> | ||
| + | </html> | ||
| + | |||
| + | 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: | ||
| + | |||
| + | <pre> | ||
| + | <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> | ||
| + | |||
| + | </pre> | ||
| + | |||
| + | So within the <tt><head></tt> 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: | ||
| + | |||
| + | <blockquote> | ||
| + | |||
| + | '''Summer Vacation'''<br /><br /> | ||
| + | |||
| + | My summer vacation was sunny, silly, and far too short.<br /><br /> | ||
| + | |||
| + | How many days till Christmas? | ||
| + | |||
| + | </blockquote> | ||
| + | |||
| + | As you might have guessed, <tt><h1></tt> is the tag for a headline (the largest headline, in fact) and <tt><p></tt>, of course, marks the beginning of a new paragraph. Each paragraph is closed off by a corresponding <tt></p></tt> 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. | ||
| + | |||
| + | <span id="title_name_el" class="wm_hidden_meta_class" title="Intro to HTML" style="visibility:hidden"> <span id="page_path_el" class="wm_hidden_meta_class" title="/webmonkey/96/53/" style="visibility:hidden"> <span id="author_el" class="wm_hidden_meta_class" title="wtmonkey" style="visibility:hidden"> <span id="creation_date_el" class="wm_hidden_meta_class" title="1999-02-22T24:00:00Z" style="visibility:hidden"> </span></span></span></span> | ||
Current revision
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.
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
<html> <head> <title>Summer </title> </head>
<body>
Summer Vacation
My summer vacation was sunny, silly, and far to short.
How many days until winter, it���s far to hot?
</body> </html>
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.
- This page was last modified 21:20, 5 November 2009.
/related_articles/
Special Offer For Webmonkey Users
WIRED magazine:
The first word on how technology is changing our world.
Registration on or use of this site constitutes acceptance of our User Agreement (Revised 4/2/2009) and Privacy Policy (Revised 4/2/2009).
Wired.com © 2009 Condé Nast Digital. All rights reserved.
The material on this site may not be reproduced, distributed, transmitted, cached or otherwise used, except with the prior written permission of Condé Nast Digital.