Multimedia 1 - Quia



Multimedia 1.01: Typography – the design of the characters and the way they are presented on the page.

Typefaces, Fonts and Font Families

Typeface – the basic design of a character

Typeface Categories:

Serif – the characters have attributes on the tips called serifs

Examples:

Bodoni

Century Schoolbook

Courier

Goudy

Times New Roman

Used for:

Body text in 10-12 point size for printed publications and documents.

Newspapers and newsletters

Books

Business Correspondence

Magazines

Sans Serif – sans is French for without, so the characters do not have attributes (serifs) on the tips

Examples

Arial

Berlin Sans

Gill Sans

Verdana

Used for:

Webpages

Headlines and headings

On-screen display

Captions

Tables

Decorative/Ornamental

Designed strictly to catch the eye

They should be used sparingly

Examples

Chiller

Webdings

Used for:

Headlines on flyers and advertisements

Symbols in logos

Script – the characters appear to have been written by hand

They should never be used to key in all caps.

They should be used for formal announcements and invitations.

Examples

Brush Script

French Script

Used for:

Invitations

Place Cards

Poetry

Announcements

Font – a specific size, weight, and style applied to a character (letter, number, symbol)

a. Font style – the slant and weight of a character, such as bold or italic.

b. Font Family – a group of similarly formatted typefaces

i. Arial Font Family

a) Arial

b) Arial Black

c) Arial Narrow

d) Arial Rounded

ii. Franklin Gothic Font Family

a) Franklin Gothic Book

b) Franklin Gothic Demi

c) Franklin Gothic Heavy

d) Franklin Gothic Medium

A. Typeface Spacing

1. Monospaced – all characters receive an equal amount of space regardless of the size of the character.

2. Proportional – all characters receive a different amount of horizontal space based on the size of the character.

3. Leading – vertical spacing between of lines of text

4. Kerning – horizontal spacing between pairs of letters

5. Tracking – horizontal spacing between all the characters in a large block of text.

Mm 1.02

6. Principles of Design

a. Alignment – relationship of elements in a pattern or grid.

b. Balance – determined by how elements are placed on a page.

i. Symmetrical – elements of the design are centered or evenly divided horizontally and vertically on a page.

ii. Asymmetrical – off-center alignment created with an odd or mismatched number of elements.

iii. Radial – elements radiate or swirl out from a center point.

c. Contrast – the use of big and small elements, black and white text, squares, and circles.

i. Adds emphasis to important information

ii. Adds appeal

d. Proximity/Unity – placing elements near each other to demonstrate their relationship to each other.

e. Repetition/Consistency – repeating some aspect of the design throughout the entire layout.

i. Aids navigation

ii. Improves readability

f. White Space – negative or empty space between text and/or graphics.

i. Gives a design breathing room.

ii. Smoothes transition between elements.

7. Rule of Thirds - visually dividing the page into thirds vertically and/or horizontally and placing the most important elements within those thirds

a. Optical Center - the spot that the eye sees when it first encounters a page. It is slightly above and to the right of the mathematical center of the page.

b. Z-pattern – the visual path the eye follows when looking at a printed page.

8. Five Elements of Print Design

a. Lines – used to organize information, simulate movement, lead the eyes and enhance a design.

b. Shapes – used to enhance a publication.

c. Mass – used to define size, space, and create an impact.

d. Texture – used to convey a “visual” sense of feel.

e.

Color - can be used to Evoke emotion

Color themes can be used to set a tone or mood for the publication.

Color themes

Calming colors – cool colors (blue, green and violet)

Exciting colors – warm colors (red, orange and yellow)

Neutral colors - beige, ivory, taupe, black, gray, and white

Add or detract attention – make design elements more or less noticeable.

Create movement – make some colors stand out while others appear to recede.

Lead the eye – lead the reader’s eye to certain elements in the design.

9. Color Concepts

a. Color palette – a chart used to choose colors. Can be used to pick colors that will look good together in desktop publishing publications.

b. Complimentary colors – colors that look good together to create a more visually appealing publication.

c. Creating Color

a. On Monitors – colors are created by mixing varying degrees of red, green and blue light.

i. Referred to as RGB (red, green, blue)

i) ii. Expressed as hexadecimals

