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.
Remember these basic rules to make your HTML code readable and your file
access simple and easy to remember.
- Write your HTML code (tags) in CAPITAL LETTERS. This will make
it easy to distinguish your code from your file names and text.
- 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.
- 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.
- 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
- 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.
- 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>)
- 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.
- 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.
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
- 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):
- Open the page you want to save in your browser
- 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
- 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.
- 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.
to Dixie District - HTML I