Jan's Illustrated Computer Literacy 101 Logo:Jegsworks Jan's Illustrated Computer Literacy 101


Home > Jan's CompLit 101 > Working with the Web > HTML & CSS Basics > What you need
Icon: Arrow - Previous pagePrevious    NextIcon: Arrow - Next page

Jan's Working with the Web

   What You Need

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. Text editing software of some kind, like Notepad, or a fancier HTML editor

What do you need to show your web pages to others?

  1. Web space
  2. Domain name
  3. Software that uploads your pages to your web space.

These lessons will not get into how you acquire web space or a domain name or how to publish your work to a web site. If you are taking a course, your instructor may want you to 'publish' your work to a network location for her to view.


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 all of 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? When are you asking? No browser is perfect for everyone!

Variety of Browsers

The first table below shows how many different browsers accessed jegsworks.com in November 2003. There are a lot of "browsers" in the list that are actually automatic services like InternetSeer or web authoring programs like FrontPage and Cold Fusion. Spiders from search services (like Google and AltaVista) are not counted in this list. IE dominated at my site  in 2003 but by 2014, IE's percentage had dropped drastically. The statistics come from analyzing log files from my web site. Chrome does not show up at all. I know that the web site was viewed with Chrome because I used it myself! Looking at the log files directly I found that Chrome was being counted as Safari by the analysis software! So the Safari numbers include visits from Safari browsers and Google Chrome browsers. Who knew?? Another example of software that fell behind the real world.

Stats for jegsworks.com

 

Nov. 2003

Sept. 2016

Browser statistics
Browsers (Top 10)   
Browsers Hits Percent
Safari [includes Chrome] 3507114 76.10%
Mozilla 462736 10%
Firefox 362470 7.80%
MS Internet Explorer 200504 4.30%
Opera 47503 1%
Unknown 23678 0.50%
Nokia Browser (PDA/Phone browser) 1593 0%
Subversion client 881 0%
Netscape 869 0%
iBrowse 392 0%
Others 616 0%

Statistics for other sites:
   NetMarketShare.comIcon: Off Site
   Analytics for USA goverment web sites Icon: Off Site

A search with GoogleIcon: Off Site 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 some general categories:

  1. Plain text editor
  2. Advanced text editor
  3. HTML text editor
  4. WYSIWYG editor

The lessons will assume you are using Notepad but there are MANY other free text editors that you could use. EditPad Pro 7Icon: Off Site, for example, can be 'installed' directly to your Class flash drive so that you can access to it on any computer that your Class flash drive is plugged into. Plus, there is a button to view the current document in a browser. Sweet features. I use this editor for most of my own plain text work.

Be aware that free web space sites usually require you to use one of their templates and to do all of your editing online through their site. You may have very limited ability to add your own HTML or CSS coding.


Basic Text Editor: 

Text Editor: Notepad (Win7)

Basic Text Editor: Notepad

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:

  • Free!
    Notepad comes with Windows.
  • Total control of the coding

Disadvantage:

  • Notepad can Undo only the last action.
    This is a major issue for some of us, including me!
  • 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 in the browser.
  • You must know the code for tags and the choices for attributes and values. No helpful hints.
  • Typing mistakes may be hard to spot.

Advanced Text Editor:

EditPadPro7  (Win7)

Advanced Text Editor: EditPad Pro 7

There are many free and commercial text editors that add helpful features to the basic ones of Notepad, like:

  • Longer Undo list (This is important!)
  • Color-coding for the tags, scripts, and programming code
    (Makes the code much easier to read)
  • Clipboard for snippets of code you use often
  • Find and replace over multiple documents at once
  • Line numbers to help you refer to spots in the document.
  • Highlighting the line that the cursor is in!

The illustration shows EditPad Pro 7Icon: Off Site which is intended for programmers as well as HTML writers. Notice the color coding that makes the tags much easier to find. This program also has very good, searchable Help files.

There are many different editors of this type that help programmers write and edit programming code in various programming languages.

Advantage:

  • More features than Notepad, especially color coding and longer Undo lists.
  • Many are free or have trial versions

Disadvantage:

  • Interface is more complex than Notepad.
  • Probably will still have to save the page and open it in a browser to see the effect.
  • You may still need to know the tags, attributes, and possible values.
    Some editors offer buttons or drop lists of items for you to choose, which helps.

HTML Text Editor:

HTML Text Editor: Coffe Cup

HTML Text Editor: Coffee Cup

Text-based HTML editing programs, like Coffee Cup Free HTML EditorIcon: Off Site, pictured at right, have features that Notepad and advanced text editor do 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 and punctuation.

Advantage:

  • Easier to read code - automatic 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.
  • Typically cannot edit the page directly while in a Preview.
  • Can still be hard to find the spot in the source code to edit.

WYSIWYG Editor:

HTML Editor: Dreamweaver CS6
WYSIWYG Editor: Dreamweaver

