Create a Web Site - Everything you need to know to get started

Site hosted by Angelfire.com: Build your free website today!

Create a Web Site - Everything you need to know to get started
Copyright John K. 2003

Browsers
· Browsers use the Hyper Text Transfer Protocol (HTTP) to read files on web servers. A protocol is standard method of communication that computers use to pass messages between them.
· They display web pages by converting the HTML code, pictures, and multimedia retrieved from web servers, into nice looking web pages with hyper links, pictures, and formatted text that humans can easily read.
· When a web site is visited, the browser automatically looks for the file named index.html unless another file name is selected.
· Internet Explorer, Netscape Navigator, Mozilla, and Lynx are the most used web browsers.

Internet Service Provider (ISP)
An ISP connects your computer to the Internet. Sympatico, AOL, Rogers, Shaw, Telus, and Verizon are well known ISPs. Some ISPs offer their customers free or low cost space on the Internet to host web site, picture, and sound files.

World Wide Web (WWW)
The World Wide Web is one part of the Internet. It is the part that can be "surfed", contains web pages, search engines, and provides people with information when they type in a web site Uniform Resource Locator (URL). The WWW does not include email, FTP, or Instant Messaging; Those are parts of the Internet, but do not use HTTP to send messages.

Domain Name Servers (DNS)
DNS contains a list of all major web servers in the world. When you type a web site URL like http://www.ec.gc.ca/index.html the request is sent to DNS where the site is looked up, and passed on to the ".ca" domain server. From there it is passed to the ".gc" server, and then onto the ".ec" server where the request is handled by sending you the WWW index.html page.
DNS also converts the "plain english" web site names into an Internet Protocol (IP) address so the servers can better understand the request. Because there is DNS we don’t have to remember Environment Canada’s IP address if we want to read the weather.

HTML Editors
· Notepad [or any plain text editor]
· Microsoft Word 97 or newer
· Microsoft Front Page
· Netscape Composer
· Customizable web site templates on a free or commercial web server like Angelfire.com, or Geocities.com
· many others
The most useful editors today are Notepad and Front Page. Front Page is simpler, but has many complicated, and tempting options that some web servers and browsers do not support. If you use these complicated features, your web site may not work on the Internet as well as it does on your computer when you are previewing it. "OK Buttons" and moving text are some of these advanced options which take lots of work to make them function everywhere properly.
Since browsers look for files named index.html in each folder on the web server, it is wise to name your main web page index.html. Some people leave off the last ‘l’ and name the file index.htm, but once you choose one, you should stick with it throughout your web site naming scheme. If your web site has more than one page and therefore more than one HTML file, you can name your other files descriptive names, but they should use only lower case, and have no spaces. You can use other naming techniques, but my suggestion makes your web site simple to manage.

Hyper Text Markup Language (HTML)

Features of HTML
· Text
· Hyper Links
· Text formatting
· Background colour/picture
· Pictures
· Sounds
· Tables
· Interactivity through CGI, ASP, and Javascript
HTML is code, but it is not complicated and no math is required. The code tells the browser how to show the text of the web page. In fact, you could write a working web page that is a 4000 word essay, but only have 4 words of code (called tags) in the entire file! A tag looks like a statement, or letters enclosed in less than ‘<’, and greater than ‘>’ signs.

<HTML>
<BODY>
This is a working web page. There is only one big paragraph, so 4000 words would be very hard to read. Save this file as index.html onto a web server, and you have a working, but boring web page on the Internet.
</BODY>
</HTML>

That is the most basic web page. As you can see it is not complicated to write HTML in Notepad. All you have to do is leave the 4 tags, and replace the words in between them.
Also notice that HTML and BODY are there twice. The first time "HTML" is seen, the browser knows to read HTML code. The second time we put "/HTML" in the end tag, it is to tell the browser to stop reading HTML code. Nearly every tag needs to have an opening and closing pair. The paragraph tag is an exception because it only adds a new line where it appears, and does not keep adding new lines, so in a way it turns itself off without being told to stop by using a closing tag.
If you were to write this same web page in Front Page, you’d only write the sentences, and the program would add the 4 tags for you. Front Page also adds extra tags to format the sentences into a paragraph by adding the paragraph tag and the header and title tags <HEAD>,<TITLE>, </TITLE>, and </HEAD> to give the web page a title. In this next page, a background has also been added, so instead of plain white, it will be the colour in the file called backgroundfilename.jpg.
Front Page writes all of the tags for you, so you don’t have to remember them, you only press the enter or tab key to make the text appear where you want. To code a new line you include a break-line tag . To get bold text in the center of the window, you highlight the text to be affected, and push the "bold" then "center" buttons on the toolbar - this adds the <CENTER>,, </CENTER> tags around the text in your file.

