CIS 300 Web Design Chapters 5 & 6

Graphic Interchange Format (GIF)

best used for line drawings containing mostly solid tones and simple images such as clip art

Image optimization

process of creating an image with the lowest file size that still renders a good-quality image

Transparency

In graphics application, one color (typically the background color) of the image can be set to be transparent

Animated GIF

consists of multiple images or frames, each of which is slightly different

Lossless compression

used when I GIF is saved and means nothing in the original image is lost and that the compressed image, when rendered by a browser, will contain the same pixels as the original

Interlaced image

progressively displays and seems to fade in as it downloads

Joint Photographic Experts Group (JPEG)

image format best used for photographs. Cannot be made transparent and cannot be animated

lossy compression

means some pixels in the original image are lost or removed from the compressed file

pixelation

when the quality of the image degrades as the file decreases

thumbnail image

technique used with web graphics is to display a small version of the image.

progressive JPEG

similar to an interlaced GIF in that the image progressively displays and seems to fade in as it downloads

Portable Network Graphics (PNG)

initially specified by the W3C as a replacement of the GIF. PNG images have a .png file extension and are well-supported by modern browsers

Animated PNG (APNG)

an extension of the PNG file that supports animation

WebP

created by Google and offers improved file compression over other types of images used on the web

Img Element

configures graphics on a web page, such as photographs, banners, company logos, and navigation buttons.

src attribute

specifies the file name of the image

alt attribute

provides a text replacement, typically a text description, of the image

background image property

used to configure a background image

background attachment property

use to configure whether the background image remains fixed in place or scrolls along with the page in the browser viewport

background-repeat property

use to change automatic tiling of a background image

background property

use to configure multiple background images.

font-family property

use to configure typefaces

typography

described as the style or arrangement of text

font-size property

sets the size of the font

em unit

a relative font unit that has its roots in the print industry when printers set type manually with blocks of characters, and is the width of a square block of type (typically the uppercase M) for a particular font and type size.

font-weight property

configures the boldness of the text

font-style property

configures text displayed in italics

line-height property

modifies the default height of a line of text and is often configured using a percentage value.

text-align property

configures the alignment of text and inline elements within block elements such as headings, paragraphs, and divs.

text-decoration property

modifies the display of text

text-indent property

configures the indentation of the first line of text within an element

text-transform property

configures the capitalization of a text

letter-spacing property

configures the space between text characters

favorites icon

a square image associated with a web page

image map

an image configured with multiple clickable or selectable areas that link to another web page or website

map element

a container tag that indicates the beginning and ending of the image map description

name attribute

coded to associate the <map> tag with its corresponding image

usemap attribute

used with the <img> tag to indicate which <map> to use

area element

defines the coordinates or edges of the clickable area

figure element

compromises a unit of content that is self-contained, such as an image, along with one optional figcaption element

box model

each element in a document is considered to be a rectangluar box that consists of a content area surrounded by padding, a border, and margins.

padding

area between the content and the boarder

border

area between the padding and the margin

margin

determines the empty space between the element and any adjacent elements - always transparent

border radius property

used to create rounded corners and soften up rectangles

shadow properties

add depth and dimension to the visual display of a web page

opacity property

configures the transparency of an element

RGBA color

color property that configures transparent color. Requires four values: red, green, blue, and alpha (transparency) and does not use hexadecimal color values, they are configured.

HSLA color

a notation color system that is based on a color wheel model, which stands for hue, saturation, lightness, and alpha

Hue

the actual color which is represented by numeric values ranging from 0-360

Saturation

configures the intensity of the color and is indicated by a percentage value

Lightness

determines the brightness or darkness of the color and is indicated by a percentage value

Alpha

represent the transparency of the color and has a value from 0 (transparent) to 1 (opaque)

gradient

a smooth blending of shades from one color to another color

linear gradient

smooth blending of color in a single direction such as from top to bottom or from left to right

radial gradient

smooth blending of color emanating outward from a single point