Chapter 3: XHTML CIS 275—Web Application Development for Business I.

Chapter 3: XHTML

CIS 275—Web Application Development for Business I

2

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

3

More About XHTML XHTML aims to ________ HTML XHTML is almost identical to HTML 4.01 XHTML is a ________ and cleaner version of

HTML XHTML is HTML defined as an _____ application XHTML 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.

4

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 compatible.

5

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

6

XHTML Syntax (more differences)

Attribute names must be in __________. <table width="100%">, NOT <table WIDTH="100%">,

Attribute values must be ________. <table width="100%">, NOT <table width=100%>

Attribute ____________ is forbidden. <frame noresize="noresize">, NOT <frame noresize>

The ______ attribute replaces the name attribute. <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

id

7

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

8

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

If you have a home page named ___________, you can use the URL http://www.student.missouristate.edu/r/raj127f/ to load that page.

default.htm

9

Tables Tables in HTML documents are used for

Defining page ________ Displaying data

Tags associated with tables 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”>

10

Simple Example and Tips Example

<html><body><table><tr>

<td>row 1, cell 1</td> <td>row 1, cell 2</td>

</tr> <tr>

<td>row 2, cell 1</td> <td>row 2, cell 2</td>

</tr> </table></body></html>

Table Tips 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.

11

Example of Valid XHTML<?xml version = "1.0"?><!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head><title>An XHTML Table</title><meta http-equiv="Content-Type"

content="text/html; charset=ISO-8859-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>

12

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>

13

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>

14

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 ________

15

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 The _______ attribute is used to specify each kind of element

<select> for drop-down _______ <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.

16

Sample Form<html><body><form

action=“mailto:[email protected]" 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>

17

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">

18

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>

19

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. <frameset rows=“20%, *” noresize=“true” noscroll>

A <frame> tag can have a name attribute, such as name=“main”. <frame src="frame_b.htm” name=“main” >

A hyperlink can specify the destination _______. <a href ="link.htm#C10" target =“main">Look at

Chapter 10!</a>

20

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=ISO-

8859-1" /></head>

<frameset rows="25%, *"><frame src="contents.htm" /><frame src="resume.htm" name="main" /></frameset>

</html>

21

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

22

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>

23

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"> </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

__________.

24

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.

Chapter 3: XHTML CIS 275—Web Application Development for Business I.

Documents

Transcript of Chapter 3: XHTML CIS 275—Web Application Development for Business I.