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 Consotrium (W3C) – Defacto 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: Body Section SGML DOCTYPE HTML Tag with xmlns attribute Head Section with META element and Title tag

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: Pantheraonca 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: Pantheraonca 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 Target on Same Directory <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 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: Bookmark on Document (target) HTML CODE <a name="top_of_page"></a> Link to Bookmark (source) <a href="#top_of_page">Back to Top</a> 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 widthand 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 • getappends the form arguments to the end of the Web address (as a Query String after the “?”) • postsends 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)

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

Example of Form Control Tags

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 requireavalue 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 - Code Form - Browser

COM621 – Interactive Web Development