Web Design Vocabulary

Computer Literacy

Computer

An electronic device that enables a user to create, store, and retrieve information

Hard Drive

The computer's storage device for programs, documents, videos, etc.

RAM

Short term memory where data is stored as the processor needs it

Central Processing Unit (CPU)

The brain of the computer that carriers out all the functions of the computer, processing instructions from the programs you're running, and keeping the operating systems working

Input devices

Any hardware device that sends data to a computer, allowing the user to interact with and control it

Output devices

Any hardware device used to send data from a computer to another device or user.

Operating systems

Software that communicates with the hardware and allows other programs to run

Ports

A connection point or interface between a computer and an external or internal device

Network

Two or more computers that are linked in order to share resources, exchange files, or allow electronic communications

File Extension

The suffix at the end of a filename that indicates what kind of file it is

Return to top

Design

Design Elements

The building blocks of graphics in the space used for a design. Line, color, shape, and texture.

Lines

A mark made by a moving point and having impact according to its direction, weight, and the variations in its direction and weight.

Shapes or Forms

Enclosed objects that can be created by line or created by line or by color and value changes that define their edges.

Texture

The surface look of an object created by varying dark and light areas.i.e roughness, smoothness, depth

Color

The part of light that is reflected by the object we see.

Type

An element that may be used as a text to read, a shape, or a visual element, with the choice of typeface displaying emotion or mood.

Movement

The use of lines, color, and repetition to create the illusion of motion.

Directional Flow

Positioning elements to draw the reader's eyes through the document. As well as organizing the information by grouping related items.

Proportion

The sizing and placement of elements based on their relative importance to each other.

Alignment

The placement of elements based on their relative importance to each other.

Symmetrical Balance

Balancing similar elements equally on a page (centered alignment).

Asymmetrical Balance

Balancing contrasting elements on a page.

Radial Balance

Elements appear to spiral out from a central point.

Contrast

The difference in the degrees of lightness and darkness on a page.

Consistency or Unity

Uniformity among design elements and the correct balance of composition or color that produces a harmonious effect.

Focus or Emphasis

An element used to attract the reader's eyes- expressed with stress or force.

White Space

Background space without text or graphics.

Rule of Thirds

Image composition theory using a grid with nine quadrants to present a more pleasing and interesting graphic.

Color Theory

According to Webster's Dictionary: Color is a phenomenon of light (as red, brown, pink, or gray) or visual perception that enable one to differentiate otherwise identical objects.

Repetition

The reusing of the same or similar elements throughout your design.

The Golden Ratio

Based on the Fibonacci numbering sequence (0,0,1,1,2,3,5,8,13,21) to create an aesthetically pleasing design.

Aesthetics

The philosophical study of beauty and taste.

Design Principles

The ways in which elements (color, shapes, lines, type and texture) are used together.

Return to top

Photoshop

Lesson 1

Adjustment layer

Applies color and tonal adjustments to your image without permanently changing pixel values.

Lesson 2

RGB

Colors on a monitor are displayed using combinations of red, green, and blue light.

CMYK

Printed colors are typically created using a combination of four ink colors—cyan, magenta, yellow, and black.

Grayscale

Colors defined by a distinct shade of gray.

Pixel dimensions

Pixels that describe an image and establish the degree of detail it contains.

Pixel density

Used to measure how close together the pixels are on a digital display.

Resolution

The number of pixels per unit of physical length, such as pixels per inch (ppi).

PPI

Pixels per inch

Lesson 3

Antialiasing

Smooths the jagged edges of a selection by softening the color transition between edge pixels and background pixels.

Feathering

Blurs edges by building a transition boundary between the selection and its surrounding pixels.

Lesson 4

Opacity

The extent to which something blocks light. You can change the opacity of layers, filters, and effects so that more (or less) of the underlying image shows through.

Blending modes

Affects how the color pixels on one layer blend with pixels on the layers behind it.

Lesson 5

Liquify filter

Allows you to distort any part of an image. You can push, pull, rotate, reflect, pucker, and bloat any area of an image.

Smart Object

Layers that contain image data from raster or vector images, such as Photoshop or Illustrator files. They preserve an image's source content with all its original characteristics, enabling you to perform nondestructive editing to the layer.

Lesson 6

Masks

A type of image overlay that controls which layer areas will be affected by edits

Channels

Stores one of the visible components of a color image

Alpha Channels

Channels for saving and reusing selections and marking transparent areas for an entire document

