[Now you will be using UNIX commands to create and edit your Web directory and content.] 

2. While at your server's prompt, type: cd [Press Enter] 

3. Then type: cd ..
(Be sure to insert a space between the d and the periods) [Press Enter]

4. Then type: chmod a+x username
(Put your email name - WITHOUT the extension - in place of username). [Press Enter]

5. Then type: chmod go-rw username
(Put your email name - WITHOUT the extension - in place of username). [Press Enter]

6. Then type: cd [Press Enter]

7. Then type: mkdir public_html
(This creates a directory in which you put your Web pages.) [Press Enter]

8. Then type: chmod a+x public_html
(This changes the protection on the public_html directory so the world can "execute" files in it.) [Press Enter] [You only have to do steps 2 - 8 when you first set up your Web page.]

9. Type: cd public_html [Press Enter] To enter your Web directory/space on mason,
[(This puts you in your public html directory where you put uploaded html files or create them using the pico editor while in your public_html directory.  You can type ls to see the names of  all of your files in your public_html directory. ]

10. To Create or Edit Files in your public_html, type: pico filename.html
[Substitute "filename" with the name you give the file.]

a) Create a new file:
Type pico filename [Substitute "filename" with the name you give the file.]
[You will see a blank, wordprocessing-type screen in which to type your html tags and insert your text. (See tags below.) Remember your main "home page" file is always called "index.html".  Name your other files with  names that are easily identifiable, using no more than eight characters. The extension for all text files must be .htm or .html. Don't leave spaces in file names and don't use slashes ( / ), dashes or hyphens ( - ) in files names.  The server on which our Web documents and graphics resides won't recognize such naming conventions. You may use an underline ( ex: web_pg.html ) to separate parts of a name. Use lower case, easily identifiable names.]

After you create a new file, SET PERMISSIONS (a necessary step for users to read your Web  page):
Type: chmod a+r filename.htm or html (Substitute filename with the name of your file.) after you create your file in your public_html directory or ftp/upload it.

b) Edit a file: type pico filename [Substitute "filename" with the name you gave the file.]

[Use standard UNIX editing commands. For example, CTRL D will delete a letter, CTRL K will delete a line of text. CTRL^ will let you mark text to delete (or to move) by selecting CTRL ^ to mark the text. Then press CTRL K to delete the text. Then insert the cursor where you want the text to be moved. Then press CTRL U to undelete. This will move your text to the new spot.

[To create extensive Web material or complex tagging for tables, for example, you might want to use a program which creates the tags for you, after you learn the basics.  You can then upload your finished files by using ftp . See items 14 and 15 below for HTML Editing programs and FTP (to upload html files and graphics into your public_html directory.]

c) To Save your file, when finished, press the CTRL key and the O key, then the Y key.

d) To Exit, press CTRL X, then Y if you want to save the file or changes before you exit..

e) SET PERMISSIONS ( a necessary step for users to read your Web  page):
Type: chmod a+r filename.htm or html (Substitute filename with the name of your file.) after you create your file in your public_html directory or ftp/upload it. 

