1. COM621 – Interactive Web Development Lecture 1 - XHTML

2. 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.

3. tags The syntax of a tag is the tag’s name surrounded by angle brackets ( ). 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, the corresponding closing tag is named:. 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.

4. 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

5. 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.

6. 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

7. 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

8. 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 tag immediately following the DOCTYPE command and they always end with the closing html tag:

9. 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 Note: (namespaces can be studied in every book covering XML)

10. Anatomy of an XHTML page XHTML documents consists of two parts: – HEAD – BODY The tag contains the head part of the document, which provides information about the document and does not provide the content of the document. The of the document provides the content of the document.

11. Anatomy of an XHTML page The HEAD element already contains two lines of code: Untitled Document This particular META element refers to the character encoding (we will study meta elements later during the module). The 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.

12. 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:,,, Inline elements are normally displayed without starting a new line. – Examples:,,,

13. Container Tags Elements and The XHTML element is a block level element that can be used as a container for grouping other HTML elements. The 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 element can be used to set style attributes to large blocks of content. Another common use of the element, is for document layout. It replaces the "old way" of defining layout using tables. Using tables is not the correct use of the element. The purpose of the element is to display tabular data.

14. Container Tags Elements and The HTML element is an inline element that can be used as a container for text. The element has no special meaning. When used together with CSS, the element can be used to set style attributes to parts of the text.

15. 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. – This is the content of a paragraph

16. 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: This is the first paragraph This is the first line This is the second line of the second paragraph

18. 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 tag

19. 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. 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.

21. 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:,, …. In header the size of the text is the same as in Headings always break the current lines.

22. More Text Related Tags There are several tags that are helpful for formatting text in documents, some of these are: – Block Quote Tag: – Emphasis Tag: – Strong Tag: – Code Tag: – Subscript Tag: – Superscript Tag:

23. 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.

24. 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.

25. 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)

26. Hyperlinks Hyperlinks are denoted by the ANCHOR tag 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.

27. 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.

28. 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.

29. Hyperlink Examples Name of Target Document As Seen by User Target on Same Directory Target on Container directory/folder (root) Target on Sub-directory/folder Target on Different Server Name of Target Document As Seen by User

30. Bookmarks The name attribute specifies the name of an anchor that is used to create a bookmark inside an XHTML document Example: HTML CODE Back to Top Bookmark on Document (target) Link to Bookmark (source) http://someserver/somefolder/document.html#top_of_page

31. 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.

32. 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.

33. 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.

34. Image Tag The image tag 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

35. 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.

36. Lists All three types of lists require a block tag and an item tag The item tag for list elements (ordered or unordered) is which is an acronym for List Item. Block Tags: – Unordered Lists: – Ordered Lists:

37. 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 tags.

38. Definition Lists The block tag for a definition list is Each term to be defined in the list is given as the content of a tag. (definition term) The definitions themselves are specified as the content of tags.

39. 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.

40. 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.

41. 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.

42. The Form Tag & Attributes action and method All of the controls of a form appear in the content of a 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 (“ “)

43. The Form Tag & Attributes action 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

44. 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

45. 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

46. Example of Form Control Tags form tagdescription Start the form Text field Password field Hidden field Checkbox Radio button Select menu (drop down list) value_displayed value_2_displayed.. Multiline text Submit button Image button Reset button Ends form

47. Input Tag Many of the commonly used controls are specified with the inline tag. 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.

48. 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.

49. Examples Text Box & Form Control Form - Code Form - Browser

50. Examples Label & Text Box Form - Browser Form - Code

51. Examples Password Fields Form - Browser Form - Code

52. Examples: Checkboxes and Radio

54. Examples Drop Down Menus (select)

56. 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 tag. MORE ON THIS DURING JAVASCRIPT SECTION OF THE MODULE

57. 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.

58. Tables A table is specified as the content of the block tag. 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.

59. 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.

60. 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:. Within the row, the row label is specified by the table heading tag:. Each data cell of a row is specified with the table data tag:. If you want to include a row label, the the tag must be used.

61. 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 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 tag, which can immediately follow the opening table tag.

62. Table Example

63. 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 and/or 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

64. Example

65. 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).

66. 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.