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