Scribd
Upload
42 views20 pages

WEB TECHNOLOGIES - ITC 351 Lecture - 5

1. Presenting Information in Tables. 2. Accepting User Input with HTML Forms. 3. Introduction to Scripting

Uploaded by

kusiasare73
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
42 views20 pages

WEB TECHNOLOGIES - ITC 351 Lecture - 5

1. Presenting Information in Tables. 2. Accepting User Input with HTML Forms. 3. Introduction to Scripting

Uploaded by

kusiasare73
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

10/23/2018

ITC 351
Web Technologies.
Lecture Five

Outline of Instruction

1. Presenting Information in Tables.

2. Accepting User Input with HTML


Forms.

3. Introduction to Scripting.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

1
10/23/2018

Lecture Objectives
• By the end of the lecture, the student will be able
to:
– Present data in tables on web pages.
– Design forms for user inputs.
– Explain and differentiate between server-side and
client-side scripting.
– Design user interfaces that accept inputs from users
and display the result to users using scripts.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Presenting Information in Tables


• Tables provide an excellent way to organize and
display information on web pages.
• Tables are defined using the <table> </table> tag
pair.
• A table is divided into rows with the <tr> </tr> tag
pair, and each row is divided into data cells using the
<td> </td> tag pair.
• The letters td stand for “table data” which is the
content of a data cell.
• A data cell can contain text, images, lists, paragraphs,
forms, horizontal rules, tables, and so on.
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

2
10/23/2018

Presenting Information in Tables


• The HTML <table> element contains the table
information, which consists of table header
elements(<th>), table row elements(<tr>),
and individual table data cells(<td>).
• These are the three elements used most
frequently when you are building tables.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

HTML Table Elements


Element Description
<table>…..</table> Establishes the table. It contains all other elements
that specify caption, rows, and content
<tr>…..</tr> Table row. It contains the table cells.
<td>……</td> Table data cell. This contains the actual table data.
<th>……</th> Table header cell: It contains header information for
a column of data.
<caption>….</caption> Provides a short description of the table’s contents.
<thead>…..<thead> Signifies table header.
<tbody>…..<tbody> Signifies table body
<tfoot>……<tfoot> Signifies table footer
<col /> Specifies column properties
<colgroup>…..</colgroup> Specifies multiple column properties
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

3
10/23/2018

Using the border and width Attributes


• The border attribute is used to specify the thickness of
the lines that make the table.
• The width attribute specifies how wide the table should
be in the browser window or relative to other layout
elements.
• It is a good practice to specify the table width in
percentages.
• The example below sets values the border and the width
attributes of a table.
<table border=“1” width=“35%”>
Other codes that make up the table go here
</table>
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

HTML Table Example


<html>
<head> <title> HTML Tables: </title> </head>
<body>
<table width=“65%" border=“2">
<caption> <h1>My Favorite Collections</h1> </caption>
<tr> <th>Title of Music </th> <th> Artiste </th> </tr>
<tr> <td> Forward to Africa </td> <td> Joseph Hill </td> </tr>
<tr> <td> China Roses </td> <td> Enya </td> </tr>
<tr> <td> Floral Street </td> <td> Enya </td> </tr>
<tr> <td> Humble Africa </td> <td> Joseph Hill </td> </tr>
<tr> <td> Nah Stay Inna Babylon</td> <td> Joseph Hill </td> </tr>
<tr> <td> Miss Independent </td> <td> Neyo </td> </tr>
<tr> <td> Storm in Africa</td> <td> Enya </td> </tr>
<tr> <td> Count on Me</td> <td> Whitney Houston</td> </tr>
</table>
</body>
Web Technologies Slides by: Maxwell Dorgbefu Jnr.
</html>

4
10/23/2018

Spanning Columns
• The colspan attribute lets you create cells that span
multiple columns of a table.
• Column cells always span to the right.
• The syntax is given as:
<tr>
<td colspan=“number of columns”> Content goes here.</td>
</tr>
• Example:
<tr>
<td colspan=“3”>
This text spans across 3 columns.
</td>
</tr>

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Spanning Rows
• The rowspan attribute lets you create cells that span
multiple rows of a table.
• Rows always span down.
• The syntax is given as:
<tr>
<td rowspan=“number of rows”> Content goes here.</td>
</tr>
• Example:
<tr>
<td rowspan=“4”> This text spans across 4 rows down.</td>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
</tr>

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