b. On Printers - in the four-color printing process, color is created by layering cyan, magenta, yellow and black ink.

i. Referred to as CMYK (cyan, magenta, yellow and black)

ii. Expressed as percentages

c. Color Matching – the process of matching the colors produced on the computer screen to the colors that can be printed on paper using ink to ensure the printed publication looks as much like the on-screen publication as possible.

4. Color Terms

a. Hue – a color

b. Tint – a hue plus white

c. Shade – a hue plus black

d. Saturation - the amount of the hue used.

Mm1.03: Layout of a Desktop Publishing Document

Guides (or guidelines) – non-printing lines that appear on a document in desktop publishing software during the design phase to assist the developer in placing objects

Margin guides – lines that indicate the space between the edge of the page and the document contents

Column guides – lines that control the flow of text within columns and keep text out of the gutter (space between columns)

Ruler guides – used to align objects

Grid – desktop publishing tool used to ensure consistent placement of logos, graphics, and other objects throughout multiple documents, such as a print media kit.

Template – A standard pre-formatted layout which may contain a color scheme, font scheme, pictures, and preset margins

Page size – varies according to publication

Document Design

Master page – includes items and formats common to every page; used to maintain layout consistency

Prototype – (also called mockup) an example of how the final document should appear

Format Considerations – selection of one or more document sizes and layouts for a project

Desktop Publishing Design Features

Art – illustrations and photographs used to convey meaning and add appeal

Balloon – circle or bubble enclosing copy in an illustration; often used in cartoons

Bleed – a print effect in which layout, type, or pictures appear to run off the edge of a page

Caption – also called a call-out, label used to identify parts of an illustration; can be in the form of a text box or a balloon

Dropped cap – an enlarged character at the beginning of a paragraph; used to grab the reader’s attention

Running headers/footers – running text at the top and/or bottom of a document

Jumpline – line at the end of a continuing article that tells readers which page to refer to for the rest of the article

Pull-quote – a small section of text “pulled out and quoted” in a larger font size; used to draw attention

Rules – lines around articles or graphics used to direct the flow of a publication and organize its content

Sidebar – A smaller self-contained story inside a larger one which may or may not be related, usually boxed with its own headline and set off from the main text

Text box – Container for text that can be placed and formatted randomly

Watermark – A semitransparent image in the background of printed material; may be text or object

End sign – a symbol, such as a wingding, that indicates the end of an article

Reverse text – dark background and light text; used for emphasis

Title and Heading Information

Nameplate – banner on the front of a document that identifies the publication and usually includes the name of the publication, a logo, and a motto

Masthead – contains the name of the publisher and may include staff names and other related information; usually appears on page 2 of the document

Headings and Subheadings – use font sizes and styles to differentiate between main and subheadings; use a consistent set for each

Kicker – words positioned above a headline, usually as a lead-in or teaser

Byline – name of author or contributor of photo or article, usually placed just below the headline or photo or at the end of the article

Deck – placed between a headline and an article to provide a segue between the headline and the body of the article

Running headlines and footers – headers and footers used to indicate dates, page numbers, running titles

Body – the bulk of the publication; articles and news items

Paragraphs – use paragraph settings to adjust and control the space between paragraphs

Characters – use fonts, styles, leading, kerning, and tracking to adjust spacing and develop the document’s personality

Rules (lines) – used in varying weights and styles to add definition and organize the elements of a publication

Table of Contents – List of contents of a publication

Mm2.01

B. Graphic Images

Graphics – anything on a page that is not actual text, from simple line drawings to fully active images found on the World Wide Web.

Factors that Affect Graphic Choice

Color depth refers to the number of colors per pixel that can be displayed in an image.

Compression refers to how an image is saved in order to reduce the file size.

i. The greater the compression, the lower the quality of the image.

ii. Lossless – no data is lost during compression.

iii. Lossy – some data is lost during compression.

Portability – ease at which files are opened, modified, and viewed on computers using different operating systems, software and browsers.

Transparency – the background of an image is “see-through” so that the graphic can blend into the background without having a white box around it.

Two Types of Graphics

Raster Graphics – also called bitmap graphics.

Images composed of grids of pixels that have a fixed resolution (number of pixels per inch) and cannot be resized without losing image quality.

