HTML Basics:
HTML Code Example

Title: Jan's Illustrated Computer Literacy 101
espaolIcon: Change web
Did you want IE9, Chrome, Firefox; Notepad? Icon: Change web



The idea of HTML tags is easy to understand. You mark the logical parts of your document. But, when you put a bunch of text and tags together to make a whole page, things start looking complicated!

To make things worse, tags often have more stuff in between the < and > than just the name of the tag. Sometimes there's a LOT more.

What does a tag look like?

A simple case is the P tag (marking paragraphs). It often includes the alignment for the paragraph, like <p align="justify">.

Such extra parts are called attributes. They set various characteristics for the tag. Each attribute has two or more possible values.

General form for a tag with attributes is like:
         <tagname attribute="value">

In our example above, the attribute is ALIGN and there are four possible values: LEFT, RIGHT, CENTER, and JUSTIFY.

You will now look at a very simple web page and figure out what each part of the code is doing.


Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser BasicsTo subtopics

Project 2: HTML Basics
    HTML CodeArrow - Subtopic open
    icon-footprintCode Example
    About HTML
    What You Need
    Code by HandTo subtopics
    WYSIWYG
    FrontPage/FPXTo subtopics
    Images in HTMLTo subtopics
    FormattingTo subtopics
    TablesTo subtopics
    Print
    ConvertTo subtopics
    Summary
    Quiz
    ExercisesTo subtopics


Search 
Glossary
  
Appendix



Icon Step-by-Step

Step-by-Step: Look at the Code

 Icon Step-by-Step

What you will learn: to view source code
to identify HTML tags in use

 Start with:    Internet Explorer open

View Source Code

  1. Open a new browser window.
     
  2. If you are connected to the Internet, type the path http://www.jegsworks.com/Lessons/web/start/html.htm in the browser's Address box.

    OR

    If you installed the resource files on your hard drive to the default location, you can type  c:\My Documents\complit101\Start\html.htm  in the browser's Address box.

    This is a very simple page with one image, three lines of text, a footer, and a background image.

    Example page

    TipWelcome with font set and with default fontThe browser will display the text "Welcome" exactly as it is shown on the illustration above only if your computer has the font Brush Script MT installed. Otherwise, the browser's default font is used. IE for Windows uses Times New Roman, for example. In the illustration at the right, Brush Script MT is used for the first Welcome and Times New Roman is used for the second. When you look at the code, you will see what the tag is doing to choose a font.
     

  3. From the Internet Explorer menu select  View  |  Source to show the source code (the HTML code) in Notepad. You will be able to see the basic features of an HTML document.
     
  4. Inspect the code. Looks like quite a mess! So many lines to display such a short document!

    You will see many of the tags you learned about in the previous lesson. Some of them have a lot more between the < and > than the tables showed!

HTML code for the example page

  1. Compare these lines with what is displayed in the browser. Can you tell what each code line is doing? Some do not seem to do anything! But all are important. (It may be easier to read if you print the code from Notepad.)

    The key feature of HTML is the words between the symbols < and >. These are the tags. Some tags give information to the browser but do not show anything on the screen.
     

  2. Open taglist.doc from the web or from your resource files or create on a sheet of paper a table with 3 columns. Title the columns "Tag", "Part", and "Attribute". In the Tag column, list all the different tags used in this document. You will complete the table shortly.

    Table for identifying tags found

    Most tags come in pairs- an opening tag and a closing tag. Put them together in your list. The closing tag includes a / before the name of the tag. For example the opening tag <html>  has the matching closing tag </html> . This document also has four unpaired tags.


Tag Types

  1. In your table of tags, find the ones that do not match anything you see when you look at the page in your browser. Mark them in the Part column of your table as "hidden". Every HTML document must include the paired tags <html> and <body>.
     
  2. In your table of tags, find the tags that surround the text that actually showed in the browser.  In the Part column of your table, tell which part of the document that tag marks.
     
  3. Find in your table the tags that have extra information between the < and >. These parts are called attributes. They set various characteristics for the tag. Each attribute has two or more possible values. List the attributes in column 3 for those tags in the page html.htm that have attributes.

    For example, the <font> tag can have attributes that control the font face, the font size, and the color of the text. In this document you should see:

     <font face="Brush Script MT" size="+3" color="#FF0000">Welcome</font>

    TipIf this font is not installed on the computer, the browser will use its default font, which is Times New Roman for most Windows browsers.

    TipNote that the FONT tag has been deprecated. That means it is not included in the recent rules for HTML. The commands for how a page looks are now done with stylesheets. But current browsers are still able to understand the FONT tag. That may not be true in the future.