5
10/23/2018

Using Table Headers and Footers


• For code organization, rows can be grouped into head,
body, and footer sections using the <thead>, <tbody>,
and <tfoot> elements respectively. E.g
<table>
<thead>
<tr><th>Header Cell 1</th> <th>Header Cell 2</th> </tr>
</thead>
<tbody>
<tr> <td>Body Cell 1</td> <td>Body Cell 2</td> </tr>
<tr><td>Body Cell 3</td> <td>Body Cell 4</td> </tr>
</tbody>
<tfoot>
<tr><td>Footer Cell 1</td> <td>Footer Cell 2</td> </tr>
</tfoot>
</table>

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Applying Style to the Table


• Styling table elements enhances the appearance
of the table and the information presented in it.
• This is best achieved using CSS.
• The CSS style rules could be specified within the
head section of the HTML file using the <style>
element.
• We provide a CSS style rule code segment that
styles any given HTML table.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

6
10/23/2018

Sample CSS rule


<style type=“text/css”>
table{
border: solid 1px black; border-collapse: collapse;
font-family: Georgia, Serif, “Times New Roman”; color: #722750;
}
td, th {
border: solid 1px black; padding: 5px;
}
th {
font-family: “Trebuchet MS”, Georgia, Serif, Verdana; font-size: 14px;
font-style: bold; background-color: #7fa2c1; color: #0070dd;
}
td {
font-family: Georgia, Serif, Verdana; font-size: 12px;
background-color: #ccdae6;
}
</style>

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Creating Background Hover Effects


• Hover effects could be used to add interactivity to
tables by using CSS rules.
• When a user hovers the pointer over a cell or row then
the background, font, or formatting can change.
• An example is shown below:
td {
background-color: #ccdae6;
}
td:hover {
color: white;
background-color: #722750;
}

tr:hover td {
color: white;
background-color: #722750;
} Web Technologies Slides by: Maxwell Dorgbefu Jnr.

7
10/23/2018

Accepting User Input with HTML Form


• An HTML form is part of a web page that includes
areas where users can enter information.
• Forms are used by web developers to collect
information from users.
• Information submitted by users via HTML forms are
processed by servers that host the page by using
scripts.
• Scripts are programs that process the data from the
form and sends a response to the user via the
browser.
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

The <input /> tag


• The most used form tag is the <input /> tag.
• The type of input is specified with the type
attribute.
• The following types are the most commonly used
input types: text, password, submit, file, hidden
etc.

Web Technologies Slides by: Maxwell Dorgbefu Jnr.

8
10/23/2018

Common type values for the <input /> tag.


Type Value Description

text Defines a single line text box

file Defines a textbox with a browse button. ( For file uploads)

hidden Defines a hidden text field

checkbox Defines a checkbox.

radio Defines a radio button.

submit Defines a pushbutton.

reset Defines a reset button.

password Defines a password field.

Image Defines an image button

Button Defines a button

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Some Common Form Elements


TAG DESCRIPTION
<form> </form> Defines a form for user input
<input /> Defines an input field
<textarea> </textarea> Defines a textarea (a multiline text input
control)
<label> Defines a label to a form control
<fieldset> </fieldset> Defines a fieldset around a number of
form controls
<legend> </legend> Defines a title for a fieldset
<select> </select> Defines a selectable list(a drop-down
box)
<option> </option> Defines an option in a drop-down box
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

9
10/23/2018

Using the <select> Element


• The <select> ..</select> element makes it possible to
create a list of items from which end users make choices.
• The <select> </select> tag pair is used with the
<option> </option> tag pair to create the list of items.
<form action=“display.php” method=“post”>
<p>Select your favourite car:</p>
<select >
<option>Toyota Camry </option>
<option>Lexus EX 350</option>
<option>Nissan Altima </option>
<option>VW Passat </option>
<option>Rang Rover Evoque </option>
<option>Infinity </option>
</select> Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.
</form>

