Web Programming– UFCFB3-30-1 Lecture 9 Instructor : Mazhar H Malik Email : mazhar@gcet.edu.om Global College of Engineering and Technology
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. 9/18/2018 Lecture 2,5,6
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 9/18/2018 Lecture 2,5,6
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 9/18/2018 Lecture 2,5,6
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 9/18/2018 Lecture 2,5,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 9/18/2018 Lecture 2,5,6
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 9/18/2018 Lecture 2,5,6
9/18/2018 Lecture 2,5,6
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 9/18/2018 Lecture 2,5,6
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 9/18/2018 Lecture 2,5,6
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 9/18/2018 Lecture 2,5,6
Variables in the Web Design Environment Browser compatibility Connection speed Screen resolution Operating system 9/18/2018 Lecture 2,5,6
Browser Compatibility Issues One of the greatest challenges facing HTML authors is designing pages that display properly in multiple browsers 9/18/2018 Lecture 2,5,6
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 9/18/2018 Lecture 2,5,6
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) 9/18/2018 Lecture 2,5,6
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 9/18/2018 Lecture 2,5,6
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. 9/18/2018 Lecture 2,5,6
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 9/18/2018 Lecture 2,5,6
Fixed Design As the screen resolution changes, the content remains aligned to the left side of the page 9/18/2018 Lecture 2,5,6
9/18/2018 Lecture 2,5,6
9/18/2018 Lecture 2,5,6
Flexible Design As the screen resolution changes, the content expands to accommodate the varying screen width 9/18/2018 Lecture 2,5,6
9/18/2018 Lecture 2,5,6
9/18/2018 Lecture 2,5,6
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. 9/18/2018 Lecture 2,5,6
9/18/2018 Lecture 2,5,6
9/18/2018 Lecture 2,5,6
Operating System Issues Monitors and display software Browser versions Font choices 9/18/2018 Lecture 2,5,6
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 http://www.w3schools.com/site/site_validate.asp or http://validator.w3.org/ (both from W3C) are also available 9/18/2018 Lecture 2,5,6
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 9/18/2018 Lecture 2,5,6