CIS 397—Web Design
Download
Report
Transcript CIS 397—Web Design
Chapter 5: XHTML, Part 2
CIS 275—Web Application
Development for Business I
Tables
Tables in HTML documents are used for
Tags associated with tables
layout
Defining page ________
Displaying data
<table> tag identifies the existence of a table
The ________
rows
The <tr> tag defines table _______
data cells (or just “cells”)
The <td> tag defines table _____
The <caption> tag describes the table’s content.
The <thead>, <tbody>, and <tfoot> tags define the three
major sections of a table.
Examples of commonly used attributes
<table border=“1” width=“100%” summary=“This …”>
<tr align=“left” valign=“top”>
<td align=“center” rowspan=“2”>
2
Simple Example and Tips
Example
<html>
<body>
<table>
<tr>
<td>row
<td>row
</tr>
<tr>
<td>row
<td>row
</tr>
</table>
</body>
</html>
Table Tips
1, cell 1</td>
1, cell 2</td>
First, write the HTML code for
a standard r x c table
Begin to modify that code to
create the desired effects,
such as alignment, spanning,
nested tables, etc.
2, cell 1</td>
2, cell 2</td>
3
Example of Valid XHTML
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/x
html11.dtd">
<html xmlns =
"http://www.w3.org/1999/xhtml">
<head>
<title>An XHTML Table</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO8859-1" />
</head>
<body>
<table width="400" border="1">
<tr>
<th align="left">Money spent
on....</th>
<th align="right">January</th>
<th align="right">February</th>
</tr>
<tr>
<td align="left">Clothes</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">Make-Up</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<th align="left">Sum</th>
<th align="right">$271.10</th>
<th align="right">$94.65</th>
</tr>
</table>
</body>
</html>
4
Spanning Columns
<html>
<body>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
5
Spanning Rows
<html>
<body>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
6
Forms
input from users
Forms are used to capture ______
A form is defined by the <form> tag
Attributes of the <form> tag
name (each form should have a name)
Example: <form id=“student_info” name=“input”>
submitted
action (what will happen when the form is __________)
Example:
<form id=“student_info” name=“student_info”
action=“mailto:[email protected]”>
post
method (data exchange method, either “get” or “______”)
<form id="input" name=“input”
action="html_form_action.asp" method=“post">
</form>
The end of the form is designated with ________
7
Form Elements
A form element is an object (i.e., a ______)
field
within a
form used to collect a single piece of information.
Tags used for form elements:
<input> for text, radio buttons, checkboxes, and push
buttons
list
<select> for drop-down _______
type attribute is used to specify each kind of element
The _______
<option> tags are used with <select> to specify each item
<textarea> for a scrollable text area
name attribute is used for each element to
The _______
identify the field.
Check the examples for more details.
8
Sample Form
<html>
<body>
<form
action=“mailto:someone@w3scho
ols.com" method="post"
enctype="text/plain">
<p>
Name:
<input type="text" name="name"
value="yourname" size="20“ />
<br />
Male: <input type="radio"
name="Sex" value="Male" />
<br />
Female: <input type="radio"
name="Sex" value="Female“ />
<br />
Mail:<input type="text" name="mail"
value="yourmail" size="20“ />
Comment:<input type="text"
name="comment"
value="yourcomment" size="40“ />
<br /><br />
<input type="submit"value="Send“ />
<input type="reset" value="Reset“ />
</form>
</p>
</body>
</html>
9
Introduction to Image Maps
hotspot is an area of an image that acts as
A ___________
a link.
map is a list of coordinates that
An image ______
define hotspots.
A _______-_____
server side image map is processed by the
server (Web site host computer).
client side image map is downloaded to
A _______-_____
and processed by the client computer.
10
Defining an Image Map
The syntax for an image map is:
mapid
<map id=“_____________”>
shape coords =“_____________”
coordinates href =“_____”
URL
<area shape = “________”
alt=“…” >
<area shape = “________” coords =“_____________” href =“_____”
alt=“…” >
<area shape = “________” coords =“_____________” href =“_____”
alt=“…” >
</map >
The shape property can have the values
RECT
CIRCLE and _________.
POLY
__________,
__________,
The coords property has values, measured in
_______,
pixels depending on the shape.
11
3.3 Image Map Coordinates
The coordinate syntax for a rectangle is:
The coordinate syntax for a circle is:
x_left, y_upper, x_right, y_lower
coords =“______________________________________”
x_center, y_center, radius
coords =“______________________________________”
The coordinate syntax for a polygon is:
x1, y1, x2, y2, x3, y3, . . .
coords =“______________________________________”
For a graphic to use an image map requires the
usemap property in the ______
<img> tag.
__________
filename
mapid
<img src=“____________”
usemap=“#____________”
alt=“…”>
12
Meta
The <meta> tag is used to provide specific
search
information about a document. Some _______
engines uses <meta> to index web page contents.
This meta element is required for character encoding:
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1"> (required for HTML 4.01 validation)
This meta element gives a description of your page:
description content="Free Web tutorials
<meta name=“___________"
on HTML, CSS, XML, and XHTML">
This meta element defines keywords for your page:
keywords content="HTML, DHTML, CSS,
<meta name=“__________"
XML, XHTML, JavaScript, VBScript">
13
Frames
The purpose of frames is to display more than one
window
web page in a single browser _________.
frame
Each HTML document is called a _______.
layout of frames
The <frameset> tag defines the _______
columns
in a window (rows or _________).
<frameset cols="25%,75%"> … </frameset>
*
Values for rows or cols can be percentages, pixels, or ___.
The <frame> tag defines which web page will occupy
the frame. Below, two columns, two web pages.
<frameset cols="25%, *">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
14
More on Frames
A ________
nested frame exists when a new <frameset>
tag substitutes for an existing <frame> tag (see
example).
A <frameset> tag can have _________
attributes such as
noresize=“true” and noscroll.
A <frame> tag can have a name attribute, such as
name=“main”.
<frameset rows=“20%, *” noresize=“true” noscroll>
<frame src="frame_b.htm” name=“main” >
frame
A hyperlink can specify the destination _______.
<a href ="link.htm#C10" target =“main">Look at Chapter
15
10!</a>
Sample Frames Page
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>Frames Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO8859-1" />
</head>
<frameset rows="25%, *">
<frame src="contents.htm" />
<frame src="resume.htm" name="main" />
</frameset>
</html>
16
Head
The head element should contain only information
about the document.
_______
The tags that are legal inside the head section are
<title> <style>, and
<base>, <link>, <meta>, _______,
<script>.
Examples
hyperlinks will use this target)
<base target="_blank"> (all ________
<link rel="stylesheet" type="text/css" href="mystyle.css">
(links this page to mystyle.css)
<title>Richard Johnson’s Web Site</title> (appears in
______
title bar of browser window)
Others explained later
17
URL’s
Following is the general format of a URL:
scheme://host.domain:port/path/filename
http
The scheme is the type of Internet service, such as _____
Examples of _______
domain are w3schools.com or ibm.com
www
The host is the domain host—by default it is ______
80
The port is the port number of the host—default is ____
server
The path is the sub directory on the ________
document If omitted, it
The filename is the name of the _________.
is what is set up on the server (such as default.htm).
Examples
<a href="news:alt.html">HTML Newsgroup</a>
<a href="ftp://www.w3schools.com/ftp/winzip.exe">Download
WinZip</a>
18
Scripts
The purpose of adding scripts to web page is to
interactive
make them more dynamic and ___________.
Example: In the <body> section, add the following:
<script type="text/javascript">
<!-document.write("Hello World!")
// -->
</script>
<noscript>Your browser doesn’t support JavaScript! </noscript>
Notes on the code above:
<!-A browser that supports scripting will ignore the __________.
// denotes a JavaScript comment
The _____
comment
A browser that doesn’t support scripting reads <!-- as a __________.
19
Servers
To make your web pages available to the world:
Provider
Use an ISP (Internet Service _________)
to host your site.
Personal Web Server, included with
Install PWS (_________
Windows XP Profession (not Home Edition).
Use Windows 2000 Server built-in IIS (Internet
Information Services).
___________
Use Windows Server 2003 with IIS 6.0.
20