The <textarea> Element.


• The <textarea> element lets you create a text area for
user inputs larger than a simple text box
• The cols and rows attributes are used to specify the
width and height of the text area.
• Using a textarea (a multiline text input control), a user
can write an unlimited number of characters.
<p>Please tell us your story here:</p>
<p>
<textarea name=“story” rows=“8” cols=“45” >
Enter your story here…
</textarea>
</p> Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

10
10/23/2018

Creating Submit and Reset Buttons


• The submit and reset button input types let the user
send form data to be processed or clear the form and
start all over.
• The following code snippet shows addition of submit
and reset buttons
<p>
<input type=“submit” name=“btn_submit” value=“Submit Story” />
<input type=“submit” name=“btn_reset” value=“Clear the form” />
</p>
Image can also be used for buttons as shown in the example below:
<input type=“image” name=“btn_image” src=“submit.png”
alt=“Submit button” />
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Creating Check Boxes


• Check boxes let users choose more than one option from
a given set if they so desire.
• Check boxes are the way to go if users are to provide
more than one answer to MCQs.
<p>Choose day(s) that you will be available:</p>
<p>
<input type=“checkbox” name=“day1” value=“Sunday” />Sunday<br />
<input type=“checkbox” name=“day2” value=“Monday” />Monday<br />
<input type=“checkbox” name=“day3” value=“Tuesday” />Tuesday<br />
<input type=“checkbox” name=“day4” value=“Wednesday” />Wednesday<br />
<input type=“checkbox” name=“day5” value=“Thursday” />Thursday<br />
<input type=“checkbox” name=“day6” value=“Friday” />Friday<br />
<input type=“checkbox” name=“day7” value=“Saturday” />Saturday<br />
</p> Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

11
10/23/2018

Creating Radio Buttons


• Radio buttons let users choose only one option from a
given set of options.
• Radio buttons are the way to go if users are to provide
only one answer to MCQs.
<p>Choose a day that we can contact you:</p>
<p>
<input type=“radio” name=“day” value=“Sunday” />Sunday<br />
<input type=“radio” name=“day” value=“Monday” />Monday<br />
<input type=“radio” name=“day” value=“Tuesday” />Tuesday<br />
<input type=“radio” name=“day” value=“Wednesday” />Wednesday<br />
<input type=“radio” name=“day” value=“Thursday” />Thursday<br />
<input type=“radio” name=“day” value=“Friday” />Friday<br />
<input type=“radio” name=“day” value=“Saturday” />Saturday<br />
</p> Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

The action Attribute of the <form> tag


• When a user clicks a Submit button on a form, the
content of the form is sent to the server.
• The form’s action attribute defines the name of
the file to send the contents to for further
processing.
• The file defined in the action attribute usually
does something with the received input.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

12
10/23/2018

HTML Form Example


<html>
<head> <title> HTML Forms: </title> </head>
<body>
<fieldset>
<legend> User Details: </legend>
<form action=“process.php” method="post“>
Your Name here:
<input type="text“ name="name”size ="30“ /> <br />
Your Email here:
<input type="text” name="email“ size="30“ /> <br />
Your Password here:
<input type = "password" size = "20“ /> <br />
Please browse and upload your comments file:
<input type=“file“ size="45"> <br />
<input type="submit” value="Send">
</form>
</fieldset>
</body>
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.
</html>

Introduction to Scripting
• Scripting is the act of writing little computer
programs that can enhance the appearance and
functionality of web page.
• Scripts are executed either at the server-side or
at the client-side.
• This leads to two categories of scripting:
–Server-side scripting and
–Client-side scripting.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

13
10/23/2018