Special Codes: &xxxx;

There are more characters available to you than what you see on your keyboard. You must use a special code for them, however, and you must use a font that includes those characters.

You also need a special code to see more than one space. Your browser will only show 1 space no matter how much blank space is in the source code unless you use the code for a space.

All these special codes start with & (an ampersand)  and end with ; (a semi-colon).

  1. Switch back to the browser window showing html.htm and look at the last line of text shown on the page:
    © Jan Smith 1999
     
  2. Spaces: Switch to Notepad and find the code that produced that line. You will see &nbsp; used many times. This is the HTML code for a blank space - a non-breaking space. (By the way, this string of spaces is not a good example of good coding practice!)

    Tip In word processing you actually see a space for each time you pressed the spacebar. In HTML you must use the code  &nbsp; for each space you want to guarantee. All the white space in your source code will collapse to a single space.
     

  3. Character not on keyboard: Find the second special code in the sentence: &copy; This is the HTML code for the copyright symbol - © a circle around the letter C.

    Tip Most text fonts contain letters from several languages and also symbols, like © ! @ ~ ^ & " ?      . Your keyboard will only have keys for the special characters that are common in the language for which the keyboard was designed. You can make the browser display the characters that are not on your keyboard by typing special codes for them.

    The HTML codes for special characters use an abbreviation of an English description of the character, like &iacute; for and &ntilde; for . You can also use number codes for the special characters, like &#237; for and &#241; for .


Special Characters: Character Map

To find the code for a special character, you can use Character Map, which comes with Windows.

TipProblem: Unexpected characters in a web page.
      Cause:      The special character was written with a font that your computer does not have. Your default font has a different character with that code. Curly quotation marks are a particular problem.
       Solution: None for the viewer. For the author, be careful! Avoid special characters when possible. Use an image if the symbol or character is very important.

  1. Open the program Character Map:
     Start  |  Programs  |  Accessories  |  Character Map  
    or use the Run dialog:  Start  |  Run , type charmap and click OK.
     
  2. Select a text font in the Font list.
     
  3. Click on the copyright symbol , a circle with a C in the middle. At the bottom right of the Character Map dialog you can see the keyboard combo for the selected character: ALT + 0169. So in HTML you would type &#169; or  &#0169;.

    Character Map - showing Times New Roman

    Icon: WinXP In WinXP to see the key combo to use, you must display the Advanced view by checking its box.

     

  4. Inspect several fonts in Character Map. There are lots of characters that don't have keys on your keyboard.

    Problem: Some characters do not show a keystroke combination.
    Cause:      The characters on your keyboard don't have combos. The keys are already there! New versions of common fonts include new symbols and characters from other languages that do not have a keystroke combo assigned.

    Instead of typing the special code with & and ; , you can insert the character with the key combo directly or copy and paste from Character Map. There are, however, situations where your character may not display as you planned with these two methods.

    Your choice of font does make a difference. If you use a symbol font, like Wingdings, instead of a text font, the same codes that made and produce instead little arrows: Two arrows in Wingdings , and instead of the copyright symbol you get Wingdings character - 3 point star a 3-pointed star. How unexpected!

    Character Map - showing Wingdings

    The abbreviations are easier to remember than all these numbers!

    TipProblem: Character is too small to really see in Character Map.
          Solution: Left click on the character but keep holding the mouse button down. A larger version of the character pops up.
          Icon: WinXP In WinXP just click the character. The larger version will stay up.

    TipProblem: Typing on the keypad does not type characters.
          Solution
    : Press the NumLock key. When NumLock key is OFF, the keypad works as navigation keys instead of typing numbers.

Codes for the Code characters: & " < >

HTML code uses some characters itself: ampersand &, quotes ", left angled bracket <, right angled bracket >. What if you want those characters to show in your text for some reason? (Like in the previous sentence!)

To use these coding characters in normal text in an HTML page, you must use a special set of characters for them. (Getting a bit crazy here!)  If you do not, the browser may try to interpret them as HTML code instead of text, which will do unhappy things to your web page.

Symbol

To show as normal text, use:

Description

a space

&nbsp; non-breaking space

<

&lt;

'Less than' sign

>

&gt;

'Greater than' sign

&

&amp;

Ampersand

"

&quot; Double quote sign

Now you have seen tags in action. Some of the attributes and special codes may not make sense to you yet, but you should have an idea of the general way HTML documents work.