11. What is your Web page address?  Your Web address is generally your username preceeded by a tilde( "~"[Replace "username"with account name]. Type this address in the location window of your browser.  If you set permissions and correctly executed all of the commands and tags, then your Web page should appear. 

Below is what a basic html document looks like. Always put the html tags between the < > brackets. Notice that some tags have a / symbol in front of the tag. This signifies that the "command" for that tag ends at that point. [To see or edit this underlying structure when you use an html editing program or a wordprocessor which has the option to save as an html file, select "view" or "edit"  html source or similar option. ]

12. BASIC FORMAT OF A WEB PAGE [These tags are used to create basic Web pages without using a Web page composing program like DreamWeaver or Front Page. These tags are the basic, conventional Web page tags, not just used on UNIX servers.] 

<html> This tag signifies this is an html document.

<head> This tag signifies the beginning of the header information.

<title> The Title goes here - it shows at the top of the browser  - but not on your Web page.</title>

</head> This tag signifies the end of the header information.

[Information above the <body> tag does not show on the Web page.]

<body> This tag signifies the beginning of the html material.

<h1> Your first header or title should go between these symbols. </h1>

<p> This tag designates a paragraph.</p>

<p> And this is the second paragraph...and so on.</p>

</body> This tag signifies the end of the body of the document.

</html> This tag signifies the end of the html document.

[Note: New html conventions (xhtml) will eventually require lower case for html tags, closing tags on paragraph endings: </p> and other "open" tags, like horizontal line tags: <hr  /> - Note the space after the "hr"- and other changes.   These conventions are compatible with xhtml. These changes are consistent with html. Current browsers do not use XHTML; however, it is possible to write XHTML that is compatible with HTML, and will work on existing HTML-based browsers. [W3C recommendation. Accessed 26 January 2000.]

13. MORE HTML TAGS [All info in brackets is explanatory and not part of the HTML code.]:

<meta http-equiv="keywords" content="english, English, distance learning, computer-mediated learning, computer-mediated education,  Internet literacy, university, college, evaluate Web sites, web-based class, scholarship, composition "> [This tag goes between the <head>and </head> tags.  Insert terms between the quotation marks to be searched by search engines to find your page contents. Some search engines recognize lower or upper case distinctions. It is not essential for you to create  a content section.  The terms above direct search engines to find my Web resources.] 

<h1> Put your header here </h1>  The name you choose for your highest level header would go between these tags here. A size 1 header is larger than a size 2. You can begin with any size you choose, designated by h1, h2, h3, for example. 

 <p> [This tag signifies a paragraph. No final paragraph tag is needed. Final tags, when used, have a "/" in front of the html letters.]

<br> [This tag at the end of a line signifies a line break.]

<center>Text between these two symbols will be centered on the page.</center> For example, if you place these tags before and after the <H2>,</H2> tags, your heading will be centered.]

<hr>_________________________________________________________________
[The hr symbol placed in between sections of text makes a horizontal divider bar to separate material on your page. The line you see above emulates the line that will appear in your home page if you use the <HR> option.]

<b> Words between these tags will show as bold text</b>

<i> Words between these tags will show as italicized text</i>

Inserting a Hyperlink Tag: <a href="http://www.abc.def/ghi.edu/">Name for the Web document you want to appear on the Web page </a> [This is how you create a tag that will allow someone using your Web page to click and be taken to another Web page or Web site.  Replace the http:// address between the quotation marks: http://www.abc.def... with the exact address of the web document to which you want to link. The web address will not be displayed on your web page but only the name which you give the address. Replace the text "Name for the Web document ..." with the title of the Web page to which you want to link -  not the http:// address.  For example, my web page address in html is:
<a href="index.html"> Education and Technology Resources </a> The name " Education and Technology Resources " shows up on the web browser. Be sure to close your hyperlink tag with the </a> symbol.] 

Link to a Particular Place in your Document:[This linking operation requires you use both the link tag and the target tag.]

Set Font Size and Color other than the default settings:
<font size=5 color=red> text</font>
[Experiment with color and font size to find what you like. It is easier to use an html editor to try out various sizes of font and colors.]

Indent quoted material:
<blockquote>Insert material to be blocked between these tags</blockquote>

Link to a site without leaving the site currently being displayed: 
<a href="" target="_blank">Education and Technology Resources</a>
[The target="blank" tag inserted right after the Web address will take the user to the Education and Technology Resources Web site, while still keeping the point-of-origin site page from which the link originated.]

Tag to Link to Graphics Files:
<img src="picture.jpg" align=left> [Graphics usually have a .jpg or .gif file extension. Insert the name of your image file between the quotation marks to replace the "picture.jpg" filename.  The file could have a .gif extension. The "ALIGN =left" tag  signifies the image is to be aligned to the left of the web page. You can choose left, right, center.]

Many Web sites offer free background color .gif and .jpg files for textures, bullets, buttons, other icons and images.  Do a Web search for "free graphics." Usually the owners of  free graphics just require you to mention the source of the graphics.  Follow the rules of the owner.  To save the image you want, click the right button (on a PC mouse), select "Save image as" option and choose a file location.  Do not change the file name (it must have a .jpg or .gif extension).  You must upload the image file into your public_html directory just like you upload html files.  Graphics do not transfer to your Web page just because you upload the document on which you placed them.

You can scan your own graphics and save them in .jpg (for pictures) and .gif (for icons).  Large pictures and lots of pictures take too long to load, so be discriminating. If you do not get permission to use someone's graphics you are violating copyright law.  Just citing the source does not give you the right to publish someone else's work on your Web page.  See copyright laws. 

Programs like Imaging for Windows, LView, Paint Shop Pro and Adobe Photoshop help you resize and edit images.

Html tags for special characters:

Character	HTML	Description
<   (less than )	&lt;	Useful when you want the tags to show - when demonstrating html
>   (greater than)	&gt;	"    "            "          "            "           "
&	&amp;	ampersand
"	&quot;	quotation mark
Registered TM  ®	&reg	registered trademark symbol
Registered TM  ®	&#174;	alternative trademark tag
Copyright  ©	&copy;	standard format:  © Copyright 1996 Virginia Montecino
Copyright  ©	&#169;	alternative copyright symbol
Space (non break)	&nbsp;	useful for blank rows in tables or spaces in text.
J	<font face="Wingdings">&#74; </font>	smiley face

14. Using a Web Publishing Program: When you create tables, insert background and text colors, manipulate image properties, and do other more complex html tasks, it is easier to use an editing program. There are software programs, like Dreamweaver, Microsoft Front Page,  Homesite, to help create edit html documents. If you use a recent version of Netscape you have a  free built-in web editor called Composer that even helps you create tables. See instructions for how to use Netscape Composer:  Newer versions of Microsoft Office and Wordperfect now have a "save as HTML" option to convert documents into HTML files. If you want to create your "home page" index.html file or other html files using a wordprocessor or HTML editor, be sure the file is saved in .htm or .html format.  If you are creating in plain text format and insert all of the tags yourself without an editor, save as an ascii or dos document and use the .htm extension. For hints on other html tags, select the View Source Option while looking at a Web page you want to emulate and the codes will be revealed. Some people slip in extraneous codes to confuse copiers, but viewing the html on other pages can be helpful. There are many books on the market on using various hypertext mark up language tags for different effects.

15. To upload files to your Web site,  here are some file transfer (FTP) programs: