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

Guidelines on web pages Guidelines on Hypertexts Guidelines on Websites

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.)

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.

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.

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

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.

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.

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

Hypertext Essential Components: Navigation Links Menus and Submeneus Search tools

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

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

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

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

Design the Web Site Shallow Site Design

Web Site Design (Cont…) Deeper Site Design

Web Site Design (Cont…) Typical Page Design

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

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

Thank you for you attention