www.ens.utulsa.edu
Download
Report
Transcript www.ens.utulsa.edu
XHTML 1.1
Derived from Standard Generalized Markup
Language (SGML) of ISO
XHTML concerned primary with content rather
than presentation and style
Evolution of the statandards for XHTML is
controlled by World Wide Web Consortium W3C
Style sheets (CSS) were developed to give precise
specification of presentation
XHTML Document Structure
Every document must begin with an xml
declaration
<?xml version = “1.0” encoding = “utf-8” “>
The SGML DOCTYPE command must follow
<!DOCTYPE html PUBLIC “-//w3c//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
XHTML Tags
Tags are the syntactical units of HTML
Used to specify categories of content
provides formatting: layout and presentation details
Browser has default presentation for content
Syntax:
< tag's name> with closing: </tag's name>
Tag's name must be all lower case
Content of a tag appears between the tag and its closing
A tag and its closing tag specify a container
An element: a container and its content.
XHTML Required Tags
Every document must include four tags:
<html>
-- root element of document
Attribute xmlns (XHML name space)
<html xmlns = “http://www.w3.org/1999/xhtml”>
<head>
-- provides inf about document not its content
Can include meta element
<meta name=”keywords” content = “gadgets, information” />
<title>
<body>
-- provides content of document
XHTML Tags
Tags are inline or block
Inline:
content appears on the current line
Block:
content appears on new line
Tags must be nested properly: strictly enforced
A block
tag can NEVER be nested directly in an
inline tag
Inline
tags and text cannot be nested directly in a body
or form elements
XHTML Hypertext
Anchor tag: <a href=”link to document”> is an inline tag.
Provides link pointing to document:
Filename
Directory
path & filename
URL
Specific
place in document – which must be marked
<h2 id = “gadgets”> Items for sale </h2>
<a href = “itemsforSale.html#gadgets”>Sale items</a>
XHTML Basic Tags
<p> ... </p>
Paragraph tag
<br />
Line break
<h1> ... </h1>
Headings, can be up to 9
<blockquote> ... </bl...>Block quote
<i>, <b>, <small>, <big>, <sub>, <sup>, <tt>
and sizes
Font style
<hr />
<img src=”pictures.jpg” alt=”my picture” /> Inline image
Can
Horizontal Rule (lines)
have width and / or height attributes
XHTML List Tags
Enumerated list
<ol> ... </ol>
Itemized list (bullets)
<ul> ... </ul>
List
item
<li> ... </li>
Definition list
Definition
<dl> ... </dl>
term
Definitions
<dt> ... <dt>
<dd> ... <dd>
XHTML Tables Tags
<table border = “border”>
<caption>
<tr>
--block tag
the title of a table
specifies a row
<th>
specifies row or column heading
rowspan,
columnspan attributes specify span of a
table cell
<td>
table data
align attribute can be left, center, or right
valign attribute can be top, or bottom
Cellpadding and cellspacing
HTML Forms
Most common way to communicate from Web
browser to server.
HTML has tags for Widgets which create objects
on the screen-form to be filled out.
single/multiple
line text
Checkboxes,
Radio
buttons,
Menus,
Submit
and Reset buttons.
HTML Forms
Widgets are used to gather information from the
user.
Each widget has a value: default or user input
Form data is composed of all the values of the
widgets.
Submit button activated results in the form data
being encoded and sent to the web server for
processing
Reset button resets all widget values to defaults
The <form ... > tag
Required attribute action --specifies URL of
application to be called by submit button.
<form method=post action="mailto:[email protected]"
Enctype=text/plain >
action ="http://www.cs.ucp.edu/cgi-bin/survey.pl"
Attribute method specifies one of two possible
get
post
HTML Widgets
Many created with <input> tag.
Attribute type specifies kind of widget used.
<input type="reset" value="Reset it!">
<input type='submit" value="Submit Form">
Text -creates horizontal box for text input
Size
attribute can change default of 20 characters
Setting maxlength causes additional input to be
ignored, otherwise, box is scrolled to the left.
HTML Widgets
Checkboxes -collect multi-choice input
Every
item in the checkbox requires a value attribute.
It is the widget's value in the form data when it is
selected.
Non
selected checkboxes contributes no values to the
form data.
Initialized
selections must have the checked attribute
set to "checked." No selection is the default.
HTML Widgets
Radio Buttons -only one button can be "checked"
at a time.
Every
button in a radio group must have the same
name
If
no button is selected, browser selects the first one.
HTML Widgets
Menus are created with the <select > tag
Name
Can
attribute of <select> is required.
have multiple or single (default) selection.
Multiple
selection is specified with the multiple
attibute set to "multiple"
Size
attribute specifies how many menu items to
display (default is 1)
Size
>1 or multiple specified --> pop-up menue
HTML Widgets
Menus
Menu
items specified with the <option> tag. Its text
content is the value of the item.
Selected
attribute of the <option> tag is preselected if
it is set to "selected"
HTML Widgets
<textarea> tag used to create text input areas.
Size
of the text area is provided by<textarea>
attribute: cols, and rows.
Default
text included as the content of <textarea>
Scrolling
Wrap
is implicit if area is overfilled.
attribute can be used to force a line to wrap
arround when set to "hard"