chapter 1 variables in the web design environment
TRANSCRIPT
![Page 1: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/1.jpg)
Chapter 1
Variables in the Web Design Environment
![Page 2: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/2.jpg)
2
Principles of Web Design Chapter 1
Objectives
• Describe the current state and design limitations of HTML
• Learn how XML and XHTML could transform the Web
• Describe how Web browsers affect the way users view your site
• Decide if you should use an HTML editor to create markup code
![Page 3: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/3.jpg)
3
Principles of Web Design Chapter 1
Objectives
• Describe how screen resolution and connection speed affect the user’s browsing experience
• Clear the cache when testing your site
![Page 4: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/4.jpg)
4
Principles of Web Design Chapter 1
HTML: Then and Now
• HTML is an application of the Standard Generalized Markup Language
• Intended to represent simple document structure
• Uses hypertext to link related topics• Designed for use over the internet• The document expression capabilities of
HTML are currently pushed to the limit
![Page 5: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/5.jpg)
5
Principles of Web Design Chapter 1
HTML as a Markup Language
• A markup language is a structured language that lets you identify common sections of a document such as headings, paragraphs, and lists.
• An HTML file includes text and HTML markup elements
• The browser interprets the HTML markup elements and displays the results, hiding the actual markup tags from the user
![Page 6: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/6.jpg)
6
Principles of Web Design Chapter 1
HTML as a Markup Language
• HTML is an open, non-proprietary, cross-platform compatible language
• HTML is not a What You See Is What You Get (WYSIWYG) layout tool.
• HTML was intended only to express logical document structure, not display characteristics
![Page 7: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/7.jpg)
7
Principles of Web Design Chapter 1
Deprecated Elements
• Deprecated elements are elements that the W3C has identified as obsolete. They will not be included in future releases of HTML
• Some examples of these elements are <FONT> and <CENTER>
![Page 8: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/8.jpg)
8
Principles of Web Design Chapter 1
Understanding XML
• XML is the Extensible Markup Language• XML is a meta-language; not a language
itself, but a language that let’s you describe other languages
• XML Describes Data, not Presentation• XML Allows Better Access to Data• XML Lends Itself to Customized Information
![Page 9: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/9.jpg)
9
Principles of Web Design Chapter 1
XHTML: The Future of HTML
• XHTML is the Extensible Hypertext Markup Language
• HTML as an Application of XML• Improved Data Handling• Style Sheets are Required
![Page 10: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/10.jpg)
10
Principles of Web Design Chapter 1
How Browsers Affect Your Work
• One of the greatest challenges facing HTML authors is designing pages that display properly in multiple browsers
• Every browser contains a program called a parser that interprets the markup tags in an HTML file and displays the results in the canvas area of the browser interface
![Page 11: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/11.jpg)
11
Principles of Web Design Chapter 1
![Page 12: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/12.jpg)
12
Principles of Web Design Chapter 1
How Browsers Affect Your Work
• The logic for interpreting the HTML tags is different in every browser, resulting in varying interpretations of the way the HTML file is displayed
• Although it’s a good idea to test with the latest browsers, it’s also prudent to test your work in older browsers as well
![Page 13: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/13.jpg)
13
Principles of Web Design Chapter 1
How Browsers Affect Your Work
• Lowest common denominator coding - use an older version of HTML to ensure portability
• Cutting-edge coding - push the medium forward by coding to the latest standard and using the latest enhancements
• Browser-specific coding - specify a particular brand and version of browser to access the site
![Page 14: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/14.jpg)
14
Principles of Web Design Chapter 1
Solving the Browser Dilemma
• You must test your work in as many browsers as possible during and at the end of the development process to make sure that your pages will render properly
![Page 15: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/15.jpg)
15
Principles of Web Design Chapter 1
Should You Use an HTML Editor?
• You can create or generate HTML code to build Web pages in many ways
• Many sites on the Web are coded using simple text editing tools such as Notepad
• Many different HTML editing programs are now available
![Page 16: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/16.jpg)
16
Principles of Web Design Chapter 1
Should You Use an HTML Editor?
• As with the browsers, authoring packages interpret tags based on their own built-in logic. Therefore, a page that you create in an editing package may look quite different in the editing interface than it does in a browser
• You’ll probably end up working with a combination of tools to create your finished pages
![Page 17: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/17.jpg)
17
Principles of Web Design Chapter 1
Coding for Multiple Resolutions
• A computer monitor’s screen resolution is the horizontal and vertical width and height of the computer screen in pixels
• The three most common screen resolutions (traditionally expressed as width x height) are 640 x 480, 800 x 600, 1024 x768
• User screen resolution is a factor over which you have no control
![Page 18: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/18.jpg)
18
Principles of Web Design Chapter 1
Fixed Resolution Design
• As the screen resolution changes, the content remains aligned to the left side of the page
![Page 19: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/19.jpg)
19
Principles of Web Design Chapter 1
![Page 20: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/20.jpg)
20
Principles of Web Design Chapter 1
![Page 21: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/21.jpg)
21
Principles of Web Design Chapter 1
![Page 22: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/22.jpg)
22
Principles of Web Design Chapter 1
Flexible Resolution Design
• As the screen resolution changes, the content expands to accommodate the varying screen width
![Page 23: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/23.jpg)
23
Principles of Web Design Chapter 1
![Page 24: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/24.jpg)
24
Principles of Web Design Chapter 1
![Page 25: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/25.jpg)
25
Principles of Web Design Chapter 1
![Page 26: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/26.jpg)
26
Principles of Web Design Chapter 1
![Page 27: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/27.jpg)
27
Principles of Web Design Chapter 1
Bandwidth Concerns
• It is a myth that most computer users will soon have fast access to the Web
• Less than 20% of American households have access to cable modems
• Only 5-10% of all the households have access to Digital Subscriber Line (DSL)
![Page 28: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/28.jpg)
28
Principles of Web Design Chapter 1
![Page 29: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/29.jpg)
29
Principles of Web Design Chapter 1
Bandwidth Concerns• If your pages download slowly, your users will
probably click to another site before they see your content
• Most users will simply not wait longer than 20 seconds for a page to load
• The size and number of graphics on your Web pages influences the speed at which your pages display
![Page 30: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/30.jpg)
30
Principles of Web Design Chapter 1
Testing for Download Times• Test your site at different connection speeds• Test your site as if you were a user visiting for
the first time. This is when users experience the longest download times.
• Clear your cache of the files and images that the browser has stored
![Page 31: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/31.jpg)
31
Principles of Web Design Chapter 1
![Page 32: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/32.jpg)
32
Principles of Web Design Chapter 1
![Page 33: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/33.jpg)
33
Principles of Web Design Chapter 1
Summary• Decide which version of HTML you’ll use to
code your pages • Decide whether to use Cascading Style
Sheets • Choose the suite of browsers you will use to
test your site • Decide how browser-specific your site will
be. Your goal is to create a site that is widely accessible to multiple browsers
![Page 34: Chapter 1 Variables in the Web Design Environment](https://reader031.vdocument.in/reader031/viewer/2022031914/56649ddf5503460f94ad8ed4/html5/thumbnails/34.jpg)
34
Principles of Web Design Chapter 1
Summary• Choose the type of editing tool you will use
to create your HTML code• 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