HTML and XHTML
Controlling the Display
Of Web Content
PHP
Markup
Languages
XHTML
Javascript
 There are two
components to any
CGI
document
HTML
What it says (content)
Java
How it looks
perl
CSS
 A markup language
uses
a
special syntax
XML
to imbed information about how the
content should be displayed in the file
that contains the content.
PHP
Hypertext
XHTML
Javascript
 The basic idea
of hypertext has been
CGI
around since
1945
when
Vannever Bush
HTML
suggested the usefulness
Java of having being
perl
able to automatically
follow references
CSS
XMLto another
from one document
 Think of it as providing non-linear access
to information
PHP Markup Language
Hypertext
XHTML
Javascriptdesigned for
 A markup language
CGIthe web
displaying information on
HTML
 Standard maintainedJava
by the World Wide
Web Consortium
(w3c.org)
perl
CSS
 Current standard
is 4.01 which is being
XML
developed into an ISO standard.
 Designed using a metalanguage called
SGML
PHP
XHTML
XHTML
 XHTML isJavascript
very similar to HTML except
CGI
the syntax
is
stricter
HTML
Java Definition) is
 A DTD (Document Type
perl
used to define the allowedCSS
elements
XMLthe same as those
which are basically
used in HTML
 Based on XML instead of SGML
PHP
Syntax
XHTML
Javascript
 An XHTML
document consists of a
hierarchyHTML
of elements. CGI
Java
 Unrecognized tags are
ignored by the
perl
browser
CSS
XML
 Elements must be closed and well-formed
(properly nested)
 Extra white space is ignored
PHP
HTML
Elements
XHTML
Javascript
<tag>content</tag>
CGI element
 tag is one of the pre-defined
HTML
names optionally followed
Java by a list of
attributes perl
CSSelements
 content can XML
include other
 The ending tag needs to have the same
name as the start tag
 In XHTML, all elements must be closed
PHP
Elements
with
no content
XHTML
Javascript
 Some elements
have only attributes
CGI
associated
with
them
HTML
<img …> for example
Java
perl
 In HTML, the closing tag CSS
could be left
XML
out
 In XHTML, use the form
<name attributes />
PHP
Tags
XHTML
Javascript
 Tags are enclosed
by < >
CGI by zero or
 Tags consist of a name followed
HTML
more attributes
Java
perl
 Attributes are
separated by white space
CSS
 Names of tags and
attributes are all lower case
XML
in XHTML
 Some tags can appear only in certain contexts
PHP
Attributes
XHTML
Javascript
 Attributes have
the form
CGI
Attrname="value"
HTML
 The value must haveJava
double quotes
perl
around it
CSS
XML
 Attributes may be required or optional
PHP
Types
of Markup
XHTMLElement
 Structural -Javascript
describes purpose (e.g.
CGI
headers and titles)
HTML
 Presentational - describes
Java how it looks
perl to other documents or
 Hypertext -links
CSS
other parts of the
document
XML
 Trend is to move presentational markup
into CSS document.
PHP elements Elements
Top-level
XHTML
 html
Javascript
CGI
 head
HTML
Java
Contains elements describing
document
perl
 body
CSS
XML
Can contain only block-level elements
PHP
Head
Elements
XHTML
 <title> Javascript
- page title generally appears
CGI
in browser title bar
HTML
 <style>
Java
 <link> - perl
related documents
CSS
 <meta> - dataXML
about document
 <base> - URL
 <script> - language for client-side
scripting
PHP
Block-level
Elements
XHTML
Javascript
 Behave like paragraphs
 Headings <h1> … <h6> CGI
 <p> forHTML
paragraphs
Java for pre-formatted text
 <pre>, <blockquote>
perl
and quotations
CSS
 <div> to create
blocks
XML
 Lists - <ul>, <ol>, <dl>
 Tables and Forms <table> <form>
 <hr> for horizontal lines
PHP
Inline
Elements
XHTML
 Behave likeJavascript
words, characters, phrases
CGI
<a> for anchors
HTML
<br> line break Java
<img> for
perlimages
CSS
Emphasis and XML
styling <em>,
<kbd>,
<sup>, <sub>, …
In HTML, there are tags like <font>, <b>,
<i> that you should now implement in a
stylesheet
PHP
Odds
and
Ends
XHTML
Javascript
 Entities are escape
sequences for characters that are
used by HTML and some non-keyboard
characters
CGI
HTML
&nbsp; &lt;
&gt; &amp;
 Comments are enclosed byJava
perl
<!-- … ->
CSS
XML
 There are some elements
that come first in the
document
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
PHP HTML Document
Minimal
XHTML
Javascript
<html>
CGI
<head>
HTML
<title>Appears in title
Java bar</title>
perl
</head>
CSS
XML
<body>
Marked-up content
</body>
</html>
PHPPage Layout
XHTML
 For verticalJavascript
layout use paragraphs,
CGI
headingsHTML
and rules
Java
 If you need horizontal
as well as vertical
perl
formatting, use tables
CSS
A table cell canXML
hold all sorts of other
elements
PHP
Presentation
XHTMLStyle
 Style sheetsJavascript
are external specifications of
CGI
desired style
HTML
linked to the document
Javawith a <link>
element inperl
the <head> element
CSS
XMLin <head> element
 <style> element
 style attribute in a particular element
style="property1=value1;
property2=value2; … "
PHP
Links
XHTML
Javascript
 The <a> tag
is used for making links,
CGI
either internally
or
externally
HTML
Attribute href="location"
where
Java
perlbe a URL or a relative path or a
location can
CSS
name in the current
document
XML
Attribute name allows you to create label to
a particular part of the document for local
links
PHP
Images
XHTML
Javascript
 You can link
to an image file and have
CGI
that file open
in
the
browser
HTML
Java
 You use the image tag
to embed an image
perl
into another document CSS
XML
<img src="image">
where image is
the location of the image file
jpg, gif and png formats supported
PHP
Tables
XHTML
Javascript
 Use the <table>
tag to create a table
CGI to control looks
 Use border, cellspacing, cellpadding
HTML
 <tr>…</tr> for eachJava
row
 <td></td>perl
for each cell in the row
CSS
 <th></th> forXML
column and row
labels (bold)
 colspan and rowspan allow you to make
irregular tables
PHP
Sample
Table
XHTML
<table> Javascript
CGI
<tr><th></th><th></th>…</tr>
HTML
Java
<tr><td></td><td></td>…</tr>
perl
CSS
<tr><td></td><td></td>…</tr>
XML
</table>
PHPComing next
XHTML
 Forms
Javascript
CGI
 Stylesheets
HTML
perl
Java
 Anything else?XML
CSS
PHP
Sources
XHTML
Javascript
 Web Design
and Programming by Paul S.
CGI
Wang and Sanda S. Katila
HTML
 HTML The Definitive
Guide by Chuck
Java
perl Bill Kennedy
Musciano and
CSS
 Wikipedia
XML
http://en.wikipedia.org/wiki/HTML
 W3C
http://www.w3.org/
Descargar

HTML - Boise State University