Raster graphics are edited in paint programs

Formats used for Raster Graphics

GIF – Graphics Interchange Format

Characteristics

Standard format on web for animation

Supports transparency

Uses lossless compression

Supports 256 colors

Commonly used for:

Clip art, animations, icons, logos

Simple diagrams, line drawings

Graphics with large blocks of a single color

Graphics with transparent areas

Graphics displayed on computer screens

JPEG – Joint Photographic Experts Group

Characteristics

Does not support animation

Does not support transparency

Uses lossy compression

Supports 16 M colors

High quality; but larger file size than gif

Commonly used for:

Desktop publishing images

Photographs and natural artwork

Scanned images

Emailing photographs

Digital camera photographs

BMP – Bitmap (Windows)

Characteristics:

Does not support animation or transparency

Uncompressed

Supports 256 colors

Large file size; not well suited for transfer across the Internet or print publications

Commonly used for:

Editing raster graphics

Creating icons and wallpaper

PNG – Portable Network Graphic

Characteristics

Supports transparency

Uses lossless compression

Supports several different color depths; including 256 colors and 16 million colors

Commonly used for:

Replacing GIF and TIFF images

Online viewing of images

TIFF – Tagged Image File Format

Characteristics

Does not support animation or transparency

Available in compressed (lossless) and uncompressed formats

Supports up 16 M colors

Commonly used for:

Storing raw bitmap data by some programs and devices such as scanners

High resolution printing

Desktop publishing images

Storage container for faxes and other digital images

1. Vector Graphics – composed of mathematical formulas that define lines, shapes and curves.

Characteristics: Shapes can be edited by moving points called nodes. Can be 2D or 3D

Edited in draw programs

Commonly used for:

Graphics that will be scaled (or resized)

Architectural drawings, CAD programs, flow charts

Logos needing to be displayed in various sizes without degrading quality, Cartoons and clip art

Internet websites, Fonts and specialized text effects

Advantages

Resolution independent – regardless of how much the image is enlarged or reduced, the image definition and quality remain the same

Small file sizes – easily transferred over the Internet

Disadvantages: Lower color quality than bitmap images. Not good for photographic images

Common Vector File Formats

AI – Adobe Illustrator

CDR – Corel Draw

DXF – AutoCAD

EPS – Encapsulated Postscript (meta graphic)

SVG – Scalable Vector Graphics

WMF – Windows Metafile, common format for windows clipart

NOTE: Meta graphic formats can contain both vector and raster data.

C. Raster vs Vector

Vector graphics do not degrade in quality when scaled (resized)

Raster graphics become pixilated when enlarged

Vector graphics are easier to color than raster graphics

Vector file are smaller than raster files

Vector images can easily be converted to raster images but raster images are hard to convert to vector images.

Raster graphics are better for realistic images and photographs

D. Types of Images

Clip Art – premade graphics that are available online and in many software packages; may be vector or raster

Photographs – raster images that contain millions of colors.

Art Work – computer created drawing or painting; may be raster or vector

Resolution – the amount of detail stored for an image. The higher the resolution, the higher the level of detail in the image.

PPI – pixels per inch

The number of pixels in one inch

More pixels per inch means better image quality but larger file size.

Images that will be displayed on a monitor or screen can have a lower resolution because most monitors/screens do not support very high resolutions.

DPI – dots per inch

The number of dots of ink or toner per inch on a printed image. The lower the DPI the less detailed the image. Images that will be printed need a higher resolution in order to print clearly without pixelation or blurriness.

Image Editing

Aspect Ratio – relationship of an object’s width to its height

Cloning – copying part of an image and using it to replace unwanted parts of the image.

Cropping – removing a part of an image

The original image retains the same file size

The cropped image can be saved as a new object

Filters – used to apply special effects to an image

Gradients – filling an object with a smooth transition from one color to another.

Layering – compiling multiple pictures or objects together into one image

Layers can be turned on or off

Elements can be colored, layered, and resized individually

Patterns and Textures

Patterns are raster graphics applied as a fill

Textures are used to create filters and backgrounds

Rotating – pivoting an object around its center point

Transparency – removing the background color of a raster image making it “see-through” in order to allow the image to blend in with its background.

Mm 2.02

A. Introduction

