Untitled

HTML

This webpage lists all the HTML Tags that a student is expected to understand after finishing the E-learning material. For each topic, we list some examples, the corresponding outputs, as well as the related E-learning materials (follow the link).
The HTML tutorial prepared by W3School (http://www.w3schools.com/html/) is selected as the complementary material.

Table of Contents

HTML
Basic Tags
Table Tags
Advanced Tags
- Form
- Form Components
Frequently Asked Questions
More Exercises

HTML

HTML stands for Hyper Text Markup Language

An HTML file is a text file containing small markup tags

The markup tags tell the Web browser how to present the text sent

An HTML file must have an htm or html file extension

An HTML file can be created using a simple text editor

Each tag will appear as letters or words between a < (less than sign) and a > (greater than sign).

Example:

<HTML></HTML>

Back to Top

Basic Tags weblink

The basic html tags that are used to create a simple web page are the tags that define titles, links, headings, comments, paragraphs, line breaks etc.

HTML

Tells the Web browser that this is the beginning of an HTML document .

<html> </html>

BODY

Tells the Web browser that this is the beginning of the Web page content.
Everything you want to say and see on your page will follow this tag.
You can have multiple body tags when you have frames.

       <body>
           My first html page
      </body>

HEAD and TITLE

<HEAD>: tells the Web browser that this is the header for the page.

It consists of general information about the document.
You can place the link to other files in the header.
You can have atmost one header for a HTML document

<TITLE>: tells the Web browser that this is the title of the page

Title is displayed on the up left corner of the browser.

          <head>
                 <title> MyPage </title>
          </head>

TAG Attibutes weblink

additional information about the HTML elements on your page.

attributes come in name/value pairs (name="value")

Name represents the name of the attribute. The possible names are id, name, class, style etc.

Value represents the coresponding value of the attribute and is bounded by doublequotes. For example id="submit" or name="color" etc.

For each tag we can have mutiple attributes seperated by space.

      <body bgcolor="green">
           My first html page with green background
      </body>

The example above gives a green background to the html page. Click to see.

      <body background="sunset.jpg">
           My html page with sunset image
      </body>

The example above gives a sunset.jpg as a background to the html page. Sunset.jpg file is the same directory of the sunset.html file. Click to see.

Back to Top

Exercise 1: Simple HTML file.

Step 1: If you are running Windows, start Notepad.

Step 2: Writes the following text into notepad.

<html>
    <head>
        <title>My Page</title>
    </head>
    <body bgcolor="yellow">
        This is my first html page.
    </body>
</html>

Step 3: Save the file as "c:\html\mypage.html".

Step 4: Start your Internet browser. Enter C:\html\mypage.html in the address bar. Click Enter.

Click to see the result.

Back to Top

Headings weblink

Headings are defined with the <h1> to <h6> tags.

<h1> defines the largest heading. <h6> defines the smallest heading.

<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>

The example above shows two texts with different font size. Click to see.

Paragraphs

Paragraphs are defined with the <p> tag.

HTML automatically adds an extra blank line before and after a paragraph.

<p>This is a paragraph</p>

The example above shows a paragraph. Click to see.

Line Breaks

The <br> tag is used when you want to end a line, but don't want to start a new paragraph.

The <br> tag forces a line break wherever you place it.

The <br> tag is an empty tag. It has no closing tag.

<p>This <br> is a para<br>graph with line breaks</p>

The example above shows a paragraph with line breaks. Click to see.

Comments

The comment tag is used to insert a comment in the HTML source code.

A comment will be ignored by the browser.

You can use comments to explain your code, which can help you when you edit the source code at a later date.



Links weblink

HTML uses a hyperlink to link to another document on the Web

<a href="URL"> </a>

<a href="http://www.google.com"> link
</a> to the google web site.

Back to Top

Exercise 2: Simple HTML file with link, header, breaks and comments.

Step 1: If you are running Windows, start Notepad.

Step 2: Writes the following text into notepad.

<html>
    <head>
        <title>My Page</title>
    </head>
    <body bgcolor="yellow">
         
         <h1> This is header 1 </h1> <br>
          I am a <a href="http://www.google.com" > link
            </a> to the google web site.
         <br>
         <p>HTML is Hypertext Markup Language</p>
     </body>
</html>

Step 3: Save the file as "c:\html\mypage2.html".

Step 4: Start your Internet browser. Enter C:\html\mypage2.html in the address bar. Click Enter.

Click to see the result.

Basic HTML Tags

Tag

Description

<html>

Defines an HTML document

<body>

Defines the document's body

<h1> to <h6>

Defines header 1 to header 6

<p>

Defines a paragraph

<br>

Inserts a single line break

<hr>

Defines a horizontal rule

<!-->

Defines a comment

<a> Defines an anchor

Back to Top

Table Tags weblink

The tags in this section are used to create the tables on the web document.

Table

Allows data to be arranged in rows and columns
<table> </table>

<table border="1">
</table>

Row

Defines a new Table Row.
<tr> </tr>

      <table border="1">
           <tr>
           </tr>
      </table>

border="1" represents the border width in pixels for the table.
Set border="0" to display tables with no borders!

Table Cell

Denotes Table cell. Enclose your data within the tags.

<td></td>

      <table border="2">
         <tr>
            <td>School of Information Systems</td>
            <td>80 Stamford Road Singapore 178902</td>
         </tr>
      </table>

The example above shows a table with one row and two columns. Click to see.

Header

Used to create the titles of the table data (Table Header).

      <table border="1">
         <tr>
            <th>School</th><th>Address</th>
               <th>MySchool</th> <th>MyAddress</th>
         </tr>
      </table>

The example above shows a table with a header and one row. The table has two columns. Click to see.

Exercise 3: HTML file with tables.

Step 1: If you are running Windows, start Notepad.

Step 2: Writes the following text into notepad.

<html>
<body>
    <table border="1" bgcolor="green">
      <tr>
        <th>School</th>
        <th>Address</th>
      </tr>
      <tr>
        <td>School of Information Systems</font></td>
        <td>80 Stamford Road Singapore 178902</td>
      </tr>
      <tr>
        <td>School of Economics</td>
        <td>90 Stamford Road Singapore 178903</td>
      </tr>
    </table>
</body>
</html>

Step 3: Save the file as "c:\html\mypage2.html".

Step 4: Start your Internet browser. Enter C:\html\mypage2.html in the address bar. Click Enter.

Click to see the result.

Back to Top

Table Tags Summary

Tag

Description

<table>

Defines a table

<th>

Defines a table header

<tr>

Defines a table row

<td>

Defines a table cell

Back to Top

Advanced Tags

This tags in this section are used to create forms which are used to select different kinds of user input.

Form weblink

A form is an area that can contain form elements.
A form is defined with the <form> tag.
<form action="URL" method="post">

Action: tells the client where to send the request to (URL).

Method: tells the server the kind of request that's being made, and how the message will be formatted. Default value is get.

method="get": This method sends the form contents in the URL: URL?name=value&name=value. Note: If the form values contains non-ASCII characters or exceeds 100 characters you MUST use method="post".

method="post": This method sends the form contents in the body of the request. Note: Most browsers are unable to bookmark post requests.

<form action="/process" method="post">
</form>

Back to Top

Form Components

Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.

Rules to create the form components:

1. Every component must have either a NAME or ID to identify it. Submit and Reset are exceptional.

2. The components are created using th <INPUT> tag except the list which is created using <SELECT> tag

3. Each type of component is recognised by the TYPE attribute. for eg:

TEXT FIELD: <INPUT TYPE="TEXT" NAME="COLOR">

RADIO BUTTON: <INPUT TYPE="RADIO" ID="GENDER">

4. The VALUE attribute represents the value for the components and is optional. If you specify the value, then it is the default value else the user will input the value during run-time.

Text Fields

Allows the user to enter a single line of text.
The attribute SIZE represents the maximum number of characters in the text field and is optional.

<html>
<body>
    <form action="/process">
    Name:
      <input type="text" name="aName" value="default value"
            size="20">
    </form>
</body>
</html>

Click to see how it looks on browser

Back to Top

Radio Buttons

Radio Buttons are used when you want the user to select one of a limited number of choices.

A set of radio buttons will have the same name.

When one is selected, the rest are automatically deselected.

CHECKED keyword is used to give the default selected value and is optional. You can have atmost one button checked.

<html>
<body>
    <form action="/process">
      Your preferred Color:
        <input name="color" type="radio" value="red" checked>Red
        <input name="color" type="radio" value="green">Green
        <input name="color" type="radio" value="blue">Blue
    </form>
</body>
</html>

Click to see how it looks on browser

Back to Top

Check Boxes

Checkboxes are used when you want the user to select one or more options of a limited number of choices.

The item it places on the page is square and it is marked with a check when chosen.

You can check as many as you like.

CHECKED keyword is used to give the default selected value and is optional. You can have more than one value checked.

<html>
<body>
    <form action="/process.html">
     My favourite colors:
      <input name="color" type="checkbox" value="red" checked>Red
      <input name="color" type="checkbox" value="green" checked>Green
      <input name="color" type="checkbox" value="blue"> Blue
     </form>
   </body>
</html>

Click to see how it looks on browser

Back to Top

Dropdown List (Single Selection)

Dropdown lists are used when you want the user to select options from the list of choices specified.
SELECTED keyword is used to give the default selected value and is optional.

<html>
<body>
    <form action="/process">
      My favorite color:
      <select name="color">
        <option value="R" selected>red
        <option value="G">green
        <option value="B">blue
      </select>
    </form>
</body>
</html>

Click to see how it looks on browser

Back to Top

Dropdown List (Multiple Selection)

SIZE attribute specifies the number of options allowed. Default value is 1. SIZE attribute is needed here as we may want to control the number of selections.
SELECTED keyword is used to give the default selected value and is optional.
MUTIPLE keyword represents the multiple selection dropdown list

<html>
<body>
    <form action="/process">
      My favorite colors:
      <select name="color" SIZE="3" MULTIPLE>
        <option value="R" selected>red
        <option value="G">green
        <option value="B" selected>blue
      </select>
    </form>
</body>
</html>

Click to see how it looks on browser

Back to Top

Hidden Field

Hidden fields are used when you want to submit information that is not entered by the visitor.

<input type="hidden" name="user" value="SMU">

Click to see how it looks on browser

Back to Top

Buttons

Buttons are elements on the form which are used for the user actions. You can define the buttons which are of type Submit or Reset.

submit: is used to send to content of current form to to another file.
reset: is used the reset the data of the form components.

Submit

Triggers the browser to send the information to the server and submit to another file specified in the form URL.

The file location is found under the action of the form tag.

Attribute value:to specify the value of the button

Attribute name: to specify the name of the button

  <html>
    <body>
       <form action="/process">
          <input type="submit">
          <input type="submit" value="Register">
          <input type="submit" name="operation" value="Send Mail">
       </form>
    </body>
</html>

Click to see how it looks on browser

Back to Top

Reset

It does not send any form data to the server.

When selected, this button resets all of the GUI components in the HTML form to their default values.

<html>
<body>
    <form action="/process">
        <input type="text" value="reset me">
<input type="reset">
    </form>
</body>
</html>

Click to see how it looks on browser

Back to Top

Password

Allows the user to enter a single line of text.

The attribute size is optional.

Similar to a textfield, but the characters entered are obscured.

<input type="password" name="pwd" size="20">

Click to see how it looks on browser

Back to Top

Exercise 4: HTML file with forms

Step 1: If you are running Windows, start Notepad.

Step 2: Writes the following text into notepad.

<html>
    <body>
       <form action="process.html">
             Name: <input type="text" name="aName" value="default value"><br>
             Password:<input type="password" name="pwd" size="20"><br>
             Choose your favorite color:
                <input name="color" type="radio" value="red" checked>Red
                <input name="color" type="radio" value="green">Green
                <input name="color" type="radio" value="blue">Blue <br>
             Choose your favorite fruits:
                <input name="fruit" type="checkbox" value="Apple" checked>Apple
                <input name="fruit" type="checkbox" value="Pear" checked>Pear
                <input name="fruit" type="checkbox" value="Banana"> Banana <br>
            Select your favorite languanges: <br>
                <select name="color" size=3 multiple>
                       <option value="J" selected>Java
                       <option value="H">HTML
                       <option value="A">ASP
                </select> <br>
             <input type="submit" value="Submit">
             <input type="reset">
        </form>
    </body>
</html>
Step 3: Save the file as "c:\html\myform.html".

Step 4: Start your Internet browser. Enter C:\html\myform.html in the address bar. Click Enter.

Click to see the result.

Back to Top

Advanced Tags Summary

Tag

Description

<form>

Defines a form for user input

<input>

Defines an input field

<textarea>

Defines a text-area (a multi-line text input control)

<select>

Defines a selectable list (a drop-down box)

<input type=�radio�>

Defines a radio button

<input type=�checkbox�>

Defines a check box

<input type=�password�>

Defines a password

<input type=�hidden�>

Defines a hidden field

<input type=�submit�>

Defines a submit button

<input type=�reset�>

Defines a reset button

Back to Top

Frequently Asked Questions

Q: After I have edited an HTML file, I cannot view the result in my browser. Why?
A: Make sure that you have saved the file with a proper name and extension like "c:\mypage.htm". Also make sure that you use the same name when you open the file in your browser.

Q: I have edited an HTML file, but the changes don't show in the browser. Why?
A: A browser caches pages so it doesn't have to read the same page twice. When you have modified a page, the browser doesn't know that. Use the browser's refresh/reload button to force the browser to reload the page.

Q: What browser should I use?
A: You can do all the training with all of the well-known browsers, like Internet Explorer, Firefox, Netscape, or Opera. However, some of the examples in our advanced classes require the latest versions of the browsers.

Q: Why do I see different fonts for the same html file in diferent browsers?
A: When you write HTML text, you can never be sure how the text is displayed in another browser. Some people have large computer displays, some have small. The text will be reformatted every time the user resizes his window. Never try to format the text in your editor by adding empty lines and spaces to the text.

Q: How to seperate sections?
A: Use the <hr> tag to seperate sections.

Q: How do I display "<" on the browser?
A: Some characters like the < character, have a special meaning in HTML, and therefore cannot be used in the text.

Q: What the free HTML editors ?
A: Notepad++, HTML kit, Textpad etc

Back to Top

More Exercises

This link http://www.w3schools.com/html/html_examples.asp provides an editor where, you can edit HTML, and click on a test button to view the result.

Back to Top

Tag	Description
<html>	Defines an HTML document
<body>	Defines the document's body
<h1> to <h6>	Defines header 1 to header 6
<p>	Defines a paragraph
<br>	Inserts a single line break
<hr>	Defines a horizontal rule
<!-->	Defines a comment
<a>	Defines an anchor

Tag	Description
<table>	Defines a table
<th>	Defines a table header
<tr>	Defines a table row
<td>	Defines a table cell

Tag	Description
<form>	Defines a form for user input
<input>	Defines an input field
<textarea>	Defines a text-area (a multi-line text input control)
<select>	Defines a selectable list (a drop-down box)
<input type=�radio�>	Defines a radio button
<input type=�checkbox�>	Defines a check box
<input type=�password�>	Defines a password
<input type=�hidden�>	Defines a hidden field
<input type=�submit�>	Defines a submit button
<input type=�reset�>	Defines a reset button