User:Rewood/Create and Display Your Own Web Pages

In depth steps to assist students in creating their own web page.

Step 1:

What's Allowed on Web Pages Before you begin creating Web pages, make sure that you understand what's allowed on them and the restrictions on their use. As noted in its statement on file sharing, NC State has long sought "to foster student engagement and responsible experimentation with the latest technologies." Part of this effort is providing resources on the www4 Web server, and this is becoming an increasingly important part of students' learning experiences.

However, these are shared resources, and if you want to retain access to them and your account privileges, you must use them responsibly. NC State does not censor Internet traffic except in appropriate response to official complaints and in the case of illegal activity.

Therefore, it is important that you read the Regulations and Rules page for NC State's policies concerning network, computing and account use, which are available at http://www.ncsu.edu/it/rulesregs/. You are responsible for knowing these policies and abiding by them. If you plan to publish your personal Web pages on the www4 server, you'll need to be particularly aware of the following excerpts concerning personal use of the University's information technology resources (emphases added):

III. Personal Use Authorized users may access University computing equipment, systems and networks for personal uses if the following conditions are met:

A. The use is lawful under federal and state law.

B. The use does not violate any policy or directive of the Board of Governors, the NC State Board of Trustees, the UNC General Administration, or the NC State administration.

C. The use does not overload the University computing equipment or systems, or otherwise negatively impact the system's performance.

D. The use does not result in commercial gain or private profit, except as allowed under University intellectual property policies and the external activities for pay policy. However, in no case may University computing resources be used for solicitation of external activity for pay.

E. The use does not violate any University licensing agreements or any law or University policy on copyright and trademark.

F. The use does not state or imply University sponsorship or endorsement.

G. The use does not violate laws or University policies against race, sex, religious, disability, or age discrimination, or harassment.

H. The use does not involve unauthorized passwords or identifying data that attempts to circumvent system security or in any way attempts to gain unauthorized access.

I. The use does not involve sending or soliciting chain letters, nor does it involve sending unsolicited bulk mail messages (e.g., "junk mail," or "spam," or "MLM.").

J. The use does not result in any direct cost to the University.

K. Any creation of a personal World Wide Web page or a personal collection of electronic material that is accessible to others must include a disclaimer that reads as follows: "The material located at this site is not endorsed, sponsored or provided by or on behalf of North Carolina State University."

L. University computers must be registered with NC State in the ncsu.edu domain. It is forbidden to register a non-ncsu.edu domain for any computer which is connected to the NC State network without prior approval of the Associate Vice Chancellor for Finance and Information Systems or the Vice Provost for Information Technology. If such approval is given, it must be made clear that the non-ncsu.edu address is using NC State resources for delivery.

Step 2:

Planning Your Pages Before you begin creating your Web pages, it's a good idea to give some thought to how they should look and operate. Thoughtful planning can save you a lot of time and effort later.

Things to consider include:

• Design
• Navigation
• Web ethics

Design

Make links context-sensitive and meaningful

• Avoid wording such as "Click here for an HTML tutorial."
• Instead, use "See the NC State Computing Services' HTML tutorial."

Contextual links make your document more usable, both online and as printed material. Give information about a document if it is especially long or image-rich

• Avoid "See my really cool image page!"
• Use instead "See my really cool image page [2800K]!"

Use white (or gray) space

White space is even more important online than for paper documents. Use paragraphs and lists to break up online text. Include blank lines in source documents to make them easy to edit.

Use images and multimedia carefully You'll learn more about images in Step 5 of this tutorial. Use only those that clarify or illustrate and avoid "image for image's sake;" with images, more isn't better.

Also consider the user's browser and server speed; images take much longer to download than plain text, and an excessively long download time can be very annoying. Always use alternative text with your images. This can provide additional information to all users, but it is critical for those using text-only or audio Web browsers, which read aloud the text in your HTML pages.

Follow accessibility guidelines Many people use additional "assistive technologies" to access the Web. Be sure to design your pages to include these audiences. Check the accessibility of your Web page and find out how to make it "user friendly" for more people by submitting its URL to Bobby at http://www.cast.org/bobby/.

Consider differences in browsers Different browsers and even different versions of the same browser almost always display Web pages differently; for example, headings and preformatted text. Test your pages on all the browsers if you can. Design a page for printing (or not) This is a tough one and requires that you evaluate how your page is likely to be used. Should it be formatted to print easily? If so, then it may need to be a long, scrolling document, which is sometimes difficult to navigate online. But if you want the document to be printed, why is it online in the first place?

If printing the document might be beneficial for some users, then keep that in mind as you design it. Navigation Refer to your previous material References to previous sections or pages in your Web site should be very specific and probably include links. Also be sure that visitors to your pages can't avoid seeing what you're claiming came previously.

Keep page size small if possible Avoid long, scrolling documents. They're hard to navigate, i.e., it's difficult to find the same place inside one when you revisit it later. In general, long documents lessen the hypertextual advantages of HTML. A good maximum length is about three monitor "screenfuls," but monitor screen sizes vary considerably.

Provide navigation cues Instead of relying on the "Back" button built into most browsers, you should provide explicit cues and links for navigation, at the minimum answering these user questions: * Where am I? * * How do I get back to the beginning? Use consistent navigation options If you begin by using one navigation scheme (e.g., links in a vertical list), stick to it wherever possible.

You might consider a navigation bar at both the top and the bottom of pages. Web Ethics State the status of your document Although almost everything online is in constant revision (much to the consternation of some), you should inform readers of the state of your document, especially if you know change is in the air. There are many "Under Construction" images that let people know you're still working on a document or certain sections of it. Update, update, update! Old information is sometimes more harmful than none at all. If you place information on the Web be sure to keep it updated.

Date representation varies around the world, so spell out the name of the month to avoid ambiguity. "Last modified 8/4/02 by rmn" could be intepreted as both August 4 and April 8. "Last modified August 4, 2002 by rmn" is preferred.

Offer contact information Be sure to give the name and email address of the person who's in charge of the document on at least the first page. Refer to or copy other people's pages?

In general, use a link to refer to information that you believe should be mentioned, but that you have no power to update. This way you always get the most up-to-date information from that source. Copy information (text, images and multimedia) only when it's legal (and then with appropriate permission and attribution), and when it's not likely to change without your knowledge or ability to update quickly. If you are in doubt, contact the owner of material you want to copy.

Step 3:

Creating Your Pages

Now that you've planned how your Web pages are to look and work, you're ready to start creating them. Here are the basic tools for the process. HTML HyperText Markup Language (HTML) is the language that you'll use to define the layout and attributes of a World Wide Web document as well as to link between Web documents, e.g., text, images or multimedia.

HTML is a subset of Standard General Markup Language (SGML). HTML may appear intimidating at first, but only ten different tags will take care of 99% of your needs. Also, HTML editors have become more sophisticated, and they can do a lot of the work for you.

URL: Uniform Resource Locator

To access a Web page, you'll need to know its unique Web address, i.e., its Uniform Resource Locator (URL). In most Web browsers you can go to the tool bar and click on the "open" button or go to the "File" menu and choose the option "Open URL" or "Open page". Regardless of which method you choose, a box will appear on your screen where you can enter the URL of the page you wish to access.

For example, to point you to information about a Web conferencing system called NetForum, I would provide its URL: http://www.biostat.wisc.edu/nf_home/ You would then enter this URL into the field provided by your Web browser.

A URL is case sensitive and must be entered exactly as it appears. If you've received a URL electronically (e.g., in an email or on a Web page), copy and paste it into the Web browser's field or other desired location rather than re-typing. This reduces the chance of error, especially for very long URLs.. You will also need to know a Web page's URL if you want to create a hyperlink to it from a Web page of your own.

Methods of preparing an HTML document

There are several ways to create an HTML document:

• Use a full-blown WYSIWYG HTML editor, such a Macromedia's Dreamweaver, Adobe's GoLive or Microsoft's Front Page.
• Use a basic HTML editor such as NEdit or Wedit. Basic HTML tags are already built in and you select the text and just point and click on the desired tag located on the tool bar.
• Create an ASCII text file (using a text editor such as BBEdit, Notepad, Wordpad or any word processor that can save as ASCII text, i.e., a file with a .txt extension), and then insert HTML tags manually. No matter how good HTML editors and converters are, occasionally you'll have to edit the HTML tags by hand, so it's important to know what they do. We don't recommend particular editors, but we will note that Netscape Communicator contains one, and many word processors now have mechanisms for adding tags.

