Start-Up Notes for Building Web Pages

by Jeff Warner

What is HTML?

HTML is the computer language used to tell a browser how to display your content. An HTML file contains your contentr and HTML instructions. HTML instructions consist of tags and attributes (next section).

Structure of HTML

HTML consists of "tags" and "attributes"
Tags are enclosed in greater-than and less-than symbols. A typical tag looks like this:
< head >

Attributes modify tags. Attributes are conditioned by values. An attribute"="value combination are places inside the greater-than - less-than symbols and separated from the tag and other attributes by a space. Values are enclosed with quotes. An example looks like this:
< font    size="4"    color="red" >

Most tags must be paired with a closing tag. The closing tag is the tag preceeded by a foreward slash. A typical tag and closing tag look like this:
< head >              < /head >

A tag controls how the browser displays any material between the tag and its closing tag. This material may be text or images.
< head >         text or images         < /head >

Basic Skeleton of an HTML File

All web pages must have 6 tags: < html >    < head >    < /head > < body >    < /body >    < /html >.

< head > section - Material in the < head > section is used for web searches. A < title > is generally put in the < head > section and appears in the topmargin of the browser. A < title > might be:
< head >    < title > Web StartUpNotes < /title >    < /head >

< style > tags also go in the < head > section.

< body > section - Everything not in the < body > section < head > goes in the < body > section.

How to Build and Save an HTML file

HTML is generally written in "NOTEPAD" on a PC. On a MAC use the equivalent. HTML can also be written in WORD or WORDPERFECT.

To set up the HTML file so a browser can use it, it must be saved as "*.html" Using NOTEPAD, pull down FILE menu; click SAVE AS; choose SAVE AS TYPE "All Files (*.*)"; fill in FILE NAME "name.html"; and click SAVE. The file should appear in the proper folder with a browser icon.

To save using WORD, pull down FILE menu; click SAVE AS; choose SAVE AS TYPE "Text Only"; fill in FILE NAME "name.html" (you must key in the ".html" ); and click SAVE; then answer "yes" to question that appears in dialog box.

Try It

It is now time to do your first web page. Open a NOTEPAD file (START - PROGRAMS - ACCESSORIES - NOTEPAD) and key in:
< html >
< head >
< title >
Trial Page One
< /title >
< /head >
< body >
This is my first web page
< /body >
< /html >
Save the file using above directions.

Now open the folder where you saved the file, assure it has a browser icon, and double click on the icon. The file should have opened as a browser window with "Trial Page One" in the upper border, and the words "This is my first web page" in the browser window.

Congratulations - you just wrote your first html code and made your first web page.

Tags and Attributes

There are several web sites and books that give html tutorials and list html tags. This looksto me like a useful site W3Schools .

I campiled the tags and attributes that I use commonly on a web page Tags Jeff Uses .

Colors in HTML have their own names. I made a web page of colors and their names Jeff's Colors .

HTML uses font "face"or "family" names that are resident on each computer. In specifying fonts, it is typical to give the PC name, followed by the MAC name, followed by a generic name - separate names by commas). Two examples
< font    face="times new roman,serif"    >    text    < /font >

< font    face="arial,helvetica,sans-serif"    >    text    < /font >

I made an starting to make a web page of fonts Jeff's Fonts .

Styles are a sub-set of html that provide for formatting text and images on a document basis. In distinction, attributes format just the content between a tag and its ending tag. There are several web sites and books that give html-style tutorials. This looks to me like a useful site Cascading Style Sheets .

Getting Graphical Content

Web browsers easily display any image that is saved as a JPG or GIF file. These can be photographs (generally JPG), clip art (generally GIF), sketches, and dynamic clip art (animated GIF). There is tons of this stuff freeon the web. Some sites are: Animated Gifs , Animated Gifs 2 , and Clip Art .

There are simple editors for animated GIFs on the web. Here is one: Gif Works .

Do a web search to find more images and animated GIF editors.

Using Other People's HTML Code

A great trick in learning HTMLis to copy what other people have done. This is real easy to do. When you see a web site that has some feature you want to copy, look at that site's source. You do that by pulling down the VIEW menue,and clicking SOURCE. A NOTEPAD window opens wiht the html source that made the page. Search the HTML using the SEARCH pull-down menu in NOTEPAD.

This feature is a great learning tool.

JavaScript

Java is a programing language used within html code. Typically a smallpiece of Java, or JavaScript, is placed within html a file. These small bit of Java are called Aplets or Snippets. JavaScript is useful to make the browser open or close windows or other fancy stuff. There is lots of free JavaScript on the web. Here are two sites: Dynamic Drive and The Free Site. Browse these sites to see the range of JavaScript applets available.

Do a web search to find more free JavaScript sites.

More