HTML Basics:
What You Need

español
Did you want IE9+, Chrome, Firefox; Notepad?

In this project you will create a web page yourself. Relax. You will work up to it and you will have directions each step of the way.

What do you need to create a web page?

1. Computer (of course!)
    
2. Browser software (which you have if you are reading this page on screen!)
    
3. Editing software of some kind
    
4. Web space and domain name- if you want to show your work to the world
    
5. Software that uploads your pages to your web space.

Browser

You must have some kind of browser so you can see what you created. If you are serious about producing web sites, you will probably want to install the most popular browsers to see if your documents work well in all of them. Many advanced techniques for HTML work only in certain browsers.

Which browser is best?

There is no one answer to that question. Best for what purpose? Best for what kind of user? No browser is perfect for everyone!

[November, 2003] World-wide, Internet Explorer 6 is currently the dominant browser. How dominant is it? It depends on who you ask and whose statistics you look at!

Below are some browser statistics for this site,  jegsworks.com. IE5 & 6 really overwhelm all the rest. This is not a small sample, as the numbers of hits and pages viewed shows. It is skewed toward schools and teachers. Schools tend to upgrade slowly. This may make the percentage of Netscape users higher for this site than for the Web at large. These numbers vary a lot through the school year, but IE5/6 wins every time.

IE = Internet Explorer
NN = Netscape Navigator
n.x includes all minor versions of the same
     major version number n, so 4.x includes
     minor versions like 4.00, 4.05 and 4.10 etc.

Variety of Browsers (Nov. 2003)

The table below shows how many different browsers are out there that accessed jegsworks.com in November 2003. There are a lot of "browsers" out there that are used by automatic services like InternetSeer and by web authoring programs like FrontPage and Cold Fusion. Spiders (like for Google and AltaVista) are not counted in this list. IE did dominate at my site!

Statistics for other sites:
   WebReference.com
   Browser News
   TheCounter.com

A search with Google using the keywords "browser statistics" will provide you with a list of sites that provide the statistics for their own site as well as some pages that report stats for multiple sites.

Read these statistics carefully. Many statistics about the web are based on numbers reported only from people who downloaded a particular toolbar or who use a particular service. No one can truly report numbers for the Internet as a whole.

Editing software - text or WYSIWYG?

You have many choices of software to use to create and edit HTML pages. They fall into three general categories:

1. plain text editor
2. HTML text editor
3. WYSIWYG editor

For these lessons you will be using Notepad as a plain text editor and FrontPage (FP) or FrontPage Express (FPX) as a WYSIWYG editor. FPX is not a particularly good editor. In fact, it is quite annoying. But, since it comes with Internet Explorer versions 4 & 5, it is widely available and free to classrooms and individuals! FPX is not available on Win2000 and WinXP due to software conflicts.

Text editor: 

A basic text editor like Notepad works just fine for HTML coding. You do not have to have fancy or expensive software to write HTML documents, though such can make your work easier in many ways.  Many professional web authors still use Notepad or some other basic text tool for most of their work and use advanced tools only for complex tasks.

Advantage:

• Cheap!
• Total control of the coding

Disadvantage:

• Code can be hard to read.
• To see the effect of your code, you must save your work, switch to a browser, and open the page.
• You must remember the code for tags and the choices for attributes and values.

HTML text editor:

Text-based HTML editing programs, like Allaire's HomeSite (no longer available), pictured at right, have features that Notepad does not. Such a program can color-code the tags and automatically indent and space lines to make the code easier to read. A preview or browse feature displays the page that you are working on in your browser before you actually save any changes. Buttons and assistants can create the HTML code for you and show you all the attributes for each tag and the choices for the values of each attribute.

Such features let you concentrate on what you want to say, instead of having to think about the proper code and its spelling.

Advantage:

• Easier to read code - color, indentions, spacing.
• Don't have to remember all the code attributes/values - buttons & wizards.
• Preview window - don't have to save and  switch to a browser.
• Spell check.
• Error checking to catch code mistakes.

Disadvantage:

• Cost.
• Cannot edit the page directly from a Preview (unless there is a Design view also).
• Can be hard to find the spot in the source code to edit.

WYSIWYG editor:

A WYSIWYG editor, like Microsoft FrontPage pictured at the right, goes even further. It lets you type and format directly on the page, like in a word processor. The editor manages the code out of your sight.

You can  still dig down to the actual HTML code to fix problems or to use new methods and scripts that the editor cannot handle.
The WYSIWYG lie:  No program can really show you what your page will look like under all circumstances. Remember the table of factors that affect the appearance of a page? The WYSIWYG part is at least partly a lie! It's more like What You See Is What You MIGHT Get.

Advantage:

• Can edit directly on the page, like a word processor
• Don't have to remember all the code attributes/values. Can use buttons & wizards.

Disadvantage:

• Cost!
• You may need to get into the code yourself anyway to repair what the editor has done.
• Some programs erase code that they do not understand.
• The program may not know about the latest HTML objects.

 Advanced features & FrontPage Express:
If you have existing pages that use advanced features like CSS, JavaScript, or DHTML, do not edit them with FrontPage Express!!

It will delete or rewrite code that it does not understand. (If you don't know what these advanced features are, you probably don't have them!)

Old versions of FrontPage and other WYSIWYG editors have the same problem to different degrees. More recent versions are much smarter.
 

Word Processors:
While you can  use a word processor to write HTML documents, it is not the best choice. You must be sure to save as an HTML document. Browsers do not understand the hidden code in normal word processing documents. Saving as HTML will remove the word processing marks. However, the only formatting that will be saved is what can be duplicated with HTML tags. The results are not always what you expect. You will especially have difficulties in using a word processor to edit an existing HTML document. Very odd things can occur without warning as you edit and save and edit and save again.

