Understanding the Web Design Environment. Principles of Web Design, Third Edition

Size: px

Start display at page:

Download "Understanding the Web Design Environment. Principles of Web Design, Third Edition"

Lee Beasley
6 years ago
Views:

1 Understanding the Web Design Environment Principles of Web Design, Third Edition

2 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 Web has outgrown the capabilities of HTML Principles of Web Design, Third Edition 2

3 The Limitations of HTML 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 Principles of Web Design, Third Edition 3

4 The Limitations of HTML HTML is an open, non-proprietary, crossplatform 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 Principles of Web Design, Third Edition 4

5 The Need for Style Sheets Style sheets let you separate display information from content Separating display information lets you repurpose your content for multiple destinations Principles of Web Design, Third Edition 5

6 Principles of Web Design, Third Edition 6

7 The Need for Style Sheets 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 CSS lets you easily control the display characteristics of your Web site Newer browsers offer more complete CSS support Principles of Web Design, Third Edition 7

8 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 Principles of Web Design, Third Edition 8

9 XHTML Syntax Rules 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 Attribute values must be quoted Principles of Web Design, Third Edition 9

10 Migrating from HTML to XHTML Evaluate existing code Evaluate existing display information Create coding conventions Start using CSS Test for backward compatibility Principles of Web Design, Third Edition 10

11 Choosing 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 Principles of Web Design, Third Edition 11

12 Choosing 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 available Principles of Web Design, Third Edition 12

13 Variables in the Web Design Environment Browser compatibility Connection speed Screen resolution Operating system Principles of Web Design, Third Edition 13

14 Browser Compatibility Issues 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 Principles of Web Design, Third Edition 14

15 Principles of Web Design, Third Edition 15

16 Browser Compatibility Issues 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 Principles of Web Design, Third Edition 16

17 Creating Cross-Browser Compatible Pages 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 Principles of Web Design, Third Edition 17

18 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 Principles of Web Design, Third Edition 18

19 Considering Connection Speed Differences It will still be awhile before most computer users have fast access to the Web Less than 20% of American households have access to cable modems Only 5-10% of all households have access to Digital Subscriber Line (DSL) Principles of Web Design, Third Edition 19

20 Principles of Web Design, Third Edition 20

21 Bandwidth Concerns If your pages download slowly, your users will probably click to go 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 influence the speed at which your pages display Principles of Web Design, Third Edition 21

22 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 greatest download times. Clear your cache of the files and images that the browser has stored Principles of Web Design, Third Edition 22

23 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, Third Edition 23

24 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 two most common screen resolutions (traditionally expressed as width x height) are 800 x 600 and 1024 x 768 User screen resolution is a factor over which you have no control Principles of Web Design, Third Edition 24

25 Fixed Design As the screen resolution changes, the content remains aligned to the left side of the page Principles of Web Design, Third Edition 25

26 Principles of Web Design, Third Edition 26

27 Principles of Web Design, Third Edition 27

28 Flexible Design As the screen resolution changes, the content expands to accommodate the varying screen width Principles of Web Design, Third Edition 28

29 Principles of Web Design, Third Edition 29

30 Principles of Web Design, Third Edition 30

31 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, Third Edition 31

32 Principles of Web Design, Third Edition 32

33 Principles of Web Design, Third Edition 33

34 Operating System Issues Monitors and display software Browser versions Font choices Principles of Web Design, Third Edition 34

35 Summary Use Cascading Style Sheets Decide whether to code to the XHTML standard. 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 Decide how browser-specific your site will be. Your goal is to create a site that is widely accessible to multiple browsers. Principles of Web Design, Third Edition 35

36 Summary 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, Third Edition 36

HTML. Mohammed Alhessi M.Sc. Geomatics Engineering. Internet GIS Technologies كلية اآلداب - قسم الجغرافيا نظم المعلومات الجغرافية

HTML. Mohammed Alhessi M.Sc. Geomatics Engineering. Internet GIS Technologies كلية اآلداب - قسم الجغرافيا نظم المعلومات الجغرافية HTML Mohammed Alhessi M.Sc. Geomatics Engineering Wednesday, February 18, 2015 Eng. Mohammed Alhessi 1 W3Schools Main Reference: http://www.w3schools.com/ 2 What is HTML? HTML is a markup language for