Guides and Tools to Writing HTML Documents

How to create a home page

follow the directions & chew slowly:)

  • You probably have already a page holder on the NEIU server: Check to see at http://www.neiu.edu/~youruserid.
    If you get "file not found" or "forbidden", report it by emailing helpdesk@neiu.edu
  • Your first page will be very simple and similar to mine:
  • To see the underlining html code of that page, click on the pull-down menu View and choose Source, (or right-click).
  • Edit that page by changing the title, the heading, the email (to yours), the link to one of your favorite pages, and finally the image source to some other picture on your site or on the web somewhere (do this in notePad or in gamut).
  • Copy this new source and paste into your home.htm or home.html on your disk or in gamut (you are about to do this 2 steps below here in gamut).
  • An alternate easier way may be to ftp (file transfer protocol) this into your http directory by going to ftp.neiu.edu on your browser and entering your login and password from the file menu (or clicking on FileZilla ftp at NEIU with gamut.neiu.edu as your server).
    Another way is:
  • If you are at NEIU, click on gamut on your desk top and sign in your userid and password (same as for neiuport)
    From your home click on putty.exe from your browser (if you work in Windows), and run gamut.neiu.edu to get into gamut, with your userid and password.
    Note that you are using the Unix operating system now and the mouse does not work here. Instead use the arrow keys to move about.
  • Check to see if you already have an http directory by typing "ls" (which means to list) and enter (enter key). Most likely you'll see the http and bin directories listed.

    gamut>ls

  • If you don't have an http directory listed, create one with mkdir:

    gamut>mkdir http
    However if this is not possible, call the help desk at NEIU.

  • Then change to that directory by using cd (change directory):

    gamut>cd http
    Note that nothing is mentioned there as a feedback--Unix is not a very friendly interface)

    to make sure in what directory you are type pwd after the gamut prompt. It should show you that you are in the http directory.

  • Once in the http directort check to see if you already have a home.html file by listing all the files in the directory:

    gamut>ls

  • Edit the new/old home.html file by using pico as below:

    gamut>pico home.html

  • If the system does not allow you to change home.html, just pico home.htm without the final l. Later you could remove home.html by
    gamut>rm home.html.
  • Once in pico (the edit mode of Unix), you can paste what you copied above from the edited test.html page (my little birdy page).
    You may have to right click your mouse or use the edit pull down menu if there is one above.
  • If you have extraneous lines you may delete them by pressing cntl k
  • To end the edit and exit, click on cntl x
  • You will be prompted to save and verify the name of the file. this is your chance to change the name of the edited file if you so choose.
  • Go back to your browser under your home page holder and refresh to see if your page is there. If you get the message "no permission", go back to gamut and:
    gamut> setup
  • You will be prompted to press b for a web page, then enter and eXit.
  • Your page should be ready
  • To work some more on your page, go back to gamut and make sure you are in yor http directory and re-edit your file. You can work on new files in there to which you can link with relative addressing.
Don't stay site-less

The best way to figure out what to write in a home page is to view one written by someone. So as you read this, click on the view menu above and go down to view page source.
You may copy portions of it by highlighting and pressing cntl C to copy, then paste with cntl V in your home.html file.

Note the menu at the bottom of the screen:

  • ^X Exit (control X) to exit the edit
  • ^k to delete a line
  • ^V Next page
  • ^Y Previous page

First line should start with <> with "html" within the brackets.

Second line follows with <> with "body" within the brackets.

You end your file with "/body" within brackets and then "/html" within brackets.

All commands in html are surrounded by <>.

Examples of commands:

  • P for new paragraph. /P not necessary
  • H1 for first header. /H1 at end of header
  • H2 for 2nd header. /H2 at end of header
  • Font size=5 for big font. /font at end of big font
  • a href="url" for a link, and then /a at the end of the link
  • img src="some pic.gif or .jpg"
  • etc.
Not exactly me:)

For an example check the source of a test page

Now, if you'd like to place a picture on your web site check picture site


To change a picture's size just adjust the height and the width proportionally to your picture:
Example:
this is my picture
Note that what's after alt= will show as a balloon on your picture when the pointer is on it. It is a good practice so that even blind people can "hear" what's on your picture..


Kevin Murphy's links to forms, frames, asp, etc.

You may like to link to Webmoney for Kids for another easier way to build pages...

An alternative site for learning html

About fonts

This will be shown in nice navy blue as it is enclosed between the font tag <> and the ending font tag<>
A font color in HTML is designated as a combination of three pairs of alphanumeric characters that are hexadecimal values for the intensity you want for the three primary colors: Red, Green, and Blue. The expression FONT COLOR="#000080" corresponds to a font color containing no red, no green, and blue at 50% of its maximum possible intensity (thus the "nice navy blue" you see). A black font (the default) is "#000000", and a pure white font is "#FFFFFF". You can play with all kinds of combinations (there are about 16.8 million possibilities). "#909000", for example, generates a yellow font.
Color codes are usually enclosed in quotes, by the way, so that the browser properly recognizes that it should work with all six characters (though you could probably get away without the quotes), and the # character at the start of the string alerts the browser that the digits coming up represent a hexadecimal number.
If you feel like doing a little surfing, you can probably find a free graphic utility at cnet.com that will generate the appropriate numeric codes for whatever color flips your switch.
Look at the following web site that shows you all the color codes. You can mix them as you want. The website is http://www.colormix.com
Another good site.

html code

html design

table of connections

Return to Dr. Caftori's

Last updated 8/3/09