Animation – simulation of movement created by rapidly displaying images or frames.

Relies on persistence of vision – the way our eyes retain images for a split second longer than they actually appear which makes quick flashes of images appear as one continuous motion.

Frame by Frame Animation - the rapid display of a sequence of still images (2D or 3D) or models in order to create the optical illusion of movement.

Example: Flipbook

B. History of Animation

Traditional Animation Process

Storyboards are created.

The preliminary soundtrack is recorded.

Keyframes are drawn by lead animators.

Pencil testing is performed to match keyframes to the soundtrack.

In-between frames are drawn to fill-in between the keyframes.

Drawings are traced onto plastic cels and painted.

Cels are photographed onto film.

Computer Assisted Animation

Follows the same steps as traditional animation but the computer performs some of the work.

Images or frames can be scanned into the computer or created by artists using graphics tablets.

Pencil testing can be performed on the computer.

Tweening can be performed by the computer.

Computer Generated Animation

All the animation and images are created on the computer.

Special software is used to create these animations.

Can use motion capture – actors wear special suits to allow the computer to copy their motions and apply them to 3D models created on the computer.

C. Uses of Animation

Advertising – used to catch attention, such as banners on websites.

Entertainment – films, games, virtual reality

Selling – showcasing products, services or instructions

Teaching – illustrating concepts or processes

Training – simulations, presentations, etc.

Use Animation Appropriately

a. Is it appropriate for the target audience?

b. Does it help deliver the message?

c. Is it overused?

d. Does it load quickly?

D. -----------------------------------------------------------------------------------------------------------------------------------

E. Methods of Animating – digital animation is based on the frame by frame process.

Morphing – transforming one object into another.

The user inserts the beginning image.

The user inserts the ending image.

The computer tweens the frames between the two.

Path Based Animation – also called vector animation.

The user inserts an object and draws a path (or vector).

The computer tweens, or creates the frames, to move the object along the path.

Vector or raster graphics can be used.

File sizes can be reduced if vector graphics are used.

Programming or Scripting-Based Animation

Requires knowledge of programming or scripting languages.

Example: Rollovers – also called mouseovers. When the mouse is moved over an image, it changes to a different image.

Created by using scripting languages such as Javascript.

Used for menus on webpages, CDs and DVDs.

Stop Motion Animation – manipulating real-world objects and photographing them one frame at a time. Example: Clay Animation

Animation Software:

3DS Max by AutoDesk

Adobe PhotoShop and Flash

Blender

Cinema 4D

Maya

F.

G.

H. Creating a Computer Animation Using Animation Software

Parts of an Animation Program

Stage – part of program where the content is created and manipulated.

Library – used to store frequently used files.

Timeline – used to organize the content

Frame – one individual image in an animation.

Keyframe – indicates where an action is to occur.

Layers – the timeline can be divided into different layers to give the author more control over different elements such as sound and text.

Playhead – the vertical red marker in the timeline that shows which frame is the current frame as the animation plays.

Scrubbing – dragging the playhead across the timeline in order to preview the animation.

Guidelines for Designing Animations

1. Copyright Laws

2. Create Animations

3. Add Sound

4. Animate Text

Publishing Animations

5. Analyze and Optimize the Animation

Animation File Types

a. Animated Gif

b. AVI MOV MPEG SWF

Methods for Publishing Animated Videos

c. Website

d. CD-ROM or DVD

e. Executable File

Plugins/Players – may be required to view an animation over the Internet.

Plugins are programs that work with the browser to expand its capabilities, such as allow it to play video or open certain file types.

Standalone Players – many plugins can also operate as standalone programs meaning they will open and work without the browser software being open.

f. Examples:

i. Adobe Flash Player

ii. QuickTime

iii. RealPlayer

iv. Windows Media Player

Factors that Influence the Delivery of Animations

g. Bandwidth - the amount of data that can be transmitted over a network in a given amount of time.

h. Playback Rate - the number of frames per second that are shown when the animation is played.

i. Streaming Rate - the number of frames per second contained in the animation.

----------------------------------------------------------------------------------------------------------------------------------

A. Evolution of Multimedia

B. Multimedia Systems

Playback Systems & Development Systems

C. Multimedia Fair Uses Guidelines and Elements

1. Fair Uses Guidelines