Layer mask

An alpha channel attached to a specific layer that controls which parts of a layer are revealed or hidden

Vector mask

A layer mask made of resolution-independent vector objects, not pixels, useful when precise mask edge control is more important than being able to edit a mask with a brush

Clipping mask

A layer where a layer masks another layer

Channel mask

Defines areas based on the tonal contrast in a color channel, such as in the green channel in an RGB image

Lesson 7

Guides

Help you position images or elements precisely. They appear as nonprinting lines that float over the image.

Point type

Few discrete words or lines

Paragraph type

Full paragraphs of type/text

Tracking

The process of loosening or tightening the spacing between the characters in selected text or an entire block of text.

Kerning

The process of adding or subtracting space between specific pairs of characters.

Warping

Allows you distort type to conform to a variety of shapes, such as an arc or a wave

Return to top

HTML Intro

HTML Intro pt.1

Server

A host that provides information or a service to other devices on the network.

Node

A network location that can access and share information and services.

Network

A structure in which information and services are shared among devices known as nodes or hosts.

Client-Server

A network in which clients access information provided by one or more servers.

LAN

(Local Area Network) A network confined to a small geographic area, such as within a building or department.

WAN

(Wide Area Network) A network that covers a wide area, such as several buildings or cities.

WWW

(World Wide Web) The totality of interconnected hypertext documents on the Internet.

Mark Up Language

A language that describes the content and structure of a document by tagging different document elements.

HTML

(Hypertext Markup Language) A markup language that supports the tagging of distinct document elements and connecting documents through hypertext links.

CSS

(Cascading Style Sheet)The language used in writting style sheets.

Hyperlinks

A link within a hypertext document that can be activated to access a data source.

Text Editor

Creates a .txt file that is typically saved in the language being created (.html, .css, .js)

IDE

(Integrated Development Environment) A software package providing comprehensive coverage of all phases of the HTML development process.

GUI

(Graphical User Interface) A type of user interface through which users interact with electronic devices via visual indicator representations.

Validators

A program that tests code to ensure that it contains no syntax errors.

XML

(Extensible Markup Language)A subset of SGML, also a metalanguage.

XHTML

A version of HTML in which syntax standards are strictly enforced.

Metalanguage

Content that describes or provides information about how the document should be processed by the browser.

DTD

Document Type Definition. Defines the valid building blocks of an XML document.

DOCTYPE

A processing instruction indicating the markup language used in the document. It's the first line in an HTML file.

Deprecated

The features and code from earlier HTML versions that have been phased out and are either no longer supported or developed.

Rendering Engine

A software that draws text and images on the screen.

Nesting

Containing an element inside another element.

HTML5

The latest version of HTML, compatible with earlier HTML releases.

JavaScript

A programming language that conforms to the ECMAScript specification.

W3C

(World Wide Web Consortium) A group of web designers and programmers that set the standards or specifications for browser manufacturers to follow.

HTML Intro pt.2

Clients

A device that receives network information or services.

Wireframe

Sketch that outlines web page components and their place in the layout.

Storyboard

Shows links between web pages.

Project Plan

Document that identifies aspects of the project.

Project Lifecycle

Provides a framework for managing any type of project.

Stakeholders

Relevant organization employees or contributors who can provide or help determine the purpose of a website, the services that the audience requires from the site, and development timelines.

Return to top

CSS

CSS

Cascading Style Sheets language that determines the appearance of a page by writing one or more style sheets.

User Agent Styles

Also Bowser styles, styles built into the browser

External Styles

Styles created by a website author, placed within a CSS file, and linked to the page

Embedded or Internal Styles

Embedd styles are styles added to the head of an HTML document

Inline Styles

Styles added as element attributes within an HTML document AND applied to only that particular element.

Selector

To which designated styles are applied. Also known as element or tag, class or id.

Property

Changes the way a selector renders in a browser. Also known as attributes.

Value

Defines a property

Declaration

Consists of a property and value

Rule

Consists of a selector, property, and value

Browser Extension

An extended library of style properties in the bowser

Vendor PreFix

Indicates the browser vendor that created and supports the style property

Style Precedence

The more specific style rule has precedence over the more general style rule. If two rules have equal specificity and equal importance, than the one that is defined last has precedence.

Style Specificity

An issue when two or more styles conflict

Style Inheritance

Process in which properties are passed from a parent element to its children

Opacity

Defines how solid a color appears

