Part 2 - Seneca - School of Information & Communications Technology
Download
Report
Transcript Part 2 - Seneca - School of Information & Communications Technology
ULI101 – XHTML Basics (Part II)
What is Markup Language?
XHTML vs. HTML
General XHTML Rules
Block Level XHTML Tags
XHTML Validation
Markup Language
Before we can talk about xHTML, we need to understand what a
Markup Languages is. A markup language refers to the use of
characters within a piece of information that can be used to
process or identify that information in a particular way.
<html>
<head>
<title>Some Title</title>
</head>
<body>
<h1>Display this in a heading 1 definition</h1>
<p> Display this in normal text definition.</p>
</body>
</html>
When the above is viewed in a browser (IE or Netscape), what
in fact the browser is doing is interpret the markup elements
and display the content.
Markup Language
There are a number of different markup languages and types.
To appreciate and understand why XML was developed, one has
to get a general understanding of the Standard Generalized
Markup Language (SGML) and its relationship with HTML. SGML
is the grandfather of all markup languages.
To Summarize:
SGML is a very powerful language for document display. It is a
very powerful language, but it is difficult to fully understand.
SGML, has the advantage of creating other easier-to-use webprogramming languages like HTML, XML, and XHMTL.
HTML is an easy-to-use language designed to display data, but
has limitations of displaying complex data (like databases).
New devices such as PDA’s and mobile phones do not have
the resources to interpret HTML if written with mistakes.
XHTML
XHTML 1.0 brings the Web of the future to content authors
today. It is a reformulation of HTML 4 in XML, bringing the rigor
of XML to HTML, and can be put to immediate use with existing
browsers by following a few simple guidelines.
W3C's work in XHTML helps create standards that provide richer
Web pages on an ever-increasing range of browser platforms
including cell phones, televisions, cars, wallet-sized wireless
communicators, etc...
XHTML
To write XHTML you need to use the XML syntax, which is slightly
different from that of the HTML you use today. What are the
differences? XML requires you to:
include the correct DOCTYPE declaration at the beginning of the file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
The more forgiving, more backwards-compatible version of XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
The more rigorous, more XML-style version of XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN">
DTD for frames
add the attribute xmlns="http://www.w3.org/1999/xhtml" to the <html>
tag
make element and attribute names case-sensitive. XHTML uses
lowercase
include end tags e.g. </p> and </li>
add a / to empty elements, e.g. <br /> and <hr />
quote all attribute values, e.g. <img src="duck.jpg" alt="Duck" />
End special escape codes with semi-colon (eg. &)
General XHTML Structure
Here is an example of an XHTML web page using the
transitional DOCTYPE:
File Encoding Type
DOCTYPE
(Transitional)
Beginning
and ending
HTML tags
<?xml version=‘1.0 encoding=‘UTF-8’?>
<!DOCTYPE html PUBLIC
‘-//W3C//DTD XHTML 1.0 Transitional//EN’
‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd’>
<html xmlns=‘http://www.w3.org/1999/xhtml’ xml:lang=‘en’>
<head>
<title>Sample Title</title>
</head>
<body>
Contents of webpage
</body>
</html>
XHTML Tags
Commenting
The purpose of commenting is to provide information for the
web page designer.
A comment may appear anywhere in an HTML/XHTML
document and has the following format:
<!-- comment
-->
Example:
<!-- Here is a
multiple line comment -->
XHTML Tags
<head>
This is the HTML/XHTML document header. (required)
The <head> tag defines an HTML/XHTML document header.
The header contains information about the document rather
than information to be displayed in the document. The web
browser displays none of the information in the header,
except for text contained by the <title> tag.
You should put all header information between the <head>
and </head> tags, which should precede the <body> tag.
The <head> tag must contain the title tag and optionally to be covered at a later date - the base, isindex, meta,
script, style, and link tags.
<title>
The <title> tag is contained in the heading of the
web page document.
This tag specifies the title of the document.
The title will appear in the title bar of the browser
window. In addition, automated web search tools
can use the title to index documents.
XHTML Tags
<body>
The <body> tag specifies the main content of a document.
You should put all content that is to appear in the web page
between the <body> and </body> tags.
The <body> tag has attributes that let you specify
characteristics for the document such as:
The background color
An image to use as a tiled background for the window
The default text color, active/unvisited/visited link colors
Actions to occur when the document finishes loading or is
unloaded, and when the window in the document is displayed
receives or loses focus.
XHTML Tags
<body> Attributes:
<body bgcolor=“color name”>
Sets the color of the document background.
<body background=‘URL’>
Displays an image in the document background.
(can use relative or absolute pathnames)
<body text=‘color’>
Sets the color of normal text in document.
Normal
text
XHTML Tags
<body> Attributes:
<body link=‘color’>
Sets the text color of all unvisited links
in the document.
Unvisited
Link
<body alink=‘color’>
Sets the text color of all links
when clicked down (activated).
Active
Link
<body vlink=‘color’>
Sets the text color of all visited links
in the document.
Visited
Link
XHTML Tags
In addition to empty and non-empty tags, there are also
categories of tags called Block-Level tags and Inline tags.
Web page body
Block-Level Tags
Heading
Paragraph
Line
level elements
Table
Block-Level Tags
(Structure)
Block-Level tags are used to set up the structure of the web pages
(eg. Building blocks).
Block-level tags are automatically separated by a separate empty
line.
Block-level elements may contain in-line elements or other block-
We will discuss inline tags in a later class…
Block-Level Tags
<h1> .. <h6>
(non empty tag)
Displays a heading. Level-one (h1) headings are the largest
and level-six (h6) are the smallest.
<p>
(non-empty tag)
Displays a paragraph. You can use the <p> tag to insert a
line break with extra space using the <br /> tag.
<blockquote>
(non-empty tag)
Displays an indented paragraph. Block quotes are usually
used to quote passages from books, etc…
Block-Level Tags
<hr />
(empty tag)
Used to display a line. This is useful to separate other blocks
or sections of the web page.
<pre>
(Non-empty tag)
Used to display text such as code, where characters such as
new line are recognized by the browser.
Other Block-Level Tags to be Covered in Course:
Lists (<ul>,<ol>,<li>,<dl>,<dt>,<dd>)
Tables (<table>,<tr>,<th>,<td>)
Creating a Web page
After you have learned how to code your web
page, you will need to physically create your
web page on a web server (e.g. on your
Matrix account) to allow others to view your
web page.
In order to do this, you will need to know
where to create a file that will contain your
web page.
Home directory
Creating a Web Page
Public_html
On your Matrix account, there a directory
called public_html, that is the “starting place”
where web pages or subdirectories containing
web pages are stored.
Any web pages stored in a directory level
higher than the public_html director will not
be available to be viewed on the Internet
Creating a Web Page
Home directory
public_html
Web page files should be contained in the public_html
directory or a subdirectory of public_html
Web page files should be text files that end with
an extension .html or .htm
NOTE: Do not include the public_html directory in
the pathname of the web page address (URL)…
A web page called index.html will automatically load
the web page if just the directory pathname is used.
If no index.html file is available in the directory, then
the contents of the directory will be displayed in the
web browser.
XHTML Validation
You are required to validate your web document for XHTML 1.0
Failure to have your web document validate for XHTML1.0 will
result in major assignment penalties (eg. 30%).
To validate your web document:
Create a web document in your Matrix account.
Copy your full or absolute URL
(eg. http://matrix.senecac.on.ca/~myacct/mywebpage.html)
Go to http://validator.w3.org
Under “Validate by URL”, paste in your full URL.
If Errors, edit your webpage file in Matrix, save file, and revalidate again!
If web document validates, copy code in validator to create a linked image
in your web page to automatically validate.