Multimedia Elements: Text, Graphics,

Animation – 2-D and 3-D, and Audio.

Audio

Digitizing Sound

Sampling – process used to convert analog sound waves into digital data to be used by computers.

Sample rate – the number of samples taken per second.

Sample size – the number of bits used to save one sample.

Audio file size – determined by the sample rate, sample size and number of channels used.

File Formats:

AU – Audio file

MP3 – MPEG-1 Audio Layer 3

MIDI – Musical Instrument Digital Interface

WAV – Waveform file

WMA – Windows Media Audio

Video File Formats:

i. AVI – Audio Video Interleave

ii. MOV - Movie

iii. MPEG – Moving Picture Experts Group

iv. RM – Real Media

v. WMV – Windows Media File

vi. FLV – Flash Video

D. Design Multimedia Presentations

1. Multimedia Authoring Programs

a. Create multimedia presentations

b. Create interactive elements

c. Design screen layouts

d. Produce content with paint, text, and animation tools

e. Incorporate text, sound, video, animation, and graphics

f. Create hyperlinks

2. Basic Parts of Multimedia Presentations

a. Hyperlinks – “hot spots” that can be used to locate an external file, website or place in the current presentation.

i. Menu – a list of options that use hyperlinks to move to other parts of the presentation.

ii. Navigation Buttons – buttons that are hyperlinked to other parts of the presentation and allow the user to navigate through the presentation

b. Transitions

c. Build Effects

3. Basic Design Guidelines

E. Design Elements of Multimedia Presentations

1. Balance – distribution of optical weight of the elements in the layout.

2. Movement – how the viewer’s eyes move through the elements on the screen.

3. Optical Center – the point the viewer’s eyes first encounter when they look at the screen. It is slightly above and to the right of the mathematical center.

4. Optical Weight – the ability of elements to attract the viewer’s attention.

5. Unity – how well the design elements relate to one another

F. Create Multimedia Presentations

1. Plan Multimedia Presentations

2. Prepare Multimedia Presentations

3. Practice Presenting Multimedia Presentations

4. Present Multimedia Presentations

G. Interactive Multimedia Presentations: Making presentations that allows input from the users.

3.01 mm

H. Evolution of Multimedia

I. Multimedia Systems

1. Playback Systems

2. Development Systems

J. Multimedia Fair Uses Guidelines and Elements

1. Fair Uses Guidelines

2. Multimedia Elements

a. Text

b. Graphics

c. Animation – 2-D and 3-D

d. Audio

Digitizing Sound

Sampling – process used to convert analog sound waves into digital data to be used by computers.

Sample rate – the number of samples taken per second.

Sample size – the number of bits used to save one sample.

Audio file size – determined by the sample rate, sample size and number of channels used.

File Formats:

a) AU – Audio file

b) MP3 – MPEG-1 Audio Layer 3

c) MIDI – Musical Instrument Digital Interface

d) WAV – Waveform file

e) WMA – Windows Media Audio

Video File Formats

i. AVI – Audio Video Interleave

ii. MOV - Movie

iii. MPEG – Moving Picture Experts Group

iv. RM – Real Media

v. WMV – Windows Media File

vi. FLV – Flash Video

K. Design Multimedia Presentations

1. Multimedia Authoring Programs

a. Create multimedia presentations

b. Create interactive elements

c. Design screen layouts

d. Produce content with paint, text, and animation tools

e. Incorporate text, sound, video, animation, and graphics

f. Create hyperlinks

2. Basic Parts of Multimedia Presentations

Hyperlinks – “hot spots” that can be used to locate an external file, website or place in the current presentation.

Menu – a list of options that use hyperlinks to move to other parts of the presentation.

Navigation Buttons – buttons that are hyperlinked to other parts of the presentation and allow the user to navigate through the presentation

a. Transitions

b. Build Effects

3. Basic Design Guidelines

L. Design Elements of Multimedia Presentations

Balance – distribution of optical weight of the elements in the layout.

Movement – how the viewer’s eyes move through the elements on the screen.

Optical Center – the point the viewer’s eyes first encounter when they look at the screen. It is slightly above and to the right of the mathematical center.

Optical Weight – the ability of elements to attract the viewer’s attention.

Unity – how well the design elements relate to one another