MS Word: Microsoft promotes using Word 2000 and later versions to write web pages. Word adds a LOT of code to a page that you save as HTML so that you can go back and forth with your editing between Word doc format and HTML format. They call this round tripping. This extra code makes it very hard to edit the HTML in a different HTML editor. It also makes your pages noticeably bigger, which means they that longer to download. (That's a bad thing!)

Web Space & Domain Name

For people to be able to see your web pages over the Internet, you must store them on a web server that is connected to the Internet. Your disk space on such a server is called your web space. The URL, or address, used to access the web space is your domain name, like microsoft.com or jegsworks.com.

Where can you get web space and a domain name??

• Your ISP:  If you connect to the Internet through an ISP, like AOL, MSN, or Earthlink, your account may include some web space. Many ISP's include 2 or 5 MB or even more of web space with even a basic account.

  Domain name for ISP account: The URL to your space will probably include your ISP's name and your login name, like:
      http://www.yourispname.com/~yourloginname
         or
      http://users.yourispname.com/yourloginname
   

• Free web space: Services like Yahoo!Geocities, Tripod, Angelfire, and AOL Hometown  offer free web space, but require that your viewers see advertising on the pages or in a popup window. These free services usually do not allow commercial/business sites.
   
  They do not usually have tech support available by phone. Free web hosting servers also tend to be slow since they crowd a lot of sites onto each of their web servers. You get what you pay for in this case.
   
  New web authors may like using the page-creation features, where you just choose from a list of options to create web pages. No HTML software required. Not much control either.

  Domain name for free web space: For a free site your URL will still be fairly long, like:
       http://www.geocities.com/yourYahoo!ID
      http://members.tripod.com/your_member_name/
      http://your_member_name.tripod.com
      http://www.angelfire.com/directory/membername
      http://hometown.aol.com/yourmembername
   

• Web hosting services: Paying a web hosting service may be worth the price. A good host will have technical support available online, by email, and by phone 24/7/365.  (24 hours a day, 7 days a week, 365 days a year). Some services specialize in business accounts or e-commerce. These will cost a lot more, but they provide important services. However, you do not need these to show off your vacation pictures!

  Remember: Server stability, the right features, and good technical support are more important than having the lowest cost!

  Some "web hosting services" are actually reselling services from another company. They don't have any equipment of their own. That means they cannot fix things themselves.

  Domain name for hosted space: To use web space at a hosting service, you must have your own domain name. There is a yearly fee to register a domain name. $35 per year is the maximum. You should be able to get a price break if you pay for several years in advance or register several names.

  When you contract for your web space, you can probably arrange for the domain name at the same time, or you can register the name you want directly from one of the companies in charge of domain names, like Network Solutions or Register.com. InterNIC has a list of all the official registration services.
   
  Pick a name that is easy for your site visitors to figure out and remember. Unfortunately, most of the really easy names are already taken. You do not have to stick to a .com extension for your domain name. Perhaps .net or .org or .info or some another extension would be more appropriate. No one company handles all of the different extensions.

  You can use up to 63 characters in the main part of the name (67 including all the extensions). Don't use that many! Keep it as short as possible.

  If the name you really, really want is already registered, you might be able to buy it from the current owner. Some people buy up domain names just to resell! Check out eBay or another auction sites and search for "domain name". You might get your name cheap, or you might have to pay a hefty fee.

  You can look up who owns a domain name with Who Is at Network Solutions. The results page will show a name, address, and phone number for the current owner. It never hurts to ask, especially if the domain is not active yet.
  
  Recommendation: Register your domain name yourself, directly with Network Solutions. It is easy to do online with a credit card. It is not the cheapest way but there are serious advantages to doing it yourself.

      Advantages:

  •     YOU own the domain name instead of some middleman or company.
  •     YOU can direct changes if you decide to change web hosting services.
  •     The bill comes to YOU, so you know when it's been paid.

  If your hosting service or web designer registers the domain name for you, you may have to have their cooperation to move to a new hosting service or new designer! Do you see a problem here???
   
  It is easy to get confused over the billing for your domain name and web hosting service. These are likely to be billed separately and they may renew at different times. To make things more confusing, you will get lots of offers by email and snail mail that look like bills but which are sneaky offers from other companies that are trying to trick you into changing to their service. Don't forget which company you dealt with the first time. You don't want to switch by accident!

Software for Uploading

Once you have written your web pages, you need a way to transfer them to the web server. This is called uploading (files in general) or publishing (web pages and associated files in particular).

To upload you must know:

• The method(s) the web server allows you to use upload.
• The URL (Universal Resource Locator) of the web space you are allowed to use.
  This is either a set of numbers like 207.46.138.20 or a web address like www.microsoft.com
• The folder on the server you are allowed to use
• The username and password needed to access the web space

There are three choices of how you can upload. You may not have all three for your particular web hosting service.

• Web-based: Slowest, most awkward method.
  
  a.  Page Wizard: Web hosting services that specialize in beginners generally have web pages that lead you through the steps to create your own pages by making choices from lists of layouts, colors, themes. Your work is not on your own computer at all so, actually, there is no uploading to do.
   
  b.  Web page upload dialog: The hosting service may have a page which lets you browse your own computer to pick files to upload. The example at the right is from Yahoo!Geocities and allows you to upload 5 files at a time. You must upload each HTML page plus each graphic file used on the page. So one page could easily use a dozen or more files! Very tedious!
  
   
• Separate FTP program: from File Transfer Protocol. Many of these programs come in a free evaluation version. Ws_FTP and CuteFTP are a couple of popular ones. Windows comes with the Microsoft Web Publishing Wizard. You usually see a list of files on your own computer in one pane and the list of files on the web server in another pane.
   
• HTML editor: Your editing software may contain an internal FTP program of its own. Or, it may automatically access whatever FTP software is installed on your computer. The internal FTP program is usually not as flexible or as fast as a separate FTP program.
   
  FrontPage may do more than just copy your files when it publishes. If your web server has FrontPage extensions installed, FrontPage creates special files to manage things about your web. Very useful! But... that make it very risky to publish to a FrontPage web with an FTP program.  FrontPage may get VERY confused, breaking your site. Choose a method and stick to it!

~~  1 Cor. 10:31 ...whatever you do, do it all for the glory of God.  ~~

Last updated: 30 Apr 2012