COM621 – Interactive Web Development

COM621 – Interactive Web Development

Lecture 1 - XHTML

HTML & XHTML

• HTML is defined by formal recommendations issued by the World Wide Web Consortium (W3C) – as the De-Facto language used to create web pages.

• HTML consists of a series of tags that mark up specific elements within a document. Each of these elements has a default presentation style which is provided by the browser.

tags• The syntax of a tag is the tag’s name surrounded by angle

brackets (<tag>) . • most tags appear in pairs: an opening tag and a closing tag. • The name of a closing tag is the same name as its

corresponding opening tag with a slash (/) attached to the beginning. – For example, is the tag’s name is <SPAM>, the corresponding closing

tag is named: </SPAM>. • Whatever appears between a tag and its closing tag is the

content of the tag. • A browser display of an HTML document shows the content of

all of the document’s tags.

HTML

• There are several versions of HTML, the most recent one is HTML 4.01, each of them is an updated version of its predecessor.

• HTML 4.01 is actually 3 standards: Strict, Traditional and Frameset.

• the DOCTYPE statement placed as the first line of the page indicates the type of HTML being used on your page

XHTML

• XHTML 1.0, is the language we will be using in the module. XHTML stands for eXtensible Hypertext Markup Language. It is a version of HTML 4.01

• The main difference is that XHTML follows the very specific rules and structures imposed on XML (eXtensible Markup Language) documents.

XHTML

• The tags are all the same as HTML but they have to be written in all-lowercase.

• Attribute values in XHTML have to be quoted.• As with HTML, XHTML is 3 standards• The most recent version XHTML 1.1 only has the

strict standard making it entirely dependant on CSS for presentation.• IN THE MODULE WE WILL USE XHTML 1.0

TRANSITIONAL STANDARD

Anatomy of an XHTML page• Open Dreamweaver, set your site (U drive)

and open a blank HTML page – Look at the CODE view of the page:

SGML DOCTYPE

HTML Tag with xmlns attribute

Head Section with META element and Title tag

Body Section

Anatomy of an XHTML page• SGML DOCTYPE is a command that specifies the

particular Standard Generalized Markup Language document type definition (DTD).

• Note that we are defining XHTML 1.0 transitional as DEFAULT

• XHTML documents always have an <html> tag immediately following the DOCTYPE command and they always end with the closing html tag: </html>

Anatomy of an XHTML page• The html tag includes an attribute, xmlns, that

specifies the NAMESPACE. Although the attribute value looks like an URL, it does not specify a document. It is just a name that happens to have the form of an URL

<html xmlns="http://www.w3.org/1999/xhtml">

• Note: (namespaces can be studied in every book covering XML)

Anatomy of an XHTML page• XHTML documents consists of two parts:– HEAD – BODY

• The <head></head> tag contains the head part of the document, which provides information about the document and does not provide the content of the document.

• The <body></body> of the document provides the content of the document.

Anatomy of an XHTML page• The HEAD element already contains two lines of code:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document</title>

• This particular META element refers to the character encoding (we will study meta elements later during the module).

• The <title></title> define the actual TITLE of your web document (which appears on the tab in the browser when viewing the document) – Change the default “untitled document” to something more significant and save the document as index.html in the U drive as specified in the practical sheet.

Block and Inline Elements• Most HTML elements are defined as block level

elements or as inline elements.

• Block level elements normally start (and end) with a new line when displayed in a browser.– Examples: <h1>, <p>, <ul>, <table>

• Inline elements are normally displayed without starting a new line.– Examples: <b>, <td>, <a>, <img />

Container Tags Elements<div> and <span>

• The XHTML <div> element is a block level element that can be used as a container for grouping other HTML elements.

• The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it.

• When used together with CSS, the <div> element can be used to set style attributes to large blocks of content.

• Another common use of the <div> element, is for document layout. It replaces the "old way" of defining layout using tables. Using tables is not the correct use of the <table> element. The purpose of the <table> element is to display tabular data.

Container Tags Elements<div> and <span>

• The HTML <span> element is an inline element that can be used as a container for text.

• The <span> element has no special meaning.

• When used together with CSS, the <span> element can be used to set style attributes to parts of the text.

XHTML Language & Tags

• Comments: Every language has comments and XHTML is no exception:

• Paragraphs: Text is normally organized in paragraphs in the body of a document. The XHTML standard does not allow text to be placed directly in a document body.– <p> This is the content of a paragraph </p>

