HTML is a set of instructions or recommendations to the browser on how to format the text and layout the text and graphics of a web page as it displays in the browser window.

HTML stands for hypertext markup language. The "hyper" part means that a user can use the mouse or keyboard to interact with the page and cause commands to be implemented without having to write program command lines after a onscreen prompt like we used to do in DOS. Both text and graphics can be "hyper."

What are some of the actions that might happen if you click on hypertext?

• retrieve a webpage
• retrieve a graphic
• retrieve a file
• start and run an applet
• send commands to a server
• send an email
• open a new browser window
• etc.

The "markup" part means that you surround text and graphics with tags that determine how the text and graphics are formatted and how the text and graphics are laid out and displayed on the web page.

With html your are not technically programming, rather you are coding and a program, written in an electronic program language, executes the code. The electronic language of the web browser is HTTP - hypertext transfer protocol (using TCP/IP layer - Transmission Control Protocol/Internet Protocol). This is analogous to looking at printed words (the code) and knowing that it is not the same as speaking (requires the voice box, lungs, muscles, brain etc.) to execute commands to cause speaking to occur.

The W3C or World Wide Web Consortium is the governing body that sets html standards and registers new features for coding webpages. All major vendors, network and Internet backbone companies belong to the W3C and usually follow its guidelines.

http://www.w3.org/
Copyright © W3C® 1994-2002 (MIT, NRIA, Keio). All Rights Reserved.

The W3C is working to merge html with XML, extensible markup language. XML allows users the power to invent their own tags and create their own data definitions AND works better with databases, forms and dynamic webpages. The merged language would be XHTML.

The goal of the W3C is to standardize html. Currently we have two standards:

1. transitional or deprecated codes
2. strict or open standard codes

Transitional allows single and paired tags and allows proprietary versions of html coding to be generated and causes different browsers and browser versions to display the same page differently. MS FrontPage, a WYSIWYG authoring tool, is a grand example of proprietary software. When you create a web page using FrontPage it writes non-open standard code and adds tags. It only works on servers that support FrontPage extensions.

Other authoring tools, such as Dreamweaver, use only open standard codes.
click for "four ways to write html"

An HTML document has two sections or parts

