Web Design Exam Flashcards
What does HTML stand for?
Hypertext Markup Language
What are the 4 rules of XHTML 1.0
- Close all tags
- All tags lowercase
- All attributes in quotes
- All tags properly nested
What is the first line in an HTML5 page?
< hr >
Horizontal rule or line tag
What is the syntax for adding an image?
< img src’“file.jpg” alt=”alternative name” >
How do you make font bold?
< strong > tag
What are the two tags for making lists?
< ol >
< ul >
Where does the < title > tag go?
The head
How do you add a link?
< a href=”url.com” > < /a >
What has to be added to an anchor tag to make a webpage open in a new tab?
target=”_blank”
How do you link an email?
href=”mailto:email@email.com”
How to you link a phone number?
href=”tel:5551234567”
What do you add to the stylesheet to make sure HTML5 elements are displayed properly on old browsers?
display: block;
How do you specify class in CSS?
.classname
How do you specify id in CSS?
idname
What is the shorthand for specifying margin?
margin: top, right, bottom left
What is the syntax for adding borders?
border: width style color
ex. border: 1px solid red;
What is the order of elements in the box model from the inside out?
content - padding - border - margin
How do block elements work?
Start on a new line and take up entire width available
How do inline elements work?
Rendered where they occur and only take up as much space as necessary
Which element should you add a float to?
The first in the code
What line of code should always be added when using float?
Overflow: auto;
What is the syntax for a text shadow?
text-shadow: horizontal vertical colour
ex. text-shadow: 2px 2px #333;
What is the syntax for box-shadow?
box-shadow: horizontal vertical blur colour
What are the 5 types of positioning?
- Static
- Relative
- Absolute
- Fixed
- Inherit
What is the z-index?
Defines the stacking order
How do you declare a language in HTML5?
< html lang=”en-US” >
Before the head
What 2 attributes are common in meta tags?
name
content
What are the 4 principles of design?
- Proximity
- Alignment
- Contrast
- Repitition
What is the proximity principle?
Group related elements together
What is the alignment principle?
Nothing should be placed arbitrarily
What is the repetition principle?
Repeat some aspect of design to unify and add visual interest
What is the principle of contrast?
If two items are not exactly the same, then make them distinct (very different)
What is the golden ratio?
1.618 (1.62)
Rule of Thirds
Divide content into thirds, 2/3 content 1/3 whitespace
How do you add the @media rule?
@media screen and (min-width: 600px) { }
What are transitions?
They allow property changes in CSS to occur smoothly over a specified duration
What are the 2 minimum properties for a transition?
Transition and Duration
What is the optional third property for transitions?
transition-timing-function
What are the 6 options for transition-timing-function?
- Ease
- Linear
- Ease in
- Ease out
- Ease in out
- Cubic bezier
What is the optional fourth property for transition?
Delay
What are three states transitions can use?
a: focus
a: active
a: hover
What do transforms do?
Allow you to rotate, scale, skew, and move elements
What is the difference between transitions and animations?
Animations do not require a change in state
What makes a page worthy of a search result?
Good content
Linkable content
What are the 4 main categories for SEO?
- Keywords
- Links
- Content
- Site Structure
Which type of keywords are best to focus on?
Long tail keywords
Which meta tag is used for the snippet under a search result?
description
What meta tag is needed to implement dynamic web pages?
< meta name=”viewport” content=”device-width, initial-scale=1.0” >
In transform, what method moves an element from its current position?
translate()
What does ‘em’ depend on?
The size of its parent
What are the 4 options for MEDIA TYPES
- All
- Screen
- Speech
What are the 2 parts of animation?
Define animation
Assign to element
Which attribute of an < a > tag adds info to the tool tip when a mouse hovers over it?
title
