1. Web Pages: HTML and Hypertext Prepared by: Dalal Oubraim Ilhame Majdi Mounia Khelloufi Mounia Reda

2. Guidelines on web pages Guidelines on Hypertexts Guidelines on Websites

3. Definitions Web page: electronic file that uses special codes call HTML tags containing whatever information you want to provide HTML tags: codes that instruct the web browser (internet explorer, Mozilla Firefox etc.) how to the display the web page (colors, headings etc.)

4. Creation of web pages Every page on the web is created and delivered as a simple text document containing the words that will appear on the web page, as well as instructions for how they should appear. These instructions are written in HTML.

5. Naming web pages Each page on your web site will have a unique web address (URL) based on the name of its corresponding HTML file. Names should end in.html or.htm to allow its identification as an HTML file. Names should not contain spaces (for easy reading use underscore) Names are case-sensitive: be careful when you use upper case and lower case letters.

6. Frames in HTML Frames are one of the features of HTML. They allow the web page to be divided into multiple independent section, scrollable sections. Each scrollable area displayed is a unique HTML document. So, different web pages are actually displayed within one interface

7. Can we use Microsoft world to creat web pages? Avoid software like Microsoft in creating Web pages. → it forces you into certain tagging style you may not want.

8. What is Hypertext? It is one or more documents stored electronically that use devices called «links» The links permit rapid electronic cross- referencing and searching.

9. Brief History of the Hypertext It was first conceived in 1940s by Vannevar Bush It was named by Ted Nelson in 1960s. It started being practiced in 1980s

10. Hypertext Essential Components: Navigation Links Menus and Submeneus Search tools

11. Spot Links Links to information related to the text In case a concept is covered throughout different parts Example

13. Spot Links (Cont…) Disadvantage: distracting  Should be used carefully  Only when necessary  Use Related-Information Section

14. Creating Hypertext 1st Recommendation:  Conduct Audience Analysis: Who is the audience (readers, viewers, consumers…) ? Identify the audience needs - type of information - use of information  Basis of the design process

15. Audience Analysis (Cont…) Examples (From Mike Markel’ website) Glaucoma Foundation’s site Dell

18. Design the Web Site Shallow Site Design

19. Web Site Design (Cont…) Deeper Site Design

20. Web Site Design (Cont…) Typical Page Design

21. Basic Design Principles Use contrast: Legible text Use spatial relationship: Clarity Establish patterns: Consistent Design throughout pages. Use Moderation: Simplicity + Avoiding confusing readers Present a balanced look: visually balanced appearance

22. Test the site Using different browsers Using different screen sizes Using different computers  Example of a page that was not tested

24. Thank you for you attention