1 week four– advance html 2 dr. fadi safieddine. 2 lecture content basic html tables using email...

1

Week Four– Advance HTML 2

Dr. Fadi Safieddine

2

Lecture Content

• Basic HTML Tables• Using Email based Feedback form• Creating and Using Image Maps• Nested framesets• Further readings

3

Basic HTML Tables Tables organize data into rows and columns table attributes are:

Border Specifies the table’s border width in pixels

Summary Describes the table’s contents

Caption Describes the table’s content and helps text-based browsers interpret table

data Head section (header cell, defined with a thead element). Contains header

information such as column names tr element (defines an individual table row) th element (defines the columns in the head section)

Table Footer (defined with a tfoot element) Table Body (defined with a tbody element) Data cells (defined with td element)

4

<html>



<head>

<title>A simple HTML table</title>

</head>

<body>



<table border = "1" width = "40%" summary = "Shopping list">

<caption><strong>Shopping list</strong></caption>

First part of the HTML and the table:

5





<thead>

<tr> 

<th>Item</th> 

<th>Price</th>

</tr>

</thead>





<tfoot>

<tr>

<th>Total</th>

<th>£5.75</th>

</tr>

</tfoot>





<tbody>

<tr>

<td>Apple</td> 

<td>£2.25</td>

</tr>

6

<tr>

<td>Salt</td>

<td>£0.50</td>

</tr>

<tr>

<td>Banana</td>

<td>£1.00</td>

</tr>

<tr>

<td>toliet tissues</td>

<td>£2.00</td>

</tr>

</tbody>

</table>

</body>

</html>

8

HTML Email Forms Following on last week’s work, we look at email feedback form

Attribute method Specifies how the form’s data is sent to Web server

method = “post” Specifies how the form’s data is received via Web server

method = “get” Attribute action

Specifies the URL of a script on the Web server input

Specifies data to provide to the script that processes the form

9

<HTML>

<head>

<title> Simple online Feedback </ title>

</ head>

<body>

<h1>Feedback Form</ h1>

<p>Please fill out this form to help

us improve our site.</ p>

<!—The tags associated with this form will not work on your computer -->



<!—cgi-bin/ form mail/ -->

<form method = "post" action = "/ cgi-bin/ formmail">

<p>





<input type = "hidden" name = "recipient"

value = "[email protected]" / >

<input type = "hidden" name = "subject"

value = "Feedback Form" / >

<input type = "hidden" name = "redirect"

value = "ThankYou.html" />

</ p>

10



<p><label>Name:

<input name = "name" type = "text" size = "25"

maxlength = "30" />

</label></p>

<p>







<input type = "submit" value =

"Submit Your Entries" />

<input type = "reset" value =

"Clear Your Entries" />

</p>

</ form>

</ body>

</ html>

12

How to use image maps:

You can designate certain areas of an image (called hotspots) as links by mapping it. Elements & Attributes of map

Attribute id Identifies the image map

Element area Defines hotspot Attribute shape and coords

Specify the hotspot’s shape and coordinates Circle ( shape = “circle” ) Rectangular ( shape = “rect” ) Polygon ( shape = “poly” )

13

<html>

<head>

<title>

How to use Image mapping

</title>

</head>

<body>

<p>



<map id = "picture">

<!—shape = "rect" indicates a rectangular shapes -->

<area href = "About Us.html" shape = "rect"

coords = "2,123,54,143"

alt = "Goes to about us page" / >

<area href = "Services.html" shape = "rect"

coords = "126,122,198,143"

alt = "Goes to services page" / >

<area href = "index.html" shape = "rect"

coords = "3,7,61,25" alt = "Goes to the homepage" / >

<area href = "ContactUs.html" shape = "rect"

coords = "168,5,197,25"

alt = "Goes to contact us page" / >

14





<area shape = "poly" alt = "E-mail the tutor"

coords = "162,25,154,39,158,54,169,51,183,39,161,26"

href = "mailto:[email protected]" />





<area href = "mailto:[email protected]"

shape = "circle" coords = "100,36,33"

alt = "E-mail the tutor" />

</map>





<img src = "tutorpage.gif" width = "200" height = "144"

alt = "tutor logo" usemap = "#picture" / >

</ p>

</ body>

</ html>

49

16

frameset Element

Allows the browser display more than one document at a time. frameset attributes:

cols Specifies the frameset’s column layout

rows Specifies the number of rows and the size of each row

frame Specifies the documents that will be loaded Attribute src

Specifies URL of the page to display

17

Nested framesets

framesets within framesets

18

<html>

<head>

<title>Main page: IM1024</ title>

</ head>

<frameset cols = "110,*">

<frame name = "leftframe" src = "navigation.html" / >





<frameset rows = "175,*">

<frame name = "picture" src = "imagemap.html" / >

<frame name = "main" src = "table.html" / >

</ frameset>

<noframes>

<body>

<p>This page uses frames, but your browser does not

support them.</ p>

<p>Please, <a href = "navigation.html">follow this link to

browse our site without frames</ a>.</ p>

</ body>

</ noframes>

</ frameset>

</ html>

20

Finally:

This will be the last lesson on HTML but this is not the end of HTML. You should not only rely on the lecture slides, further readings are

essential. This week you start your assignment and HTML constitute 40% of

the over all grade. Next week we look into planning and documenting your website

which constitute 60% of your overall grade.

1 week four– advance html 2 dr. fadi safieddine. 2 lecture content basic html tables using email...

Documents

basic html tables tables

html email forms

advance html

end of html

hotspots shape

tables content

forms data

frameset element