CIS 397—Web Design
Download
Report
Transcript CIS 397—Web Design
Chapter 3: XHTML
CIS 275—Web Application
Development for Business I
Introduction
Some XHTML facts
XHTML stands for “_________ hypertext markup language”
An XHTML file is a _______ file containing content
surrounded by XHTML ______ that define structure.
XHTML files must have extensions ._____ or ._______
HTML files can be created in a text ________ (like Notepad)
or an HTML editor (like _____________)
Steps in creating and viewing a simple HTML file
Open Notepad
Type valid XHTML _________ code (tags and content)
Save file as myfirstpage.htm (for example) on your disk
Double-click this file to open it in your default browser
2
More About XHTML
XHTML
XHTML
XHTML
XHTML
XHTML
aims to ________ HTML
is almost identical to HTML 4.01
is a ________ and cleaner version of HTML
is HTML defined as an _____ application
is a Web Standard
XHTML 1.0 became an official W3C ______________
January 26, 2000. (see www.w3c.org)
XHTML is a ________ language that “marks up” or
formats content.
XHTML is NOT a ____________ programming
language like Java or VB.NET.
3
Why XHTML?
The problem:
There are too many “_____” web pages out there.
Some browsers are powerful enough to _______ bad
pages, but browsers for newer applications aren’t.
The solution: XHTML
XHTML consists of all the ________ in HTML 4.01
combined with the ________ of XML.
XML was designed to ________ data and HTML was
designed to _________ data.
XHTML pages can be read by all XML-enabled devices.
XHTML lets you write “__________" documents now that
work in all browsers and that are backward browser
4
compatible.
Differences in XHTML & HTML
XHTML documents must at least comply with HTML ______.
XHTML elements must be properly ________.
<b><i>This text is bold and italic</i></b>
XHTML documents must be well-________ (as shown below)
<html>
<head> ... </head>
<body> ... </body>
</html>
Tag names must be in ________
ALL XHTML elements must be properly ______ with end
tags.
For example, instead of <hr>, use <hr /> (space before the /)
See http://www.w3schools.com for helpful tutorials
5
XHTML Syntax (more differences)
Attribute names must be in __________.
Attribute values must be ________.
<frame noresize="noresize">, NOT <frame noresize>
id
The ______
attribute replaces the name attribute.
<table width="100%">, NOT <table width=100%>
Attribute ____________ is forbidden.
<table width="100%">, NOT <table WIDTH="100%">,
<img src="picture.gif" id="picture1" />, NOT
<img src="picture.gif" name="picture1" />
Notice how the <img> tag is closed above.
W3C XHTML validation: http://validator.w3.org
6
How to Convert to XHTML
Add the XML version and _________ declaration.
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Add character encoding meta tag in head element:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"
/>
Change all tags and attribute names to ___________
Put all attribute values in _________
Validate XHTML using http://validator.w3.org
Add the validation graphics:
For more information see www.w3schools.com
7
TIDY and Magenta
You can also use TIDY, a free ________, at
http://www.w3.org/People/Raggett/tidy/ to convert
HTML to XHTML.
However, the page to be converted must be
published on a web server, such as ________.
First, set up your account at
https://cams.missouristate.edu/selfservice/
The URL for the page page1.htm would be in the format
http://www.student.missouristate.edu/r/raj127f/page1.htm
default.htm you can
If you have a home page named ___________,
use the URL
http://www.student.missouristate.edu/r/raj127f/ to load
8
that page.
Tables
Tables in HTML documents are used for
Tags associated with tables
Defining page ________
Displaying data
The ________ tag identifies the existence of a table
The <tr> tag defines table _______
The <td> tag defines table _____ cells (or just “cells”)
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”>
9
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>
10
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>
11
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>
12
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>
13
Forms
Forms are used to capture ______ from users
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”>
action (what will happen when the form is __________)
Example:
<form id=“student_info” name=“student_info”
action=“mailto:[email protected]”>
method (data exchange method, either “get” or “______”)
<form id="input" name=“input”
action="html_form_action.asp" method=“post">
The end of the form is designated with ________ 14
Form Elements
A form element is an object (i.e., a ______) 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
<select> for drop-down _______
The _______ attribute is used to specify each kind of element
<option> tags are used with <select> to specify each item
<textarea> for a scrollable text area
The _______ attribute is used for each element to
identify the field.
Check the examples for more details.
15
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>
16
Meta
The <meta> tag is used to provide specific
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:
<meta name=“___________" content="Free Web tutorials
on HTML, CSS, XML, and XHTML">
This meta element defines keywords for your page:
<meta name=“__________" content="HTML, DHTML, CSS,
XML, XHTML, JavaScript, VBScript">
17
Frames
The purpose of frames is to display more than one
web page in a single browser _________.
Each HTML document is called a _______.
The <frameset> tag defines the _______ of frames
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>
18
More on Frames
A ________ frame exists when a new <frameset>
tag substitutes for an existing <frame> tag (see
example).
A <frameset> tag can have _________ 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” >
A hyperlink can specify the destination _______.
<a href ="link.htm#C10" target =“main">Look at Chapter
19
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>
20
Head
The head element should contain only information
_______ the document.
The tags that are legal inside the head section are
<base>, <link>, <meta>, _______, <style>, and
<script>.
Examples
<base target="_blank"> (all ________ will use this target)
<link rel="stylesheet" type="text/css" href="mystyle.css">
(links this page to mystyle.css)
<title>Richard Johnson’s Web Site</title> (appears in
______ bar of browser window)
Others explained later
21
URL’s
Following is the general format of a URL:
scheme://host.domain:port/path/filename
The scheme is the type of Internet service, such as _____
Examples of _______ are w3schools.com or ibm.com
The host is the domain host—by default it is ______
The port is the port number of the host—default is ____
The path is the sub directory on the ________
The filename is the name of the _________. If omitted, it
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>
22
Scripts
The purpose of adding scripts to web page is to
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 __________.
The _____ denotes a JavaScript comment
A browser that doesn’t support scripting reads <!-- as a __________.
23
Servers
To make your web pages available to the world:
Use an ISP (Internet Service _________) to host your site.
Install PWS (_________ Web Server, included with
Windows XP Profession (not Home Edition).
Use Windows 2000 Server built-in IIS (Internet
___________ Services).
Use Windows Server 2003 with IIS 6.0.
24