Lecture 3 – Introduction to XHTML (Part I)
Outline
Over the next few Lectures, we will discuss webdevelopment with XHTML:
Extensible HyperText Markup Language
Including both basic and complex techniques.
As well as an introduction to Webpage Design.
A brief overview of today’s Introduction to XHTML is as follows:
Introduction. Editing XHTML
Our first XHTML Example
W3C XHTML Validation Service Headers Absolute vs. Relative URL Addresses Linking
Introduction
Extensible HyperText Markup Language (XHTML) Is a powerful language for developing Web Applications. Based on Hypertext Markup Language (HTML)…
A so-called ‘legacy technology’ of the W3C
This means it is out-dated.
XHTML is the new standard.
Note that XHTML and HTML 4.0 differ only by structure… They use the same elements, attributes, and values. We will talk more about these later…
Like HTML, XHTML is a markup language…
Used to specify the format of the text displayed in a web browser.
i.e., Netscape or Internet Explorer.
This is unlike procedural programming languages:
VB.NET, C++, javascript, etc
Introduction (cont.)
In HTML, a web page’s content, structure, and format were all specified. Content = the text conveying the page’s meaning; Structure = the page’s general layout; Format = placement/appearance of elements within the page
e.g., font size or color.
In XHTML, only the content and structure are specified… Format then specified via Cascading Style Sheets (Lectures 8+) We use W3C’s most recent recommendation, XHTML 1.1.
Editing XHTML
In this class, we will create XHTML documents as source code…
In a simple text editor.
Example: Notepad or Wordpad.
For convenience, class examples use Macromedia HomeSite 5…
A text-editor (not a web-page generator) designed for use with XHTML files.
For instance, it provides convenient line numbers.
However, Wordpad works very well.
To access Wordpad on your computer:
Go to: Start > All Programs > Accessories > Wordpad
The WordPad Window will then open (Japanese version shown):
Text for your XHTML file can then be typed normally…
Afterwards, save with the ‘html’ or ‘htm’ extension (i.e., myfile.html)
First XHTML Example
Code for our XHTML example is shown below:
Displays the message, “Welcome to XHTML!” in our Browser.
First XHTML Example (cont.)
Let’s view the Example: First, type in the XHTML code (Wordpad) and Save as ‘first.html’. Next, Launch Netscape…
Then, select ‘Open’ from the file menu, and select ‘first.html’.
HTML vs. XHTML
As noted earlier, XHTML is quite similar to HTML 4.0 (the latest version).
They use the same elements, attributes, and values…
However, XHTML syntax is more strict:
HTML does not require the html, head, and body elements…
HTML lets you omit closing tags for some elements (i.e., p)….
While XHTML does not.
HTML is flexible about case…
While XHTML does not.
HTML lets you omit quotations (“ ”) around values that contain only letters and simple symbols, (-, ., _, :)…
While XHTML requires these elements.
Where XHTML requires lower-case letters for element and attribute names.
HTML lets you omit values that have the same name as an attribute…
Where XHTML does not.
Declaring the Encoding
All text documents are saved with a character encoding…
Including XHTML documents.
If you saved your file without choosing an encoding (as Text Only):
Then your encoding was set automatically:
e.g.: for English Windows, the default is ‘windows-1252’.
Many encodings are used internationally…
Browsers using a different default character set may load our page. Thus…It is a good idea to declare the encoding. Also: XHTML requires it…
Unless you use UTF-8 or UTF-16.
To declare the use of character encoding enc, type… <meta http-equiv=“content-type” content=“text/html;charset=enc” /> …In the head section of your page.
The universal system for character encoding is called unicode.
The unicode used by HTML and XHTML is UTF-8.
If using a combination of English and Japanese, use Shift_JIS.
Declaring the Encoding (cont.)
Our first example, with a line added to the head…
Earlier, this line was omitted for clarity…
Declaring our character encoding as ‘UTF-8’ is:
But you should always specify your char set in your XHTML head.
Also, be sure to preserve the character encoding upon save.
Declaring the Encoding (cont.)
Our first example, with a line added to the head…
Declaring our character encoding as ‘UTF-8’ is:
Earlier, this line was omitted for clarity… But you should always specify your char set in your XHTML head. Related Note: A strength of Wordpad is that it displays Kanji.
Code Validation
Programming web applications can be complex…
Mistakes can be small, with subtle effects. Also, most browsers attempt to render (display) all XHTML documents…
even if they are invalid (= not syntactically correct).
The W3C provides a validation service (at http://validator.w3.org/):
For checking document syntax. You may validate a XHTML document in 3 ways:
Providing the document’s URL. Uploading the file the site.
This is the most convenient…
Typing in the code to be validated, directly.
Code Validation (cont)
The use of the W3C validation service is shown below…
Along with the results, for validation of first.html.
Headers
XHTML provides six headers (header elements)
These allow us to specify the relative importance of text…
From most important (h1, largest) to least important (h6, smallest).
By supporting sectioning. For level x, each has the structure:
…text….
Text size can vary a lot from browser to browser.
We will discuss how to control text properties… Such as size, color, etc in Lectures 8+ (Cascading Style Sheets).
Linking
Hyperlinks (links) serve to reference other WWW resources…
Such as XHTML documents, files, and images. Links provide connectivity between: 1. Your web site and the rest of the Web; 2. Your ‘home page’ and the other XHTML pages in your web-site. Web site = your posted set of pages/resources. Home page = the ‘main’ XHTML page of your web-site (more later).
3. Your site’s pages and other non-textual resources:
Adding links thus provides structure for sets of web documents.
e.g., Files and images
Whenever we add a link, we will need to specify the address of the resource.
Before discussing how to add links to your documents…
let’s talk a bit more about URLs (web addresses)
Absolute vs. Relative URL Addresses
URL’s can be absolute or relative:
An Absolute URL: shows the entire path to the referenced file.
The ‘complete web address’:
Including scheme, server, path, and file name.
Advantage: Can be used anywhere. Disadvantage: long and cumbersome. You must use absolute URLs when referencing:
files on other servers; non-HTTP URLs: FTP sites, e-mail addresses, etc.
A Relative URL: shows the relative path to the referenced file… i.e., From the perspective of the current document. Advantages of using relative URLs:
Shorter and easy to remember (less typing). No need to type the scheme or server (domain name).
Always use relative addresses when referencing:
Files on the same server as your Web Site (i.e.: your site’s files).
Let’s take a closer look at relative address usage…
Relative URL Addresses
Using Relative URL’s (3 cases):
To reference a file…
in the same directory as the current document:
in a lower directory than the current directory:
Use two periods and a forward slash (../) to go-up-a-level… Note: this may be repeated… Then use the path of the file + file name.
Notes on writing relative URL’s (common mistakes):
Generally, do not start paths with a slash ( / )
This indicates a path starting from the web-site’s root directory… If you do want to start from root, do not include the root name (just a slash).
When writing a relative URL, do NOT start with file:/// .
Use the relative path from the current directory + file name.
in a higher directory in the file hierarchy.
Use the file name.
This indicates a link to a file on the local system… It (usually) causes the link to break when the site is loaded to a server.
Don’t include drive names in the path (i.e., C:).
Let’s look at some examples…
Example: Relative URL Addresses
Back to Linking…
A link has three parts:
Destination: this specifies what happens when the link is clicked; i.e., show an image, play sound, download files, etc. Defined by writing a URL.
Label: the visible part of the link…
This can be text or an image.
Target: determines where the destination will be displayed i.e., a particular or new window or frame. Usually ignored (left up to the browser).
We will discuss this later on, when we talk about Frames (and CSS).
In XHTML, hyperlinks can be text or images
Text hyperlinks are underlined and colored blue (default).
The Anchor Element
Links are created using the anchor (a) element,.
Links to another web-page have the structure:
label text
Here, href stands for ‘hypertext reference’, and specifies the destination:
page.html.
Some points to remember:
Relative URLs should be used to link web-pages in the same domain.
You should also use all lowercase letters…
This means: to other files in your site! To avoid problems with case-sensitive servers.
Omitting the file-name, but including the path in the URL:
Specifies the default page of the directory.
Example: http://www.site.com/directory/
Omitting both the file-name and the path from the URL:
Specifies the default page of the entire web-site.
Example: http://www.site.com/
Linking: Example 1
Shown below is a simple XHTML example…
Demonstrating how to create links to two web-sites.
Linking: Example 1 (Results)
Opening our XHTML code in Netscape...
Linking to Other Types of URLs
You are not limited to creating links to web pages...
Other kinds of links may be created similarly.
Simply create an anchor of the form by typing…
label_text
Here, destination =
(A Web file) (A local file for download) (An FTP site) (An e-mail address) (A telnet site)
http://www.site.com/path/file.ext path/myfile.ext ftp://ftp.site.com/path mailto:
[email protected] telnet://site (i.e., library catalog)
And label_text is the underlined text to be clicked.
Which is as expected from our previous discussion of URLs.
Linking: Example 2
The example below demonstrates how to create a link to an email address:
Linking: Example 2 (Results)
Opening our XHTML code in Netscape...
Clicking the blue link opens the Compose dialog…
Conclusion
In this Lecture, we have discussed the XHTML basics: Introduction. Editing XHTML
Our first XHTML Example
W3C XHTML Validation Service Headers Absolute vs. Relative URL Addresses Linking
In the next lecture,
A. Web Sites and Design Fundamentals Some considerations to think about before coding.
B. XHTML (Part II)
Then, we will continue our discussion of XHTML: Including images. Special Characters Lists Basic Tables