Overview of HTML Elements

Body

Text Formatting

Text formatting tags are simple and straght-forword; just place the text inside the desired tag. Here are some common ones:

• <h1>...</h1> through <h6>...</h6> - Headings of a page, a chapter, or any part of the document. Size decreases as you go from 1 to 6. Try them on the Interactive exercise provided further below.
• <strong>Bold text</strong>
• <em>Italics</em>
• <small>small</small>
• <tt>teletype</tt>
• <u>Underline</u>
• <strike>strike</strike>
• ^... - Superscript - Exercise: write x³
• _... - Subscript - Exercise: write _nC_k

Interactive Exercise

Links

Links, also known as hypertext links (or hyperlinks), take you to another web page or to another part of the same web page. The page may be in another web site or within the same web site you are currently in. Our menus on the top left are the best examples of links.

Links are formed by using the anchor tag - <a>anchor</a>, which does nothing unless you put in the href="" attribute. The value of this attribute is the address (URL) of the web site/page you want your visitors to go to. Whatever you place between the opening and the closing tags is called the anchor or the caption. It is usually a text or an image. If it is a text it should be well descriptive of what to expect at that destination. For example, a link to Google search page may be coded as follows,

To open a hyperlink in the same window
Code	<a href="http://www.google.com">Google Search</a>
Output	Google Search

Clicking on the above link replaces this page with the Google page. Then, you can bring back this page by using your browser's 'back' button.

If you want the Google page to open in another window, insert the target="_blank" attribute

Displaying Images

The tag used to place an image on a web page is <img /> and is an open tag (no closing tag). Like the link tag, it does nothing without an attribute. The essential attribute of this tag is src="", which specifies the name of image file (and also the path, if the image is not located in the same folder as the web page file). The img tag has several other attributes, among which are width="" and height="", which allow you to resize the image to fit an available space on your page; alt="", which is a textual description of the image; border="" to specify the thickness of the border around the image; align="left | right | top | middle | bottom" to specify how text is placed relative to the image; hspace="" to specify the space between your text and the image. Here is how the image example is inserted here.

To insert an image into a web page
Code	<img src="worldpeace.jpg" width="160" height="300" alt="World Peace" align="left" hspace="20" border="5"/>
Output	(See the image)

To use an image as an anchor: We mentioned earlier that the anchor of a link can also be an image. To accomplish this, all you have to do is place the image tag inside the anchor tag as demonstrated by the following example.

To use an image as a hyperlink
Code	<a href="http://www.yahoo.com" title="Go to Yahoo!"><img src="yahoo.jpg" border="0" /></a>
Output

Lists

HTML presents a very convenient tool to make lists of items with just a few simple tags. The lists may be of two types, ordered list and unordered list, and they are created by the <ol>...</ol> and <ul>...</ul> tags, respectively. Then, in between the items will be listed by using the list item tag - <li>...</li>. The ordered list enumerates the items while the unordered list uses bullets to list the items. In our HTML lists section, we will see, among other things, how to change the numbers to other eumeration such as letters; and also how to change the bullets to other symbols.

Tables

HTML tables are used not only to list items, but also to lay out web pages and parts of web pages. This very web page contains several tables, some obvious, others not so much so. The obvious ones are the examples we used to illustrate the different elements. The not-so-obvious uses include the fact that the entire page is laid-out using a table. Also, the two tables for ordered and unordered lists are actually contained within another table.

Tables are formed by the <table>...</table> tag. And inside this tag will be added rows specified by the <tr>...</tr> tag and inside the rows will be the cells specified by the <td>...</td> tag. Then, the content will be included inside the cell. So, the process of designing a table is :
row - cell with content - more cells with content: - <tr><td>...</td><td>...</td></tr>
row - cell with content - more cells with content: - <tr><td>...</td><td>...</td></tr>
Here is a simple and crude table with 2 rows.

A simple crude table
Code	<table> <tr><td>January</td><td>February</td></tr> <tr><td>$300.00</td><td>$235.00</td></tr> </table>
Output	January February $300.00 $235.00

To design a table, you must know before-hand how many rows and how many cells in a row you need. The sizes of the cells, if not specified by an attribute, are determined by the size of the largest content. Also, the content of the cell is vertically centered but left aligned. The browser assumes the same number of cells in each row, if you have one cell in the first row and two in the second, the output may look strange if you did not use the appropriate attributes.

