Lecture-2 The Text

advertisement
Lecture-2: The Text
The Power of Text
 Reading and writing are expected and necessary skills within most modern cultures.
 Text and the ability to read it are doorways to power and knowledge.
 With the World Wide Web, text has become more important than ever.
 The native language for the web is HTML (Hypertext Markup Language)
In multimedia it is important to cultivate accuracy in words you choose. Words will appear
in:
 Titles
 Menus
 Navigation aids
 Narrative or content
Be Precise
Be precise and consistent when designing labels for title screens, menus and buttons.
More Powerful
Less Powerful
GO BACK!
Previous
Quit
Close
TERRIFIC!
That answer Was Correct
Text Attributes
1. Font
2. Typeface
3. Tracking
4. Kerning
5. Leading
6. Color
Serif vs Sans Serif Typeface
 On a printed page, serif fonts are traditionally used for body text
 In the computer world, sans serif fonts are far more legible when used in the smal
sizes of a text field on a screen
Exception: Large bold serif font for a title or headline can still be used to help delivered
message of elegance and character.
Font
 A collection of characters of a single size and style belonging to a particular typeface
family.
 Expressed in point; one point is .0138 inch.
* This font is: Times New Roman 20-point bold italic
* This font is: Arial 24-point
Typeface
Typeface is a family of graphic characters that usually includes many type sizes and styles.
Common Typeface Styles
Courier New
Arial
Times New Roman
Verdana
Serif vs Sans Serif Typeface

The typeface either has Serif or it
doesn't (sans are French for “without”).

Serif is the little decoration at the end
of a letter stroke.
Installing Fonts
 Fonts 500 is a great way to find fonts and install them on your computer. All these
fonts are free. http://fonts500.com/
 Sample of font downloaded: BLAZED
Tracking
Tacking: Spacing between the characters.
Kerning
Kerning: The spacing between character pairs.
Leading
Leading: The space between lines of text sometimes called the line spacing.
Color
Consider using color to make your type stand out or
be more legible. Use black on white whenever possible.
Avoid conflicting colors like red on purple. Don’t use color to
convey a message – your user might be color blind
FONT EDITING AND DESIGN TOOLS
o Special Font editing tool is used – FontLab
o
These tools enable to create distinct text and display faces.
Hypermedia and Hypertext
•
Multimedia—the combination of text, graphic, and audio elements into a single
collection or presentation—becomes interactive multimedia when you give the user
some control over what information is viewed and when it is viewed.
•
Interactive multimedia becomes hypermedia when its designer provides a structure
of linked elements through which a user can navigate and interact.
Designing with Text
 Too little text on screen requires annoying page turns and mouse clicks.
 Too much text can make a screen seem overcrowded and unwelcoming.
 Be conservative when using different colors, typefaces, font sizes and styles.
Sometimes it’s better to be consistent.
 Use Meaningful words or phrases for links and menu items.
 Use Bold to emphasize text not underline. Underline is commonly used to show a
hyperlink.
Scrolling
On a web page, put vital text elements and menus in the top 320 pixels. Studies have
discovered that only 10 percent to 15 percent of surfers ever scroll any page.
Webpages and CE6
 Probably the most common way you will be adding text is by uploaded MS Word
documents to Blackboard CE6.
 You must convert the Word document (.DOC) to a web page (.HTM).
 For the most part, all of the fonts, sizes and styles will display the same when
converted from .DOC to .HTM.
 However, if the user’s computer does not have the fonts installed on their computer
the browser will substitute a similar font, but it might not look the same.
 Therefore, to assure your document will look the same on the web use common
fonts; Times New Roman, Arial, Georgia and Verdana.
 Process for saving a Word .DOC to a Web page .HTM.
 From the file drop down menu, select “Save As” (don’t select, “Save as Web Page”).
 From the Save As dialog box, select “Save as type”, and select “Web Page, Filtered”
from the drop-down list.
 Click “OK”.
Your .DOC is now converted to a .HTM an ready to be uploaded to Blackboard CE6.
* You might lose some formatting, but the information should be useful and easily available
to your students.
HTML
Hypertext:
It provides a way to create a link between information in the same document as well
as in different documents.
Markup Language:
Markup refers to the special tags that are a part of the HTML document. These tags
specify how the document content should be displayed.
STRUCTURE OF HTML DOCUMENT
Every HTML document should have the following structure:
A head: It is used to identify the head of a document. Many browsers don’t require this tag.
A body: The body of HTML document contains the text that will show up on the Web page.
More-over it contains pictures, links to other Web pages etc.
HTML Tags

Syntax:
<tag>
</tag>
Moreover, tags are not case sensitive:
<tag>
</tag>
<TAG>
</TAG>
Both of the lines above mean same thing.
Code Structure of HTML Document
<html>
<head>
</head>
<body>
</body>
</html>
Title Tag
The <title> element in a document must occur within the <head> element of the
document and is one of the only elements permitted to be in the head section.
<title> Roll #14 </title>
It gives title to your document.
<p> & <br> Tags
For a paragraph break we use tag <P> or <p>.
For a line break we use tag <BR>, <br> or <Br>.
Download