Before you begin authoring Web pages, you should be familiar with Netscape and the World Wide Web. You should be comfortable using Windows or the Macintosh and have word-processing experience. It's best if you also know how to manage your files, including how to move a file from one directory or folder to another. ATN offers classes and documents that give you the foundation you need to become a Web author. In this document you'll build on what you know to create and edit Web documents.
You'll get your Web page on-line and available to other people in a series of steps:We'll talk about these steps more in this document, and we'll let you know when you need to refer to other documents for more in-depth treatment of some steps. Let's start by looking at step one, planning your page. You'll get some ideas from other pages you've seen, and you'll come up with new ideas on your own.
- Plan your Web page. Who is your audience? What messages do you want to communicate? Sketch out your ideas. Outlining skills help here.
- Create a draft of your Web page.
- Test your Web page locally from your computer desktop or file server. Use a graphical browser, like Netscape, as well as a text-only browser, like Lynx, to see how your page looks and works.
- Put your Web page on the internet server where you have made arrangements to store your pages and set the appropriate access privileges for your Web files and directories.
- Test your page with available browsers.
- Revise your Web page as needed.
- Notify other people that your Web page is open for business.
What makes a good Web page? The Univeristy of North Carolina at Chapel Hill Style Guidelines committee has a WEB page with some ideas on what one should consider when developing a WEB pageHTML Guidelines page athttp://www.unc.edu/campus/aboutweb/howto/guidehtml.htmlIn addition you will find that for many state governmental orginizations, you state has set up a standard for govermental WEB pages and you should follow them if you are creating a WEB page for your orginization. The example below trys to follow the UN guidelines to show you how to create your own Web page and continues with Web Page Advanced Design Let's look now at how to create your Web page.
The basic tool for transforming text, graphics, and multi-media files into a completed Web page is the Hypertext Markup Language (HTML). Netscape, Mosaic, Lynx, and other browsers read HTML "tags". Tags are commands that tell browsers what to do, such as where to insert line breaks in text, where to show a link, or what file to display when a reader selects a link. To create a Web page, you put together text and HTML tags in a text file, called the "source" file. Web browsers interpret this source file, and display it on the Web. Each browser may interpret and display the source file a bit differently. In this document and in the corresponding class, we will be using Netscape as our primary browser.
Generally, to give a browser a command, you sandwich text between two tags; a beginning tag turns the command on, and a corresponding end tag turns the command off. For example, you might want to make a heading for a paragraph, as in this example:<h1>A Few Of My Favorite Things</h1>The browser displays only the text between the tags <h1></h1> ("A Few Of My Favorite Things"), not the tags themselves. Notice that beginning tags are in the format <tag>, and end tags are in the format </tag>. Some commands do not use end tags, as you'll see later in this document. HTML tags, by the way, are not case-sensitive, so you can type them in uppercase (ABC) or lower case (abc). The best way to learn to use tags is to put together a Web document. Let's begin one now.
You can create your file with a simple word processor (like Note Pad for Windows or Simple Text for the Macintosh) or an online text editor (like pico or ne in UNIX). You can also use a more powerful word-processor than the ones we've mentioned, but it's not necessary. When you save your file, it's critical that you do the following:We'll use Note Pad for the PC and Simple Text for the Macintosh in our examples. For this example, begin by saving the file as "MyPage.html" to a folder (or directory) you've named "HTML". Remember that directory name: you need to keep all files related to your page in the same folder or directory so that file references and links work properly on your page.
- Save your Web file with the extension .html (.htm if you're using DOS or Windows).
- Save your file as Text Only. Note Pad, Simple Text, and UNIX editors automatically save files as Text Only. If you use other types of word processors, you'll have to specify this format under the Save options.
Let's look at the tags that are the bare bones of your page:Try using these tags in your new Mypage.html file. Add the following text to the file, substituting your own information for the text in italics :
- HTML tags: These tags signal the browser that this is a readable HTML file. These will be the first and final tags in your page source file:
<html>Your entire document, tags and all, goes here.</html>- Head tags: These tags identify the header area of your page and enclose the title tags (discussed below):
<head>title</head>- Title tags: The title you specify with these tags appears in the title bar of your Netscape window, and on the page itself in text-only browsers. Make your titles short--up to about 6 words.
<title>Document title goes here</title>- Body tags: After the title, add the body tags. The body text of your document goes between these two tags, like this:
<body>The body of your document goes here.</body><HTML> <Head><Title>Your Name </Title></head> <body>You'll add the closing </body> and </html> tags to the very end of your document. Now it's time to begin fleshing out your page.
Add text to your document between the <body></body> tag set. Keep in mind that none of the spacing or formatting your word-processor uses will be read by a browser. To format text, you must use HTML formatting tags. Without these, your page will be appear as one continuous block of text with single spacing between words. With a Web browser, you can't take any formatting for granted, even paragraph breaks and tabs. Let's look at some ways to format your page.
Authoring on the World Wide Web can be like living in a Wild West town. Oh sure, you have a sheriff of sorts, in the form of the folks who come up with HTML standards and try to keep the peace, but there is a certain degree of lawlessness. Perhaps most surpising is that, as a Web author, you don't control the specific font visitors to your page see; individual browsers have that control. In addition, not all browser programs read tags the same way, and some tags only work with a particular browser type. For example, Netscape may read a tag differently than the Mosaic browser, while Lynx reads the tag yet another way.You do have somewhat limited control of text styles. To control text styles, you can use two basic types of character tags. A "physical" character tag is comparable to styles you're used to using with word-processors; you specify that a block of text is bold or italic, for example. With a "logical" tag, on the other hand, you control the way certain text looks relative to other text in your document. Logical tags make text stand out, but the browser program and/or the browser user determine(s) exactly how it stands out. We recommend logical tags for one reason: HTML standards are moving toward logical styles and away from physical styles. New browsing programs will probably be geared toward logical styles, and may eventually ignore physical styles altogether. Here are some ways you can change text styles with logical tags:
- Boldface Text: Most, but not all, browsers display text as bold when you use the <strong></strong> tag set, as in this example:
I do <strong>not</strong> like green eggs and ham.- Text in Italics: Many, but not all, browsers display text in italics when you use the <em></em> tag set, as in this example:
My favorite book is <em>Green Eggs & Ham</em>.Use italics sparingly on the Web; italics can be difficult to read on-line.- Headers: Header text has a blank line before and after it, is usually bold, and may be larger than normal body text. Here's an example:
<h1>This is a level one header</h1>You can use header styles 1-6; in relation to normal text, <h1> is the most dramatic, and <h6>, the least. Let's try using these tags on your practice page. Add this text after the <body> tag:<h1>My Home Page</h1> <h2>My Favorite Things</h2> I just <strong>love</strong> your favorite food. My favorite book is <em> your favorite book</em>.
Before you get too far, it's a good idea to check how your file looks with a browser. First, save your document again, and then start Netscape. From the Netscape File menu, select Open file ... and open your file (MyPage.html in the folder HTML). Your page should look something like this:
![]()
If you have trouble, make sure that the file is Text Only, and that you actually saved the file. Also, try clicking on the Reload button in Netscape. Each time you make a change or addition to your page, save the change, switch back to the Netscape window, and click on the Reload button to view the new version of your file. Get in the habit of checking your page as you add to it.
Use the following tags to control paragraph and line spacing on your page:Let's try adding some text to your practice document. Return to Myfile.html, and after the </em> tag, add the following information to your page:
- Line Break: To start a new line of text, or to break a line at a specific point, use this tag:
<br>A line break is a single tag.- Paragraph: Use a paragraph tag to separate one paragraph from another.
first paragraph of text <p>next paragraphA paragraph tag adds a blank line within a block of text, usually to distinguish one paragraph from another. Remember, browsers ignore blank lines or tabs in the source text.- Block Quotes: Use the <blockquote></blockquote> tags to set paragraphs apart from other text. This tag set indents a block of text from the left and right margins, and inserts a single line space above and below the block. Be sure to add the closing tag, or you'll indent more than you intend to.
<p>My favorite way to spend a Saturday night is fill in the blank. <h2>Music</h2> <blockquote>I prefer your favorite type of music here and another favorite here. I can't stand your least favorite music here. </blockquote>
Use this tag set to preserve the tabs, indentations, and line spacing in your original source text.<pre>Preformatted Text goes here</pre>Graphical browsers like Netscape display pre-formatted text in a fixed font, such as Courier. The browser user controls which specific font displays by selecting an option in the Netscape Preferences menu.Try adding this text to your document, and see how it looks on Netscape:
<h2>Pre-Formatting Text</h2> <pre>I will start a new line of text right here and it will stay when I look at my page in Netscape. I can put a tab right here, and it stays put, too.</pre>
Web authors frequently use these two basic list types on their pages:To create a list, you use two types of tags. The first set of tags defines the list itself. The next set of tags defines the items in the list.
- Unordered lists are bulleted. Use unordered lists when you want to list parts of a whole, but don't want to imply a sequence of steps or a specific order.
- Ordered lists are numbered. Use ordered lists when the list has an order or sequence; for example, a list of steps or a "Top 10" list.
To add an unordered (bulleted) list to your page, you first define the list itself with <ul></ul>, and then specify the items in the list with <li>, as shown here:<ul> <li> List item <li> List item </ul>Notice that we used a closing tag for the list itself, but not for the list items. In this example, we also put each part of our list on a separate line. This helps us keep track of the list in the source file, but the browser ignores these line breaks. We could have put all this information on one line. Remember, only the markup tags determine formatting.Now try adding the following unordered list to your practice Web page and review your work:
<h2>Things I Do</h2> I stay busy at my job/as a student. Things I do in a week include: <ul> <li>Task/study area <li>Task/study area <li>Task/study area </ul>
Set up an ordered list the same way as an unordered list, with one exception: in an ordered list, the list tag set is <ol></ol>. Here's an example:<ol><li> List item1 <li> List item2 <li> List itemx </ol>Even though we didn't separate each item this time, the browser displays each item on a separate line. Try adding the following list to your practice page:<h2>Restaurants</h2> My 3 favorite places to eat in Chapel Hill, in order, are: <ol> <li>Favorite #1 <li>Favorite #2 <li>Favorite #3 </ol>How does your list look?
Definition lists are intended for definitions, but you can use them anytime you want to put a paragraph with a heading on your page. You begin the definition list itself with the <dl> tag. Then add the <dt> tag and the term to be defined, or any heading text. Next add the <dd> tag and the text of the definition or paragraph. Finally, add the </dl> end tag. Here's an example of a defintion list:<dl> <dt>My Life: The Early Years <dd>I think Bill Cosby said it best: I started my life as a child. </dl>Try adding a definition list to your page on your own, and take a look at how it looks with Netscape.
If you want to visually separate text, you can add a horizontal line anywhere in your document with the <hr> tag . Let's try it in your practice document. Add this tag to the end of Mypage.html, just before the </body> tag:<hr>Review your work just as you have previously.
One of the great features of the World Wide Web is its inter-connectivity. You can provide links to other pages around the world by using this basic tag format:<a href="target of the link">link the user sees</a>The link (link the user sees) is also called the "anchor." In this document, our link examples will use anchor text; in the next document, you'll learn how to make graphics into links.
To provide a text link to another Web page anywhere in the world, use this format:<a href="full URL address">anchor text</a>where full URL address is the URL of the page the browser displays when the user clicks on the anchor text, (that is, the link). (Note: URL addresses are case sensitive, so be careful typing the URL. When possible, visit the page to which you're linking, copy the URL from the Location field, and paste the URL into your document.) Give your links meaningful names, so users can quickly scan your page to find the links they want.Try adding this link to your practice page:
<h2>I Have Connections in High Places</h2> I hope one day to be a <a href="http://www.whitehouse.gov"> top executive</a>.View your work as before. Click on the anchor text to verify that the URL is correct and your link takes you where you want to go.
Add a sound file to your document using the now-familiar anchor tags, substituting the sound file address for the URL of the external reference, like this:<a href="sound file URL or path/file name">text the user sees</a>Let's add a sound file from an external source to your practice document:<h2>A sound from another site</h2> <a href="http://www.unc.edu/student/orgs/uncbands/songs/tag.au"> From Carolina to you.</a>Check your work with Netscape. When you click on the link, you start a sound player defined in your helper applications in Netscape, which enables you to play the sound. If you don't have a sound player, visit Netscapes's Netscape Helper Application page athttp://http://home.netscape.com/comprod/mirror/navcomponents_download.htmlto download a shareware sound player.
An "in-line" image is a graphics file that displays as part of your HTML document. It appears automatically if the user turns on "Auto-Load images" in the Options menu. If that option isn't turned on, a place holder appears instead, and the graphics file can be downloaded later. To add an in-line image, you specify the image source using this format:<img src="filename.gif">where filename.gif is the name of the graphics file. Be sure to include the quotation marks around the graphic file name. Note: store your in-line graphics files in the same folder as the HTML document; otherwise, you need to include the path in the file name.Let's try adding a graphic to your page. At the end of your practice file, add the following:
<img src="me.gif"><p>View your file as before (remember to save the file and reload it in Netscape.) If "Auto-Load images" is turned on, you'll see the graphic itself; if it's turned off, you'll see a place holder, which you can click to view the graphic. (Note: You must have "me.gif" in the same directory as the HTML document for this link to work.)
If your Web page is long, you'll need to break it into logical sections, and provide links that make it easy to move from section to section. To see what we mean, take a look at the GLOSSARY of INTERNET TERMS athttp://sunsite.unc.edu/iab/iabclass/glossary.htmnClick on a letter in the alaphabet. Each letter in the line is a link to a major category within the document.Let's look at how to provide links within a document, using a the alaphabet selection as an example. First, you create the link to the LETTER entry. Next, you create the target of the link somewhere in your document. The format for a link to an internal section of your document is very similar to other links:
<a href = "#name">anchor text user sees </a>"Name" is the the target of your link, which we specify in the second step. Note: "#" is crucial here.We'll use the following format to add the name somewhere else in the document:
<a name = "name">Text user sees </a>The "name" is the one we use in the anchor reference, but this time, we don't type "#" before it. Now when you follow the link, the browser displays this section of your page. Notice that, unlike the table of contents reference text, your "named" text does not appear as a hyperlink.
Signing your work tells visitors to your page who is responsible for its content. Web authors often sign their pages with an e-mail address, which enables people to contact them with questions or suggestions about their pages. You can either provide only your e-mail address, or your e-mail address with a link to a form readers can use to send mail directly from their browser to your e-mail account. Try adding an e-mail link to your page:<a href = "mailto: your_email@address">your_email@address</a>Readers can follow the link to a form that sends e-mail to the address specified in the tag. This form works with most browsers, including Netscape and Lynx. Try adding an e-mail link to your practice document.
Because the Web changes constantly, it's a good idea to let your readers know how current your information is. Include the date that you last revised the source document at the end of your page. See the HTML Guidelines page for the suggested date format. Finally, complete your page by adding these two closing tags to the end:</body></html>
Follow your Internet Service Provider's (ISP) instructions on where and how to place your page on the WEB.
Tag Pair or Group Purpose
<html>page</html> Identifies page as html. Required.
<head>title tags</head> Identifies heading area. Required
<title>title of page</title> Title of page. Appears in title bar.
Required
<body>body of page</body> Body text of page. Required
<h1>text</h1> Heading text. Can use h1-h6.
<strong>text</strong> Boldface (most browsers)
<em>text</em> Italic (most browsers)
<br> Line Break
<p> Paragraph Break
<blockquote>text</blockquote> Indents text and inserts line space
before and after
<pre>text</pre> Retains paragraph formatting of original
file. Fixed font.
<ul></ul> Unordered list (bulleted).
<ol>/ol> Ordered list (numbered)
<li>text List item (for <ul> and <ol>
<dl></dl> Definition list. .
<dt>text Definition term (for <dl>)
<dd>text Definition (for <dl>)
<hr> Horizontal line (rule)
<a href="file_location"></a> Link to location enclosed by quotation
marks
<img src="file_location"> Display image.
<a href="file_location#name">text Link to location on current
page.
or graphic</a>
<a name="name">text or graphic</a> Target of link to location on page.