In fact, just like all other tags, tables are not that appealing without using attibutes. The table tag has several attributes some of which are align="left | right | center", bgcolor="", border="", width="", cellspacing="", cellpadding="". No explanation is required for the first four, cellspacing="" specifies the space between cells in pixels, cellpadding="" specifies the space between the edges of the content and the edges of the cell.

The cell tag <td> also has bgcolor="" and width="" attributes, but more importantly, its colspan="" and valign="" are very useful. The colspan="" tag takes a numerical value and is used to combine rows so as to form wider cells. The valign="top | middle | bottom | baseline" tag is used to vertically align the content of the cell.

Many of the attributes of the row tag <tr> are similar to those of the cell tag.

Now let's see a modified version of the previous example, to which we have added one more row at the top to serve as a title.

A simple table with some basic attributes
Code	<table border="2" width="100%" cellpadding="10"> <tr><td align="center" bgcolor="silver" colspan="2">Monthly Income</td></tr> <tr><td>January</td><td>February</td></tr> <tr><td>$300.00</td><td>$235.00</td></tr> </table>
Output	Monthly Income January February $300.00 $235.00

Frames

In simple terms, frames are two or more web pages displayed on one page. The first thing to keep in mind is that not all browsers support frames, especially the older ones.

A special form of a frame application is the In-line Frame (or IFRAME), which is used to include an entire page at any specified position of a parent page. The tag for it is <iframe></iframe> and, like img tag, it must have the src="" attribute to specify the web page to be inserted. Its other common attributes include width="", height="", frameborder="", align="left | right | center" the functions of which should be self-evident by now.

The following code inserts the Google search page right below

<iframe src="http://www.google.com" width="100%" height="400" frameborder="0"></iframe>

Next, we will see the regular frames. Frames are two or more rectangular regions on the browser which will display different web pages. Although you can make a web page composed of any number of frames, the usual practice is to use only two. In its common application, a two-frame page will have a narrow left frame to list menus, and a wide right frame to hold the content of a web page. Such a layout simplifies navigation through different web pages without reloading the menu again and again.

Two tags are use to form frames, namely, <frameset>... </frameset> and <frame>...</frame>. The first defines the layout into columns and rows, while the second specifies the web pages to be displayed inside the frames. The <frame> tags are contained within the <frameset> tag. In addition to these two, a <noframes>... </noframes> can be included in case your visitor's browser does not support frames.

The following example code is the entire page of a menu-and-content framed web page. Note that a framed page does not need the <body> tag.

Partial code of the 'menu_page.htm' file. One important thing note is the target="main"; it opens the page in the second frame to which we have assigned the name "main".

Forms

Forms are used to take input information from a user which is then processed right on the browser with JavaScript, or sent to a server for processig by using PHP, ASP, CGI or other server-side scripts. Consequetly, it is essential to known at least one of these programming languages in order to make full use of forms. A typical application of forms is to collect and process user names and password. In fact, there are thousands of applications of forms to make a web site/page interactive - the user supplies information, the scripts process it to deliver the answer (or the output). The several interactive exercises that you might have used in this web site are the designed by using forms.

A form is constructed by the <form>... </form> tag which may or may not contain some attributes that send a meaasge to the server-side script. Then, inside it will be included different types of form elements such as text, bullets, checkboxes, buttons, etc. What we are going to see in this section will be the construction of these elements.

• Text input: This is used to enter text inside a single-line rectangular box.
  
  

  To construct an input text of a form
  Code	User name: <input type="text" name="Uname" size="10" maxlength="20">
  Output	User name:

  Note: The caption 'User name:' is added just to remind you that some instruction is needed; otherwise, the user wouldn't know what to enter. Except the type="text" attribute, the others are optional. The name="" will be required by the processing script; size="10" specifies the width and maxlength="20" limits the text to be entered to 20 character, if not supplied, the user can enter any long text.


• Password input:- To enter password text inside a single-line rectangular box.
  
  

  To construct a password input of a form
  Code	Enter password: <input type="password" name="PassW" size="10" maxlength="10">
  Output	Enter password:

  Note: The same as above excep that the required type attribute is replaced by type="password" attribute. When the user types in the password the actual characters are not displayed.


• Radio buttons: These are used to select one from many choices.
  
  

  To construct radio buttons
  Code	Sex:- Male <input type="radio" name="Sx"> Female <input type="radio" name="Sx">
  Output	Sex:- Male Female

  Note: Again, instructive captions should be included. The type="radio" attribute is required. The names of all the buttons must be the same since we want only one to be marked. If you use different names the browser will allow both to be marked.


