Now let's consider HTML theory
Web standards
What are standards?
The Internet is built on a set of rules that are developed and agreed by a cooperative effort
and overseen by some internationally accepted standards organization.
These technical and behavioral rules define standards
which allow applications built to be used on the internet to work with the components of the internet.
In some cases standards are absolutely mandatory if the application is to work
(think TCP/IP);
in others standards are a good idea that can make applications more efficient, less costly, and forward compatible.
It is good to know what the standards are
... so that we can
know when and why we might have to deviate from them.
[top]
Advantages of standards
Current standards may not yet be mandatory,
but knowing what they are and starting to use them will be helpful in the long run.
- At a minimum, your use of standards will allow your work to be accessible to the widest possible audience.
-
Future standards will be built on current standards,
so abiding by current standards will ensure that your work will be compatible with the future changes.
-
Building your work in conformance with standards will ensure that your work is easier to use
when you engage in collaborative or cooperative work.
If everyone uses the same understood protocols,
everyone can work more smoothly.
-
Finally, adherence to standards makes for more efficient sites,
sites that are faster and easier to download.
Remember, if you want to catch the user's attention,
you have to be quick.
Standards help make you quick.
[top]
Current standards
structural layer
- defining what an object means on a page
(another view of the layers)
- SGML - the start of it all
-
XHTML 1.0
- HTML 4.01 rewritten according to the stricter syntax rules of XML
-
XHTML 1.1
- module-based XHTML; does away with deprecated and legacy elements
-
HTML5
is the next major revision of the HTML standard, currently under development
-
XML 1.0
- a set of rules for creating new markup languages
presentation layer
- defining what an object looks like on a page
-
Cascading Style Sheets (CSS) Level 1
- rules that control the display of text, margins, and borders
-
CSS Level 2.1
- rules that control the absolute positioning of web page elements.
Not yet fully implemented and current browsers provide inconsistent support for it
-
CSS Level 3
- still in development, it is designed to define rules for future modular development
[top]
What does that mean for us?
It means we will attempt to keep structure and presentation separate.
For today, we will concentrate on structure by concentrating on HTML.
[top]
HTML overview
-
It's a collection of codes, embedded in a document,
that explain the meaning or desired formatting of the marked text
-
It's a way of describing, using instructions buried in the document,
what the document is supposed to look like
-
Every electronic text processing tool uses some kind of markup language,
though you may not necessarily be able to see the commands
[top]
HTML The Hyper
Text
Markup
Language
is simply one of
many markup languages,
but there are some key differences:
[top]
Elements are marked by start and end tags.
For instance,
these tags
tell the content of the element how to display.
-
<strong>content</strong>
tells the browser to show the word "content" as bold, or
content
For another instance,
these tags
tell the content of the element how to display.
-
<em>content</em>
tells the browser to show the word "content" as italicized, or
content
Attributes and values of tags
Some elements can take
attributes
that define the properties of the element
and values such as centering a Heading 4.
-
<h4
style="text-align:center;">centering a Heading 4</h4>
tells the browser to show the words "centering a Heading 4" in Heading 4 style and centered, or
centering a Heading 4
They follow rules about nesting and placement.
In general, both sides of the content must be balanced and consistent.
-
<p><h4
style="text-align:center;">the marked-up content</h4></p>
tells the browser to
open paragraph
open heading 4
in a style in which the text is displayed in the center of the line
the marked-up content
close heading 4
close paragraph
in mirrored order
or, as it will display
the marked-up content
[top]
HyperText Document structure
in your text ⇒ Starting your web page, pp. 43-45
-
The <!DOCTYPE> declaration must be the very first thing in your HTML document,
before the <html> tag.
The <!DOCTYPE> declaration is not an HTML tag;
it is an instruction to the web browser about what version of HTML the page is written in.
-
<html>
the outermost element, indicates that the enclosed text
is html and therefore must use an html-capable program
to open it
-
<head>
the first element inside <html> is the HEAD
-
a container for information about the
document; this is where one might place
meta-information about the document as well as
the <title>page
title</title>
-
remember, balanced and consistent; one must
close the HEAD, </head>
-
<body>
the BODY element contains all the text and other
material that is to be displayed
-
and, of course, the document is balanced as
it is closed, </body>
- and consistent, as HTML is closed as well - </html>
in your text ⇒ Creating a title, pp. 46-47
So the structure should look like
<!DOCTYPE html version>
<!-- this is a comment; the html version should be specified -->
<html>
<head>
<title>page
title</title>
</head>
<body>
<p>a
paragraph in the body of the page</p>
<!-- this is a comment -->
</body>
</html>
Although we can get away without putting end tags on elements (because
many browsers are lax about it), we will adopt the habit of
always
closing any tag we open so that we are
compliant with current and future standards.
[top]
Getting started with HTML
We'll sort of follow
this W3C intro, doing the things he recommends as we go.
You may, if you wish, use his guidance to create your own
good code for your own new pages
[top]