NOTE:

Some word processors, such as Microsoft Word, may insert invisible characters into documents that can cause problems when the document is used as a Web page. To avoid this, be sure to use an ASCII text editor, an HTML editor or an HTML-friendly word processor.

Problems can be minimized if you revise a document with the same software that was used to create it originally. Most editors have a toolbar showing the different tags available. You simply select your text and then click on the appropriate tag.

HTML file extensions and the source document Most Web browsers require that your HTML file name have a ".htm" or ".html" extension. To be safe, consistently use one or the other of these extensions on all HTML files you create.

An easy way to first learn about HTML as well as to refresh your memory is to look at the "source" documents for existing Web pages. You can view the HTML tags for most HTML documents on the Web. This option, usually called "View Source" or "View Document Source," can be found under the "View" menu in most browsers.

Step 4:

Basic HTML Tags for Text HTML tags tell a browser how to present a page, including its text, images and multimedia. Each of the two tags is enclosed in < > symbols and the closing tag starts with a forward slash (/) to end the tag's action. HTML tags are not case-sensitive, but using lower case is preferred.

However, in the newer XHTML, not covered in this tutorial, every tag must be lower case and have an ending tag. So it would be to your advantage to get into the habit of using only lower case from the beginning.

Except for preformatted text, HTML collapses multiple consecutive spaces to a single one and ignores blank lines. However, when you write your HTML source document, insert several blank lines between paragraphs to make editing easier. Here are some of the basic HTML tags for text:

• HTML tag
• Head tag
• Title tag
• Body tag
• Header tags
• Paragraph tag
• Preformatted text tag
• Boldface and italics tags
• List tags
• Blockquote tag
• Center tag
• Horizontal rule (line) tag
• Address tag
• Comment tag
• Codes for special characters

HTML tag

The tag marks the beginning of a document that's to to be interpreted as HTML. Place it on the first line of your document and the tag on the last line.

Head tag

Just like the header of a memo, the head of an HTML document contains special information, such as its title. The head is demarcated by and , respectively. For the purposes of this tutorial, only the title tag, covered next, should be included in the document head. A typical head section might look like

Title tag

A title tag allows you to specify a document title that will appear in the browser window. When someone adds a document to a list of favorites or bookmarks, this title appears in the list. The format is: Note that the title usually doesn't appear in the document itself, but in a title box or bar at the top of the window.

Body tag As you might expect, the tags and define the beginning and end of the bulk of your document. All your text, images and links, i.e., everything on your page that is displayed in a browser, will be in the body, which should start after the head. A typical page would have this structure: . . . . All the page content that you want to be displayed will go here. . .

Header tags

Up to six levels of headers are available. Header 1 is the largest, and they get progressively smaller through header 6. Here is how they usually appear in relation to one another: This is a header 1 tag This is a header 1 tag This is a header 2 tag This is a header 2 tag This is a header 3 tag This is a header 3 tag This is a header 4 tag This is a header 4 tag This is a header 5 tag This is a header 5 tag This is a header 6 tag This is a header 6 tag

In addition to varying in size, headers are bold and have a blank line inserted before and after them. It's important to use headers only for headings. Later we'll cover a separate tag for making text bold.

Paragraph tag

Every paragraph of "normal" text, i.e., one that doesn't already have a tag associated with it, should be enclosed between them. It causes a line break and adds a trailing blank line. As a convenience to yourself and others who might have to edit your HTML documents later, it's a very good idea to insert two or three blank lines between paragraphs to facilitate editing.

Preformatted text tag

The preformatted text tag displays your text just as you typed it, retaining all the spaces, lines and tabs. Using this tag is the only way to prevent browsers from collapsing multiple spaces or tabs into a single space. Preformatted text looks like a courier font.

      this is                an example             of a     preformatted            text tag       

Boldface and italics tags