• a HEAD that that has information that isn't visible; in other words, it doesn't appear in the browser display window. This section has 3 kinds of information
1. META info - information about the information
2. Validator tags - info used by code validators that check your coding work for errors
3. DTD (document type tags - info about the page relevent to browser versions it is compatable with like Netscape 4.0, 3.1, 3.0 etc.
4. Comment Tags - notes to yourself as the designer; info for search engines, etc. Example: <!-- start #nav-access -->; <!-- add table background -->
5. Title for browser and search Engine use Atitle> My Page</title>
• a BODY that contains the page content and its formatting and layout HTML tags

Example: Search String = House Painting Santa Cruz

Choose: ...the top 2 hits and view the "source code"

Duren | Clearwater Painting

When you begin to code an HTML document you will use a Text Editor such as Notepad that comes with the Windows operating system and Simpletext that comes with the Mac operating system. This allows you to create a typed document on screen and to mark it up (format it) using HTML tags at the beginning and end of text bursts.

HTML tags are always included within a bracket system that uses the keyboard brackets that look like the "greater than" and "less than" signs. For example: <Font> paired with </Font>.

You will save your document as an html file by choosing the "Save as" option and choosing the extension .html for your file such as: yourfile.html rather than .txt or .doc. Your browser reads the file and displays it according to your tags by recognizing the .html extension.

There are three parts to HTML speech (read tags)

<element attribute="value">cool and groovy web lingo</element>

where element, attribute and value could be

<font color="red">cool and groovy web lingo</font>

This would display as: cool and groovy web lingo

HTML (very) Basics

• HTML Tags = command codes written between “angle brackets”
  
• Contained Text = unformatted text "contained" between an opening and a closing tag
• Elements = the general command (the font tag element means to change something about the font)
  
• Attributes = options in the opening tag for formatting or displaying the contained text (the color tag attribute means to change the font color)
  
• Values = modifies or specifies the “degree” of the attribute (the red tag value means to change the font color to red)
  
• Quotations Marks = straight quotation marks enclose most values
• / means to end the tag formatting

Quick Quiz: For the following, what is the element, attribute and value?

1. <font size="3">cool and groovy web lingo</font>
2. <body bgcolor="tan">cool and groovy web lingo</body>
3. <font color="FF0000">cool and groovy web lingo</font>
4. <table border="1">cool and groovy web lingo</table>

Note: As you type a simple text document, the browser will ignore any carraige returns or multiple spaces.

Note: Some tags are single tags instead of paired tags, with only a starting tag but no ending tag such as <IMG> which tells the browser to look for an image and load it on the page at that point.
<img src="logo160.jpg" width="175" height="142">

• Paired tags are called container tags and single tags like <IMG> are non-container tags.

Note: Color in a browser is monitor color or RGB color. RBG stands for red, blue and green. It is also called Indexed Color (256 RGB colors are browser safe) from additive color, like a monitor with light shining through RGB color dot pixels on a screen. (not CYMK or print color which is subtractive through light blocking and absorbing)

• Monitors use a base 16 Hexadecimal system to identify the 256 colors. example | W3Schools.com

As noted above, an HTML document has two sections or parts, the Head and the Body. The minimal tags you need for a simple Web Page are:

<html>

<head>
     <title>insert a page title here</title>
</head>

<body>

     Insert some content here

</body>
</html>

In Class Exercise: Open Notepad and type the HTML above. Make a folder on your desktop and save the file as index.html. Close Notepad and then test the page in the browser.

Next, reopen the page and use the following tags. Save and test to see how the text is reformatted:

• <font face="VERDANA"> </font>
• <font color="green"> </font>
• <BR>
• <BR> <BR> <BR>
• <P>
• <P><P><P>
• <center> </center>
• <B> </B>
  
  
• <table width="300" border="1" cellspacing="1" cellpadding="1">
  <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  </tr>
  <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  </tr>
  < /table>

Saving Your Web Page File as an Html File - When you save the page, the browser knows it's a web page and can display it because the code was saved as an HTML file with the .htm or .html extension.

The home or splash page (the page you want to use as your front door) should be named

• yourdomainname/index.html or
• yourdomainname/default.html.

Those are the names that Netscape and Internet Explorer look for if someone knows your domain name but doesn't specify a file there. The most important thing about the file name is that you call it something that will help you in organizing your folders and files for your Web site. (see below)

Titling/Naming Your Web Page - The page title has nothing to do with the file name, except you may want to pick a key part of the page title for you file name to help you identify it when you are looking at your directory of site files.

First, the page title can have capitals, be a phrase, use spaces and odd characters, numbers and follow other normal writing conventions.

Second, the name is used in three (3) very important ways:

1. It will appear in the "title bar" of the browser window when it is being viewed.
2. It will be used as the title of your bookmark. If you don't title it, it will take some default name, perhaps your file name. The user may not have a clue what they bookmarked when they go to their bookmarks files later and see something they don't recognize.
3. Many search engines look at your page title, often first, and use it to decide where and how to index it and add it to their database. It effects how others will find your pages and get to your site.

Site Organization - Carefully plan your site from the beginning for file organization. It will be essential in updating and changing your files and pages later. It will be amazing just how confusing it gets as the site grows and time passes.

Folders - A smaller site, under 50 files including graphics, may fit nicely in one folder. If it is getting any larger, you may want your graphics in a separate folder, perhaps even separate folders for main sections of your site or categories of products.

If you add a completely new site section later, it is easy to add new folders. However, you can't make a new folder or section out of existing files and folders. All the links will be broken. If you use site management software to create and organize your site, then you can do this and the software will allow rearranging of files and content and will reestablish links automatically. Some authoring tools do this.

Organizing by names - To help you find things, you may use prefixes to:

1. get like files to group together in a directory  or folder (session1.html)
2. to help identify like files (x or a for html files)
3. to indicate similar functions (navbar.jpg)
4. to indicate content or destination to a particular page (bgred.gif, work1menu.jpg)
5. you may have more ideas?