Server-Side Scripting - 1
• Server-side scripting is a web server technology in
which a user's request is fulfilled by running a script
directly on the web server to generate dynamic web
pages.
• This is different from client-side scripting where
scripts are run by the viewing web browser, usually in
JavaScript.
• It is usually used to provide interactive web sites that
interface to databases or other data stores.
• The primary advantage to server-side scripting is the
ability to highly customize the response based on the
user's requirements, access rights, or queries into data
stores. Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Server-Side Scripting - 2
• Some commonly used server-side scripting
languages are:
– PHP (*.php)
– ASP/ASP.NET (*.asp/*.aspx)
– Perl (*.pl)
– ColdFusion Markup Language (*.cfm)
– Java via JSP(*.jsp)
– Python (*.py)
– Ruby (*.rb)

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

14
10/23/2018

Client-Side Scripting
• Client-side scripting is a type of scripting that
does all of its processing on the user's own
computer.
• It is commonly used to create pop-up windows,
instant-redirect pulldown menus, shopping-cart
calculations, and mouseover effects (i.e., menus
or images that change when the user's mouse
passes over them).
• Javascript is the most popular client-side
scripting language
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Programming Construct
• The three basic programming constructs are:
– Sequence :This construct enables us to
execute a set of statements one after the other
as they appear in a program.
– Selection: This enables us to create codes that
can respond to a variety of conditions.
– Iteration: This construct is used to repeat a
sequence of instructions in a program.
Another name for an iteration is a loop.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

15
10/23/2018

The <script> </script> Tag Pair - 1


• The <script > </script> container is used to
enclose the actual elements of the scripting
language.
• The common attributes of this tag are:
src, type and language
• The src attribute is used to specify the URL of an
external script into the HTML document.
• The external source file should contain no HTML
codes and must use the appropriate file extension.
• e.g: <script src=“coolscripts.js”>
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

The <script> </script> Tag Pair - 2


• The type attribute should always be used with
<script> container.
• It is used to specify the scripting language used
for a particular script.
• Some of the possible values are:
“text/javascript” and “text/vbscript”
E.g
<script type=“text/javascript”>
alert( “Javascripts codes go here”);
</script>
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

16
10/23/2018

Scripts in Head Section


• Scripts to be executed when they are called, or when
an event is triggered, go in the head section.
• When you place a script in the head section, you will
ensure that the script is loaded before anyone uses
it.
<html>
<head>
<script type="text/javascript">.
Javascript statements
</script>
</head>
</html>
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Scripts in Body Section


• Scripts to be executed when the page loads go in the
body section.
• When you place a script in the body section it
generates the content of the page.
<html>
<head>
</head>
<body>
<script type="text/javascript">
Javacsript Statement
</script>
</body>
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

17
10/23/2018

Scripts in Head and Body Sections


• You can place an unlimited number of scripts in your
document, so you can have scripts in both the body and the
head section.
<html>
<head>
<script type="text/javascript">
Javascript Statements
</script>
</head>
<body>
<script type="text/javascript">
Javascript Statements
</script>
</body>
</html>
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Using External Scripts


• Sometimes you might want to run the same
JavaScript on several pages, without having to write
the same script on every page.
• To simplify this, you write a JavaScript in an external
file.
• Save the external JavaScript file with a .js file
extension.
• Note: The external script must not contain the
<script> tag.
• To use the external script, point to the .js file in the
"src" attribute of the <script> tag:
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

18
10/23/2018

Summary - 1
• HTML tables make it possible for web developers
present information on web pages in an
organized manner.
• The <table> </table> tags describe the entire
table structure.
• The <tr> </tr> tags define a row in the table.
• The actual information to be presented in the
table is surrounded by the <td> </td> tags which
are further placed in the <tr> </tr> tags.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Summary - 2
• Web developers use HTML forms to accept inputs
from end users of web sites and web applications.
• The <form> </form> tag pair is used to
surround the form controls; which are the real
elements that allow end users to provide their
inputs.
• The action and method attributes of the <form>
tag are very important to add interactivity to web
sites and web applications.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

19
10/23/2018

Summary - 3
• Scripting is lightweight programming.
• Scripting brings programmability to markup
languages.
• Server-side scripts run on the server and send
their result in a form of HTML codes to the
browser for onward display to end users.
• Client-side scripts are interpreted by the
scripting parsers of the browser architecture.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Our Next Lecture …


1. A brief overview of CSS

2. CSS document Structure

3. Formatting HTML documents using


CSS
4. Some Key applications of CSS in Web
Applications

5. Practical Session with CSS


Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

20

You might also like