M. Create Multimedia Presentations

1. Plan Multimedia Presentations

2. Prepare Multimedia Presentations

3. Practice Presenting Multimedia Presentations

4. Present Multimedia Presentations

N. Interactive Multimedia Presentations

----------------------------------------------------------------------------------------

Mm 3.02

A. Introduction

1. Webpage – a document stored on a web server which can be accessed and viewed using a web browser on a computer or mobile device.

a. Can contain graphics, audio and video.

b. Can include hyperlinks to other documents on the World Wide Web.

Website – a collection of related webpages.

A website is developed to build a relationship with a target audience and is created for the following reasons:

Sell – sells products or services:

Advertises, demonstrates, and describes the features of a product or service

Provides customer support

Often includes a database (or catalog) of products and services

Inform – provides information about a cause, event, or organization

May sell products, but not for profit

May provide online tutorials and demonstrations

Entertain – provides information or links to movies, music, magazines, etc.

Social Networking - provides a network where people can interact online.

Hybrid - may be a combination of any of the four purposes listed above.

Webpage Development Standards

Standards - basic set of guidelines for authoring languages used to make webpages.They are enacted to make websites accessible to everyone regardless of:

Culture, Education, Ability, Resources

Or Physical Limitations

2. The World Wide Web Consortium (W3C) develops webpage development standards.

3. Advantages of Web Standards

a. Helps ensure webpages display consistently in all browsers.

b. Results in faster website development.

c. Results in faster downloading of websites.

d. Provides equal access to information regardless of browser, operating system or hardware.

B. United States Website Accessibility Legislation

1. Section 508 Amendment to the Rehabilitation Act requires US Federal Agencies to make information and data equally accessible to individuals and employees with disabilities.

2. Applies only to US government agencies.

C. Authoring Languages

1. HTML - Hypertext Markup Language

a. The first authoring language used to create files that can be viewed on the World Wide Web.

b. Embedded tags define the layout and appearance of the webpage.

c. HTML is platform independent.

d. HTML 4.01 is the current version.

XML - Extensible Markup Language

a. Designed to carry data, not to display it.

b. Uses author-defined tags to identify data so that the data can be easily imported into other applications.

XHTML - Extensible Hypertext Markup Language – uses XML code along with the HTML programming language to develop webpages.

a. Results in cleaner code

b. Tags are more descriptive of the data they contain

E. Style Sheets

1. Describe how browsers should present or display information on a webpage.

2. Give web developers more control over layout and page formatting.

3. CSS – Cascading Style Sheets is a popular style sheet language.

4. Advantages

a. One style sheet can control the formatting for multiple webpages. An entire website can be reformatted by editing one file.

b. Styles can also be set internally.

Disadvantage - may alter the ability of some devices to accurately read and display information.

F. Text Editors – allow developers to write code in plain text.

Examples – Notepad, Notepad 2 and WordPad

Microsoft Word should not be used to create webpages.

G. Website Organization

Storyboard the website and determine the best website structure for the purpose and content of the site.

Website Structures

Linear - Use for pages that users need to read in order

Topics arranged in chronological, alphabetical, or series order

Include links to next page and back to previous and index page

Hierarchical – Use to organize complex bodies of information

Looks like a family tree or a chain of command

Pages are organized and linked by categories and subcategories

Webbed - Use when the order in which the user views the pages does not matter

Allows users to jump to any page from any page on the website

Navigation bars or menus are included on all pages.

H. HTML Overview

HTML Tags

Define text, graphics, hypertext links, and other multimedia elements found on webpages.

Tell the browser how to display the document

1. Rules for using HTML tags

HTML tags are enclosed inside angle brackets: < >.

The tag name is keyed between the two angle brackets. Example: .

With a few exceptions, tags occur in pairs with an opening and a closing tag.

Example: is an opening tag

Example: is a closing tag.

The forward slash ( / ) is used in the closing tag.

Text between the opening and closing tags is affected by the tag.

Example: Hello World!

Makes Hello World appear in bold.

Exceptions

Some tags are empty tags, meaning they do not have a closing tag, they only have an opening tag.

Examples of empty tags: , , ,

Attributes - provide additional information about tags and control how the tag will be interpreted by the browser.

Some tags have multiple attributes.

