Transcript 1 Understanding Web Design Environment

Chapter 1
Understanding the Web
Design Environment
Principles of Web Design, 4th Edition
Objectives
•
•
•
•
•
•
•
Describe the current state of HTML
Move from HTML to XHTML
Use good coding practices
Describe browser compatibility issues
Consider connection speed differences
Code for multiple screen resolutions
Address operating system issues
Principles of Web Design, 4th Edition
1-2
The Current State of HTML
Principles of Web Design, 4th Edition
1-3
HTML: Then and Now
• HTML is an application of the Standard
Generalized Markup Language SGML
• Read about SGML
http://www.isgmlug.org/sgmlhelp/g-sg.htm
• Intended to represent simple document
structure
• Uses hypertext to link related topics
• Designed for use over the Internet
Principles of Web Design, 4th Edition
1-4
HTML and the World Wide Web
Consortium(sets standards for new
web technologies)
• The World Wide Web Consortium
(W3C: www.w3.org)
is the standards organization for the Web
• Founded in 1994 at MIT
• The W3C looks to expand and set standards
for the many new Web technologies like
XHTML, XML, Style sheets.
Principles of Web Design, 4th Edition
1-5
Using HTML for Structure
• HTML is a structured markup language that
lets you identify common sections of a
document (headings, paragraphs, lists) etc.
• The HTML markup tags indicate how the
document sections appear in a browser
• The browser interprets the HTML markup
elements and displays the results, hiding the
actual markup tags from the user
Principles of Web Design, 4th Edition
1-6
Using HTML for Structure
• HTML is an open, nonproprietary, crossplatform compatible language.
• Open:freely available
• Nonproprietary: not protected by trademark
or patent or copyright
• Cross-platform compatible: runs identically on
different operating systems (windows, Mac)
1-7
WYSIWYG
• An acronym for What You See Is What
You Get.
• The term is used in computing to
describe a system in which content
displayed during editing appears very
similar to the final output
Principles of Web Design, 4th Edition
1-8
Using HTML for Structure
• HTML is not a (WYSIWYG) layout tool
• HTML was intended only to express
logical document structure,
Principles of Web Design, 4th Edition
1-9
Here is an HTML Source code
Principles of Web Design, 4th Edition
1-10
Here are HTML results in browser!! Do you see any tags?
Principles of Web Design, 4th Edition
1-11
Online Activity!
• Visit this webpage!
www.w3schools.com/html
• Notice the given HTML code example.
• Try it yourself!
Change the code and see the results
Principles of Web Design, 4th Edition
1-12
Online Activity!
• Visit this webpage!
www.w3schools.com/html
• Learn about the following HTML
elements
HTML
Body
Head
HTML Headings
Paragraph
Links
Line break
Image
Horizontal rule
Table
List
Bold text
1-13
Hands-On Activity
• Create an HTML document that look like this!
My First Web Page
My Second Web Page
Site Title
Developer
Focus
About Myself (hyperlink)
Name
My email (Hyper link)
ICT Subjects
PHOTO
Sec
Cluster
Content
1-14
Using Style Sheets for
Presentation
• Style sheets let you separate display
information from content
• Separating display information lets you
prepare your content for multiple destinations
• The following two style sheet languages are currently available
for use with XML or XHTML:
– Cascading Style Sheets (CSS)
– Extensible Style Language (XSL)
Principles of Web Design, 4th Edition
Example?
1-15
Principles of Web Design, 4th Edition
1-16
Using Style Sheets for
Presentation
• Cascading Style Sheets (CSS) is a powerful
display language for HTML
• CSS lets you state style rules in an external
style sheet that is linked to every page on a
Web site
• Easily control the display characteristics of
your Web site
• Newer browsers support CSS!
Principles of Web Design, 4th Edition
1-17
Online Activity!
• Visit this webpage!
www.w3schools.com/css/demo_default.htm
• Explore the various styles available to
the basic HTML provided for that page.
• Explore the actual CSS coding!
Practice CSS code.
Principles of Web Design, 4th Edition
1-18
Organizing Information with
Hypertext
• Information is linked on the Web using
hypertext, a nonlinear way of organizing
information
• Web users can quickly jump from one related
topic to another
Principles of Web Design, 4th Edition
1-19
Moving from HTML to XHTML
Principles of Web Design, 4th Edition
1-20
But .. Wait!
Lets XML first!
Principles of Web Design, 4th Edition
1-21
A Brief Introduction to XML
• XML has no predefined elements such as
<h1> or <p>
• XML is a metalanguage – a language that
lets you create your own markup elements to
meet your information needs
• XML code looks very similar to HTML code
Principles of Web Design, 4th Edition
1-22
1-23
Benefits of Moving to XHTML
• XHTML is a reformulation of HTML 4.01 in
XML
• Brings data-handling benefits of XML to
HTML
• Style sheets are required
• Stricter syntax rules
• 3 “flavors”: Strict, Transitional, Frameset
• Deprecated elements: the elements that W3C has identified as
obsolete and consequently will not be included in the future
release of HTML.
Principles of Web Design, 4th Edition
1-24
XHTML Syntax Rules
1.
2.
3.
4.
5.
Documents must be well-formed
Elements must nest correctly
XML is case sensitive
End tags are required
Empty elements are signified by a closing
slash
6. Attribute values must be quoted
Principles of Web Design, 4th Edition
1-26
XHTML Syntax Rule 1
• Documents must be well-formed
• A document must follow the coming rules to
be accepted as XHTML document
Principles of Web Design, 4th Edition
1-27
XHTML Syntax Rule 2
• Elements must nest correctly
Principles of Web Design, 4th Edition
1-28
XHTML Syntax Rule 3
• XML is case sensitive
Principles of Web Design, 4th Edition
1-29
XHTML Syntax Rule 4
• End tags are required
Principles of Web Design, 4th Edition
1-30
XHTML Syntax Rule 5
• Empty elements are signified by a closing
slash
Principles of Web Design, 4th Edition
1-31
XHTML Syntax Rule 6
• Attribute values must be quoted
Principles of Web Design, 4th Edition
1-32
Online Activity!
• Visit this page!
www.w3schools.com/xhtml/xhtml_syntax.asp
• Review the rules that was discussed!
1-33
Textbook Activity!
• Hands-On exercise 2 on page 25
• Can you convert HTML to XHTML?
• Correct syntax errors that you may find!
1-34
More Textbook Activities!
• Project Proposal page 29
• Create a one or two-page HTML
• Use Notepad!
1-35
Using Good Coding Practices
Principles of Web Design, 4th Edition
1-36
Stick to the Standards
• Follow the standards set by the World Wide
Web Consortium
• Content that is designed to standards
displays more consistently in multiple
browsers
Principles of Web Design, 4th Edition
1-37
Use Semantic Markup
• Semantic markup
• Semantic markup accurately describes each
piece of content – a <p> signifies a
paragraph, a <blockquote> is for a lengthy
quotation, and so on
Principles of Web Design, 4th Edition
1-38
Choose the Correct Document Type
• When you choose a document type, you are pointing
to a set of rules called Document Type Definition
(DTD)
• DTDs contain all the elements, attributes, and usage
rules for the markup language you are using
• Three document types, or “flavors,” of both HTML
and XHTML are available:
– Strict- does not allow deprecated elements.
– Transitional- most commonly used. allows
obsolete elements from older versions and style
sheets .
– Frameset- required when frames are used to
partition browser window.
•
Choose: HTML transitional for older code , standard use of HTML
X HTML transitional for latest standards, using CSS
Principles of Web Design, 4th Edition
1-39
Principles of Web Design, 4th Edition
1-40
Validate Your Code
• Valid code conforms to the rules of the W3C
• Valid code enhances browser compatibility,
accessibility, and exchange of data
• Use a software program called a validator to
read your code and compare it to the rules in
the DTD
• http://validator.w3.org
Principles of Web Design, 4th Edition
1-41
Validate Your Code
(continued)
• The most common mistakes that make
your code invalid include:
– No doctype declaration
– Missing closing tags, most commonly on
paragraphs
– Missing alt attributes in <img> elements
– Incorrect tag nesting
– Unquoted attributes
Principles of Web Design, 4th Edition
1-42
Browser Compatibility
Guidelines
•
•
•
•
Follow W3C standards
Validate your code
Know your audience
Test your work in multiple browsers
Principles of Web Design, 4th Edition
1-43
Considering Connection Speed
Differences
Principles of Web Design, 4th Edition
1-44
Principles of Web Design, 4th Edition
1-45
Working with the Cache to
Improve Download Time
• The cache is the temporary storage area for
Web pages and images
• The browser always tries to load images and
files from the cache
• Make use of the cache by reusing images as
much as possible
Principles of Web Design, 4th Edition
1-46
Designing for Multiple Screen
Resolutions
Principles of Web Design, 4th Edition
1-47
Coding for Multiple Screen
Resolutions
• A computer monitor’s screen resolution is
the horizontal and vertical width and height of
the computer screen in pixels
• The most common screen resolution
(traditionally expressed as width x height) is
1024 x 768
Principles of Web Design, 4th Edition
1-48
Fixed Design
• As the screen resolution changes, the content
remains aligned to the left side of the page
Principles of Web Design, 4th Edition
1-49
Principles of Web Design, 4th Edition
1-50
Principles of Web Design, 4th Edition
1-51
Flexible Design
• As the screen resolution changes, the content
expands to accommodate the varying screen
width
Principles of Web Design, 4th Edition
1-52
Principles of Web Design, 4th Edition
1-53
Principles of Web Design, 4th Edition
1-54
Centered Design
• As the screen resolution changes, the Web
page stays centered in the browser window,
splitting the remaining space into equal
amounts on the left and right side of the
browser window
Principles of Web Design, 4th Edition
1-55
Principles of Web Design, 4th Edition
1-56
Principles of Web Design, 4th Edition
1-57
Summary
• Use Cascading Style Sheets
• Decide whether to code to the XHTML
standard
• Use good coding practices
• Choose the type of editing tool you will use
to create your code
• Choose the suite of browsers you will use to
test your site
Principles of Web Design, 4th Edition
1-58
Summary (continued)
• Decide how browser-specific your site will be
• Resolve to continually test your work as you
build your site
• Test with multiple browsers, at different
screen resolutions, and at different
connection speeds
• If you can, try to view your site on multiple
platforms such as PC and Macintosh as well
Principles of Web Design, 4th Edition
1-59
Key Terms
• Cascading Style (CSS) is a powerful
style / display language for HTML.
• XHTML: Extensible markup language
XHTML is a reformulation of HTML 4.01
in XML
• HTML: Hyper text Markup language is a
structured markup language that lets
you identify common sections of a
document .
1-60
• Hypertext Markup language: structured
language uses tags . Lets identify sections.
• Metalanguage: Ex XML, allowing to create
new elements.
• Rendering engine: Every browser contains
this that interprets tags in HTML files and
displays it.
• Deprecated element: the elements that W3C
has identified as obsolete and consequently
will not be included in the future release of
HTML.
1-61
• W3c World Wide Web Consortium(sets
standards for new web technologies)
• Semantic language: identifies different
document sections.
• Style sheets: CSS creates style rules
and express them externally in a
separate document known as style
sheet.
1-62