A WYSIWYG editor, like Adobe Dreamweaver, 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 show you what your page will look like under all circumstances. Many factors affect the appearance of a page. (Next lesson has a table of factors)
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 and wizards.
  • May mark coding errors for your correction.

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. Your own typing error directly in the code could cause a massive erase the next time your editing software gets hold of the page.
  • An out-of-date program may not know about the latest HTML or CSS.
  • May not be able to help with scripts.

WarningWord 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 much bigger, by thousands of lines, which means that they take 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, Verizon, ATT, Charter, Juno, or NetZero, 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

    This is fine for personal web pages but is not very impressive for your business site.

  • Free web space:  A free account with a web hosting service will usually require that ads show on your pages but you do not get any money from these ads. These free services usually do not allow commercial/business sites.  They want you to upgrade to a paid account. On the other hand, Google Sites offer free web space, including for commercial/business use. Of course there is a premium account at Google that offers more tools and is not free!

    Free hosting accounts 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. But, you probably cannot move those pages to a new hosting service later. They depend on templates and tools on the web server that are not available on another company's web server.

  • Domain name for free web space: For a free site your URL will still be fairly long and not personalized much, like:
        http://members.tripod.com/your_member_name/
        https://sites.google.com/site/Lastname-Firstname/
        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 may cost a lot more, but they provide important services. However, you do not need these to show off your vacation pictures! We have Facebook, Instagram, and Picasa for that!

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

    WarningResellers: 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. It's an extra layer in the way of getting things done.

  • Domain name for hosted space:  To use web space at a paid hosting service, you need 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 Icon: Off Site or Register.com Icon: Off Site. InterNIC has a list of all the official registration services Icon: Off Site.
     
    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. There are over a 100 new extensions becoming available, starting in 2014. 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 eBayIcon: Off Site or other 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 IsIcon: Off Site at Network SolutionsIcon: Off Site. 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 SolutionsIcon: Off Site. 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.

    WarningWho owns the name? 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! They may register it under their own name instead of yours! Do you see a problem here???
     
    WarningDid the bill get paid? 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!

Check list for web site hosting:

Decide what features you need now and might need later. Find out how easy it is to expand later.

  • Web space: # megabytes (MB) or gigabytes (GB), cost for using more, how easy to add more, are log files counted in the total?
  • Data transfer: how many gigabytes (GB) allowed, cost for going over?
  • Email: Number of email accounts, amount of storage space for each, is there a web interface, spam blocking, virus checking, can mail be downloaded to your local email program?
  • Support: by phone? 24/7/365? email only? How long to get a response?
  • Uploading pages: with FTP program, from web interface?
  • Control: what can you control yourself? new email users, permissions, manage FrontPage extensions?
  • Site Statistics: what kind of reporting included? raw log files available to you?
  • Multimedia: included? Streaming audio or video?
  • Costs: regular charges, discounts, setup fee, cost to upgrade?
  • Methods of payment: credit card, PayPal, debit, physical check?

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 or putting (files in general), or publishing (web pages and associated files in particular).

To upload you may need to 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

Methods for Uploading

There are three choices of how you can create and upload. You may not be able to use all three for your particular web hosting service.

  1. Web-based: Slowest, most awkward method.

    a.  Online Page Wizard or Site Template:

    Web hosting services usually have web pages that lead you through the steps to create your own pages by making choices from lists of layouts, colors, and themes. Your work is not on your own computer at all so, actually, there is no uploading to do. On the other hand, you do not have a local copy of your work either! Pages created this way cannot be moved to another web server.

    Site templates from Google for Google Sites Page Templates at Yahoo

    b.  Web page upload dialog:

    Dialog to upload files (Momentum at RSCC)The hosting service may have a dialog that lets you browse your own computer to pick files to upload. Some allow only 1 file at a time but others let you pick more. Usually you must pick each file separately. Very tedious!

    The example at the right is from Momentum, an online course management program that I used while teaching at Roane State Community College. Each HTML page and each graphic file used on the page must be selected separately but will then be uploaded all at once. The illustration shows the files needed to show the first page in my Working with the Web. The only images on that page are 9 small icons. But I still had to choose them one at a time!

  2. FTP Program: FileZillaFTP program:
    from File Transfer Protocol.

    Many FTP programs have a free version or a trial version. FileZillaIcon: Off Site, Ws_FTPIcon: Off Site, and CuteFTPIcon: Off Site are some popular FTP programs. 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. Drag and drop to copy from one to the other. That part is easy!

    Current versions of Windows can usually handle uploading with FTP directly from Explorer. A free FTP program can still be a better choice since it shows both locations in a single window and has other features that can be very helpful, like remembering the location and log in information.

  3. HTML editor:

    Many HTML editing programs contain an internal FTP program. Others automatically use 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.

    WarningFrontPage Extensions:
    [Now considered obsolete. Your web server may not support FrontPage Extensions.]
    Microsoft FrontPage and its successor Microsoft Expression Web do more than just copy your files when publishing. If your web server has FrontPage extensions installed, these programs create special files to manage things about your web. Very useful! But... that makes it risky to publish to a FrontPage web using an FTP program.  Choose a method and stick to it!