<HTML>
<HEAD>
 <TITLE>This Title shows in the browser’s Title Bar.</TITLE>
</HEAD>
<BODY BACKGROUND="backgroundfilename.jpg">
This is a working web page. The paragraph tag has made this line appear further from the top of the browser window.
Save this file as index.html onto a web server, and you have a working, web page on the Internet. The second paragraph tag will make this web page much more readable.
 
<CENTER>
 This text appears centered as bold text in the browser.
 
</CENTER>
<A HREF="http://www.thewebsitegoeshere.com/">This text is a hyper link to Visit My Favourite Web Site.
This text and picture is a link too: <IMG SRC="picturethatisyours.jpg">
 You do not need to include a picture tag inside a hyper link tag.
</A>
This text is no longer a hyper link.
</BODY>
</HTML>

A hyper link is not hard in Front Page either. Find the exact URL or path to the file you want to link to, highlight the text or picture to hyper link, choose Link from the toolbar, and put the path into the link field.
In code the hyper link looks like this:
<A HREF="http://www.thewebsitegoeshere.com/">Visit My Favourite Web Site, besides this one.</A>
In the browser the person sees only Visit My Favourite Web Site, besides this one., but when they point and click on it, the browser knows to visit the URL http://www.thewebsitegoeshere.com in the A HREF tag. In the above example, even the picturethatisyours.jpg acts as a hyper link to the other web site.

Pictures can be added just like they can be to emails as attachments. The only difference is that you want your picture to be on the Internet at a fixed address, or on your web server in the same directory as your web page file. When building your web page, if the picture is not in the same folder as your HTML file, then it makes uploading your web site to the Internet more complicated. The picture can be in a sub-folder of your HTML file’s folder, but you need to make that same sub-folder on the web server.
In code, a picture is shown on your web page if you type this:
<IMG SRC="http://www.thewebsitegoeshere.com/picturethatisyours.jpg">
This means "display the picture available on the Internet at the IMaGe SouRCe: http://www.thewebsitegoeshere.com/picturethatisyours.jpg".
If the picture is not already on the Internet and you will save it to your own web site folder on the Internet with your HTML file, then the code looks like:
<IMG SRC="picturethatisyours.jpg">

Tables are a way to organize your web page into rows and columns. They are handy if you want to show something organized in a way other than in paragraphs. They begin with a <TABLE> tag, and end with </TABLE> In between you can define the rows, and columns, as well as cells. A table is easy to design using Front Page, since you choose it from the Toolbar, and can tell the program exactly how many rows and columns to make, and you can add or remove them if you need more or less. You simply create the table, and fill it in with what you want. You can choose to make the borders show, or add colour to the table’s background.

File Transfer Protocol (FTP)
When the web site has been built on your local computer, you need to transfer all of the HTML and picture files involved over to your web server. The directory structure must be the same on the web server, as it is on your local machine, so the local paths for pictures and linked pages will still work.
· To correct or update a web page, you simply fix the local file, and upload it over top of the old file on the web server.
· To connect to your web server, you need its address, a log-in name, and password. These may match your ISP log-in name and password if you use Sympatico as a web server. When you are connected, you drag the files on your computer over to the other side of the FTP program’s window where the web server folder is shown. Check your web site is working by using your browser to visit the address of your web server. If pictures don’t load, then you need to check you uploaded them to the web server, and that the file paths are correct in your HTML files.
· Some free web page servers have a graphical "browse" and "upload file" buttons, so that you don’t need to use an FTP program like WS/FTP or CuteFTP to upload your files. You just follow the instructions on the web server’s Internet site.