1. COM621: Advanced Interactive Web Development Lecture 1 – XHTML

2. What is XHTML?  XHTML stands for eXtensible Hypertext Markup Language XHTML is aimed to replace HTML. XHTML is almost identical to HTML 4.01. XHTML is a stricter and cleaner version of HTML.

3. SGML and DTDs SGML stands for “Standard Generalized Markup Language”. HTML, XHTML and many other markup languages are defined in SGML. DTD, “Document Type Definition”, describes the syntax to use for the current document. There are three different DTDs for XHTML - you can pick the one you want

4. DOCTYPE declaration  Every XHTML document must begin with one of the DOCTYPE declarations (DTDs):

5. DOCTYPE declaration (cont.) The three main DTDs are as follows:  Strict Use for really clean markup, with no display information (no font, color, or size information) Use with CSS (Cascading Style Sheets) if you want to define how the document should look  Transitional Use with standard HTML and/or with CSS  Frameset Use if your document uses HTML frames

6. XHTML  XHTML 1.0, is the language we will be using in the module.  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 SGML DOCTYPE

7. Basic Syntax  The fundamental syntactic units of HTML are called 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,  The opening tag and its closing tag together specify a container,  Whatever appears between a tag and its closing tag is the content of the tag.  The container and its content together are called an element. - For example, This is extremely simple.  Every language has comments and XHTML is no exception: - For example,

8. Standard XHTML Document Structure  XHTML documents always have an tag immediately following the DOCTYPE command.  The html tag includes an attribute, xmlns. The attribute value looks like an URL (Uniform Resource Locator), it does not specify a document. It is just a name that happens to have the form of an URL 

9.  The tag contains the head part of the document, which provides information about the document.  The define the actual TITLE of your web document (which appears on the tab in the browser when viewing the document)  The of the document provides the content of the document. Standard XHTML Document Structure (cont.)

10. The meta Element  Content-Type specifies the character encoding for the document.  refresh defines a time interval for the document to refresh itself.  Standard XHTML Document Structure (cont.)

11. Sample XHTML Document DOCUMENT TITLE YOUR CODE

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. Basic Text Markup  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.  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

14. 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 Exploring Preformatted Text Not using the pre tag HTML XHTML XML Using the pre tag HTML XHTML XML

15. 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. Heading Level 1 Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 Heading Level 6

16. Character Entities  XHTML provides a collection of special characters that are sometimes needed in a document but cannot be typed themselves.  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:

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

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

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

20. Hyperlinks (cont.)  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.

21. Hyperlinks (cont.)  Hyperlinks are inline tags  The syntax for using the anchor tag to create a link is as follows: target page 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

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

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

24. Images (cont.)  The most common methods of representing images are: Graphic Interchange Format (GIF): Gives the possibility of transparency. 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.

25. Images (cont.)  The image tag specifies the image that is to appear in a document.  In its simplest form, 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

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

27. Lists (cont.)  Unordered Lists:  The item tag for list elements is which is an acronym for List Item.

28. Lists (cont.)  Ordered Lists:  The item tag for list elements is

29.  Definition list:  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. Lists (cont.)

30. From HTML to XHTML  XHTML elements must be properly nested bold and italic is wrong bold and italic is correct  XHTML documents must be well-formed......  Tag names must be in lowercase  All XHTML elements must be closed If an HTML tag is not a container, close it like this:,, Note: Some browsers require a space before the /

31. From HTML to XHTML(cont.)  Attribute names must also be in lower case Example:  Attribute values must be quoted Example:  Attribute minimization is forbidden Example:, cannot be abbreviated to  The id attribute replaces the name attribute Wrong: Right: Best:

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

33. Validation (cont.)  During the module we will use the W3C HTML Validator:  http://validator.w3.org/ 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.

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

35. Forms (cont.)  XHTML provide tags to generate the commonly used objects on a screen form.  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)  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 (“ “)

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

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

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

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

40. Input Tag  The control checkboxes and radio buttons require a 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.

41. Examples: Text Box & Form Control Form - Code Form - Browser

42. Examples: Label & Text Box Form - Browser Form - Code

43. Examples: Password Fields Form - Browser Form - Code

44. Examples: Checkboxes and Radio

46. Examples : Drop Down Menus (select)

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

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

50. Tables (cont.)  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.

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

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

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

54. Table Example

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

56. Example