Interface Design and Web Development: Week 3

INTERFACE DESIGN AND WEB DEVELOPMENT
Week 3
LEARNING OUTCOMES
In this chapter, you will learn how to ...
Describe HTML, XHTML, and HTML5 Identify the markup language in a web page document Use the html, head, body, title, and meta elements to code a
template for a web page Configure the body of a web page with headings, paragraphs, line breaks, divs, lists, and blockquotes Configure special characters Use the anchor element to link from page to page Create absolute, relative, and e-mail hyperlinks Adding Bookmarks Code, save, and display a web page document Test a web page document for valid syntax
WHAT IS HTML?
HTML:
The set of markup symbols or codes placed in a file intended for display on a Web browser page.
The World Wide Web Consortium
(http://w3c.org) sets the standards for HTML and its related languages.
HTML ELEMENTS
Each markup code represents an HTML element . Each element has a purpose. Most elements are coded as a pair of tags:
an opening tag and a closing tag.

Tags are enclosed in angle brackets, "<" and ">"
symbols.
WHAT IS XHTML?
Separate document structure and content from
document formatting The most recent standard version of HTML eXtensible HyperText Markup Language.
XHTML uses:
the elements and attributes of HTML

the syntax of XML (eXtensible Markup Language).
DIFFERENCES BETWEEN HTML AND XHTML

XHTML is more strict: In XHTML tags must be in lowercase letters You must put quotation marks around attributes Every attribute must have a value Every opening tag must have a closing tag Attribute minimization is forbidden The first line of every XHTML document must include a Document Type Declaration
XML SYNTAX
XML itself is not a language it is a meta
language. An XML document must be well-formed.

Use lowercase Use opening and closing tags
<body> </body>
Close stand-alone tag with special syntax <hr />
WHAT IS HTML5 ?
Newest draft version of HTML/XHTML Supported by modern browsers Safari, Google Chrome, Firefox, Internet Explorer 9 Create a formal (strict) version of HTML Extend the language to include semantic elements and
standard media elements to play video, audio, Adds whats missing instead of fixing whats wrong Adds new elements
CREATING YOUR WEB PAGES

In order to create your own web pages you need: A text editor An HTTP browser for testing the pages
(Internet Explorer, Chrome)
A Web server on which to store your files and make
them available for viewing (www.5gbfree.com)
DTD
Document Type Definition (DTD)

doctype statement identifies the version of HTML contained
in your document. placed at the top of a web page document
10
DTD EXAMPLES
XHTML 1.0 Transitional DTD <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> HTML5 DTD <!DOCTYPE html>
11
EXAMPLE XHTML WEB PAGE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Page Title Goes Here</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head>
<body>
... body text and more XHTML tags go here ... </body> </html>
12
How HTML5 Documents Are Structured
XHTML documents are comprised of a simple three-part framework:

1. 2. 3.
Document prolog Header section Body of document.

Document prolog declarations
<!DOCTYPE html> <head> <title Strict XHTML Document </title> </head>
Header information
<body>  </body>
Open and close <body> tags, between which the main body of the document is contained
</html>
13
TREE DIAGRAM
14
HEAD & BODY SECTIONS

Head Section
Contains information that describes the Web page document

<head> head section info goes here </head>
Body Section
Contains text and elements that display in the Web page document
<body> body section info goes here </body>
15
THE <HEAD> ELEMENT

Child elements <base> <link> <meta> <script> <style> <title>
16
TITLE ELEMENT META ELEMENT
17
THE HEADING ELEMENT
<h1>Heading Level 1</h1> <h2>Heading Level 2</h2> <h3>Heading Level 3</h3> <h4>Heading Level 4</h4> <h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
18
PARAGRAPH ELEMENT
Paragraph element
<p> paragraph goes here </p>

Groups sentences and sections of
text together.
Configures a blank line above and
below the paragraph
19
EMPTY ELEMENTS
Empty elements are used primarily to describe pieces of data that do not
contain any content.
For example, some common empty elements in HTML5 are:
<br> for line break <img> for image <p> for paragraph
In XML and HTML5, all elements must have a start tag and end tag. The XML specification provides a shortcut for writing an empty element
using a single tag. This is shown below: <br /> for line break <img /> for image <p /> for paragraph
20
NON-BREAKING SPACE
You can just type a blank space in text, of course, but
browsers will usually collapse any series of spaces into one space Most browsers will render a series of non-breaking spaces in the way intended This is an example of (discouraged) physical formatting
21
LOGICAL STYLE
Description:
Used to render preformatted text Comments: Start Tag: Required End Tag: Required Self-Closing Tag: Forbidden Example: <pre>Preformatted text!</pre> <code><br /></code> Works well for showing poetry, programming code, etc, where line breaks and
indentations must be preserved
22
ATTRIBUTE S
HTML5 attributes are pieces of information that help to
describe elements. Some elements have required attributes, others are optional following syntax:
Attributes are referred to as name-value pairs and have the
name = value
Here are a few examples:
<a href=http://clark.com>Click here</a>

<img src=/images/pictures.gif id=Picture of House />
23
THE TITLE ATTRIBUTE

Displays a tooltip when you hover the mouse over an XHTML element.
No spaces.
Example
<p title=skin>It has long been known that there is more
than one way to skin a cat, but experts have debated just how many ways there are. The latest research from the Johns Hopkins School of Forensic Vetrinary Medicine indicates that there are exactly three ways to skin a cat. The first way is A. The second way is B. The third way is C. If you learn all three approaches, you will always be prepared to skin any cat you encounter.</p>
24
BLOCKQUOTE ELEMENT
Blockquote element
Indents a block of text for special emphasis
<blockquote> text goes here </blockquote>

Use the <blockquote> element for long quotations,
the <q> element for short ones
25
PHRASE ELEMENTS
Indicate the context and meaning of the text
Element Example
bold text emphasized text italicized text mark text
small text
Usage
<b> <em> <i> <mark> <small> <strong> <sub> <sup>

26
strong text text text
sub sup
Text that has no extra importance but is styled in bold font by usage and convention Causes text to be emphasized in relation to other text; usually displayed in italics Text that has no extra importance but is styled in italics by usage and convention Text that is highlighted in order to be easily referenced (HTML5 only) Legal disclaimers and notices (fine print) displayed in small font-size Strong importance; causes text to stand out from surrounding text; usually displayed in bold Displays a subscript as small text below the baseline Displays a superscript as small text above the baseline
HTML5 COMMENTS
Comment does not appear on your web page You can use it for personal reminders or notes to
the people you're working with Visible to anyone who views your source code Do not include any embedded XHTML code in commented text because the results are unpredictable 
27
ACCESSIBILITY AND TABLES

Tables are frequently used to organize data into rows and
columns. The table element defines an HTML5 table Use table header elements (<th> tags) to indicate column or row headings. Use the caption element to provide a text title or caption for the table. Complex tables: Associate table cell values with their corresponding headers <th> tag id attribute <td> tag headers attribute
28
TABLES
A table can be split into three distinct sections: Head Table titles Column headers Body
Primary table data

Table Foot Calculation results Footnotes Above body section in the code, but displays at the bottom in the
page
29
TABLES
tr Element Defines individual table rows Element th Defines a header cell Td Element Contains table data elements
30
COMMON TABLE ATTRIBUTES

align (obsolete) bgcolor (obsolete) border (obsolete) cellpadding (obsolete) cellspacing (obsolete) summary (obsolete but may be reinstated) width (obsolete) Use CSS to configure table characteristics
instead of HTML attributes
31
COMMON TABLE CELL ATTRIBUTES

align (obsolete)
bgcolor (obsolete) colspan rowspan valign height (deprecated) width (deprecated)
32
TABLES ROWSPAN & COLSPAN

You can merge data cells with the rowspan and colspan attributes The values of these attributes specify the number of rows or columns
occupied by the cell. Can be placed inside any data cell or table header cell.
<table border="1"> <tr> b <td colspan=2> Birthday List</td> </tr> <tr> <td>James</td> <td>11/08</td> </tr> <tr> <td>Karen</td> <td>4/17</td> </tr> </table>
33
CREATE THE FOLLOWING TABLE
34
HTML5 LISTS
Unordered List Ordered List Description List
formerly called a definition list
35
UNORDERED LIST
Displays a bullet, or list marker, before each entry
in the list.
<ul>
Contains the unordered list type attribute determines the type of bullet point default type is disc (but depends on the browser)
<li>
Contains an item in the list
36
UNORDERED LIST EXAMPLE
37
ORDERED LIST
Displays a numbering or lettering system to itemize
the information contained in the list <ol>
Contains the ordered list type attribute determines numbering scheme of list, default is numerals
<li>
Contains an item in the list
38
ORDERED LIST EXAMPLE
39
NESTING TAGS
What if you need to make text bold and italic?
<b><i>My bold and italic text.</i></b> <i><b>My bold and italic text.</b></i>
<b><i>My bold and italic text.</b></i>
40
DESCRIPTION LIST
Useful to display a list of terms and descriptions or a
list of FAQ and answers

<dl> Contains the description list
<dt> Contains a term/phrase/sentence Configures empty space above and below the text <dd> Contains a description of the term/phrase/sentence
Indents the text Configures empty space above and below the text
41
DESCRIPTION LIST EXAMPLE
42
SPECIAL CHARACTERS
Display special characters such as quotes,
copyright symbol, etc. Character < > &
Code © < > &
43
DIV ELEMENT
Configures a structural block area or
division on a web page with empty space above and below. Can contain other block display elements, including other div elements <div>Home Services Contact</div>
44
ANCHOR ELEMENT
The Anchor element is used to create links to Another Web site Pages within the current Web site A position on a Web site page
<a href="contact.html">Contact Us</a>

href Attribute Indicates the file name or URL
45
THE ANCHOR <A> ELEMENT

The href attribute contains the target URL It can contain an absolute or relative
reference
The id attribute is used to create a
bookmark in a document Also referred to as a named anchor Changed in HTML5 to id from name
46
ABSOLUTE & RELATIVE HYPERLINKS

Absolute link
Link to other websites
<a href=http://classmates.com>Classmates</a>
Relative link
Link to pages on your own site
<a href="index.htm">Home</a>
47
BOOKMARKS
<a> tags are used to create links to a
location within a document Its a two-step process Create an element using the name or id attribute id is understood by newer browsers name is deprecated
48
BOOKMARKS (CREATING THE ANCHOR)

Create the anchor by setting the id attribute
of any tag: <h1 id="top">Message</h1>
49
BOOKMARKS (REFERENCING THE ANCHOR)

Reference the anchor using the <a> tag href contains the bookmarks id preceded by
the # symbol
Example:
<a href="#top">Top</a>
50
RELATIVE REFERENCES (EXAMPLES)

Foo.htm
The file named foo.htm in the current folder Child/foo.htm The file named foo.htm in the folder named Child ../foo.htm The file named foo.htm in the parent folder
51
E-MAIL HYPERLINK
Automatically launch the default mail program
configured for the browser If no browser default is configured, a message is displayed

<a href=mailto:contactus@hotmail.com>
contactus@hotmail.com </a>
52
Validating An HTML5 Document

While there are many free and commercial programs
available, one of the simplest ways to check if your XHTML documents are well-formed and valid is to use the free on-line validating tool from the W3C Web site. It can check your document either from your computer or from a website.
The W3C markup validation service is available at:
http://validator.w3.org
53
54
CHECKPOINT
Describe the difference between ordered lists and unordered lists. 2. Describe some of the main features of HTML5. 3. Describe the purpose of special characters. 4. Describe when to use an absolute link. Is the http protocol used in the href value? 5. Describe when to use a relative link. Is the http protocol used in the href value? 6. Describe the importance of bookmarks in a web page.
1.
55

Interface Design and Web Development: Week 3

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Interface Design and Web Development: Week 3

Transféré par

Droits d'auteur :

Formats disponibles

INTERFACE DESIGN AND WEB DEVELOPMENT

The World Wide Web Consortium

an opening tag and a closing tag.

the elements and attributes of HTML

DIFFERENCES BETWEEN HTML AND XHTML

language. An XML document must be well-formed.

Close stand-alone tag with special syntax <hr />

CREATING YOUR WEB PAGES

(Internet Explorer, Chrome)

A Web server on which to store your files and make

them available for viewing (www.5gbfree.com)

Document Type Definition (DTD)

in your document. placed at the top of a web page document

EXAMPLE XHTML WEB PAGE

How HTML5 Documents Are Structured

XHTML documents are comprised of a simple three-part framework:

Document prolog Header section Body of document.

<!DOCTYPE html> <head> <title Strict XHTML Document </title> </head>

<body>  </body>

HEAD & BODY SECTIONS

Contains information that describes the Web page document

THE <HEAD> ELEMENT

TITLE ELEMENT META ELEMENT

THE HEADING ELEMENT

<h6>Heading Level 6</h6>

<p> paragraph goes here </p>

Configures a blank line above and

below the paragraph

contain any content.

For example, some common empty elements in HTML5 are:

indentations must be preserved

Attributes are referred to as name-value pairs and have the

<a href=http://clark.com>Click here</a>

THE TITLE ATTRIBUTE

<blockquote> text goes here </blockquote>

the <q> element for short ones

<b> <em> <i> <mark> <small> <strong> <sub> <sup>

strong text text text

ACCESSIBILITY AND TABLES

Primary table data

COMMON TABLE ATTRIBUTES

instead of HTML attributes

COMMON TABLE CELL ATTRIBUTES

TABLES ROWSPAN & COLSPAN

CREATE THE FOLLOWING TABLE

Contains an item in the list

UNORDERED LIST EXAMPLE

the information contained in the list <ol>

Contains an item in the list

ORDERED LIST EXAMPLE

<b><i>My bold and italic text.</b></i>

list of FAQ and answers

DESCRIPTION LIST EXAMPLE

copyright symbol, etc. Character < > &

Code &copy; &lt; &gt; &amp; &nbsp;

<a href="contact.html">Contact Us</a>

THE ANCHOR <A> ELEMENT

ABSOLUTE & RELATIVE HYPERLINKS

BOOKMARKS (CREATING THE ANCHOR)

of any tag: <h1 id="top">Message</h1>

BOOKMARKS (REFERENCING THE ANCHOR)

RELATIVE REFERENCES (EXAMPLES)

configured for the browser If no browser default is configured, a message is displayed

Code © < > &