• Checkboxes: These are used to select one or more choices.
  
  

  To construct checkboxes
  Code	Output
  Your favorite sport<br /> <input type="checkbox" name="FB"> Football<br/> <input type="checkbox" name="BB"> Basketball<br/> <input type="checkbox" name="TE"> Tennis<br/> <input type="checkbox" name="GO"> Golf	Your favorite sport Football Basketball Tennis Golf

  Note: As usual, choose appropriate texts. The type="checkbox" attribute is required. The names of the buttons have to be different in order to identify which ones are checked.


• Buttons: are used to submit inputs or to request an action according to the programmers intentions. There are 4 ways to construct buttons.
  
  

  Ways to construct buttons
  Code	Output
  <input type="button" name="B1" value="Click"> <input type="submit" name="B2"> <input type="reset" name="B3"> <button>Do something</button>	Do something

  Note: If the value="" attribute were not specified, the first would be an empty button; the submit and reset buttons automatically add their own defaut captions, which can be overridden by a value attribute. The third has a closing tag so that a caption can be placed. The submit button, when clicked, sends the values of the form-elements to the server. The reset button clears all form-values to reset them to their respective defaults.


• Options: These are used to select one choice from a drop-down or listed menu. It is formed by a combination of two form elements: <select>... </select> tag which will contain a series of <option>... </option> tags which in turn contain the lists.
  
  

  To construct drop-down option lists Code Output Select a country <select name="opts"> <option value="Aus">Austria</option> <option value="Bra">Brazil</option> <option value="Eth">Ethiopia</option> <option value="Ita">Italy</option> <option value="US" selected>USA</option> <option value="Zam">Zambia</option> </select> Select a country Austria Brazil Ethiopia Italy USA Zambia

  In we added size="4" to the <select> tag we would get Austria Brazil Ethiopia Italy USA Zambia

  Note: Each option as well as the select tag have to have a name in order for the program to identify which option is selected. If you want one of them to be initially selected, include 'selected' attribute to its option tag (as we did it to USA). If we hadn't done this, the list woud have shown or highlighted the first member of the list (Austria) at start up.
  


• TextArea - Long text input: This form element is used to enter long texts such as comments and messages inside a rectangular area.
  
  

  To construct a TextArea form input element
  Code	<textarea cols="20" rows="5" name="txt">Enter message here</textarea>
  Output	Enter message here

  Note: The cols="20" attribute specifies a width for 20 characters, rows="5" specifies a height of 5 characters. The value of this form element is whatever is containd within the tag. We have written an initial value just as an instruction for the user. You can leave it empty if you want to.

Colors

Even though they are not HTML elements, colors are used in every visible HTML element since they distinguish parts besides giving them an appealing appearance. So, let's close this section by introducing how colors are specified.

So far we have been using common color names such as red, gray, blue as values of color attributes. Although there are several other names, some of which you might have never heard, like fuchsia, gainsboro and oldlace, they are nowhere close to covering all possible colors. In HTML, there are more than one and a half million colors that you can use. Thus, it is obvious that we should be using numbers rather than names to specify colors.

Colors are specified as a combination of intensities of the three base color components, Red, Green, and Blue ( or RGB ) each one of which can have values ranging from 0 to 255. In decimal notation we use RGB(r,g,b), whrere r,g, and b are the intesities. For example RGB(200,20,129) is this color ...... Using the full intensities of the three color components, RGB(255,255,255) we get white, conversely, RGB(0,0,0) is black. Also RGB(255,0,0) is red, RGB(0,255,0) is green, RGB(0,0,255) is blue (i.e., with individual full intensities). So, you can use the attribute 'bgcolor=RGB(184,199,195)' for the background color of a table, for example. And yet, this decimal notation is still not the standard notation for colors.

The standard notation for colors is the hexadecimal notation where the above decimal numbers are converted to hexadecimal numbers (base 16) and then preceded by the "#" symbol. So, the red color, RGB(255,0,0), would be #FF0000 since 255 is FF in hex. Similarly, green is #00FF00, blue #0000FF, white #FFFFFF, black #000000; other combinations render other colors, such as #4b7aa4 for this ......

Obviously, since no one can remember all these colors, one has to depend on one of the different forms of color selectors available on the internet, or use the tool we disigned below for the 216 colors classically known as web-safe colors.