Web Design Technologies


Nov 5, 2013 (4 years and 8 months ago)


Chapter 1


The Web Warrior Guide to
Web Design Technologies


In this chapter, you will:

Learn about HTML and XHTML

Work with XHTML DTDs

Study elements and attributes

Work with basic body elements

Link your Web pages

Validate your Web pages

Introduction to HTML

Hypertext markup language (HTML) is a
language used to design Web pages.

HTML first became an Internet standard in

Latest version of HTML is 4.01, released in

HTML documents are composed of tags.

The file extension for an HTML document is
.html or .htm.

Introduction to HTML

The unique address for an HTML document
is called uniform resource locator (URL).

Example of a URL:

Web pages are displayed using a program
called a Web browser.

Examples of Web browsers: Internet Explorer and
Netscape Navigator.

Web server: the place where Web pages are

Introduction to HTML

Web browsers request pages from the Web

Assembling and formatting HTML documents
is called


HTML documents contain tags which are
enclosed in brackets.

Examples of HTML tags: <b>This will create bold

The opening tag is <b> and the closing tag is

Introduction to HTML

HTML is not case
sensitive. <B> and <b> are
the same tag.

HTML documents begin with <html> and end
with </html>.

Some HTML tags do not require a closing
tag, like <hr> (which represents a horizontal

HTML tags are divided into structural tags
and formatting tags.

Introduction to HTML


Encloses the body of the
HTML document


Inserts a line break


Required tags that start and
end an HTML document

<p> </p>

Identifies enclosed text as a

Common structural and
formatting tags:

Introduction to HTML

The general form of an HTML document is as follows:



<title>title goes here</title>



The body of the document goes here



Introduction to HTML


are used to configure HTML tags.


in the following image tag is an
example of an attribute:

<img src=“myhouse.gif”>

To insert spaces in an HTML document, use
the <p> and <br> tags.

4.01 is the last version of HTML because it
will be replaced by XHTML (extensible
hypertext markup language).

XHTML Document Type
Definition (DTDs)

A well formed document is a document that
conforms to the rules and requirements of

<!DOCTYPE> determines the XHTML DTD
with which the document complies.

DTD (Document Type Definition) defines the
tags and attributes that can be used in a

XHTML Document Type
Definition (DTDs)

Three types of DTDs can be used with
XHTML documents: Transitional, Strict, and

Deprecated elements are elements that are
considered obsolete and they will be
eventually removed from a language.

Examples of deprecated HTML elements:
<applet>, <basefont>, <center>, <dir>, <menu>…

XHTML Document Type
Definition (DTDs)

The World Wide Web Consortium (W3C)
oversees the development of Web technology

A Transitional DTD allows the use of
deprecated style tags in HTML documents:


//W3C//DTD XHTML 1.0 Transitional//EN”

XHTML Document Type
Definition (DTDs)


The Frameset DTD is identical to the
Transitional DTD, except that it includes the
<frameset> and <frame> elements:


XHTML Document Type
Definition (DTDs)

//W3C//DTD XHTML 1.0 Frameset//EN”


The Strict DTD eliminates deprecated
elements in the Transitional DTD and
Frameset DTD:


XHTML Document Type
Definition (DTDs)

//W3C//DTD XHTML 1.0 Strict//EN”


XHTML Elements and

An element is the tag pair and the information
it contains.

Elements that do not include a closing tag are
called empty elements.

Content is the information contained within an
element’s opening and closing tags.

XHTML Elements and

There are two basic types of elements: block
level and inline.

level elements: give the Web page its

Examples of block
level elements: <p>, <h1>,
<h2>, and <h3>

XHTML Elements and

Inline elements: used to describe the text that
appears on a Web page.

Example of inline elements: <b> and <br>.

Standard attributes are attributes that are
available to almost every element.

Examples of standard attributes: class, dir,
xml:lang, and style.

XHTML Elements and

lang and xml:lang designate the language of
the elements.

dir is used with lang. Its values are “ltr” (left to
right) and “rtl” (right to left).

title provides descriptive text for an element.

Basic Body Elements


Paragraphs and line breaks

Horizontal rule


They are block
level elements that are used
for emphasizing a document’s headings and

Basic Body Elements

There are six heading
level elements: <h1>
through <h6>. <h1> is the highest level of
importance, and <h6> is the lowest level of

Paragraphs and Line Breaks:

<p> is used to add a new paragraph.

<br /> is used to add a line break.

Basic Body Elements

Most Web browsers ignore multiple,
contiguous spaces and carriage returns.

Horizontal Rules:

The horizontal rule element, <hr>, draws a
horizontal rule on a Web page that acts as a
section divider.

Linking Web Pages

Hypertext links are text or graphics that the
user can click to open files or to navigate to
other documents on the Web.


is a text or image used to represent a
link on a Web page.

The <a> element is used to create basic
hypertext links:

<a href=“AWebPage.html”> A Web Page

Linking Web Pages

href is the hypertext reference.

Relative URL

specifies the location of a file
according to the location of the currently
loaded Web page.

Absolute URL

refers to a specific drive and
directory or to the full Web address of a Web

Linking Web Pages

The <a> element can be used to create a link
to an external document or to a bookmark
inside the current document.

Any element that includes an

attribute can
be the target of a link.

<h3 id=“cpp”> C++, the language</h3>

Linking Web Pages

To create a link to a bookmark, an id value
should be assigned to an href attribute.

<a href=“#cpp”>Read about C++</a>

Validating Web Pages

validating parser

is a program that checks
whether an XHTML document is well formed
and whether the document conforms to a
specific DTD.

A validator is available on:


English and many Western languages use
the ISO
1 character set.


HTML is a language used to design Web
pages for the World Wide Web.

HTML 4.01 is the last HTML version. HTML
will be replaced by XHTML.

HTML is composed of tags and text that is to
be displayed on a Web page.

Web browser displays a Web page provided
by the Web server.


<!DOCTYPE> determines the XHTML DTD
with which the document complies.

There are two types of elements: block
and inline.

Hypertext links are used to navigate to other
documents on the Web, or to open files.

A relative URL specifies the location of a file
according to the location of the currently
loaded Web page.


An absolute URL refers to a specific
drive and directory or to the full Web
address of a Web page.

Use a validating parser to ensure that
the XHTML document is well formed.