3. Web Design Basics

Transcript 3. Web Design Basics

Introducing HTML & XHTML:
WEB DESIGN BASICS
Goals
 Understand hyperlinking
 Understand how tags are formed and used.
 Understand HTML as a markup language
 Understand the role of the W3C
 Understand top browsers
 Understand how XHTML evolved.
 Understand how XML/XHTML differ from
HTML
The World Wide Web
 Accessing cross-referenced documents, known
as hypertext linking, is probably the most
important aspect of the Web because it allows
you to quickly open other Web pages
 A hypertext link, or hyperlink, contains a
reference to a specific Web page that you can
click to quickly open that Web page
 A document on the Web is called a webpage,
identified by a unique address called the
Uniform Resource Locator, or URL
 URL commonly referred to as a Web address
The World Wide Web
 A URL is a type of Uniform Resource
Identifier (URI), which is a generic term for
many types of names and addresses on the
World Wide Web.
 A Web site refers to the location on the
Internet of the Web pages and related files
(such as graphic files) that belong to a
company, organization, or individual
HTML Documents
 Originally, people created Web pages using
Hypertext Markup Language
 Hypertext Markup Language (HTML) is a
simple language used to create the Web
pages that appear on the World Wide Web.
 A markup language is a set of characters or
symbols that define a document’s logical
structure or how a document should be
printed or displayed
HTML Documents
 HTML is based on an older language called
Standard Generalized Markup Language,
or SGML, which defines the data in a
document independently of how the data will
be displayed.
 A target output format refers to the medium
in which a document will be displayed, such
as a Web page or an online help system
Basic HTML Syntax
 HTML documents are text documents that
contain:
 formatting instructions, called tags
 the text that is to be displayed on a webpage.
 HTML tags range from formatting commands
to controls that allow user input
 Tags are enclosed in brackets (< >), and
most consist of a starting tag and an ending
tag that surround the text or other items they
are formatting or controlling
Common Structure and Formatting
HTML Tags
Basic HTML Syntax
 All HTML documents begin with <html> and
end with </html>
 Two other important HTML tags are the
<head> tag and the <body> tag
 The <head> tag contains information that is
used by the Web browser, and you place it at
the start of an HTML document, after the
opening <html> tag
Basic HTML Syntax
 The <head> tag pair and the tags it
contains are referred to as the document
head
 Following the document head is the
<body> tag, which contains the document
body
Basic HTML Syntax
 The <body> tag pair and the text and tags it
contains are referred to as the document
body
 A Web browser’s process of assembling and
formatting an HTML document is called
parsing or rendering
 You use various parameters, called
attributes, to configure many HTML tags
 You place an attribute before the closing
bracket of the starting tag, and separate it
from the tag name or other attributes with a
space
Basic HTML Syntax
1. Open a text document and name it index.txt
2. Save it in the main directory of your website
3. Open a browser in minimize mode, so you can see both browser and
the text document.
4. Edit text document.
5. When complete, rename to index,html and drag document into
browser.
Web Page Design and Authoring
 Webpage design, or Web design, refers
to the visual design and creation of the
documents that appear on the World Wide
Web
 Webpage authoring refers to the creation
and assembly of the tags, attributes, and
data that make up a Web page
The W3C
 Web page authors began to find it necessary
to write slightly different HTML code for each
Web browser in which they anticipated their
Web page would be opened
 The W3C does not release a version of a
particular technology. Instead, it issues a
formal recommendation for a technology,
which essentially means that the technology
is (or will be) a recognized industry standard
Web Browsers
 Internet Explorer only is used by 36% of
users defined by w3schools.com
 http://www.w3schools.com/browsers/browsers_stats.asp
 Three additional browsers that are worth
noting are:




Firefox (http://www.mozilla.com/en-US/firefox/) 47.4%
Safari (http://www.apple.com/safari/) 3.3%
Chrome (http://www.google.com/chrome) 7.0%
Opera (http://www.opera.com) 2.1%
 You should test your webpage in every
browser and browser version in which you
anticipate they will be opened.
HTML to XHTML
The differences and how to implement.
The Evolution to XHTML
 The Web is expanding to other media,
called user agents, which are devices
that are capable of retrieving and
processing HTML and XHTML documents
 A user agent can be a traditional Web
browser or a device such as a mobile
phone or PDA, or even an application that
simply collects and processes data
instead of displaying it
 HTML is not suitable for user agents other
than Web browsers
The Evolution of XHTML
 HTML has evolved into a markup language that is
more concerned with how data appears than with the
data itself
 Current and older versions of Web browsers allow
you to write sloppy HTML code without effecting the
page.
 Languages based on SGML use a Document Type
Definition, or DTD, to define the tags and attributes
that you can use in a document, and the rules the
document must follow when it includes them
The Evolution of XHTML
 When a document conforms to an
associated DTD, it is said to be valid
 When a document does not conform to
an associated DTD, it is said to be
invalid
 You can check whether a document
conforms to an associated DTD by
using a program called a validating
parser
The Evolution of XHTML
 Because HTML is based on SGML, it
requires a DTD, and the HTML DTD is
built directly into Web browsers
 When a Web browser opens an HTML
document, it first compares the document
to the DTD
 If an HTML document is missing any
required tags, the HTML DTD supplies
them, allowing the Web browser to render
the page correctly
The Basics of XML
 In XHTML you refer to a tag pair and the
data it contains as an element
 All elements must have an opening and a
closing tag
 The data contained within an element’s
opening and closing tags is referred to as
its content
The XHTML Declaration
 XHTML documents should begin with an
XML declaration
 The encoding attribute of the XML
declaration designates the language used
by the XML document
 It’s a good practice to always include the
XML declaration because XML will almost
certainly evolve into other versions that
will contain features not found in current
version.
Writing Well-Formed Documents
 Well-formed XHTML documents allow
user agents to read the document’s data
easily
 User agents expect XML data to be
structured according to specific rules,
which allows the user agent to read data
quickly without having to decipher the data
structure
All XHTML Documents Must Have
a Root Element
 A root element contains all the other
elements in a document.
 The <html>…</html> element is the
root element for HTML documents,
although most Web browsers do not
require a document to include it.
 XML documents, however, require a root
element that you define yourself
XHTML is Case Sensitive
 Unlike HTML tags, XML tags are case
sensitive
 With XML, you cannot mix the case of
elements
 If you use a different case for an opening
and closing tag, they will be treated as
completely separate tags, resulting in a
document that is not well formed
All XHTML Elements Must Have
Closing Tags
 XML is designed to organize data, not
display it.
 As a result, instead of documents
consisting of text that contains elements,
as is the case with HTML, XHTML
documents consist of elements that
contain text.
 All elements must have a closing tag or
the document will not be well formed.
XML Elements Must Be Properly
Nested
 Nesting refers to how elements are placed inside
other elements – What is wrong with this
example?

This paragraph is bold
and italicized.

 In an HTML document, it makes no difference
how the elements are nested.
 XHTML documents require that tags be closed in
the opposite order in which they were opened.
Attribute Values Must Appear
Within Quotation Marks
 In HTML, an attribute value can be placed
inside quotation marks or they may be left
off.
 With XML, you must place quotation
marks around the values assigned to an
attribute
Empty Elements Must Be Closed
 Several elements in HTML do not have corresponding
ending tags, including the <hr> element, which inserts
a horizontal rule into the document, and the 
element, which inserts a line break.
 Elements that do not require an ending tag are called
empty elements because you cannot use them as a
tag pair to enclose text or other elements.
 You can create an empty element in an XML document
by adding a single slash (/) before the tag’s closing
bracket to close the element
 Most often, you use an empty element for an element
that does not require content, such as an image.
Combining XML and HTML
 Although XML was designed primarily to define
data, this does not mean that you cannot use it
to create Web pages.
 To make the transition to XML-based Web pages
easier, the W3C combined XML and HTML to
create Extensible Hypertext Markup
Language (XHTML)
 Combination of XML and HTML that is used to
author Web pages
 XHTML is almost identical to HTML, except that
it uses strict XML syntax to describe the parts of
a document
Questions?

3. Web Design Basics

Transcript 3. Web Design Basics

Directory