Rules for using attributes: Attributes are entered inside the opening tag but not in the closing tag. Attributes are keyed in name/value pairs. Syntax: name=”value”

The attribute should have an equal symbol followed by the value or setting for the attribute.

Attribute values should be enclosed inside quotation marks.

3. Requirements of XHTML

a. All tags must be in lowercase.

b. All tags must have a closing tag. Empty tags should be closed in the opening tag by placing a space and forward slash before the closing angle bracket. Example:

c. All tags must be properly nested.

i. Nesting refers to the order in which tags are opened and closed.

ii. The closing tags are entered in the reverse order from the opening tags to achieve proper nesting.

d. The tag must be the root tag for every document.

e. These requirements also work in HTML 4.01, but are not required. However, students should follow these guidelines when creating their webpages.

4. Saving and Testing (X)HTML files

a. Save the file with an .html extension.

b. This identifies the file as a webpage to the browser.

c. Open the page in a web browser to view it and check for errors.

I. Website File Management

The files for a website should be saved in one folder called the root folder

The home page of a website is named index.html

Use lowercase letters for all folder and filenames.

Files can be organized into different subfolders within the root directory if the website is very large.

Use relative hyperlinks to point to other files within the website: news.html.

Use absolute hyperlinks to point to other websites:

J. Creating a Webpage Using HTML

Structure Tags

The doctype declaration refers the browser to a Document Type Definition (DTD) which contains the rules for the markup language so the browser can display the page correctly.

Strict – does not allow the use of deprecated tags or frames.

Transitional – allows the use of deprecated tags but not frames.

Frameset – allows the use of deprecated tags and frames.

Deprecated tags are tags that are marked for deletion in future releases of the markup language. Style sheets should be used instead of those tags.

- Identifies the beginning of the webpage to the browser.

- Head Section – provides identifying information about the webpage that is used by browsers and search engines.

- specifies the title of the webpage that will appear in the browser’s title bar and in bookmarks. The is inserted inside the section.

– provides information about the page for search engines and browsers.

The is required and identifies the character set used by the webpage.

Syntax:

- provides a search engine with the author’s name.

- provides a description of the webpage that will be displayed when a search engine shows the page’s URL in a hit list.

- provides a list of words that a search engine should associate with the page.

Contains the majority of the data for the webpage.

Contains all the content that will appear in the browser’s window.

HTML Tag List

Spacing tags:

- inserts a ‘line break’ or a single space in the text.

- inserts a paragraph and adds a blank line before and after the paragraph text.

Heading Sizes - through bold enclosed text and increase the text size with being the largest and being the smallest.

Typeface Styles

- bolds the text between the opening and closing tags.

- italicizes the text between the opening and closing tags.

Lists

- unordered list. Creates a bulleted list. Used for items that do not need to be in a particular order.

- ordered list. Creates a numbered list.

- list item. Items in each type of list are keyed between the opening and closing tags.

Images

- inserts an image into a webpage.

Syntax:

The source attribute (src) identifies the location of the image file.

The image filename is case sensitive and must be keyed exactly as it is saved.

Images should be saved in the same location as the webpage.

The alt attribute should always be used in case the image does not load properly in the browser window.----------------------------

------------------------------------------------------------------

Width and height attributes can be used to control the display size of image in the browser window. The value is stated in pixels.

a. Navigation (linking) Tags

Hypertext links are inserted by using anchor tags .

Hyperlinks can link to spots inside the same webpage or to pages outside the webpage.

Hyperlinks can be used to automatically open the browser’s default email client and insert an email address in the To: section.

Syntax: Text to Click

The href attribute is short for hypertext reference and identifies the URL for the link to be opened in the browser.

Text or an image tag MUST appear between opening and closing anchor tags to provide a place for the viewer to click in order to visit the link.------------Cascading Style Sheets

Inline Styles – the code for the style is inserted inside the opening html tag.

Syntax:

Affects only the information between the opening and closing tag.

Overrides internal and external style sheets.

Internal style sheet – used to control the appearance of one webpage.

The tag is placed inside the section of the webpage.

Styles are defined between the opening and closing tags.

Internal style sheets override external style sheets.

External style sheet – styles are defined in a separate text file saved with the .css extension.