Progressive Enhancement

A technique of placing the code conforming to elder standards before newer properties

Contextual Selectors

Specifies the context under which a particular page element is matched

ID Selector

Affects the presentation of a specific element in an HTML document

Class Selector

Creates a style rule based on values assigned to the class attribute

Attribute Selector

Selectors can be defined based on attributes and attribute values within elements

Font Stack

Where fonts is a comma-separated list

Generic font

Describes the general appearance of the characters in the text but does not specify any particular font definition file

@font-face

A rule in CSS used to access and load a web font

absolute units

Fixed in size regarless of the output device and are used only with printed media

relative units

Expressed relative to the size of other objects within the web page or to the display properties of the device itself

em unit

A multiple of the font size inherited from the parent element

rem unit

A multiple of the font-size of the root level element (html tag)

viewport unit

A relative unit used to express length as a percentage if the width and height if the browser window

Return to top

Intellectual Property

Intellectual Property

A unique product or idea created by an individual or organization, generally has commercial value. Can include copyright, trademark, trade secrets, software, video and music piracy, plagiarism and patents of inventions.

Trademark

Protects words, names, symbols, sounds, or colors that distinguish goods and services from those manufactured or sold by others and to indicate the source of the goods. Trademarks, unlike patents, can be renewed forever as long as they are being used in commerce.

Copyright

The US Constitution gives Congress the power to enact laws “to promote the progress of science and useful arts, by securing for limited times to authors and inventors the exclusive right to their respective writings and discoveries.” Copyright lasts for the life of the author, plus 70 years but 95 years for corporations

Trade Secret

Information that has either actual or potential independent economic value by virtue of not being generally known, has value to others who cannot legitimately obtain the information, and is subject to reasonable efforts to maintain its secrecy.

Software Piracy

Robbing people or companies of their ideas, inventions, and creative expressions involving software.

Plagiarism

When you pass another person's ideas or work off as your own.

Software license

Helps protect intellectual property of software by issuing licenses to users that allow them to use the software only in an authorized manner.

Creative Common License

Provides creators with licensing to encourage the sharing and distribution of their work.

NDA

Ensures parties keep sensitive and proprietary information confidential.

USPTO-United States Patent and Trademark Office

A grant of property rights by the U.S. Government through the USPTO

block element

Displayed as a block

inline element

Displayed in-line within a block

reset styles

Supersedes the browser’s default styles, providing a consisting starting point for page design.

fixed layout

Size of the page and page elements are fixed, usually using pixels as the unit of measure

fluid layout

The width of the page elements are set as a percent of the available screen width

elastic layout

Images and text are always sized in proportion to each other in em units

responsive design

The layout and design of a page changes in response to the device that is rendering it

content box model

The width property refers to the width of an element content only with additional space include padding or borders

border box model

The width property is based on the sum of the content, padding, and border spaces. Additional space taken up by the padding and border is subtracted from space given in the content

container collapse

An empty container with no content

grid-based layout

A systematic approach to visualizing how to best fit content onto the page

framework

A software package that provides a library of tools to design a website. Normally includes style sheets for grid layouts and built-in scripts to provide support for a variety of browsers and devices

Return to top

Graphical Design with CSS

vector graphic

An image format where the lines and curves that comprise the image are based on mathematical functions

bitmap graphic

An image format in which the image is comprised of pixels that can be marked with different colors.

image transparency

The background color of the image is transparent and allows the background color of the web page to show through.

image interlacing

An image is displayed gradually and has the appearance of a blurry picture coming into focus.

animation

Allows an element gradually change from one style to another.

svg

Scalable Vector Graphics. AN XML markup language that can be used to create vector images.

Figure

Used for content that is directly referenced within an article and could be text.

Tiling

A process by which a background image is repeated, filling up the background space.

watermark

A translucent graphic that is part of the page content and that displays a message that the content is copyrighted or in draft form or some other message directed toward the reader.

Color gradient

A background in which one color gradually blends into another color

transform

Rotating, rescaling, and translation in space to affect the appearance of page objects.

perspective

A measure of how rapidly objects appear to recede from the viewer in a 3D space

Filter

Adjust how a browser renders an image, a background, or a border and modify an object’s color, brightness, contrast, or general appearance.

Image map

Information that specifies the location and URLs associated within each hotspot within an image.

Hot spot

A region within an image that can be linked to a specific URL.

Return to top

Mobile Web Design

RWD- Responsive Web Design

