Lecture 3 - Introduction To Xhtml (1)_spring_q2_2007

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 