Creating webpages and learning HTML
This page is for people who would like to try making
their own webpage and don't know where to start.



How Webpages Work

    When you visit websites on the Internet it's done with a "browser" program. The most well-known browsers are Internet Explorer, Netscape Navigator and Opera. A browser displays webpages. There are numerous technologies that can be used in creating webpages such as javascript, style sheets, plugins, etc. But the main element of a webpage - the only one that is absolutely necessary - is an HTML file.

   HTML stands for Hyper Text Markup Language. HTML is a type of code that tells the browser program how to display a webpage. An HTML file contains the text of the webpage and it also contains HTML code that describes the contents and layout of the webpage. You can see the HTML code by right-clicking any webpage in the browser window and clicking "View Source" from the menu. What you will see is the webpage text and a number of HTML code segments, called "tags". An HTML tag consists of brackets, < >, with words in between. Each tag tells the browser something about how to display the webpage. In other words, HTML describes the visual layout of a webpage to the browser. It tells the browser what pictures should be displayed, what color the background is, when carriage returns should occur in text, etc.

   When you visit a webpage what you're really doing is downloading the HTML file. The browser then reads the HTML code to find out how the page should be displayed and to get a list of any other files that are needed for the page, such as pictures. The browser then downloads those other files and puts it all together to show you the page.



 Creating Webpages - Code and Graphical Methods

    There are two basic ways to create a webpage. One way is to write the HTML tags yourself. The other way is to use a program that does it for you. Well-known programs for making webpages include Dreamweaver, GoLive, Front Page, etc. Prices for such programs range up to several hundred dollars. These programs are often called What-You-See-Is-What-You-Get editors (WYSIWYG or "wizzywig").

   The advantage of using a WYSIWYG editor is that you don't need to learn HTML code. You can enter text in a browser-like window and the program will code it for you. "Wizards" can be used to insert pictures, make links, etc. Often these programs also include functions to upload your webpage to the server where people will be able to view it.

   The disadvantages of a WYSIWYG editor:
    • First, the cost.
    • Second, these are complex programs, difficult to learn.
    • Third, WYSIWYG is not always WYSIWYG!

   HTML code gives somewhat general directions about placement and layout of text and pictures. It was not designed for precision but rather for flexibility. The appearance of a webpage will depend upon the viewer's browser, screen size, operating system, installed fonts and monitor. Everyone is not seeing the exact same page that you do. For example, the background of the JSWare menu used to be a deep wine color. On some monitors it would appear black while on a monitor set to high brightness the same color would appear to be bright purple.

   A WYSIWYG editor tries to stretch the capabilities of HTML in order to make your webpage look the way you want it to. To some extent that works, but not entirely. In the process a large volume of code is generated. Webpages (HTML files) made with WYSIWYG programs tend to be big, slow to download and difficult to edit.

   On the other hand, the simplicity of HTML makes it relatively easy to learn, perhaps easier than mastering a WYSIWYG program. You can start making webpages by learning just a few HTML tags. Most of what you might want to do in a webpage can be done by learning only 20 - 30 tags. For example, the tag <B> will tell the browser to display bold text. </B> will tell the browser to stop displaying bold text at that point. The <IMG> tag will tell the browser to display an image.
   Some tags also have "attributes". The <IMG> tag, for instance has a SRC attribute. SRC stands for "source" and tells the browser where to find the image file. (ex.: <IMG SRC="http://www.yoursite.com/picture.gif"> )

   You can start by learning a few tags and then gradually learn more details in order to gain more control over the appearance of your webpages.

   If you want to learn HTML then, naturally, the WEB-ED editor from JSWare is recommended! WEB-ED was designed to simplify the writing of HTML without the need of learning to use a complex program.... But any editor, such as Notepad, will work.

   It will also help to get a book for guidance. Many good books are available. One suggestion: Teach Yourself HTML 4 in 24 Hours by Dick Oliver (Sam's Publ.) A book such as this will provide the basics of page layout. Once you know how to make basic webpages you might also want to get an HTML language reference book in order to learn more of the fine points of HTML code.



 Browsers

    Whichever method you use to write your webpages, it's a good idea to install both major browsers, Internet Explorer and Netscape Navigator. After a webpage is completed, check it in each browser for consistency. IE and Navigator read the HTML code differently. In some cases you might be surprised at how differently your webpage is rendered in each. This is particularly an issue when using a WYSIWYG editor because the editor will give you what you want whether it's feasible in both browsers or not. Some editors may also be geared more toward one browser than the other. Front Page, for example, is made by Microsoft so it's likely to create HTML code that works better in Internet Explorer than in Netscape.

   A good example of browser differences can be seen on the JSWare main page. That page uses several panels with borders, called "Tables". The borders on the main page are very dark red-purple when viewed with Internet Explorer. Netscape, however, highlights the left and top side of the border, producing a somewhat garish, light purple color. Netscape does not provide an option to display the border normally.



 Graphics

    Once you have a sense of how to make a webpage, code-based or WYSIWYG style, the main part is, obviously, the text and graphics. You'll probably need a graphic editing program to prepare images. And you'll need to know a bit about graphic file formats appropriate for webpages: GIF and JPG.

   GIF and JPG are the 2 image filetypes that are normally used on webpages. Both GIF and JPG formats can reduce the file size of a picture. JPG is best for photos or pictures with numerous colors and a lot of detail. JPG reduces file size by reducing the detail in the image in subtle ways. A JPG file can be made quite small without noticeably affecting image quality. GIF files are best used for simple images that contain large areas of a single color. Clip art, logos and pictures with a monotone background are best converted to GIF format.

   Most image viewer programs can convert picture files to JPG or GIF format. A good choice might be IrfanView, which can convert most image file types and can also resize and add graphic effects to an image. There is a link for IrfanView on the Best Of... page.

   For more extensive image editing you may want a graphic editing program. The choices for full-function graphic editing are mainly Photoshop and Paint Shop Pro. Paint Shop Pro costs about $100. It's very good and comes with an editor for making animated GIF files. Photoshop is generally rated as slightly better but costs over $600. Photoshop LE, or Limited Edition, costs about $100 but the "Limited" part (only one level of Undo, for example) is limited, indeed. (Note: Photoshop LE has been re-released as Photoshop Elements.)

   There are other graphic programs available at lower prices but those will generally be limited in their functionality. Most of the cheaper programs have a simple, wizard-based interface with limited options.



 Putting Your Pages Online

    Once you've made a webpage you need to put it online so that people can view it. Nearly all ISPs provide free webspace where you can have your own website. To put the webpages on the website you need an FTP program. FTP stands for File Transfer Protocol. It's a simple method for transferring files over the Internet. There are many simple FTP programs available free or for a low price. You don't need a fancy one...you just need to be able to transfer files. Your ISP will probably provide directions for uploading your webpage files.



 Sample Page

    There's a zip file that can be downloaded if you would like to see the HTML code for a simple webpage. The zip contains a webpage with explanatory comments and an image file. Double-click the HTML file to see it as a webpage. Open it in a text editor such as Notepad to see the HTML code and comments.
   This is not a comprehensive tutorial but rather a beginning point. The webpage sample was kept very basic so that it would be easier to figure out.

Download HTML sample zip (3 KB)

   You might also find this page useful as a reference. It was written without the use of paragraphs or headings, and without style sheets. It demonstrates how much can be done in webpage design with a very small number of HTML tags. (Use the File -- SaveAs menu in your browser to save this page as a file.)

Download a simplified version of this page as an RTF file