Some useful Tags

• Line Breaks: Paragraphs include a blank line in between them when viewed on the browser, sometimes, we would like the text to appear on a different line without this additional blank line, for this we use a line break tag:

<body><p>This is the first paragraph</p>

<p>This is the first line<br />This is the second line of the second paragraph</p></body>

Preserving Whitespace

• The browser always eliminates extra spaces and inline breaks that are not identified with the appropriate tags.

• In order to prevent the browser from eliminating multiple spaces and ignoring embedded linebreaks, we need to use the <pre></pre> tag

<body><p> Jaguar: Panthera onca IUCN status: Near Threatened Habitat: Central and South America - Tropical forests, grassland Diet: Carnivore - including deer, tapirs, reptiles, fish, frogs, pigs, monkeys.</p>

<p><pre> Jaguar: Panthera onca IUCN status: Near Threatened Habitat: Central and South America - Tropical forests, grassland Diet: Carnivore - including deer, tapirs, reptiles, fish, frogs, pigs, monkeys.</pre></p></body>

Headings

• Text in documents are often separated into sections by the use of a heading at the beginning of the sections.

• In XHTML there are 6 levels of headings, specified by the tags: <h1>, <h2>, <h3>…<h6>.

• In header <h4> the size of the text is the same as in <p>

• Headings always break the current lines.

More Text Related Tags

• There are several tags that are helpful for formatting text in documents, some of these are:– Block Quote Tag: <blockquote>– Emphasis Tag: <em>– Strong Tag: <strong>– Code Tag: <code>– Subscript Tag: <sub>– Superscript Tag: <sup>

Character Entities• XHTML provides a collection of special characters that are sometimes needed in a

document but cannot be typed themselves. • In some cases, these characters are used in XHTML in some special way – for example:

<, >, and &. In other cases, the character does not appear on the keyboard (for example the letter ñ or the small raised circle that represents degrees) and there is also the non-breaking space, which the browsers regard as hard space.

• These special characters are defined as entities, which are codes for the characters. An entity in a document is replaced by its associated character by the browser: Some examples are:– & (&)– < (<)– > (>)– ° (0)– ¼ (1/4)– ( ) – This is a whitespace equivalent to pressing the space bar.

Horizontal Rulers

• Horizontal Rulers are another way to separate documents into distinctive sections.

• The tag is what we call a self-closing tag (just as the line-break): They don’t have content of closing tag associated with it.<hr />

Hyperlinks

• A hyperlink in an XHTML document acts as a pointer to some particular place in some web resource.

• The resource being pointed can be:– Another document anywhere on the web– The document currently being displayed (self)– A specific part of that document (bookmark)

Hyperlinks

• Hyperlinks are denoted by the ANCHOR tag <a></a> which becomes the clickable link that the user sees

• Links are usually rendered in a different colour than that of the surrounding text.

• Two ways to use depending on the attribute used:– href attribute: links to another document– name attribute: create a bookmark inside a document.

Hyperlinks

• Hyperlinks are inline tags• The Anchor tag that defines the link is called the

source of the link. the document whose address is specified in a link is called the target of the link.

• As is the case with many tags, the anchor tag can include many different attributes, however, to create a link, only the href (hypertext reference) attribute is required

• The value assigned to href specified the target of the link.

Hyperlinks

• Targets and href values:– Another document on same directory: href =

name of the document

– Another document in a different server: href = full URL

– Bookmark in the same document: href = name of the bookmark.

Hyperlink Examples

<a href=”document.xxx">Name of Target Document As Seen by User</a>

<a href=”../document.xxx">Name of Target Document As Seen by User</a>

<a href=“folder/document.xxx">Name of Target Document As Seen by User</a>

Target on Same Directory

Target on Container directory/folder (root)

Target on Sub-directory/folder

Target on Different Server<a href=“http://www.server.ext/document.xxx">Name of Target Document As Seen by User</a>

Bookmarks

• The name attribute specifies the name of an anchor that is used to create a bookmark inside an XHTML document

• Example:

HTML CODE

<a name="top_of_page"></a>

<a href="#top_of_page">Back to Top</a>

Bookmark on Document(target)

Link to Bookmark(source)

http://someserver/somefolder/document.html#top_of_page

Images

• Images on web pages are used to enhance the appearance of the page (although it slows down the loading time of the page).

