Web Design Certification Prep
Terms in this set (89)
www in the website www.MrReyes.com
server (host) name
MrReyes in the website www.MrReyes.com
.com in the website www.MrReyes.com
top-level domain (identifies what type of website it is)
the top level domain .com is for
Top level domain used for commercial websites, businesses, or companies
the top level domain .edu is for
Top level domain used for educational websites
the top level domain .org is for
Top level domain used for organizations like clubs, associations, and non profits
the top level domain .mil is for
top level domain used for military websites
Aesthetic Web Design
The look and feel of a website. Includes graphics and image, Layout, Color scheme, and Typography
Contrast, Alignment, Repetition, Proximity
Two or more page elements display differently in color, size, shape, texture, orientation, position or movement to group or separate elements on the page
The placement, position, orientation and grouping of elements
The use of white space and logical structure (such as grouping related items) to create visual unity.
Secondary Color in web design
Yellow, Cyan, Magenta
primary colors in web design
Red, Green, Blue
color schemes use varying colors, shades or tints of the same hue. Start with a base color, generally darker, and then choose at least two other shades of the base color.
Analogous color schemes
use colors that are next to each other on the color wheel. They are usually a good match and create eye-pleasing effects.
across from each other on the color wheel.
images made of pixels (small dots)
composed of lines and curves
Most common graphic file type. Does not support animation. Small file size, supports lossy compression
Supports animation and transparency, lossless compression larger file
lossless compression, supports animation, smaller than GIF
an image is compressed & all the information can be restored
permanently eliminates certain information and image cannot be fully restored
refers to the arrangement and appearance of text. Concerns not only the look of the glyphs, but how they are placed on the page. Includes page margins, the amount of empty space between paragraphs or lines, the alignment of text, etc.)
assesses how easy a user interface is to use.
Measures the quality of a person's experience while interacting with a Web site.
Human-Computer Interaction (HCI)
the study, planning, design and uses of the interaction between people and computers.
Components of HCI
Learnability - How easy is it for people to use the first time they try?
Efficiency - Once users are familiar with the design, how quickly can they do what they want or need to do?
Memorability - If someone doesn't use the design for some time, how easy will it be for them to become familiar with it again?
Errors - How many errors users make, how quickly do they recover from them and how much trouble is it to fix?
Satisfaction - How pleasant is it to use this product?
Steps to Effective Web Design
Assessing needs (goals) of the website
Determining content structure
Determining site structure
Determining Navigation structure
Creating a wireframe
Selecting appropriate tools to build website
Search Engine Optimization
Determining Purpose, Target Audience, and goals
The general content of the website consists of:
Primary (Home) page - generally indicates who owns the Web site, what is available on the site, and where the information is located within the site (navigation).
Secondary pages - should include the same visual identity as the primary page (including name, logo, colors, fonts).
A specific order. It's best suited for tutorial or chronological information that needs to be presented in a certain order
organize into categories and subcategories by increasing level of detail. Used most commonly on websites today.
Random or Webbed structure
do not contain a primary path. This type of structure can be confusing for visitors and is best suited for simple Web sites that contain only a few pages
helps visitors find their way around the site and encourages them to dive deeper into its contents.
navigation aid to help users to keep track of their locations within programs or documents
is a visual representation of a Web page layout.
Text (HTML) editors
Create Web pages by typing in markup language tags and other related text into a document. Incapable of displaying formatting, fonts or graphics on display screen while editing. Must know some HTML, NO TEMPLATES! MUST TRANSFER FILES TO A WEB HOST
GUI Web Editors
Also called WYSIWYG. Allow designers a more visual approach to creating Web pages. Display formatting, fonts and graphics on screen while editing. Must still learn the interface. CONTAINS PRE-DEFINED TEMPLATES. MUST TRANSFER FILES TO A WEB HOST
a company that has servers that are permanently connected to the Internet.
Online Site Builder
No need to transfer web files to a web host.
Contain a variety of pre-designed templates for designers to use and customize. Lose flexibility and control. TEMPLATE AND GRAPHICS USED BY THE OSB ARE COPYRIGHTED. If you want to move your site to another host, you will have to create a new Web site.
Content Management System (CMS)
Pre-designed templates and allow you to connect to your site with your browser for modifications. Not tied to a Web host. You can choose where to host your site. Some offer a variety of social media and interactive options, such as member pages and blogging. Harder to use than site builders.
Require you to upload files, set up a database and configure on your system.
The process of improving how high your web site is ranked in the various search engines
The practice of making websites usable by people of all abilities and disabilities.
Hyper Text Markup Language (HTML)
Authoring language used to create documents on the World Wide Web. Defines the structure and layout of a Web page. (How a page looks and any special functions).
reference (link) to information in a different location
an individual HTML document
written in HTML (hypertext markup language)
translated a web browser
is a collection of web pages.
a computer system that hosts websites
an application (software) used to access and view websites. Examples: Microsoft Internet Explorer, Google Chrome, Mozilla Firefox, and Apple Safari
World Wide Consortium W3C
Provides standards for applications, scripts and dynamic content privacy and security guidelines
create structure (such as paragraphs and lists), tell the browser how to display the text contained in the document, must be surrounded by angle brackets ( < > )
the text inside the angle brackets <title> Used to create structure (format). They tell the browser how to display the content
includes a set of opening and closing tags. <title> This is my page title </title>
The closing _____________ contains a forward slash (/) that tells the browser the tag has ended.
First line of an HTML document
All HTML documents must start and end with
<html> and </html>.
All other tags in the document are nested within the <html>tags
Tells the browser the document is written using the HTML language and needs to be rendered (or displayed) using the HTML rules.
HTML documents are made up of two sections
Basic HTML order
information needed by the browser and search engines, document title, page description, a link to a file that helps display the page properly, or a file that creates the document's interactivity
describes other data. It provides information about a certain item's content, is inserted in the <head> section of the HTML document
occupies the entire space of its parent element (container), thereby creating a "block".
contain all other HTML document content, such as text, images and videos. The content within the body tags is displayed in the browser window.
contain only data and other inline elements.
Often called "text level". Do not add the blank line of space. No "borders"
defines a paragraph.
Browsers automatically add some space (margin) before and after each <p> element.
Define hierarchy and structure of a Web page.
<h1> element is the highest level and uses the largest font size.
<h6> element is the lowest level and uses the smallest font size
Ordered list tags
starts with the <ol> tag.
Each list item starts with the <li> tag. The list items will be marked with numbers.
Unordered list tag
has bullets instead of numbers.
Starts with the <ul> tag and ends </ul>.
Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles).
When you are using an extended quotation—a quotation that's longer than a sentence
provide additional information about HTML element
Declares the language
Important for accessibility applications (screen readers) and search engines
tag for hyperlink
Defined with the <a> "anchor" tag.
specifies the page to open
Inserts an image in the content
Cascading Style Sheets (CSS)
Single file that describes how HTML elements in a page are displayed. Saves a lot of time and effort
Can describe and control how multiple Web pages are laid out, without having to redo the code for every page.
Tables are defined with the
Dynamic HyerText Markup Language (DHTML)
Combination of Web development technologies
Used to create: animations, dynamically changing websites. DHTML enhances the website user's experience. The technology may also be frustrating for users when it is used incorrectly.
Only use when relevant to web content
To work with another person or group in order to achieve or do something
is an online journal
the person who creates and maintains a blog.
Open forum for a community to share ideas about a topic. Allows all group members to access, contribute, and share ideas and knowledge to create an online resource.
Steps for preparing to publish a website
Check your content
Test Site Pages
Check for Compatibility
Conduct a Usability Test
A law establishing the right of an individual to the ownership of his/her creative works and how he can use them.
The person who creates some form of media that represents an original idea is the only person who can use it without him/her give permission.
File Transfer Protocol (FTP)
Transfers files via the Internet from one computer to another. Use to add, update, rename, remove, copy and perform other file management tasks. NOT A SECURE PROTOCOL!!
Secure protocols encrypt the user name and password, protect the transfer from being open to the public.
Ensures privacy on the Internet. Converts data into an unreadable form: ciphertext. . Important because information can be intercepted as it travels on the Internet.
A protocol that is used for FTPS
Verifies the identity of the computer making the remote connection. Encrypts the data that is being transferred between the server and the client computer.
Secure Sockets Layer (SSL)
Secure protocol developed for sending information securely over the Internet.
Usually information captured in a web form
when a multimedia file can be played back without being completely downloaded first