Vance Stevens: Internet Workshop: Steps to basic web pages

Save this page to your DEL.ICIO.US account and TAG it there
Vance's e-Zguide to creating simple HTML files (in Notepad, or any text editor)
Microskills for Web Spinning: Housekeeping awareness and Web design considerations

Navigate this site
Start over | Browse Index | On to Step 1

Concept:

Here are some things you need to be aware of about creating HTML files and making web pages ...

Create a work space | Make Windows show you the file extensions in folders | Give your files and folders names that will work on the Internet | Work in Notepad and view the result in your browser | Save your work correctly | Establish your web presence | Learn more with the HTML Tutorial
Create a work space just for your Web projects

Set up a proper work area. Create a folder where all your web pages can be placed as in the example below.

Note to students at the PI: Create the following in your HOME folders.

Set aside some space on your computer

Let's call the folder MyHTML
Place here ONLY files that go with your web pages.
Think in advance about how to organize this folder. When you create and link to sub-folders here, it may be difficult to change folder names and locations later, because this might break some of your links.
This folder is important because when you create folders within this folder, you can move your big folder and all your links inside will still work on the Internet or on another computer.
This is because you can set up relative links here that will work anywhere on the Internet. You can find a lot more about 'relative and absolute links' by searching on the topic in Google.

Call your teacher to have a look when you've set up your MyHTML folder properly.

What is a file extension?

A file name has two parts. Normally, there is only one period or full stop in a file name. In this case what we consider to be the file name comes to the left of the period, and its extension is to the right.

An extension tells the computer what application to use to open the file by default. In fact, you can change what applications are associated with certain extensions, and when you install a program it sometimes associates itself with certain extensions so that it will be used to open files with those extensions. This may or may not be what you want, so you have to watch this when installing programs.

Here is a chart that shows some common extensions and what programs are normally used to open files with those extensions.

Extension A file with this extension	Associated Application is normally opened with one of these applications
htm / html	Internet Explorer / Netscape / Opera
doc	Microsoft Word
xls	Microsoft Excel
ppt	Microsoft PowerPoint
jpg / gif / bmp	a photo editor or multimedia program
mpg / avi / wmp	Quicktime or Windows Media Player or some other multimedia program
exe / com / pif	Files with these extensions are very powerful - they will run as their own applications and will do whatever the programmer told them to do. Make sure you trust them before launching them

What do you need to DO to see the extensions?

Windows is set up (by default) so that when you look in a folder, you don't see the extensions. You just see the file name. This is both dangerous and annoying. It's dangerous because people wanting to damage your computer sometimes send attachments that look harmless because their true extensions are hidden. For example, someone might send you a file that looks like lookhere.jpg when its real name (extension hidden by default) is lookhere.jpg.exe !!! Watch out for that one!!

Hidden extensions can be annoying if you are trying to create a file that opens in a certain application but when you save it the application gives it an extension that you don't see. For example, suppose you are in Notepad writing HTML code which you want to save as a file with the name mycode.html . You know that if you click on an icon with an htm or html extension, it will open automatically in a brower, which is what you want it to do. However, when you look in your folder for the html file you just created, you don't see it.

Why not? Here's what probably happened ...