To add emphasis to text, use the boldface and italic tags or the emphasis and strong tags. There is also an underline tag, but in an HTML document, underlined text is too easily confused with a link and should be avoided. When using these tags, you usually cannot (and probably should not) have text that is both boldface and italics; the last tag encountered is usually the one that's displayed. For example, if you had a boldface tag followed immediately by an italic tag, the tagged text would appear in italics only. Physical tags This is a boldface tag. This is how boldface appears. This is an italics tag. This is how italics appear. Logical tags This is a strongly emphasized tag. This is how strongly emphasized text appears. This is an emphasized tag. This is how emphasized text appears. There is a subtle distinction between the above "physical" tags, which merely change the displayed font, and "logical" ones which are used (or eventually will be) to make types of emphasis browser-specific (e.g., using the tag to make text red). Either style is fine now, but be aware that differences between them may become more important as HTML advances.

List tags

In HTML it's easy to have numbered, unordered and definition lists. In addition, you can nest lists within lists. There is a standard spacing between the bullet or number and the list item. Unordered (bulleted) lists Unordered lists begin with the tag and end with the tag. Each individual list item is enclosed by tags.

For example, here is an unordered list with three items: list item 1 list item 2 list item 3

Here is how that list would display:

• list item 1
• list item 2
• list item 3

Ordered (numbered) lists Here is the same list using a ordered list format: list item 1 list item 2 list item 3

Here is how that list would display:

1. list item 1
2. list item 2
3. list item 3

Definition lists

Definition lists allow you to indent without necessarily having to use bullets.

This is a term

This is a definition

And a second definition

Another term

Another definition

And here is how this would be displayed

This is a term

This is a definition.

And a second definition.

Another term

Another definition

Nested lists Finally, here is an ordered list nested within an unordered list. (We could have had an unordered list nested within an ordered list just as easily.)

• list item 1

1. nested item 1
2. nested item 2

• list item 2

1. nested item 1
2. nested item 2

• list item 3

1. nested item 1
2. nested item 2

Here is how that list would display:

• list item 1

1. nested item 1
2. nested item 2

• list item 2

1. nested item 1
2. nested item 2

• list item 3

1. nested item 1
2. nested item 2

Blockquote tag

The blockquote tag indents text on both the left and right and inserts a blank line before and after the text. It looks like this: ... and displays like this: Blockquoted text is often used for indenting big blocks of text such as quotations. The text will be indented until the ending tag is encountered. Note that the text here is indented from both the left and the right margins.

Center tag

You can center text, images and headings with the center tag: This is a centered sentence This is a centered sentence. The center tag automatically inserts a line break after the closing center tag. Horizontal rule (line) tag To separate sections in a document, you can insert a horizontal rule tag

---

, which displays as follows:

Address tag

The tag normally appears at the end of a document and is usually used to provide a way to contact the author or institution supplying the document. Text contained within the address tag appears in italics. This is another logical tag; it currently only italicizes text, but this could change as HTML advances. Here's an example of an address tag: Introduction to HTML / Pat Androget / Pat_Androget@ncsu.edu / last updated June 4, 2003 And it would appear as: Introduction to HTML / Pat Androget / Pat_Androget@ncsu.edu / last updated June 4, 2003

Comment tag

It is possible to include text in an HTML source document that does not appear when viewed with a browser. This is most useful for providing comments, warnings and special instructions to future editors of your document. Comments take the form: The comment can even break lines

Step 5:

HTML Tags for Images You'll use HTML tags to display images in a browser just as you use them to display text. To have an image on your page, you must first locate or create one. HTML can't be used to create an image, only to display it. When you use an image that you haven't created yourself, make sure that you do so legally. Some of the thousands of images on the Internet are in the public domain and can be used freely. However, many are not, and you'll need the owner's permission to use them. NC State University has several images that you can use, for example:

• a "new" image that would let people know your Web page has something new on it.

• Some circles, spheres and balls for use in a document Displaying an image in your document An image that appears on a Web page is called an in-line image. It isn't actually on the page, so there must be a link to it in order for the browser to locate and display it. For example, the tag for an image "new.gif" located in the "images" directory on the "www.ncsu.edu" Web server would be In this tag, "img src" stands for image source, and the path or URL of the image must be enclosed in quotes. If the image and the document that displays it are in the same directory, you can use relative linking. For example, > You'll learn more about relative linking in Step 6 of this tutorial.

Text and image alignment

