Summary

HTML at Home:

If you want to create html documents at home, you will need a TEXT EDITOR. Mac users should find SIMPLETEXT and have it on the desktops or Launchers of the computer they are using. PC users (anyone not using a Mac - I doubt too many kids are using UNIX machines at home) should find NOTEPAD and put it on their Desktops. Then create a file(directory) on your desktop especially for your HTML work and give it a name (e.g. myhtml or HTML or web.) Remember that you can create other files within that file (subdirectories) for various projects.

Style issues:

Remember these basic rules to make your HTML code readable and your file access simple and easy to remember.

  1. Write your HTML code (tags) in CAPITAL LETTERS. This will make it easy to distinguish your code from your file names and text.
  2. Press Return (or Enter) after each line of raw HTML to make your source code document more readable. Remember that this will NOT create a new line in your document when read through the browser. You need a <BR> (break) tag to force a break to the next line or a <P> tag if you want to skip a line. Neither <BR> nor <P> tags need to be closed.
  3. Choose short, memorable file names all in lower case and without spaces or punctuation, e.g. page2.html, fun.html, links.html. Remember that the main page (home page) in any directory must be named index.html.
  4. Rename image and sound files when you download them to your home directory with short filenames according to the above rules, e.g. book.gif, jordan.jpg, rockon.midi, thrill.au
  5. Do not write the text of your entire document in capitals. If you do, it will be hard to read your HTML source code so as to check the bugs in your code. Furthermore, it looks like you're screaming. It's fine to do this is you are in the mood to scream on your webpage and you don't mind looking immature, but it's a bad idea to get into the habit of doing this.
  6. Avoid background images (<BODY BACKGROUND="image.jpg">) which render the text of your document unreadable. We will learn to avoid this problem next semester when we learn tables. (<TABLE>)
  7. Create a template page with the basic HTML code of your site (HTML frame, <TITLE="">, desired <BODY> attributes, footer with links back to your homepage), name it temp.html and save it in your HTML directory to easily create new pages. Simply rename the temp.html file with the name of your new file as soon as your open it and then work on the new file and save as you go along.
  8. Include a link back to your home page (e.g. <A HREF="index.html"><B>Home</B></A>) at the bottom of every non-index.html page in your website.

Mechanics:

Browsers: It doesn't matter which one you use, but if you have more than one kind on your computer, it's good to test your document in both. MS Internet Explorer and Netscape Navigator are the most common browsers.

Images:

  • Grabbing images from the Internet: PC users: Right mouse click over the image and scroll down to Save or Download image (depending on your browser) and click. Navigate in the box to your home directory on the Desktop and rename ("Save as") the file something short and all lowercase. Mac users hold your mouse button down over the image until a box open up. Navigate in the box to your home directory on the Desktop and rename ("Save as") the file something short and all lowercase.
  • Remember that you can use to ALIGN="" attribute of the IMAGE tag to align an image to the left or right of your text.
  • You can resize an image manually by assigning HEIGHT="" and WIDTH="" attributes to the image tag. These will be in pixels. A standard low-resolution screen is 640 x 480 pixels. Try resizing your larger images in the 100 - 150 pixel range and adjust the width and height proportional to the original image.
  • PC users can ask a parent to download a free or shareware version of LView Pro for simple image manipulation such as resizing and adding text. Remember to save or move files to your home directory and to rename files so that you can easily invoke them in your HTML source code.

Sample HTML Template - To grab the source code for this (and any web document not in frames):

  1. Open the page you want to save in your browser
  2. At the upper left of your browser menu click on File, and then Save As. A box will pop up. At the bottom of this window should be three entry areas. The first is File name. Here you will put the name of the file you wish to save. You can save this as temp.html or save any other off the web as any file name you choose, so long as you add the .html extension.
  3. Look at the middle entry area. In most newer broswers the default will be Save As Type: Web Page Complete. You do NOT want this. You want to click on the toggle switch (mini arrow) to the right of this Save as Type window and toggle to Web Page, HTML only or HTML only.
  4. At the very top of the dialogue box it will show you the default directory for saving internet files. You want to get to the Desktop (usually one of the buttons to the right of the name of the default directory) and save the file in your HTML home directory.

Back to Dixie District - HTML I