Writing HTML Code
This mini-tutorial presents important information about how files are named in HTML. Take a moment to read it as it will help you to avoid problems when you write HTML and work with both html and graphics files.
When writing HTML, most tags can be either in upper or lowercase. For example <.b>bold<./b> and <.B>bold<./B> will get you the same result. This is not true of more advanced languages such as XML, XHTML, Javascript etc. Eventually you may want to upgrade the web project you make for this class into a more advanced language. Here are some handy rules:
- Always use lowercase in HTML tags.
- Try to avoid leaving off closing tags. When you start a paragraph with a <.p> tag you don't really need to cloase it with <./p> but it's good to get into the habit of doing so.
- Be careful when you "nest tags". This tag will work:
- <.font color="blue"><.b><.i>Hello World!<./font><./i><./b>
But it's so much easier to read and understand like this:
- <.font color="blue"><.i><.b>Hello World!<./b><./i><./font>
Think of it as a font sandwich with two slices of italics and some bold filling.
Smart File naming makes your life easier
Now let's talk a bit about filenames. You'll be dealing with web pages and images. Here are some simple rules:
- Web pages must end with .htm or .html
They should not end with .htm.htm.html. One is enough :)
- Say you look at your file on the web via your browser. You do a "View Source" to bring it up in notepad so you can edit the page. Notepad will append a [1] to the name of the file since you already have a file on your hard drive with that name. To avoid this, use SAVE AS then give it the original name.
- If you name your main index page "index.html" it'll autoload when your webspace is browsed. Naming subsequent pages index1.html, index2.html has no special effect. You might as well use names that remind you of what's on the page.
- Images you'll be placing on your web page will probably be .gif or .jpg file types. You cannot convert between the two simply by renaming the file.
- Image and web page names should make use of alphanumeric characters only. They should not include these ~!_-(#.
- Image and web page names should NOT have spaces in them. If you call a web page "my web page.html" you're depending on your browser to interpret it as "my%20web%20page%20.html. It just gets very messy!
- This is the most important one of all..
Filenames and Folder names are case sensitive. Names you reference in your HTML have to match the names used when uploading the files to your Polaris webspace.Here are two examples:
- <.a href="photos.html">Click here to see my photos<./a>
This link will work if there is a page called photos.html in the same folder of your webspace. Avod using Photos.HTML.
- <.img src="mypic.gif">
If you upload the file as mypic.GIF, MyPic.gif, MyPIC.giF or any other variation, the image will be broken. It will display as an outline with a small white box & red square in the corner.
Double check your code
On last word on images. Before you turn in your Website project, please view your HTML source code on every page. Make sure that your img src tags are referencing files in your Polaris space and that they do NOT reference a folder on your hard drive. This tag:
<.img src="c:/my documents/photos/me.jpg">
would work perfectly for you because you have access to your hard drive. When you upload your web page, the image appears as broken to all of us because we don't have access to your hard drive.
Case mismatch and references to local files are the two most common problems new web developers face.
If you have questions about any of this, please contact me. Thanks!