A code is inserted into the section giving the location of the style sheet to be used.

All webpages in a website can be linked to one external style sheet which helps keep all webpages in a website consistent in appearance

Several tags and attributes have been deprecated in favor of using style sheets. (Examples below are shown as inline styles.)

Alignment

To center text using inline styles: Text

To right-align text using inline styles:

Text

Body Tag Attributes

To set the background to a solid color using inline styles:

To set the background to an image using inline styles:

.

Font : To change the typeface:

To change the color:

To change the size:

Website Design Guidelines

Body text

Sans serif typefaces are easier to read on computer screens.

If the typeface chosen is not supported by the browser, the browser will display the text in its default font so it is best to choose a typeface that is common to many computers.

Left justified text is easier to read for webpages.

Do not use underlining—it implies a hyperlink.

Let users know if a link will move them to a page on a different website.

Use headings that are descriptive and unique from one another to divide page content into short sections.

Use descriptive headings for lists.

Use abbreviations sparingly and define acronyms and abbreviations.

Avoid jargon, Slang, Lingo, street language

Consider the target audience when selecting typefaces, text size, etc.

Use contrasting colors for background and text to make text easy to read.

Multimedia

b. Use images, video, animation, and audio only when they help convey or support the website's message.

c. Ensure that images load quickly.

d. If large images are used, use thumbnails that link to the larger images.

e. If plug-ins or players are required, include a link to a website where the plug-in or player can be downloaded.

i. Provide controls so that users can stop, start, play, and adjust volume.

ii. Be aware that embedded media can dramatically increase the download time.

iii. Provide text descriptions or captions for images and video to make information accessible to viewers with disabilities.

1. Miscellaneous Guidelines

a. Place the organization's logo in a consistent place on every page.

b. Include a title in the section to be used if a viewer bookmarks the page (adds your page to their favorites)

c. Include a link back to the home page from every page.

d. Place the most important information near the top of the page.

e. Be consistent in all design elements (fonts, colors, graphic size and location, alignment, and backgrounds) throughout the website.

K. Website Components

1. The Home/Index Page

a. Creates a positive first impression of the website.

b. Communicates the purpose of the website.

c. Should contain navigational links or menus to provide viewers with the links they will need to navigate the website.

2. A business website should contain the following:

a. About Us – a page defining the website’s purpose and goals.

b. Contact Us – page containing contact information to make it easy for viewers to communicate with the business.

c. Privacy Policy- page that informs viewers how their private information will be handled.

The website may contain the following pages:

d. Splash page - an introduction page that appears while the website is loading. Many readers do NOT like waiting for splash pages to load. They can be used to:

i. Show a progress bar indicating the website is loading.

ii. Tell the user what kind of browser or software they need to view the site.

iii. Allow users to choose their language or country’s version of the website.

e. Site Map – a basic skeleton of the website intended to help users quickly locate information on the website.

L. Publishing Websites

1. Before Publishing

a. Check the site in multiple browsers.

b. Validate source code.

c. Check spelling and relative and absolute links.

2. Choose a Web Host.

a. A host computer is also called a web server and is a computer that stores webpages.

b. Sends webpages to viewers over the Internet upon request.

3. Obtain a Domain Name.

4. 1& has the best website and domain $prices.

a. Use assigned name provided by web hosting service.

b. Register and purchase a unique name for a fixed period of time.

5. Publish - upload files to the web host/server

This code will produce the text like you see it below.

My First Heading

My first paragraph.

My First Heading

My first paragraph.

is the link to this html builder website.

HTML Element Syntax

• An HTML element starts with a start tag / opening tag

• An HTML element ends with an end tag / closing tag

• The element content is everything between the start and the end tag

• Some HTML elements have empty content

• Empty elements are closed in the start tag

• Most HTML elements can have attributes

--------------------------------------------------------------------------------------------

What is HTML5?

HTML5 will be the new standard for HTML.

The previous version of HTML, HTML 4.01, came in 1999. The web has changed a lot since then.

HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs.

[pic] What is CSS?

• CSS stands for Cascading Style Sheets

• Styles define how to display HTML elements

• Styles were added to HTML 4.0 to solve a problem

• External Style Sheets can save a lot of work

• External Style Sheets are stored in CSS files

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download