Text can be "floated" to the right or left of an image by adding an attribute to the image tag. The >align=left attribute will align the image to the left and float text down and to its right; align=right will put the image on the right and float text down and to its left. The tagging looks like this: This is an image of a ball. With this new align=right tag, the text can be placed to the left of the image instead of below it. It looks nice this way.

This is an image of a ball. With this new align=left tag, the text can be placed to the right of the image instead of below it. It looks nice this way.

The text can be placed to the left of the image instead of below it. It looks nice this way. This is an image of a ball. With this new align=left tag, the text can be placed to the right of the image instead of below it. It looks nice this way. Remember that the left/right alignment refers to where the image is positioned on the page, not the side of the image where the flowing text is positioned.

Note:

If you are floating text beside an image and use the tag, a blank line will be inserted and the remaining text will also appear beside the image. If you are using Netscape and you want your remaining text to be below the image, you must include a tag so that text will go down to the next clear margin below the picture.

Specify clear=left if you are using align=left and clear=right if you are using align=right. The clear attribute is Netscape-only. Leaving space around an image You can increase the space around an image by specifying a horizontal or vertical margin in pixels. For instance, adding the attribute hspace=20 will put a 20 pixel margin to the right and left of the image.

The attribute vspace= adds space to the top and bottom of the image. The image is aligned to the left, and there is a horizontal space of 20 pixels. It looks nice this way. It helps to add a horizontal space to the image so the text is not so close to the picture.

The image is aligned to the left, and there is a horizontal space of 20 pixels. It looks nice this way. It helps to add a horizontal space to the image so the text is not so close to the picture. There are other attributes of the image tag, some of which are explained in Netscape's Extensions to HTML tutorial (http://home.netscape.com/assist/net_sites/html_extensions.html). Alternative text Be sure to include the alt attribute for each of your images. This is the text that will be read by a text-only or audio Web browser or that will be displayed if your graphic can't be shown. It helps assure that your pages meet minimum standards for accessibility.

For example: Supported image formats The latest release of almost every Web browser supports the "gif," "jpeg" (also denoted "jpg") and "png" image formats. All these encode image data but in distinctly different ways. GIF = Graphics Interchange Format JPEG = Joint Photographic Experts Group PNG = Portable Network Graphics There are many programs on Unix, Macintosh and Intel platforms that can convert from one graphic format to another.

Step 6:

Linking The real power of HTML is its ability to link to other documents and pieces of text, images, video or audio. When you make a link, you essentially create a connection between two anchor points:

• One exists in your document (the text to click on).
• The other is the document to which you're linking.

A link usually appears as underlined text of a color different from the rest of the document so that it can be distinguished easily. Clicking on the link opens the document or multimedia file. There are three categories of links:

• An absolute link begins with http:// and specifies the URL of an external resource.
• A named anchor (or ID anchor) link connects to another location in the same document (or in another document) and is specified by a unique name (e.g., 2, box, A, top).
• A relative link usually has a short path name to an internal resource.

Linking to an external document

The HTML tag that is most used to connect to an external document is the one for an absolute link.

Here's an example: Welcome to NCSU The text that appears between the beginning and ending tags displays as the link. As long as you know the URL for a file, you can create a link to it. Linking to a named anchor within the same document Sometimes you may want to link from one part of a document to another part of the same document. For example, to link from the top of a document to its fourth paragraph:

1. Create a single-word name (no spaces), e.g., "fourth," for the fourth paragraph.
2. Insert an anchor containing this name at the beginning of the fourth paragraph:
3. At the top of the document, insert a link to the "fourth" anchor.

