Transcript HTML - Boise State University

HTML and XHTML
Controlling the Display
Of Web Content
PHP
Markup
Languages
XHTML
Javascript
 There are two
components to any
CGI
HTML
What it says (content)
Java
How it looks
perl
CSS
 A markup language
uses
a
special syntax
XML
document
to imbed information about how the
content should be displayed in the file
that contains the content.
PHPHypertext
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
Javascript
 A markup language
designed for
CGI
displaying information on
the web
HTML
 Standard maintainedJava
by the World Wide
Web Consortium
perl (w3c.org)
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
XML
which are basically
the same as those
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
HTMLXHTML
Elements
Javascript
<tag>content</tag>
CGI element
 tag is one of the pre-defined
HTML
names optionally followed
Java by a list of
attributes perl
CSS
 content can XML
include other
elements
 The ending tag needs to have the same
name as the start tag
 In XHTML, all elements must be closed
PHP with no content
Elements
XHTML
Javascript
 Some elements
have only attributes
CGI
<img …> for example
Java
perl
 In HTML, the closing tag CSS
could be left
XML
out
associated
with
them
HTML
 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
PHPAttributes
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
Element
XHTML
 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 document
Contains elements describing
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
Javafor 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
images
perl
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
CGI characters
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>
PHP
PageXHTML
Layout
 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
Style
XHTML
 Style sheetsJavascript
are external specifications of
CGI
linked to the document
with a <link>
Java
element inperl
the <head> element
CSS
XML
 <style> element
in <head> element
desired style
HTML
 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
perl
location can
be a URL or a relative path or a
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 where image is
<img src="image">
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>
PHP
Coming
next
XHTML
Javascript
 Forms
CGI
 Stylesheets
HTML
Java
perl
CSS
 Anything else?XML
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
perlBill Kennedy
Musciano and
CSS
 Wikipedia
XML
http://en.wikipedia.org/wiki/HTML
 W3C
http://www.w3.org/