Transcript HTML tags
HTML
Standards & Compliance
1
Minimum Required HTML tags:
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
(must go in this order!)
2
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
3
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)
4
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>
5
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
6
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">
7
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
8
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
9
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
10
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
11
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">
12
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/xhtml1transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
13
XHTML 1.1 - DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
14
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/xhtml1transitional.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
15
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
16
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
17
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)
18
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
19
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
20
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>
21
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>
22
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
23
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
24
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)
25
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
26
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
27
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
28
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
29
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>
30
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>
31
XHTML requirements
•
Empty tags (single tags) must be closed using /
Image
<img src="url" />
Line Break
<br />
-end
32