It would look like: link to important stuff The pound sign (#) in front of the anchor name tells the browser to look for the link inside the current document.

Clicking on the highlighted text "link to important stuff" would take the reader to the fourth paragraph.

Note:

Anchor names are case sensitive. Linking to a named anchor in another document Sometimes you may want to link from one document to a specific section of another, e.g., from "firstdocument.html" to a particular section in "seconddoc.html."

To do this,

1. Insert a named anchor tag at the exact spot in "seconddoc.html" where you want the reader to begin, for example:
2. Place a tag where you want the link (the highlighted text) to appear in "firstdocument.html,"

Note that the document name and the anchor name are joined by a pound sign (#). Clicking on the highlighted text "important part" in "firstdocument.html" would take the reader to the "start_here" section in "seconddoc.html."

Making an image a link

To use an image as a link, simply put the image tag inside a link tag, in the spot where displayed text would normally go. For instance, to make the belltower image into a link to the NC State homepage, the link tag would look like this:

When the user clicked on the belltower image, the NC State homepage would appear. An image used as a link will have a blue box around it in some browsers. To eliminate this box, use the border="0" attribute of the image tag. The user may be viewing your document with Lynx (and won't be able to access any images), so it is a good idea to have text along with each image that is used as a link.

Relative and absolute linking

If a new neighbor you just met on your street asked you where you lived, you'd probably say something like "two houses down on the left." This would be your "relative" address -- just enough information to locate your house from where you were standing. Your postal address is your "absolute" address, which anyone, not just a neighbor, can use to find you.

The same concept works with URL addresses. When linking from one document to another in the same directory, only the second document's file name is necessary, not its entire URL. For example: Go to the second chapter You can also use relative linking across directories. For example, the link: Go to the third chapter takes the reader to a document in a directory that is one hierarchy level higher (denoted by ../) than the current document.

Relative links are strongly encouraged as they are easier to type and allow you to move groups of files from one machine to another without editing the files at all. However, relative linking becomes more error-prone the more directories you traverse, so limit relative linking to files that are part of a single project, such as this HTML tutorial.

Step 7:

Granting Access to Your Pages NOTE: If you used the WWW Setup Tool, it has already done all of this step for you, so you may skip to

Step 8:

Putting your pages online. This step covers how to manage the file space in your Unity home directory so that you can place your Web pages online while keeping your other files private.

Computing Services Help Desk consultants can also answer your questions on this topic. Call 515-HELP (4357) or email help@ncsu.edu.

Sections covered in this step are:

• Grant 'lookup' privileges for your home directory
• Create a new subdirectory named www * Grant 'lookup' and 'read' privileges for www
• Listing access privileges
• Removing access privileges
• Directory inheritance Grant 'lookup' privileges for your home directory Because your Unity/Eos account initially allows only you to read the files in your home directory, you must specifically grant other people access in order to publish your Web pages.

First, you're going to alter the AFS file privileges for your home directory so that "www:servers" has 'lookup' access; i.e., NCSU's Web servers can access your file space and allow the public to see your Web pages.

From your Unity prompt, type the bold text in the following two lines, pressing the "Enter" or "Return" key at the end of each line:

unity% cd unity% fs sa . www:servers l

Explanation: cd ensures that you're in your home directory. fs stands for "file system." sa stands for "set access." period (.) indicates the directory you're currently in (home). www:servers means any person can access your file space via the NCSU Web servers. l (the letter "l") means that anyone can look at only the names of your files and directories but not their contents. Create a new subdirectory named www Now that you've granted the appropriate access privileges for your home directory, the next step is to create a subdirectory named www that will contain your Web pages. Its name will be a reminder that anyone can read its contents.

At the Unity prompt, type the bold text in the following two lines:

unity% cd unity% mkdir www

Explanation: cd ensures that you're in your home directory. mkdir creates the www subdirectory. Grant 'lookup' and 'read' privileges for www Now it's time to grant access privileges for your new subdirectory.

First, move into www by typing the following bold text at the Unity prompt:

unity% cd www

Then grant 'read' and 'lookup' privileges by using this command sequence:

unity% fs sa . www:servers rl

Important: Never give www:servers any privileges except 'read' or 'lookup'. Listing access privileges To see who has which access privileges for one of your directories, change into that directory and type the fs la command at the Unity prompt, i.e., :

unity % fs la .

You should see something like this:

unity %[rmnixon]...>fs la . Access list for . is Normal rights: system:administrators rlidwka www:servers l rmnixon rlidwka jehrlich rl

Explanation: fs stands for "file system" la stands for "list access" period (.) stands for the current directory If you see something else, such as a user you don't know, you might consider contacting a Computing Services consultant at 515-HELP(4357). Removing access privileges To remove someone from the access list, simply set that person's access to "none." For example, to remove access privileges for user jehrlich, user rmnixon would type: unity % fs sa . jehrlich none