Allows a web devloper to specify different CSS rules for some/all elements depending on width of screen

Media queries

Used to associate specific style rules with specific devices

Media features

Provide more specific details to media queries by testing for a specific feature of the user agent/display device

Breakpoints

The width at which the layout no longer looks good, or at which you decide to move elements, or add or remove content.

Device pixel

A pixel that refers to the actual physical pixel on a screen

Visual viewport

Displays the web page content that fits within a mobile screen

Layout viewport

Contains the entire content of the page, some of which may be hidden from the user

CSS pixel

A pixel that is the fundamental unit in CSS measurements

Emulators

Software programs that enables one computer system to imitate the functions of another

Flexbox

A box containing items whose sizes can shrink or grow to match the boundaries of the box

Minified code

Removing uneccessary characters from HTML and CSS files in order to increase processing speed

Return to top

Tables and Columns

Web Table

An HTML structure consisting of multiple table rows with each row containing one or more table cells.

thead

Table head; To mark row groups in the table head

tbody

Table body; To mark row groups in the table body

tfoot

Table footer; To mark row groups in the table footer

td

Table data (td) element; they contain the content within the table element.

tr

Table row (tr) element; they mark the rows within a table element.

th

Table header (th) element; they mark the header cell within a table row.

Row

A section containing cells in a table that is organized horizontally

column

A section containing cells in a table that is organized vertically

rowspan

A cell that spans several rows

colspan

A cell that spans several columns

border-collapse

Borders from adjacent elements are merged together to form a single border that are joined in a new style that combines features of both borders.

border-spacing

The spacing between the borders is set using CSS units of measurement.

vertical-align

Aligning items in a vertical format

Return to top

Web Forums

form

Are used for users to enter data to be saved and processed

CGI

Common Gateway Interface: a server-based program, written in Perl, used for processing web form data.

Parse

Analyzing and converting a program into an internal format that a runtime environment can actually run

Raw text string

Any string, block, or group of only alphanumeric characters.

method attribute

Specifies how the browser should send form data to the server

action attribute

Provides the location of the web server program that processes the form

fieldset

A web form feature that groups fields that share a common characteristic or purpose.

legend

Describes the content of a fieldset using the legend element

label

Associating a text string with a control

name attribute

Provides the name of the data field associated with the control

input controls

Attribute that displays player controls for a multimedia clip

input controls: text

A web form control for entering text strings that may include several lines of content.

input controls: submit and reset buttons

Submit buttons submits a form to the server for processing when clicked and reset buttons reset a form by changing all fields to their default values and deleting any field values a user has entered.

input controls: email

an input box used for email addresses

input controls: tel

An input box used for telephone numbers

input controls: file

A widget from which users can select a local file

input controls: number

A spin box from which users can select a numeric value

input controls: datetime-local

Date and time fields that ensure the users enter data in the correct format

input controls: url

An input box used for entering URLs

radio or option box

Buttons that appear as seperate controls in the web form

select List

A list box that presents users with a group of possible values for the data field.

access key

A single key on the keyboard that can be pressed in conjunction with another key to jump to a location on the webpage

virtual keyboards

A keyboard that exists as a software representation of a physical keyboard

autocomplete attribute

Automatically completes an input control based on previous user entries.

value attribute

Used to specify a default field value

placeholder attribute

A text string that appears within a form control, providing a hint about the kind of data that should be entered into the field.

Return to top

codec

A computer program that encodes and decodes streams of data

lossy compression

File compression in which nonessential data are removed to achive a smaller file size

media player

A software program that decodes and plays multimedia content

audio formats

MP3, AAC, OGG, WAV

video formats

MPEG-4, OGG, WEBM

plug-in

A software program accessed by the browser to provide a feature not native to the browser

embedded project

An object, such as graphic image or media clip, that appears within a web page

object

A container for an external resource embedded in the document

mime-type

An extension that provides a way of attaching nontextual content to e-mail messages

poster

A preview image set as a placeholder for a multiemedia video

text track or WebVTT

A text file format used for storing video text tracks

cue

The specific time intervals within the media clip

parameters

Values passed to the object controlling the object's appearance and actions

iframe

HTML element used to inset windows showing external content within a web page

inline frame

Windows within a web page that show external content

transition

A change in an object's style from an initial state to an ending state

timing function

Define the varying speed of the transition

keyframe

A series of images that are displayed in rapid succession to create the illusion of motion.

Return to top