Download HTML and Hypertext

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 crossreferencing 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