HTML and CSS

Question 1

HTML

Answer 1

• Hypertext Markup Language
• consists of entirely of tags
• files usually end in .html or .htm

Question 2

Absolute filepaths

Answer 2

point directly to a file using a full path to its direction

Question 3

Relative filepath

Answer 3

how to get to the file relative to the HTML file containing that link
eg. images/apple.jpg

Question 4

what are the attributes to
img src=’picnic.jpg’ width=’200’/

Answer 4

src and width are attributes to img

Question 5

b

Answer 5

bold text

Question 6

i

Answer 6

italicized text

Question 7

ul

Answer 7

unordered list

Question 8

ol

Answer 8

ordered list

Question 9

li

Answer 9

adds a list item to <ul> or <ol>

Question 10

div

Answer 10

create layouts w/o a table

Question 11

Input attributes

Answer 11

• name: ID for the input
• value: text displayed on/in the input
• placeholder: temporary, descriptive text
• tabindex: gives an order to the elements for users to “tab” through them

Question 12

label for=” “

Answer 12

• associated filed becomes focused
• field becomes activated so that the user can begin typing in it
• reference field by its ID attribute

Question 13

Captcha

Answer 13

• prevents bots from automatically filling out web forms
• eg. Google’s reCaptcha

Question 14

In HTML, which attribute is used to specify that an input field must be filled out?

Answer 14

required

Question 15

attribute to limit how many characters can be entered

Answer 15

“maxlength”

Question 16

Server processing for form validation

Answer 16

• PHP is a common server-side language
• databases/external files
• processing orders (e-commerce)
• functions involving security
• anything that the host needs to know about or track

Question 17

Client processing for form validation

Answer 17

• JavaScript is used for client side coding
• interactivity/animations
• non-secure form processing
• receiving user input in real-time
• loading or changing elements that appear on a user’s device

Question 18

CSS

Answer 18

• Cascading Style Sheets
• only to style websites

Question 19

Padding

Answer 19

space inside the element, keeping its contents away from the edges

Question 20

Margin

Answer 20

space outside the element, keeping it away from other elements

Question 21

‘position’ styles

Answer 21

static, relative, absolute, fixed, sticky

Question 22

position: static;

Answer 22

default value, it’s added sequentially in the site and cannot be moved

Question 23

position: relative;

Answer 23

similar to static but can be shifted w/ TRBL values

Question 24

position: absolute;

Answer 24

• location is directly based on TRBL values within its parent
• precise location, doesn’t care what it’s underneath

Question 25

position: fixed;

Answer 25

location is locked in place

Question 26

position: sticky;

Answer 26

position changes between relative and fixed on scrolling

Question 27

Top, right, bottom, and left (TRBL)

Answer 27

- can be set, but their behavior depends on the position type - no effect on static position

Question 28

'display' styles

Answer 28

block, inline block, none, table-cell

Question 29

display: block;

Answer 29

takes up entire (up and down)

Question 30

display: inline-block;

Answer 30

- can be place in row (side by side) - will only stay together if they can fit

Question 31

display: none;

Answer 31

not added to page

Question 32

display: table-cell;

Answer 32

- placed side by side and resizes to fit a row - elements remain together and just squish smaller

Question 33

rule-set selector { property1: value1; property2: value2; }

Answer 33

group of styles for a certain selector or selectors

Question 34

selectors

Answer 34

- ways of determining which elements are given the styles of the rule set - 3 main types of selectors: tag/element, class name, ID

Question 35

Class selectors

Answer 35

- apply to all elements that are given the specific class - eg. .nav

Question 36

ID selectors

Answer 36

- apply to the element w/ that ID - IDs must be unique and not given to multiple elements

Question 37

'type' attribute for web forms

Answer 37

- "text" - "radio" - "submit"

Question 38

Wrapper or container

Answer 38

- include all or most of the content in a giant div - often centered to keep the content in the middle

Question 39

section (tag)

Answer 39

keeping the different areas separated

Question 40

columns

Answer 40

- done by using 'display' styles, 'float' styles, or 'position' styles - display: block, inline-block, table-cell - float: left or right - position: absolute

Question 41

float

Answer 41

let text wrap around an image on the left or right

Question 42

Child selectors

Answer 42

- parent selector, space, then child selector - can continue w/ multiple levels of children - eg. ul li, .nav li

Question 43

Combined selectors

Answer 43

- tag and class and ID selectors can be combined to select elements of a certain tag AND have a specific class or ID - eg.div.nav{}

Question 44

Psuedo-classes

Answer 44

- advanced CSS selectors that apply to certain states or actions on elements - ie. hovering the cursor over an element - eg. :hover

Question 45

Transitions

Answer 45

- specify the parameters like duration, speed curve, and time delay - usually triggered by :hover, :focus, or another pseudo-class

Question 46

Animations

Answer 46

- independent of user input - uses keyframes (@keyframes)

Question 47

Animation parameters

Answer 47

- growAnim: grow in different segemnts 0%{width:200px;} 100%{width:300px;} - 3 main parameters: animation name, duration, iteration count (looping) - direction: normal (start to finish), reverse (finish to start), alternate, etc. - timing function: ease, ease-in, ease-out, linear, etc.