1. Web Programming– UFCFB3-30-1 Lecture 9
Instructor : Mazhar H Malik
Global College of Engineering and Technology
5/5/2019
LO 2,5,6

2. Lecture 9 HTML and XHTML LO 2,5,6
Note – this lecture has fewer slides. This is to allow time for teachers to show examples of web sites relevant to students and examine the use of JavaScript on those pages. Teachers should select suitable pages to meet the interests of students.
5/5/2019
LO 2,5,6

3. Objectives Describe the current state of HTML Move from HTML to XHTML
Understand variables in the Web design environment
Describe browser compatibility issues
Consider connection speed differences
Code for multiple screen resolutions
Address operating system issues
5/5/2019
LO 2,5,6

4. 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
5/5/2019
LO 2,5,6

5. 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
5/5/2019
LO 2,5,6

6. The Limitations of HTML
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
5/5/2019
LO 2,5,6

7. 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
Cascading Style Sheets (CSS) is a powerful display language for HTML
CSS lets you easily control the display characteristics of your Web site
5/5/2019
LO 2,5,6

8. 5/5/2019
LO 2,5,6

9. XHTML XHTML is “next generation” HTML
Eventually the W3C hopes to replace HTML with XHTML
XML eXtensible Markup Language allows the user to define their own markup.
XHTML is combination of HTML and XML.
XHTML requires precision in writing page code; validation is essential
5/5/2019
LO 2,5,6

10. 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 XHTML types: Strict, Transitional, Frameset
5/5/2019
LO 2,5,6

11. 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
5/5/2019
LO 2,5,6

12. Variables in the Web Design Environment
Browser compatibility
Connection speed
Screen resolution
Operating system
5/5/2019
LO 2,5,6

13. Browser Compatibility Issues
One of the greatest challenges facing HTML authors is designing pages that display properly in multiple browsers
5/5/2019
LO 2,5,6

14. 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
5/5/2019
LO 2,5,6

15. 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)
5/5/2019
LO 2,5,6

16. 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
5/5/2019
LO 2,5,6

17. 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.
5/5/2019
LO 2,5,6

18. 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
5/5/2019
LO 2,5,6

19. Fixed Design
As the screen resolution changes, the content remains aligned to the left side of the page
5/5/2019
LO 2,5,6

20. 5/5/2019
LO 2,5,6

21. 5/5/2019
LO 2,5,6

22. Flexible Design
As the screen resolution changes, the content expands to accommodate the varying screen width
5/5/2019
LO 2,5,6

23. 5/5/2019
LO 2,5,6

24. 5/5/2019
LO 2,5,6

25. 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.
5/5/2019
LO 2,5,6

26. 5/5/2019
LO 2,5,6

27. 5/5/2019
LO 2,5,6

28. Operating System Issues
Monitors and display software
Browser versions
Font choices
5/5/2019
LO 2,5,6

29. Validation You should check usability with real people
Validation refers to using a program or an online service to check that the code of a web page is free from errors
Most WYSIWYG programs such as Dreamweaver, FrontPage or Nvu can check your code
Online services such as or (both from W3C) are also available
5/5/2019
LO 2,5,6

30. Summary Decide whether to code to the XHTML standard.
Choose the suite of browsers you will use to test your site
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
5/5/2019
LO 2,5,6