Home

HTML Forms

   

Fundamentals of HTML Forms and Controls

 

Introduction

In HTML, a form is a webpage, or a section of a webpage, that is equipped with visual objects that allow a visitor to interact with the website. The interaction is made possible by the user being able to enter values, to make selections, and/or to click something. To make this possible, the form is equipped with objects named form controls, or web controls, or simply controls.

Forms and their controls are created like any HTML element, using tags. Remember that HTML is not case sensitive. You can create a control in all uppercase, in all lowercase, or a mix of both.

HTML Cannot Process a Form

The form and the controls on it are created in HTML, but HTML is not equipped to use them. This means that there is no HTML built-in functionality to use a form. You must use another language to use the form. That is, you must write code or create a script using a computer scripting language. There are various scripting languages availavble, including JavaScript, VBScript, PHP, Perl, etc. The intention of these lessons is to only show how to create a form and its controls, not how to use them. Still, in our descriptions, we ought to briefly show how the controls behave.

We cannot describe a whole language here, we will just briefly review JavaScript. In HTML code, to show that you want to use a JavaScript-based script, create a section delimited by the script element. The start tag must indicate that the type of the script is text/javascript. This can be done as follows:

<script type="text/javascript">

</script>

This section is usually created in the head (but it can also be included in the body. A JavaScript code is usually included in a procedure, which in computer languages is called a function. A procedure is created using the function keyword, followed by a name for the function, followed by parentheses, and followed by {}. Here is an example:

<html>
<head>
<title>Exercise</title>

<script type="text/javascript">
function letUsDoSomethingHere(){}
</script>
<head>
<body>

</body>
</html>

A function is meant to perform one or more actions, such as calculating, validating, etc. It will depend on you. What the function is supposed to do must be written between its { and }.

Most of the time, if you are using JavaScript, you will have to create a lot of the functions you need. Still, JavaScript provides many built-in functions. One of the functions is used to display a message box. A message box in HTML is created  with a function named alert. It takes a message as argument. The message is provided as a string.

Virtual and Physical Characteristics of Web Controls

 

Identifying a Control

Like all HTML elements, every web control is equipped with the id attribute that allows it to communicate with other parts of the webpage or of the web server.

Applying a Style to a Website

Like any HTML element, a web control can be changed with CSS. Of course, you can create the style inline, in the same file where the control is created, or in a separate file.

The Input Type

Many web controls are created with an element named input. To let you specify the particular control you want to create, the input element is equipped with an attribute named type whose values is a specific name for a desired control.

The Name of a Control

Another important property of a control is its name. This allows the browser to identify it. To support names, the tag of every web control is equipped with an attribute named name. This attribute takes a string as value.

The Value of a Control

If a control is made to receive or display a value, the value of that control is represented by an attribute named value.

Events of Web Controls

 

Introduction

An event is an action that causes a change on a web control. It could happen when the visitor clicks something, types something, moves something, etc. When this happens on the control, the control is said to fire an event. HTML supports various types of events. Some events are common to many controls and some events are unique to specific controls. Some events are automatically configured. For other and most events, you must write code and you must indicate what to do when the event is fired.

The action of an event is usually written in two parts. First, in the script section, write the code that indicates what to do when the event is fired. Usually, the name of the function reflects an action. Second, in the start tag of the control, you must use an attribute that holds the name of the event. We will mention those names in later sections. The value of the event attribute is the name of the function in the script section. The name value usually has parentheses to indicate that it is a function.

Clicking

Clicking occurs when the user clicks a control. Of course, the most common object that a visitor would click is a button, but many other controls support clicking.

The attribute for the click event is named onClick.

Fundamentals of Forms

   

Introduction

To support forms, HTML provides an element created with the <form> tag. Because a form is a collection of controls and their values, the form must have an end tag that lets the browser know where the form closes. This is done with the </form> closing tag. Here is an example:

<form></form>

Between the start and the end tags, you can put anything you want. In fact, you can include all types of HTML elements, whether they deal with forms or not. Here is an example:

<html>
<head>
<title>Geometry: Polygons</title>
<head>
<body>

<form>

<h3>Geometry: Polygons</h3>

<p>A polygon is a geometric plane figure made of straight lines 
also called segments. Polygons categorized based on their number 
of sides. Examples of categories of polygons are:</p>

<ul>
  <li>Triangle: A geometric figure made of three sides
  <li>Quadrilateral: A geometric figure made of four sides
  <li>Others: This is for polygons made of five or more sides
</ul>

</form>

</body>
</html>

The part between the <form> and the </form> tags belong to the form and is referred to as the body of the form.

The Name of a Form

Although the <form> and the </form> tags are enough to create a form, such a form can hardly communicate with a script. One of the most important properties you should set for a form is its name. The name allows a script to refer to the form and it can be used by files on the web server. To set the name of a form, assign an appropriate string the name attribute of the <form> tag.

Performing an Action

After using a form, the visitor can click a control such as a button. This usually causes the values on the form to be sent to the web server. In most cases, the form must be linked to another webpage or a file that will use the values from the form. The function will depend on what you want to do. To let you specify where to send the values, the form is equipped with an attribute named action. Usually, the value of this attribute is the name of a file, including its extension. The value can also be the address of the file that will process the values of the form.

The Text Box

 

Introduction

A text box is a rectangular object that receives or displays text. By default, a text box is intended for the user to type text in response to a request. To create a text box, use the <input> tag. For a text box, specify the type attribute as text. Here is an example:

<input type=”text”>

Characteristics of a Text Box

By default, the text box control provides enough space to display simple information such as a first name, a username, or a short e-mail address. If it is not enough, you can widen the text box. To increase the width of a text box, the <input> tag is equipped with an attribute named size. Therefore, to widen a text box, assign an appropriate numeric value to the size attribute. Here is an example:

<html>
<head>
<title>Quadrilaterals: The Square</title>
<head>
<body>

<form>

<h4>Quadrilaterals: The Square</h4>

<table>
  <tr>
    <td>Side:</td>
    <td><input type="text" id="side" name="txtSide" size="6"></td>
  </tr>
</table>

</form>

</body>
</html>

This would produce:

A Text Box

In the same way, you can create  as many text boxes as you want in a form. The value that is entered in a text box or that a text box displays is represented by the value attribute. Based on this, to display text in the text box, assign a string to the value attribute. Here is an example:

<html>
<head>
<title>Quadrilaterals: The Square</title>
<head>
<body>

<form>

<h4>Quadrilaterals: The Square</h4>

<table>
  <tr>
    <td>Side:</td>
    <td><input type="text" id="side" name="txtSide" size="6" value="0.00"></td>
  </tr>
  <tr>
    <td>Area:</td>
    <td><input type="text" id="area" name="txtArea" size="6" value="0.00"></td>
  </tr>
</table>

</form>

</body>
</html>

On the other hand, in your scripting code, to retrieve the content of a text box, you can use the value attribute.

To refer to a text box control from a script, type the document keyword, followed by a period, followed by the name of the form that hosts the control, followed by a period, followed by the name of the text box control. Suppose you create a form named CreditApplication that hosts a text box called txtFirstName. Here is how you can access the txtFirstName control of the CreditApplication form:

document.CreditApplication.txtFirstName

This would then allow you to access a property of the text box using the period operator. For example, to access the content of a text box, call the value property. Here is an example:

document.CreditApplication.txtFirstName.value

Text Box Events

There are many events associated with a text box control. When the user clicks inside of the text box, the control fires the onClick event. When the user starts typing and as long as the user is typing in the text box, the control fires an event named onKeyDown. When the text in the text box changes, such as while the user is typing, the control fires an event named onChange. You can use any of these events to take appropriate actions.

The Command Button

 

Introduction

A button is a rectangular object that the user can click. What happens when the user clicks depends on you. To create a button, you have many options. You can create an element using the input tag. To specify that you want to create a button, set the type value as button. Here is an example:

<input type="button">

An alternative to create an element using a tag named button.

Characteristics of a Button

The text that a button displays lets the user know what the button is used for. The text on the button is sometimes called a caption. If you decide to create your button using the input element, to let you specify the caption of a button, its tag is equipped with an attribute named value, which takes a string as value. Here is an example:

<html>
<head>
<title>Exercise</title>
<head>
<body>

<form id="exercise">

<h3>Exercise</h3>

<input type="button" name="btnCreate" value="Create"></input>
</form>

</body>
</html>

If you decide to create your button using the button element, then you must specify the caption between the start and the end tags. Here is an example:

<html>
<head>
<title>Exercise</title>
<head>
<body>

<form id="exercise">

<h3>Exercise</h3>

<button name="btnCreate">Create</button>
</form>

</body>
</html>

Button Events

The most common event of a button occurs when it is clicked. When the button is clicks, it fires the onClick() event. To process a script when the user clicks a button, you can assign the name of a function, as a string, to the onclick attribute of the button. Here is an example:

<html>
<head>
<title>Quadrilaterals: The Square</title>


<script type="text/javascript">
function calculate()
{
    document.frmSquare.txtArea.value = document.frmSquare.txtSide.value * 4;
}
</script>

<head>
<body>

<form name="frmSquare">

<h4>Quadrilaterals: The Square</h4>

<table style="width:200px;">
  <tr>
    <td>Side:</td>
    <td><input type="text" name="txtSide" size="6" value="0.00"></td>
    <td><input type="button" name="btnCalculate" value="Calculate" onClick="calculate()"></td>
  </tr>
  <tr>
    <td>Area:</td>
    <td><input type="text" id="area" name="txtArea" size="6" value="0.00"></td>
    <td>&nbsp;</td>
  </tr>
</table>

</form>

</body>
</html>

Here is an example of using the form:

Geometry: The Square

Geometry: The Square

The Submit Button

 

Introduction

To send all of the information of a form to a script, HTML provides a special button named submit. Like the regular button, the submit button is a rectangular object that the user clicks to send the result of a form.

To create a submit button, use the <input> tag but specify the type of control as submit to the type attribute. Here is an example:

<html>
<head>
<title>Exercise</title>
<head>
<body>

<form id="exercise">

<h3>Exercise</h3>

<input type="submit"></input>

</form>

</body>
</html>

Unlike the regular button, the submit button has a built-in caption that automatically displays its role to the user.

Characteristics of the Submit Button

After using a button, a webpage visitor is usually asked to click a button. The submit button makes it more convenient. In the presence of a submit button, after using the form, the user can press Enter (or click the button) and the form would be submitted.

The default caption of the submit button is Submit Query. If this caption doesn't apply to your scenario, you can change it to a more meaningful caption. To change the caption of the submit button, set the desired string to the value attribute of the input type. Here is an example:

<html>
<head>
<title>Exercise</title>

<head>
<body>

<form id="exercise">

<h3>Exercise</h3>

<input type="submit" value="Apply"></input>
</form>

</body>
</html>

The Reset Button

 

Introduction

Most of the forms allow the user to fill out text controls and make selections from other controls. These actions change the values of the controls as set by the application developer. If in the middle of filling out a form the user decides to start over, HTML provides a special button that can reset all controls to their default states or values. This is programmatically done using a special button called reset.

To create a reset button, use the <input> tag and specify the type of control as reset to the type attribute. Here is an example:

<html>
<head>
<title>Quadrilaterals: The Square</title>


<script type="text/javascript">
function calculate()
{
    document.frmSquare.txtArea.value = document.frmSquare.txtSide.value * 4;
}
</script>

<style>
.btn {
  width: 60pt;
}
</style>

<head>
<body>

<form name="frmSquare">

<h4>Quadrilaterals: The Square</h4>

<table style="width:200px;">
  <tr>
    <td>Side:</td>
    <td><input type="text" name="txtSide" size="6" value="0.00"></td>
    <td><input type="button" name="btnCalculate" value="Calculate" onClick="calculate()" class="btn"></td>
  </tr>
  <tr>
    <td>Area:</td>
    <td><input type="text" id="area" name="txtArea" size="6" value="0.00"></td>
    <td><input type="reset" class="btn"></td>
  </tr>
</table>

</form>

</body>
</html>

Unlike the regular button, the reset button has a built-in caption that automatically displays its role to the user.

Reset Button Properties

The default caption of the reset button is Reset. Here is an example:

The Reset Button

If this caption is not explicit enough for your application, you can change it. To change the caption of a reset button, assign the desired string to the value attribute. Here is an example:

<input type="reset" value="Start Over"> 

The reset button is mainly configured to handle its business on the form and doesn't need to send any signal such as a result to a script. Therefore, its name is not as important as it is to other controls. If for some reason you need to refer to the Reset button from a script, then you can give it a name.

Reset Button Events

The only interesting role of a reset button occurs when the user clicks it. The role of the Reset is already configured in the browser. If you still need to take some action when the user clicks it, you can use the onClick event that fires when the user clicks the button.

A Label

 

Introduction

In a web form filled with controls, to indicate what a control is used for, you can add text close to it, usually to the top or the left of the control. So far, we used simple text to do it. A label is static text that displays information to the reader. To support labels, HTML provides a control of the same name. Based on this, to create a label, create an element that uses a tag named label. The start tag must be close. Here is an example:

<html>
<head>
<title>Exercise</title>

<head>
<body>

<form name="frmExercise">

<label></label>

</form>

</body>
</html>

In the same way, you can create as many labels as you want on a form.

Characteristics of a Label

As opposed to simple text that displays on a webpage, a label plays a role other than simply displaying text. The most important characteristics of a label is that it gives access to a web control using the keyboard. For this referred, it has a feature referred to as access key. An access key is a letter, a symbol, or a digit whose key the user can press to give focus to the control. To support access keys, the label element has an attribute named accesskey. Its value must be a letter, a digit, or a symbol. Here is an example:

<html>
<head>
<title>Quadrilaterals: The Square</title>

<head>
<body>

<form name="frmSquare">

<h4>Quadrilaterals: The Square</h4>

<label accesskey="s">Side</label>

</form>

</body>
</html>

To use the access key, the user would press Alt and the access key. The actual role of a label is to give access to a control. This means that you must indicate the control to which the label leads. To support this, the label element has an attribute named for. The value of that attribute must be the identification of the control. Here are examples:

<html>
<head>
<title>Quadrilaterals: The Rectangle</title>


<script type="text/javascript">
function calculate()
{
    document.frmRectangle.txtArea.value = document.frmRectangle.txtWidth.value * document.frmRectangle.txtHeight.value;
}
</script>

<style>
.btn {
  width: 60pt;
}
</style>

<head>
<body>

<form name="frmRectangle">

<h4>Quadrilaterals: The Rectangle</h4>

<table style="width:200px;">
  <tr>
    <td><label accesskey="w" for="width">Width:</label></td>
    <td><input type="text" id="width" name="txtWidth" size="10" value="0.00"></td>
    <td></td>
  </tr>
  <tr>
    <td><label accesskey="h" for="height">Height:</label></td>
    <td><input type="text" id="height" name="txtHeight" size="10" value="0.00"></td>
    <td><input type="button" name="btnCalculate" value="Calculate" onClick="calculate()" class="btn"></td>
  </tr>
  <tr>
    <td>Area:</td>
    <td><input type="text" id="area" name="txtArea" size="10" value="0.00"></td>
    <td><input type="reset" class="btn"></td>
  </tr>
</table>

</form>

</body>
</html>

Access Keys

In this case, to access the Width text box, the visitor can press Alt + W. To access the Height text box, the visitor can press Alt + H.

Text-Based Controls: A Text Area

A text area is a large control that is a substitute to handle large paragraph where the text box cannot or should not be used.

Creating a TextArea Control

 
To create a text area, use the <TextArea> tag which must also be closed. Here is an example:
 

<textarea></textarea>


 

TextArea Properties

 
The dimensions of a text area are the main properties that set it apart from the text box control. The width of a text area is set using the COLS attribute of the <textarea> tag. Therefore, to increase the width of the text area, assign the desired numeric value to the cols attribute. The width is measured by the number of characters that can be displayed on one line of text. By default, a width of a text area is set to 20 characters. To change this, you can assign a higher value to the attribute:

<textarea cols="40"></textarea>

The height of a text area is measured by the number of visible lines of text that the text area can display. By default, the text area is configured to display two lines of text. This property is controlled by the ROWS attribute. To change or increase this number, assign an appropriate numeric value to the rows attribute. You can specify either one of the COLS or the ROWS values. You can also specify both to control the dimensions of the text area. When using both attributes, there is no order of the attributes. Here is an example:

 
<textarea cols="40" rows="10"></textarea>

If you are planning to access the text area from your code, you should give the control a name.
  

Practical Learning: Using a Text Area Control

  1. To add a text area, change the form section of the page as follows:
     

    <form name="CreditApplication">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="100">First Name:</td>
          <td><input type="text" name="txtFirstName" size="14"></td>
        </tr>
        <tr>
          <td width="100">Last Name:</td>
          <td><input type="text" name="txtLastName" size="14"></td>
        </tr>
        <tr>
          <td width="100">Full Name:</td>
          <td><input type="text" name="txtFullName" size="30"></td>
        </tr>
        <tr>
          <td width="100" valign="top">Reasons for Applying:</td>
          <td><textarea cols="40" rows="10"></textarea>
        <tr>
          <td width="100"><br><br></td>
          <td>
            <input type="button" value="Show Full Name" onClick="GetFullName()">
          </td>
        </tr>
      </table>
    </form>

  2. Save the file and preview it in the browser
    After previewing the page, return to Notepad.

Text-Based Controls: Password Text Boxes

HTML provides a specific text designed for a form's password. This looks like a classic text box and is created the same. The main difference is that the text that the user types doesn't display the characters that are being entered. As the user types in the password text box, text appears as a series of asterisks or periods.

Creating a Password Text Box

 
Like the regular text box and many other controls, to create a password text box, use the <input> tag and specify the control type as password assigned to the type attribute.

Here is an example:

<input type="password">

 

Password Text Box Properties

The size of the password text box is controlled by the size attribute of the <input> tag. To increase the width of the control, assign the desired numeric value to the size attribute. Here is an example that creates a text box control:

<input type="password" size="25">

The text that is typed in the password text box is held by the value attribute. You can use this attribute to find out what password the user typed.

If you plan to retrieve the password value in a script or code of any kind, give the control a name. This is done by assigning a name string to the name attribute. Here is an example:

<input type="password" name="Guarded">

 

Creating a Text Box

     

Selection ControlsIntroduction

Most of the controls (which excluded just a few of them) are created using a special tag called input. To use the <input> tag, you must let the browser know what type of input control or object you want to create. The <input> tag uses an attribute called Type that allows you to specify the kind of control you want. This is done by assigning the name of the control to the Type attribute. Some browsers, including Internet Explorer, can recognize all of the HTML GUI controls that we will be using here. Therefore, you can just assign the name of the control to the Type attribute. In some circumstances, and based on HTML standards, you should assign the control type as a string.

Like the <br>, some <p>, and some <li> tags, the <input> tag doesn’t need to be closed.
 

Selection Controls: Check Boxes

A check box is a small square box that allows the user to select an item or to deselect it. The user makes this decision by clicking in the small square box. By default, or depending on how the control is configured, the square box is white and empty. This indicates that it is false or off. When the user clicks it, a small check mark appears in the square box, indicating that it is true or on.

Creating a Check Box

 
To create a check box, use the <input> tag and specify the control type as checkbox, CheckBox, or CHECKBOX. Here is an example:

<input type="checkbox">

A check box doesn't display what it is used for. Therefore, you should (always) add a label close to it to help the user know the role of this control.

If using many check boxes in a group, the user is able to click or select as many different check boxes that the application designer allowed.

Check Box Properties

As described already, when the user clicks the check box, its value becomes on or true. You can programmatically set this state by using the checked attribute of this tag. If you assign it a true value, the check box becomes checked. Otherwise, it would be unchecked. Here is an example of using the tag:

<input type="checkbox" checked="true">

If you plan to use a check box in a script, you should give it a name. This is done by assigning a string to the Name attribute.

Check Box Events

The most popular and probably the most important event of a check box fires when the user clicks the check box, selecting or deselecting it. Therefore, you can use the OnClick event of the check box to find out whether the control has been selected or not; if so, you can decide what to do in response.

Selection Controls: Radio Buttons

A radio button is a small round and white circle that allows the user to select an item from a group. This is because a radio button is generally accompanied by others. From a group of items, represented each by a circle, when the user clicks one of them, none of the others is selected. To change the selection, the user must click another choice in the group.
 

Creating Radio Buttons

To create a radio button, use the <input> tag and specify the type attribute as radio. Here is an example:

<input type="radio">

To make your radio buttons effective, you should always provide at least two radio buttons in a group.

Radio Button Properties

One of the most important attributes to set on the radio button is the name. This attribute should be used even if you don't plane to use the radio button in a script, since many radio buttons can use the same name, this name will be helpful in determining what particular control has been selected. Therefore, the same value (string) for the Name attribute can be assigned to each radio button of the same group.

The checked attribute, as applied to the check box, can be used in two circumstances, if you want one of the buttons in the group to be selected by default, assign a true value to its checked attribute. Here is an example:

 
Select your T-Shirt size
Small 
Medium
Large
X-Large
<table border="0" width="176">
  <tr>
    <td width="168" colspan="2">Select your T-Shirt size</td>
  </tr>
  <tr>
    <td width="119">Small&nbsp;</td>
    <td width="49"><input type="radio"></td>
  </tr>
  <tr>
    <td width="119">Medium</td>
    <td width="49"><input type="radio" checked="true"></td>
  </tr>
  <tr>
    <td width="119">Large</td>
    <td width="49"><input type="radio"></td>
  </tr>
  <tr>
    <td width="119">X-Large</td>
    <td width="49"><input type="radio"></td>
  </tr>
</table>

You can also use the checked attribute in your script to find out what radio button was clicked at one time.

Radio Button Events

 
Because it is first of all a button, the most fundamental event that a radio button can send to the browser is called OnClick. This event fires when the user clicks or select a particular radio button. You can therefore use it to take action as a response.
 

Selection Controls: Combo Boxes

 
Like a group of radio buttons, a combo box allows the user to select an item from a group, namely a list. A combo box has the shape as a text box, except that it is equipped with an arrow on the right side of the control. This arrow control allows the user to display a list of items that are hidden by the text side of the combo box. When the list displays, the user select one item from the list. Once the item has been selected, the list retracts back to its original text-like size.
 

Creating a Combo Box

 
To create a combo box, use a tag called select. This tag has to be closed. After typing the <select> tag, create each item that is part of the control using the <option> tag. Each item uses its own <option> tag. After listing the items, make sure you close the select tag as </select>.

Here is an example:
 

<select>
  <option>Small
  <option>Medium
  <option>Large
  <option>X-Large
</select>


 

Combo Box properties

 
To select a default item from the combo box, use the selected attribute of the <options> tag. Here is an example:
 

<select>
  <option>Small
  <option selected="true">Medium
  <option>Large
  <option>X-Large
</select>


 

Selection Controls: List Boxes

 
Like radio buttons or a combo box, a list box displays a list of items that the user can select from. Unlike a combo box, a list box displays a taller list and can even display all of its items all the time.
 

Creating a List Box

 
Like a combo box, a list box is created using the <select> tag. Like the combo box, each item of a list box is created using the <option> tag. To make the control a list box, the <select> tag is equipped with an attribute called size. This attribute accomplishes two purposes: it makes the control become a list box and it sets the vertical size of the list box. In other words, it decides on the number of items the list box can display at a time.

Here is an example:

<select size="4">
  <option>Schwartz
  <option>Medou
  <option>Larson
  <option>Creans
  <option>Schultze
  <option>Greenberg
</select>

 

List Box properties

 
A list box can be configured to allow the user to select one item. To select an item from the list, set the selected attribute of its <option> tag to true

 

Here is an example:

<select size="4">
  <option>Schwartz
  <option selected="true">Medou
  <option>Larson
  <option>Creans
  <option>Schultze
  <option>Greenberg
</select>

Unlike a combo box, a list box can be configured to allow the user to select more than one item from the list. To allow this, include the multiple attribute in the <select> tag. Here is an example:

 
<select size="4" multiple>
  <option>Schwartz
  <option>Medou
  <option>Larson
  <option>Creans
  <option>Schultze
  <option>Greenberg
</select>

 
Just including the multiple attribute in the <select> tag, even if you omit the size attribute, causes the control to be a list box

 

List Box Events

 
The most commonly used and the most important event of a list is called OnChange. This event fires whenever the user makes a selection in the list box. This allows you to take appropriate actions.

To support forms,

Different

There

Practical Learning: Editing a Picture

  1. Get on an Internet search engine such as search.com, Yahoo, Bing, or Google
  2. Do a search on the expression Office Worker
  3. Click a link labeled Images (or something like that)
  4. Locate a picture of a woman. Here is an example:

  5. On your keyboard, press Print Screen
  6. Start your graphics application
  7. Paste the picture
  8. Using your graphics application, click the tool to make a selection and select the area that can isolate the woman. Here is an example:

  9. Copy the selection (you can press Ctrl + C)
  10. Start a new file in the same application and paste the selection. If you are using Corel PaintShop Pro, on the main menu, click Edit -> Paste As New Image.
    In the picture you are using, if the woman's face is directed to the left, change the orientation so she would look to the right (If you are using Windows Paint, on the Ribbon, click Rotate -> Flip Horizontal). Here is an example:

  11. Save the picture as watts1 and select the appropriate extension. If you are using Corel PaintShop Pro, select the GIF (or PNG) extension. If you are using Adobe Photoshop, use the JPG extension
  12. If you are working from Microsoft Windows and if you have Microsoft Office, start Microsoft Word. If you are using Linux, start LibreOffice Draw
  13. Add a rounded rectangle to the document
  14. Set its border to a thin weight (in Microsoft Word, click the Format tab on the Ribbon, then click Shape Outline -> Weight -> 1/4 pt)
  15. Resize the picture to a reasonable size (approximate width of 350 (pixels)
  16. Import the saved picture to the rounded rectangle:
  17. On your keyboard, press Print Screen
  18. Copy the selection (you can press Ctrl + C)
  19. In your graphics application, paste the picture
  20. Make a selection that isolates only the rounded rectangle. Here is an example:

  21. Start a new picture and paste the selection
  22. Save the picture as watts2 and select the appropriate extension. If you are Corel PaintShop Pro, select the GIF (or PNG) extension. If you are using Adobe Photoshop, use the JPG extension
  23. Use the same techniques to create two pictures (a large and a small/medium) for a man. Save them as heyman1 and heyman2 with the desired extension
  24. Create two other pictures (a large and a small/medium) for a woman. Save them as bene1 and bene2 with the right extension

Creating Graphics From a Font

One of the ways you can create small graphics or icons is by using a graphic font.

Practical Learning: Creating Graphics From a Font

  1. Start a word editor (if you are working from Microsoft Windows, start Microsoft Word or Wordpad; if you are on Linux, start womething like Libre Office Writer)
  2. In the list of fonts, select a graphics font (if you are using Microsoft Windows, select Webdings)
  3. Set the font size to 20 (if the application has a zoom, keep it to 100%)
  4. Press the key that produces two rectangles or one (if you are using Webdings, press 2). Here is an example:

  5. On your keyboard, press Print Screen
  6. In your graphics application
  7. Paste the picture
  8. Using your graphics application, click the tool to make a selection and select the area where the symbol is. Here is an example:

  9. Copy the selection (you can press Ctrl + C)
  10. Start a new file in the same application and paste the selection. If you are using Corel PaintShop Pro, on the main menu, click Edit -> Paste As New Image
  11. If your application is equipped to do so, resize the picture to an approximate width of 350 (pixels)
  12. Save the picture as external and select the appropriate extension. If you are Corel PaintShop Pro, select the GIF (or PNG) extension. If you are using Adobe Photoshop, use the JPG extension

Designing or Painting

As seen so far, you can use different applications to manipulate or design pictures for your webpages. In the following exercise, we will use a presentation application and a graphics application.

Practical Learning: Creating a Graphics File

  1. Start Microsoft PowerPoint
  2. To create a blank slide, in the Home tab of the Ribbon, in the Slides section, click the arrow of the New Slide button and click Blank
  3. On the Ribbon, click Insert
  4. To start a rounded rectangle, in the Illustrations section, click Shapes and click Rounded Rectangle
  5. Click inside the blank slide
  6. While the shape is still selected on the slide, on the Ribbon, click Format. Click Shape Outline -> Weight -> 1/4 pt
  7. In the same Format tab of the Ribbon, click Shape Outline and click the Black button
  8. Enlarge the shape to cover almost the whole width of the slide and approximately 3/4 of the height of the slide
  9. With the shape still selected, use the small yellow shape on its top-left corner to make the corner as small as possible without eliminating them completely

    Accessing a Control 

Panel

  10. With the shape still selected, press Ctrl + C (or copy the shape)
  11. Press Ctrl + V to paste
  12. Click the first shape (it should be positioned behind the new one)
  13. With the first shape selected, on the Ribbon, click Format
  14. Click Shape Effects -> Shaddow and click the second option: Offset Diagonal Bottom Right
  15. With the first shape still selected, in the Format section of the Ribbon, click Shape Effects -> Shaddow -¨> Shadow Options
  16. With the Shadow option selected, set the following values: Blur: 6 pt and Distance: 3 pt
  17. Click Close
  18. Click the other/second shape to select it
  19. With the second shape selected, in the same Format tab, click Shape Fill and click More Fill Colors...
  20. In the Customer property page, set the values of the color as Red = 237, Green = 242, and Blue = 249
  21. Click OK
  22. With the second shape selected, on the Ribbon, click Format. Click Shape Effects -> Shaddow
  23. In the Inner section, click the middle option: Inside Center
  24. With the second shape still selected, in the Format section of the Ribbon, click Shape Effects -> Shaddow -> Shadow Options...
  25. Set the Blur value to 4 pt
  26. Click Color and click More Colors...
  27. Change the Color to Red = 85, Green = 142, and Blue = 213
  28. Click OK
  29. Click Close

    Accessing a Control 

Panel

  30. Click the bottom shape to select it, copy (Ctrl + C) and paste it (Ctrl + V)
  31. Change its size to cover the top section of the slide and approximately one tenth of the height
  32. Click the top shape to select it
  33. Copy (Ctrl + C) and paste it (Ctrl + V)

    Accessing a Control 

Panel

  34. Select the two shapes in the top section of the slide (you can click one shape, press Shift, and click the other top shape)
  35. Copy (Ctrl + C) and paste it (Ctrl + V)

    Accessing a Control 

Panel

  36. Click each of the new shapes to select it. Use its yellow button to make the borders completely round
  37. Position the light blue shapes on top of the blue shapes of the same sizes:

    Accessing a Control 

Panel

  38. On the Ribbon, click Insert
  39. To draw a circle, in the Illustrations section, click Shapes and click Oval
  40. Click inside the slide
  41. While the circle is still selected on the slide, on the Ribbon, click Format. Click Shape Outline -> Weight -> 1/4 pt
  42. Still in the Format section of the Ribbon, click Shape Fill and click the white color
  43. With the circle shape still selected, on the Ribbon, click Format
  44. Click Shape Effects -> Shaddow
  45. In the Outer section, click the middle option: Offset Center
  46. Move the circle to the middle-left section of the top shapes
  47. On the Ribbon, click Insert
  48. In the Illustrations section, click Shapes and click Text Box
  49. Click an empty area on the slide
  50. Type W
  51. Select the W you just typed
  52. Change its font to Copperplate Gothic Bold and its size to 36
  53. With the letter still selected, on the Ribbon, click Format
  54. Click the arrow of the WordArt styles and select the middle bottom option
  55. Click the corner of the shape that contains the letter to select it
  56. Press Ctrl + C to copy
  57. Press Ctrl + V to pase
  58. Select the new W and type L to replace it
  59. Select both shapes and move them to the circle

    Accessing a Control 

Panel

  60. On the Ribbon, click Insert
  61. In the Illustrations section, click Shapes and click Text Box
  62. Click an empty area on the slide
  63. Type Watts A Loan
  64. Select the text you just typed
  65. Change its font to Bodoni MT Black and its size to 32
  66. With the text still selected, on the Ribbon, click Format
  67. Click the arrow of the WordArt styles and select the Gradient Fill - Blue, Accent 1
  68. Still in the Format section of the Ribbon, click Shape Effects -> Shadow and, in the Inner section, click the first option
  69. Move the text box to the center of the top rectangles

    Accessing a Control 

Panel

  70. Add any shape you want to the right side of the title to make it less empty
  71. On the Ribbon, click Insert
  72. In the Illustrations section, click Shapes and click Text Box
  73. Click an empty area on the slide
  74. Type About Us
  75. Select the text you just types
  76. Change its font to Albertus Extra Bold and its size to 12
  77. With the text still selected, on the Ribbon, click Format. Click Shape Effects -> Shadow -> Offset Diagonal Bottom Right
  78. Click the corner of the shape that contains the new text to select it
  79. Press Ctrl + C to copy
  80. Press Ctrl + V to paste
  81. Select the text in the neW shape and type Products & Services to replace it
  82. Click an empty area of the slide and press Ctrl + V to paste
  83. Select the text in the neW shape and type Office Locations to replace it
  84. Click an empty area of the slide and press Ctrl + V to paste
  85. Select the text in the neW shape and type Financial Management to replace it
  86. Move the text box to the center of the top rectangles

    Accessing a Control 

Panel

  87. Click the slide on the left frame to select it
  88. Press Ctrl + C to copy
  89. Press Ctrl + V to paste
  90. Click the last slife to select it
  91. On the slide, click inside the box that contains About Us
  92. Select that text and type Home to replace it
  93. In the left frame, click
  94. aste the contents of the clipboard (in PaintShop Pro, on the main menu, click Edit -> Paste As New Image; in Windows Paint, press Ctrl + V)
  95. Click the Selection tool
  96. Make a selection from the top-left corner of the shapes to the bottom-right side away from the shape (very far away) (this is not a professional design because there are topics we haven't studied, but we will live with that design for now)
  97. Copy the new selection (in most applications, you can press Ctrl + C)
  98. Start a new document and add the selection (in PaintShop Pro, on the main menu, click Edit -> Paste As New Image; in Windows Paint, click File -> New, when asked whether you want to save, click No, then press Ctrl + V)
  99. Save the file as bg and make it a GIF file. Save it in the images sub-folder of the wattsaloan folder
  100. Make a selection that contains only the two top shapes
  101. Paste in a new document (in PaintShop Pro, on the main menu, click Edit -> Paste As New Image; in Windows Paint, click File -> New, if asked whether you want to save, click No, then press Ctrl + V)
  102. Save the file as banner and make it a GIF file. Save it in the images sub-folder of the wattsaloan folder
  103. Open the index.htm file in your text editor
  104. Change the content of the document as follows:
    <html>
    <head>
    
    <title>Watts A Loan: About Us</title>
    <head>
    <body background="images/bg.png">
    
    <!-- This is unprofessional -->
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <!-- This ain't no professional -->
    
    <h1>Watts A Loan</h1>
    
    <p>Welcome to Watts A Loan. We provide personal and business loans as long as various financial 
    services. We are your one-stop shop for all types of financial needs.</p>
    
    <p>Our customers include:</p>
    
    <p>Individuals: Personal Loan, Boat Buyout, Vehicle Financing, Musical Instruments Purchase, etc.</p>
    
    <p>Businesses: Business Startup, Business improvement, Late Payroll, etc.</p>
    
    <p>Organizations: Non-Government  Organizations, Not-For-Profit Organization, Limited Liability Needs, 
    
    etc.</p>
    
    </body>
    </html>
  105. Save and close the file
  106. Open the aboutus.htm file in your text editor
  107. Change the content of the document as follows:
  108. Save and close the file

 

The Files of a Website

 

Introduction

One

Introduction to Creating Files

You

To

The

Practical Learning: Creating a Sub-Folder

Introduction

A

Side:
Area
     

Home Copyright © 2015, FunctionX Next