html standards & compliance

32
1 HTML Standards & Compliance

Upload: serina-stephenson

Post on 31-Dec-2015

17 views

Category:

Documents


0 download

DESCRIPTION

HTML Standards & Compliance. Minimum Required HTML tags: (must go in this order!). HTML document - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: HTML  Standards & Compliance

1

HTML

Standards & Compliance

Page 2: HTML  Standards & Compliance

2

Minimum Required HTML tags:

<html>

<head>

<title>

</title>

</head>

<body>

</body>

</html>

(must go in this order!)

Page 3: HTML  Standards & Compliance

3

HTML document

• An HTML document can be created in any plain text editor like TextEdit on a Mac or Notepad on a PC and saved as anyname.html or anyname.htm

• .html file extension is preferred

• Most HTML tags have opening and closing tags

• Any extra lines or extra character spacing will be ignored

Page 4: HTML  Standards & Compliance

4

HTML tags

• Tags can be nested

<p><em> hello</em></p>

but must be nested in the correct order

• Tags were case insensitive (upper, lower or mixed) although the newer standards of XHTML now require all lower case (except in the DTD)

Page 5: HTML  Standards & Compliance

5

Additional required tags shown in bold required for validation:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"><html>

<head>

<title>

title goes here

</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head>

<body>

<h1>

welcome to my webpage

</h1>

<p>

<img src="http://www.vegas.com/image.jpg" alt="vegas image">

</p>

</body>

</html>

Page 6: HTML  Standards & Compliance

6

Dreamweaver auto adds required code

Authoring tools like Dreamweaver automatically put the required DTD and meta tag based on your preferences and HTML document version you specify when creating a new webpage

Page 7: HTML  Standards & Compliance

7

DTDs defined

• When authoring a document that is HTML or XHTML, it is important to Add a DTD or Doctype declaration

• The declaration must be exact (both in spelling and in case) to be understood

• DTD declaration is often called "Doctype” or “DTD”

DTD example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Page 8: HTML  Standards & Compliance

8

Why DTD is needed?

• Browsers, tools, and devices which process HTML documents, such as Web browsers, need to know which DTD an (X)HTML document is actually using

• This is a critical piece of information needed by browsers or other tools processing the document

• If you hand code your pages make sure to add the DTD

Page 9: HTML  Standards & Compliance

9

Other reasons to specify a doctype?

• Allows you to use tools such as a markup Validator to check the syntax of your (X)HTML (and hence discovers errors that may affect the way your page is rendered by various browsers)

• Such tools and browsers won't be able to work optimally if they do not know what kind of document or what version of HTML you are using

Page 10: HTML  Standards & Compliance

10

And even more reasons to specify a doctype?

• With most families of browsers, a doctype declaration or DTD will make a lot of guessing unnecessary

• Will trigger a "standard" parsing mode, where the understanding (and, as a result, the display) of the document is not only faster, it is also consistent and free of any bad surprise that documents without doctype will create

• Very important for “new” and “future” devices like cell phones which will be displaying web pages

Page 11: HTML  Standards & Compliance

11

Next, are some of the list of recommended declarations that you can use in your Web documents

Refer to the following URL for a list of valid DTD's

http://www.w3.org/QA/2002/04/valid-dtd-list.html#DTD

Page 12: HTML  Standards & Compliance

12

HTML 4.01 - Strict, Transitional, Frameset:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Page 13: HTML  Standards & Compliance

13

XHTML 1.0 - Strict, Transitional, Frameset:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Page 14: HTML  Standards & Compliance

14

XHTML 1.1 - DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Page 15: HTML  Standards & Compliance

15

The most widely used DTD by professional Web designers is

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

We will be using this version of XHTML during our class

When you create a new document in DW File>New make sure

you specify the DocType: XHTML 1.0 Transitional

Page 16: HTML  Standards & Compliance

16

The term “Transitional” in relation to DTD versions

• Means you are allowed to use some of the legacy HTML

• May be hard to know what tags are considered legacy vs obsolete

• Should always validate your page to test for compliance

Page 17: HTML  Standards & Compliance

17

Some argue the most widely supported DTD is 4.01

