XP 1 HTML: The Language of the Web A Web page is a text file written in a language called Hypertext Markup Language. A markup language is a language that describes a document’s structure and content. HTML is not a programming language or a formatting language. Styles are format descriptions written in a separate language from HTML that tell browsers how to render each element. Styles are used to format your document.

XP 2 The History of HTML The first version of HTML was created using the Standard Generalized Markup Language (SGML). In the early years of HTML, Web developers were free to define and modify HTML in whatever ways they thought best. Competing browsers introduced some differences in the language. The changes were called extensions.

XP 3 The History of HTML A group of Web developers, programmers, and authors called the World Wide Web Consortium, or the WC3, created a set of standards or specifications that all browser manufacturers were to follow. The WC3 has no enforcement power. The recommendations of the WC3 are usually followed since a uniform approach to Web page creation is beneficial to everyone.

XP 4 Versions of HTML and XHTML

XP 5 The History of HTML Older features of HTML are often deprecated, or phased out, by the W3C. That does not mean you can’t continue to use them—you may need to use them if you are supporting older browsers. Future Web development is focusing increasingly on two other languages: XML and XHTML. XML (Extensible Markup Language) is a metalanguage like SGML, but without SGML’s complexity and overhead.

XP 6 The History of HTML XHTML (Extensible Hypertext Markup Language) is a stricter version of HTML and is designed to confront some of the problems associated with the different and competing versions of HTML. XHTML is also designed to better integrate HTML with XML. HTML will not become obsolete anytime soon.

XP 7 Guidelines Become well-versed in the history of HTML. Know your market. Test.

XP 8 Tools for Creating HTML Documents Basic text editor like Notepad. HTML Converter - converts formatted text into HTML code.  Can create the source document in a word processor and then convert it.  HTML code created using a converter is often longer and more complicated than it needs to be, resulting in larger-than-necessary files.

XP 9 Tools for Creating HTML Documents HTML Editor – helps you create an HTML file by inserting HTML codes for you as you work.  They can save you a lot of time and help you work more efficiently.  Advantages and limitations similar to those of HTML converters.  Allow you to set up a Web page quickly.  Will usually still have to work with HTML code to create a finished document.

XP 10 Identify Content Needs Required information is identified Grouped into business schemes related to the business structure This becomes:  The information hierarchy (information structure and related links) Content requirements are determined for each process.

XP 11 Plan Information Hierarchy Cluster information in related topics. The hierarchy of pages are identified.  Develop a hierarchy of information and check data to confirm sequence of hierarchy. Content is logical and accessible to customers.  Labels are clear, consistent and coherent and relatively intuitive for users to access.  A consistent and logical labelling system is developed taking into account user demographics.

XP 12 Develop Navigation System Build navigational system for overall website based on business requirements. Navigation should:  be easy to use  provide different ways of searching  provide feedback to users Navigation between pages is consistent and clear. The navigational system should give users the flexibility to find the information/products they want.

XP 13 Site Look Site look is appropriate to business:  Business image  Logo  Colour scheme etc Appropriate to customer requirements:  Age range  Culture  Accessibility Issues

XP 14 Develop Process Flow Develop in a logical and simple manner:  Find product  Put in shopping cart  Continue shopping/buying  Arrange delivery  Make payment

XP 15 Working with Web Site Structures A storyboard is a diagram of a Web site’s structure, showing all the pages in the site and indicating how they are linked together. It is important to storyboard your Web site before you start creating your pages in order to determine which structure works best for the type of information the site contains. A well-designed structure can ensure that users will be able to navigate the site without getting lost or missing important information.

XP 16 Working with Web Site Structures The three chemistry pages

XP 17 Linear Structures In a linear structure, each page is linked with the pages that follow and precede it in an ordered chain. Linear structure works best for Web pages with a clearly defined order. In an augmented linear structure, each page contains an additional link back to an opening page.

XP 18 Linear Structures A linear structure An augmented linear structure

XP 19 Hierarchical Structures In the hierarchical structure, the pages are linked going from the most general page down to more specific pages. Users can easily move from general to specific and back again. Within this structure, a user can move quickly to a specific scene within the page, bypassing the need to move through each scene in the play.

XP 20 Hierarchical Structures

XP 21 Mixed Structures As Web sites become larger and more complex, you often need to use a combination of several different structures. The overall form can be hierarchical, allowing the user to move from general to specific; however, the links also allow users to move through the site in a linear fashion.

XP 22 Mixed Structures

XP 23 Working with Web Site Structures A little foresight can go a long way toward making your Web site easier to use. Each page should contain, at minimum, a link to the site’s home page, or to the relevant main topic page, if applicable. You may want to supply your users with a site index which is a page containing an outline of the entire site and its contents.

XP 24 Creating an HTML Document It is a good idea to plan out a Web page before you start coding. Draw a planning sketch or create a sample document using a word processor.  This is called Storyboarding Preparatory work can weed out errors or point to potential problems.

XP 25 Creating an HTML Document

XP 26 Creating an HTML Document In planning, identify a document’s different elements. An element is a distinct object in the document, like a paragraph, a heading, or a page’s title. Formatting features such as boldfaced font, and italicized text may be used.

XP 27 Displaying an HTML File As you work on a Web page, you should occasionally view it with your Web browser to verify that the file contains no syntax errors or other problems. You may want to view the results using different browsers to check for compatibility.

XP 28 Elements Tested Test against customer needs:  Search engine key words appropriate  Site map easy to find and use  FAQ section relevant  Content of news sections appropriate  Business critical aspects easily recognised and accessed  Logins, forms, shopping carts etc.  Accessibility issues addressed

XP 29 Design Documentation User analysis documentation Strategic Brief Technical Brief Functional Brief  Functional Spec  Engineering Spec Creative Brief  Creative Spec  Storyboard  Wireframe Content Plan Technical Spec Markup and Layout Spec