Web Design Technologies

observancecookieSecurity

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

95 views


Chapter 1

XHTML: Part I




The Web Warrior Guide to
Web Design Technologies


Objectives

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
1993.


Latest version of HTML is 4.01, released in
1999.


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:
www.course.com


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
located.

Introduction to HTML


Web browsers request pages from the Web
server.


Assembling and formatting HTML documents
is called
parsing

or
rendering
.


HTML documents contain tags which are
enclosed in brackets.


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


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

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
rule).


HTML tags are divided into structural tags
and formatting tags.

Introduction to HTML

<body>
</body>

Encloses the body of the
HTML document

<br>

Inserts a line break

<html>
</html>

Required tags that start and
end an HTML document

<p> </p>

Identifies enclosed text as a
paragraph

Common structural and
formatting tags:

Introduction to HTML

The general form of an HTML document is as follows:

<html>


<head>



<title>title goes here</title>


</head>


<body>



The body of the document goes here


</body>

</html>


Introduction to HTML


Attributes

are used to configure HTML tags.


The
src

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
XHTML.


<!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
document.


XHTML Document Type
Definition (DTDs)


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


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
standards.


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

<!DOCTYPE html PUBLIC


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

XHTML Document Type
Definition (DTDs)



http://www/w3.org/TR/xhtml1/DTD/xhtml1
-
transitional.dtd
”>



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

<!DOCTYPE html PUBLIC

XHTML Document Type
Definition (DTDs)




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


“http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
frameset.dtd”>


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

<!DOCTYPE html PUBLIC

XHTML Document Type
Definition (DTDs)




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


“http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
strict.dtd”>

XHTML Elements and
Attributes


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
Attributes


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


Block
-
level elements: give the Web page its
structure.


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

XHTML Elements and
Attributes


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
Attributes


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


Headings


Paragraphs and line breaks


Horizontal rule

Headings:


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

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
importance.

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.


Anchor

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
</a>

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
page.

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
id

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


A
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:



http://validator.w3.org


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

Summary


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.

Summary


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


There are two types of elements: block
-
level
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.

Summary


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.