You want to save the HTML code you have written in Notepad.
You fail to notice that the Save as type defaults to Text (you need to save it as All Files)
You call your file mywebpage.html
Notepad secretly saves the file as mywebpage.html.txt
When you look in the directory, you see mywebpage.html but its icon is different from the other html file icons (and if you look closely, those don't say html after them).
You link to mywebpage.html from another web page but the link doesn't work.

The problem is you can't see the full extension of the file mywebpage.html.txt. Here is how to fix it.

In any Windows folder window, select Tools / Folder Options
Click on the View tab
Uncheck "Hide file extensions for known file types"
Click OK

It's important to think in advance about file and folder names you use. Your local computer and LAN environment might be very flexible in what it allows as file names, and links might work fine when tested on your computer. BUT these same names may not be allowed on the Internet and might cause confusion later if proper nomenclature isn't used right from the time you start your project. Some file names might not be allowed on the Internet at all (maybe files containing certain characters can't be uploaded to your Internet host site, for example). Other files names might be allowed but can cause problems later (file names with spaces for example).

So follow these rules:

Use only numbers and lower case letters in file names.
Exception: dashes- and underscores_ are ok
Don't use any other keyboard characters. These may be allowed in file names on your computer and LAN network, but they will most likely not be allowed on the Internet. Big problems arise when you link to files with illegal characters in your local environment and try to move these to the Internet later.
Avoid upper case letters in file names. These may confuse you later. They are allowed, but on the Internet, files might not appear unless upper/lower case is used correctly, so a good rule of thumb is stick to lower case!
Avoid spaces in file names Spaces will work fine in your local environment and might be allowed on the Internet, but they might appear as %20 in file names on the Internet. This will cause confusion and create problems later, so don't use spaces in file names

Take this quiz:

Are the file names below ok? If not, why not??

1.	my life.html
2.	my1stwebpage.html
3.	ahmed's1stwebpage.htm
4.	forty-nine_reasons.htm
5.	39steps(version1).htm
6.	PetroleumInstitute04.html
7.	don't_click_here.htm
8.	4&20blackbirds.htm
9.	fire_and_ice.html
10.	31-dalmations ver02.htm

Here's how you start an HTLM document in Notepad

Before you start, make sure you can see the extensions in names of files you create.
Open Notepad and key in some code
Save your file in an appropriate place, such as your MyHTML folder.
Make sure you name your file correctly (no spaces or unusual characters).
Make sure you change 'Save as Type' from 'Text Documents (*.txt) to 'All Files' as in the picture at right.
To avoid confusion, close your Notepad window now.
Follow the procedure below to continue working on your file.

Reopen your file in View / Source, work on the code in Notepad, and refresh your browser to see the results

Here's how you resume work on an HTML document that you created earlier

Browse to the folder where you saved your file and double-click on its icon to open your saved file in a browser window. Leave the browser window open.
Use View / Source in the browser to open the underlying code in Notepad.
Make changes to your HTML source code in Notepad and SAVE the file again.
Refresh the browser window. The changes should appear there.
Continually make changes, save your work, and view it by refreshing the browser window.
Work with both windows open until you are satisfied with your work.
Close your Notepad and browser windows on completion of your editing session.

Helpful Hint:

Be careful that you are working on the correct source file!

If you make changes in Notepad and save them but don't see the result when you refresh your browser, maybe you are not viewing the browser window for that Notepad. If in doubt, close the Notepad source file, select View / Source in the browser window you are trying to work on, and continue working on the code that comes up in the new Notepad window.

Suppose you see a version of your work on a network computer and you want to be sure you will work on that copy for your revisions. You see your work by opening it in a browser from its network location. To keep a copy, you'll need to save it on your computer from the browser. There is a right way and a very wrong way to do that.

Study the diagram at right -->

Have you studied it carefully?
Now, take this Quiz on Saving Files

QUESTION: When viewing an HTML document in Internet Explorer, which is the best way to save the html file on your computer? Choose the best answer below:

	In IE, use File / Save As to make a copy of the file on your computer. You can open the HTML file in Notepad later and work on it.
	In IE, use View / Source to open the document code directly in Notepad, and then save the Notepad file as an HTML document. You can work on the file right then in Notepad, or open the saved file in Notepad later and work on it then.
	In IE, use Edit / Select All, then use control C to copy, and then paste everything into a Word document, and save that as HTML. You can open the file later in Word and keep saving it as HTML.

There are two ways to quickly establish a 'web presence.' The fastest way is to start a blog, and the other is to create a few pages in HTML and upload them to a free web hosting service. Let's look at each of these:

Blogging

Click here to see how to start your blog with http://www.blogger.com.
See how to decorate and personalize your blog with pictures and links set in the blog template
You can write on your blog in plain text and/or in HTML. You can learn HTML code in the HTML Tutorial. You can use HTML to format and decorate your blog with pictures and other effects.
Click here to learn more about blogs in general.

Set up your own Web site

If you're really keen, get yourself some free web space at Geocities or Tripod and upload the files you create there. There's more information about getting started with Geocities and Tripod here.

EchoEcho has a good listing of free web hosts: http://www.echoecho.com/webspace.htm.
A few of these are compared here: http://www.echoecho.com/webspace01.htm
A lot of what you need to know is discussed elsewhere in Vance's projects:http://www.vancestevens.com/papers/evonline2002/week5.htm

Here is what you do to get files that work on your computer up onto your web site:

Make sure everything works correctly in your MyHTML folder (on your local drive)
Double check to see that you don't have any illegal file names. Filenames with spaces and other illegal characters will usually work fine on your computer, but web hosts often won't accept such files.
Upload everything in that folder to your web workspace. If your web workspace contains folders then recreate those folders exactly on your web host and keep all your files in the same place in those folders as on your computer.
On the Internet, capitals and lower case sometimes make a difference. If things don't work, double check upper and lower case on your computer and at your upload site on the Internet.

How do you move your files from your computer to the internet?

Use the File Manager at your web host's web site to move your files from your computer to the Internet (intuitive, but you can only move a few files, or even just one, at a time)
Use FTP to move your files from your computer to the Internet (you have to install and run FTP software, you might not be able to use FTP from some networks, but you can move many files at a time)
- See a general explanation of FTP here
- See an example of using WS_FTP (a commonly used, free, FTP client for PC)

If you include all the files (html and image files esp) and keep the same file structure and folder/file relationship between each file in your project, then everything that works on your local drive should work the same on the Internet.

Navigate this site
Start over | Browse Index | On to Step 1

For comments, suggestions, or further information on this page,
contact Vance Stevens, page author and webmaster.

Last updated: January 22, 2008 - 08:30 UTC (GMT)

Copyright 2008 by Vance Stevens
under Creative Commons License: http://creativecommons.org/licenses/by-nc-sa/2.5/

Save this page to your DEL.ICIO.US account and TAG it thereVance's e-Zguide to creating simple HTML files (in Notepad, or any text editor)Microskills for Web Spinning: Housekeeping awareness and Web design considerations