4.01 is no longer recommended for authoring since it is an old versions of HTML and represents outdated html and pre CSS

Page 18: HTML  Standards & Compliance

18

HTML Deprecated vs Obsolete

• Deprecated means outdated and may soon become obsolete

• Obsolete means it is no longer supported and may not be recognized (by browsers or interpreters)

Page 19: HTML  Standards & Compliance

19

Deprecated

• A deprecated element or attribute is one that has been outdated by newer constructs

• Deprecated elements may become obsolete in future versions of HTML

• User agents (like browsers) should continue to support deprecated elements for reasons of backward compatibility

Page 20: HTML  Standards & Compliance

20

Obsolete

• An obsolete element or attribute is one for which there is no guarantee of support by a user agent

• Obsolete elements are no longer defined in the specification

Page 21: HTML  Standards & Compliance

21

DEPRECATED example

The following HTML page illustrates the use of the deprecated attributes, deprecated in XHTML

It sets the background color of the canvas to white, the text foreground color to black, etc.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD> <TITLE>A study of population dynamics</TITLE></HEAD><BODY bgcolor="white" text="black" link="red" alink="fuchsia" vlink="maroon"> ... document body...</BODY></HTML>

Page 22: HTML  Standards & Compliance

22

CSS Cascading Style Sheets

• In XHTML the presentational attributes of BODY have been deprecated and replaced with CSS

• CSS now the preferred way to specify a document's presentation

<style type="text/css">body {

background-color: black; }

</style>

Page 23: HTML  Standards & Compliance

23

Older Browsers that don't support CSS

• Older browsers, before Netscape 4.0 and Internet Explorer 4.0, either don't support CSS at all or do so inconsistently

• For these browsers you can still control the style by using HTML if absolutely necessary

Page 24: HTML  Standards & Compliance

24

Validating HTML pages

• Webpage's can and should be valididated (tested)

• To further promote the reliability and fidelity of communications on the Web, W3C has a

W3C Markup Validation Service at

http://validator.w3.org

• Dreamweaver also allows you to validate from within its program File>Validate>Markup

Page 25: HTML  Standards & Compliance

25

Benefits to validating

• Web pages will work more consistently and on a wider variety of browsers

• Web pages load faster

• Will be better supported on new devices being used to view web pages

• More accessible to the visually impaired who use aural screen readers (<img> alt and src required for strict)

Page 26: HTML  Standards & Compliance

26

XHTML requirements

• Stricter standards than older HTML

• Legacy HTML has been removed

• To become validated you must have a fully compliant, standardized Web site

• Should always validate your page to test for compliance

Page 27: HTML  Standards & Compliance

27

XHTML requirements

• Start each page with DOCTYPE

• The open <html> should come after the DOCTYPE

• Include both <head> and <body> elements

• Always include a <title> element within <head> element

Page 28: HTML  Standards & Compliance

28

XHTML requirements

• <title>, <meta>, and <style> elements must all be within the <head> element

• Only put <block> elements inside the <body> element

• All inline elements and text need to be inside another block element before they can go in the <body> element

• Only put text and other inline elements within an inline element, no block elements

Page 29: HTML  Standards & Compliance

29

XHTML requirements

• Keep block elements out of your <p> element

• Requires inline elements (like <img>) to be nested inside block elements (like <p>)

• Use paragraphs for inline elements and for text

Page 30: HTML  Standards & Compliance

30

Inline elements must go in block elements

• Inline elements include <q>, <a>, <em>

• Block elements include <p>, <h1>, <h2>, <h3>, etc

• Don’t put block elements inside other block elements or inside inline elements

• Example of a block element containing an inline element

<p><img src="http://www.cnn.com/image.jpg" alt="Image of people waiting for food">

</p>

Page 31: HTML  Standards & Compliance

31

XHTML requirements

• The blockquote element requires one or more block elements inside it

• You can put inline elements and text within a blockquote element but there must be another block element within it

<blockquote><p>Text goes here</p></blockquote>

• But not the block element <blockquote>

Page 32: HTML  Standards & Compliance

32

XHTML requirements

• Empty tags (single tags) must be closed using /

Image

<img src="url" />

Line Break

<br />

-end