com621 interactive web development n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
COM621 – Interactive Web Development PowerPoint Presentation
Download Presentation
COM621 – Interactive Web Development

Loading in 2 Seconds...

play fullscreen
1 / 66

COM621 – Interactive Web Development - PowerPoint PPT Presentation


  • 92 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'COM621 – Interactive Web Development' - rhea


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
html 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.
slide3
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.
slide4
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
  • 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.
xhtml1
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
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 page1
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 page2
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 page3
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 page4
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
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
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 span1
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
XHTML Language & Tags
  • Comments: Every language has comments and XHTML is no exception:

<!--This is a Comment-->

  • 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
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
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
slide19

<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
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
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
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:
    • &amp; (&)
    • &lt; (<)
    • &gt; (>)
    • &deg; (0)
    • &frac14; (1/4)
    • &nbsp; ( ) – This is a whitespace equivalent to pressing the space bar.
horizontal rulers
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
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)
hyperlinks1
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.
hyperlinks2
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.
hyperlinks3
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
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
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
  • 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.
images1
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
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
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
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.
lists1
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>
lists2
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
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
  • 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.
forms1
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.
forms2
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 attributes action and method
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 attributes action and method1
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
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
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
input tag
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 tag1
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.
examples text box form control
ExamplesText Box & Form Control

Form - Code

Form - Browser

examples label text box
ExamplesLabel & Text Box

Form - Code

Form - Browser

examples password fields
ExamplesPassword Fields

Form - Code

Form - Browser

forms plain button
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
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.
tables1
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
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
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 construction1
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.
rowspan colspan align valing
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
validation
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).
validation1
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.