Step 1
First you need to create a text document containing the words that you want to appear on your Web page. Most word processing programs will work fine, as long as you give your document a name ending in .html (or .htm if you're working on a PC) and save the document as "Text Only." Type out your story, book review, fascinating facts about Jupiter, or whatever it is you want to publish. Here are some tips for organizing your text:
- Begin with a title and an attention-grabbing greeting or introduction, so people will know immediately what your page is about and will want to read more.
- Think about logical places to insert breaks in your text. No one wants to scroll down a long, uninterrupted block of text. Your page will be a lot more readable if you put in frequent paragraph breaks and horizontal rules (more about these later).
- Think about where you might want to insert pictures, if you have them in electronic files. (More about downloading images in Step #4.) A lot of pages start off with an eye-catching image right at the top, next to the title.
- If your word processing program has an option for "smart" or "curly" quotes, turn it off! Curly quotes will show up on a browser as strange little icons rather than quotation marks. The straight quotes may not look as nice, but they're the ones you have to use for Web authoring.
Step 2
Now you need to insert some formatting tags in your document that will tell an Internet browser (such as Safari, Firefox, or Internet Explorer) how to arrange your words and pictures on the screen. These tags make up a language called HyperText Markup Language, or HTML. The basic skeleton for an HTML document looks like this:
Now you need to insert some formatting tags in your document that will tell an Internet browser (such as Safari, Firefox, or Internet Explorer) how to arrange your words and pictures on the screen. These tags make up a language called HyperText Markup Language, or HTML. The basic skeleton for an HTML document looks like this:
<html>
<head>
<title>Title of Page</title>
</head>
<body>
Text of page...
</body>
</html>
<head>
<title>Title of Page</title>
</head>
<body>
Text of page...
</body>
</html>
Notice that (1) each formatting tag appears between "less than" (<) and "greater than" (>) signs, and (2) the tags often appear in pairs, with the second tag in the pair beginning with a "slash" (/).
Here's a list of some of the basic formatting tags in HTML:
<h1>...</h1>
header, level 1 (the largest size type for a header, usually used at the beginning of a page or the start of a new section). Smaller headers are tagged with <h2>...</h2>, <h3>...</h3>, etc.
<b>...</b>
boldface text
<i>...</i>
italic text
<center>...</center>
centered text
<p>
paragraph return (inserts an extra line space between paragraphs)
Note: Any paragraph returns that you insert in your document by simply hitting the Return key on your keyboard will be ignored by a Web browser. You must use the tag <p> to create a paragraph break on the screen.
<br>
line break (no extra space)
<hr>
horizontal rule (a line running left-to-right across the page, to separate one section from the next)
<ol>...</ol>
ordered, or numbered, list. Each list item begins with the tag <li> and falls somewhere between the <ol>...</ol> tags.
<ul>...</ul>
unordered, or bulleted, list. Again, each list item begins with the tag <li>.
<a href="filename.html">...</a>
a hotlink to another file in the same folder
<a href="http://URL">...</a>
a hotlink to another site. You will have to know the Uniform Resource Locator (URL), or Web address, of any site to which you want to link your page.
<img src="image.gif">
This tag would insert an image with the filename "image.gif" on the far left side of your page.
(Note: Don't worry if this information seems confusing or overwhelming right now. It will make more sense as you apply it in the next few steps.)
Step 3
You may feel somewhat baffled after reading that long list of formatting tags in Step #2. It's easier just to look at a real HTML document and then see how it gets translated into a Web page. You can view the "source document" behind any Web page by going to the "View" menu (in Safari -- other browsers may be slightly different) and selecting "View Source." When you do this, you'll see the document with HTML tags that creates the page currently in the window of your browser.
You may feel somewhat baffled after reading that long list of formatting tags in Step #2. It's easier just to look at a real HTML document and then see how it gets translated into a Web page. You can view the "source document" behind any Web page by going to the "View" menu (in Safari -- other browsers may be slightly different) and selecting "View Source." When you do this, you'll see the document with HTML tags that creates the page currently in the window of your browser.
We've created a Sample Web Page for you to study. Using the link below, go to the Sample Web Page and look at how the text and image appear on your screen. Then use "View Source" to call up the document we used to create the sample page. If possible, print this document. Compare it line-by-line with the page in your browser window. Do you see how all the formatting tags work?
Step 4
If you don't already have image files for your page, you can download some from other Web pages. Use your common sense to decide which images you're allowed to use and which ones you shouldn't. Images provided by NASA, for example, are for the public's use. A corporate logo is private property. If you're looking for some astronomical images,
you might try NASA’s list of Astronomy Pictures of the DayIf you don't already have image files for your page, you can download some from other Web pages. Use your common sense to decide which images you're allowed to use and which ones you shouldn't. Images provided by NASA, for example, are for the public's use. A corporate logo is private property. If you're looking for some astronomical images,
Depending on what kind of computer and browser you're using, you'll have to use a slightly different procedure to download an image onto your hard drive. Here's how you would do it on a Macintosh computer, using a Safari browser:
1. Use your mouse to position the pointer over the image.
2. Hold down the button on the mouse and drag the image to your computer’s desktop.
3. Let go of the button, and you'll see a small icon. The image has now been downloaded onto your hard drive. If you decide to change the name of the file, make sure your new name ends in .gif or .jpg (This will be important if you use the image in your own Web page).
4. Click on the icon to view the image as it would appear on your Web page.
While you're searching for images, don't download every one you see. You'll take up a lot of space on your hard drive if you grab dozens of images. Select just a few -- perhaps your own "Top Five" list -- that you think are the best for your page.
Now you're ready to insert the formatting tags in your own document. Remember to start your document with <html> and end it with </html>. The "title" that you type between the tags <title>...</title> will appear at the very top of the browser window when your page is being viewed. This title might be, but doesn't have to be, the same as the header at the top of your page.
Step 6
Now it's time to see how well your formatting has worked. Save your text document (Remember: "Text Only," and the file name should end in .html or .htm) and go back to the browser. Under the File menu, select "Open File..." or "Open Local...". From there you should be able to find your document's name and click on "Open". Your document will appear in your window, looking like a real live Web page!
Don't be discouraged if there are some problems at first. HTML formatting requires a lot of attention to tiny details. If something doesn't look the way you expected, make a note of it and go back to your text document to adjust it. Then save the document again, go back to the browser, and click on "Reload". You'll probably have to go back and forth like this many times before your page looks perfect to you.
Step 7
Your school may or may not have an account with an Internet provider that allows you to put your Web page on a server so that other people can read it. If not, you can just keep practicing with documents on your computer's hard drive. Or, you might look into getting some free Web space for yourself or your school. Some sites that provide this service are listed in the Idea Bank at the bottom of this page.
If you are able to put your page up on a server, how will anyone find it? Unless they know about your page already -- and know the exact URL! -- they won't be able to visit it. Here are three ways you can give people a roadmap to your location on the information superhighway:
- Find some other Web sites that are related to your page in some way. They might be sites that deal with the same topic or are published by students your age. Write to the people who maintain these pages and ask them to check out your site. If they like it, they might add a link to your page on theirs.
- Register your site with a search engine such as Google or Yahoo . Once you've added your URL to one of these databases, people who are interested in the general topic of your page will get a listing of your site when they do a search. For example, in Yahoo, navigate through their categories until you get to the one that best suits your page, and then click on "Add URL." You'll be asked to provide the title of your page, its URL, and a comment or short sentence that describes what's on the page. In your comment, try to include words that you think an interested person might type in as key words when doing a Yahoo search. "Jupiter facts and images" or "Book reviews by middle school students" are examples of good comments.
A great place to get ideas for your own Web page is from the pages that are already out there. We've made a list of some interesting Web pages that you might want to check out. Click here to visit our Links for Kids page.
There are also many Web sites that can help you improve your own Web page. Here are just a few of them:
- Case Western's
- W3Schools HTML Tutorial
- The Banner Generator
- Yahoo's Clip Art page
- Barry’s Clip Art server
- Microsoft's Office Online offers free clip art, photos, animations, and sounds
Need to find a home for your home page? Try the following sites, which offer free Web space for schools and individuals.
- Angelfire
- Google Sites
- Yahoo's listing of Free Web Page providers
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
Select a tutorial from the menu to the left.
Select a tutorial from the menu to the left.
With our "Try it Yourself" editor you can experiment with HTML, CSS, XML, JavaScript, and see the result in your browser.
0 comments:
Post a Comment