• The image should be stored in a file, which is specified by an XHTML request.

• The image is inserted into the display of the document by the browser.

Images

• The most common methods of representing images are:– Graphic Interchange Format (GIF): Gives the

possibility of transparecy.– Joint Photographic Experts Group (JPEG):Gives a

Large Number of Colours.– Portable Network Graphics (PNG): Has the best

characteristics of both GIF and JPEG but they require more storage space.

Image Organisation

• As your web application grows in size, different files will have to be stored in the server, so it is a good idea to store all the images together in a sub-directory called images.

Image Tag• The image tag <img /> specifies the image that is to appear in a

document.• In its simplest form (minimum to work), the tag should include

two attributes:– SRC: specifies the file containing the image– ALT: specifies text to be displayed when it is not possible to display the

image• There are other attributes that could be used to control the

appearance of the image like width and length which specify the the size of the rectangle for the image in pixels

<img height="200" width="200" src="/images/image.png" alt="image_title" />

Lists

• There are 3 types of lists that can be displayed using XHTML:– Unordered Lists (e.g. shopping lists)– Ordered Lists (e.g. Set of Instruction)– Definition Lists (used to specify lists of terms and

their definitions.

Lists

• All three types of lists require a block tag and an item tag

• The item tag for list elements (ordered or unordered) is <li></li> which is an acronym for List Item.

• Block Tags:– Unordered Lists: <ul></ul>– Ordered Lists: <ol></ol>

Lists

• In unordered lists, any tag can appear in a list item including nested lists. When displayed, a bullet precedes each list item.

• In ordered lists, the order of items is important, on this list each list item is preceded by a sequential value (Arabic Numerals starting at 1).

• Both Ordered and Unordered Lists can be nested (list inside a list); however, in a nested ordered list, there needs to be at least 1 list element between two <ol> tags.

Definition Lists

• The block tag for a definition list is <dl>

• Each term to be defined in the list is given as the content of a <dt> tag. (definition term)

• The definitions themselves are specified as the content of <dd> tags.

Forms

• Forms are the most common way for the user to communicate information from a Browser to the Server.

• Common uses for forms in web development include:– site registrations– guestbook– quizzes– purchase and delivery orders– etc.

Forms

• XHTML provide tags to generate the commonly used objects on a screen form.

• These objects are called controls or widgets• All control tags are inline tags• Each control can have a value, usually given

through user input. Together, the values of all of the controls (that have values) in the form are called the form data.

Forms

• Every form requires a “submit” button; when pressed, all the form data is encoded and sent to the web server for processing.

• In order to process a form, the form data needs to be processed by a server side scripting language (such as PHP or ASP)

• These scripting languages are capable of storing the form data into databases or processing the data with some other intention.

The Form Tag & Attributesaction and method

• All of the controls of a form appear in the content of a <form> tag (which is a block tag)

• The form tag can have several different attributes, only one of which (action) is required.

• The action attribute specifies the URL of the application on the server that is to be called when the user clicks the submit button.

Note: Until we start using processing scripts later on the semester, the action attribute will be an empty string (“ “)

The Form Tag & Attributesaction and method

• The method attribute defines the format that will be used to send data to the PHP script– get appends the form arguments to the end of the

Web address (as a Query String after the “?”)– post sends the data as part of the body of the

HTTP Request

Using method=“get”• This method appends the form-data to the URL in name/value pairs

(as they are assigned in the form using the name and value attributes of the controls)

http://server/folder/processingfile.php?email=ytdrtyerh

• This method is useful for form submissions where a user want to bookmark the result (think google search)

• There is a limit to how much data you can place in a URL (varies between browsers), therefore, you cannot be sure that all of the form-data will be correctly transferred

• Never use the "get" method to pass sensitive information! (password or other sensitive information will be visible in the browser's address bar)

44

Using method=“post”• This method sends the form-data as an HTTP post

transaction

• Form submissions with the "post" method cannot be bookmarked (think login forms or member only areas).

• The "post" method is more robust and secure than "get", and

• "post" does not have size limitations

45

Example of Form Control Tags

form tag description<form action="receive.php" method="post"> Start the form<input type="text" name="name_of_field"> Text field<input type="password" name="name_of_field"> Password field<input type="hidden" name="name_of_field"> Hidden field<input type="checkbox" name="name of field" value="value_if_checked"> Checkbox<input type="radio" name="name_of_field" value="value_if_selected"> Radio button<select name="name_of_field" size="size of control - default 1">

Select menu (drop down list)

<option selected="selected" value="value_if_selected">value_displayed</option><option value="different_value_if_selected">value_2_displayed </option></select><textarea rows="yy" cols="xx" name="name_of_field"> . . </textarea> Multiline text <input type="submit" name="name" value="value" /> Submit button<input type="image" src="/images/file.jpg" name="name" value="value" /> Image button<input type="reset" value="message!" /> Reset button</form> Ends form

Input Tag

• Many of the commonly used controls are specified with the inline tag <input>.

• Example are: text inputs, password fields, checkboxes, radio buttons and the action buttons.

• All of the controls except for RESET and SUBMIT require a name attribute, which becomes the value of the control within the form data.

Input Tag

• The control checkboxes and radio buttons requirea value attribute, which initializes/defines the value of the control.

• The content of the value attribute of the control is passed along with the name of the control as a pair value (name=value) to the server when the form is submitted.

ExamplesText Box & Form Control

Form - Code

Form - Browser

ExamplesLabel & Text Box

Form - Browser

Form - Code

ExamplesPassword Fields

Form - Browser

Form - Code

Examples:Checkboxes and Radio

Examples:Checkboxes and Radio

ExamplesDrop Down Menus (select)

ExamplesDrop Down Menus (select)

Forms – Plain Button

• Forms are usually combined with JavaScript to do calculations or some other action on the form data prior to submission to the server.

• All of the form controls allow for actions to be carried when selected, clicked, typed, gaining or losing focus, etc.

• Also there is the option of including a generic button using <input type=“button” /> tag.MORE ON THIS DURING JAVASCRIPT SECTION OF THE

MODULE

Tables• A table is a matrix of cells, they are widely used in printed

documents, books and on the web as they provide a highly effective way of presenting many kinds of information.

• The cells on the top row often contain column labels; the cells on the leftmost column often contain row labels while the rest of the cells contain the data that makes up the table.

• The content of a cell can be almost any document element including text, headings, horizontal rules, images, lists and nested tables.

Tables

• A table is specified as the content of the block tag <table>.

• There are two kinds of lines in tables: – the line around the outside of the whole table is

called the border; – the lines that separate the cells from each other are

called rules. • If the border attribute is not included in the table

tag, the table will not have borders or rules.

Table Attributes

• There are 4 basic attributes used in a table:– border: specifies the width of the border in pixels– rules: specifies the width of the rules in pixels– cellspacing: specifies the distance between cells in

pixels.– cellpadding: specifies the distance of the text to the

borders of the cell in pixels• When rules and cellspacing are used together,

rules defines the width of the actual cell border.

Table Construction• The cells of a table are specified one row at a time;

• Each row of the table is specified using the row tag: <tr>.

• Within the row, the row label is specified by the table heading tag: <th>.

• Each data cell of a row is specified with the table data tag: <td>.

• If you want to include a row label, the the <th> tag must be used.

Table Construction

• Note that in tables that have both row and column labels, the upper-left corner cell is often empty, to do that you need to specify and empty <th> tag at the beginning of the first row.

• In most cases, a displayed table is preceded by a title, given as the content of a <caption> tag, which can immediately follow the opening table tag.

Table Example

rowspan, colspan, align & valing

• In certain tables, it is necessary that a row takes over several columns or that a column takes over several rows.

• The rowspan and colspan attributes of <th> and/or <td> will solve this problem.

• The align and valing attributes of a cell specify the alignment of the contents of the cell– align specifies the horizontal alignment (left, right, center)– valing specifies the vertical alignment (top, bottom) – The

default vertical alignment for cells is center

Example

Validation• Validating HTML code means running the page through an HTML

validator, which is a program that analyzes the submitted HTML code and ensure that the code is in compliance with the HTML specification.

• In this way, an HTML validator is like a spellchecker or grammar checker for HTML.

• By validating XHTML pages you can catch errors in your code (such

as misspelled attributes or closing tags that have been left out).

Validation• During the module we will use the W3C HTML Validator: • http://validator.w3.org/ • However there are several other validators available on the

web. • Note: Before you validate your page, make sure that you have

a DOCTYPE statement as the first line of your code (preferable transitional). After validation, check your results and fix any errors that have been encountered.

http://validator.w3.org/

COM621 – Interactive Web Development

Documents