COP2500 #3
Quiz yourself by thinking what should be in
each of the black spaces below before clicking
on it to display the answer.
Help!
|
|
||||
|---|---|---|---|---|---|
| Images can be... | -Links -Clickable image maps -Banners -Marquees -Billboards
-Rollovers
🗑
|
||||
| In Html images are static... | Cannot be changed without loading a new page or reloading the current page
🗑
|
||||
| <img> tag is... | tag element for an image
🗑
|
||||
| ALIGN | Floats the image either to the left or right side of the page or other defined directions (e.g. text-top, top, middle,abs-middle,bottom,abs-bottom)
🗑
|
||||
| ALT | Alternative text when the image doesn't appear
🗑
|
||||
| BORDER | Width in pixels of an image border
🗑
|
||||
| HEIGHT | Height in pixels of an image
🗑
|
||||
| HSPACE | Added space in pixels to the right and left sides of the image
🗑
|
||||
| SRC | The URL or location of the image relative to the root document
🗑
|
||||
| VSPACE | Added space in pixels to the top and bottom of the image
🗑
|
||||
| WIDTH | Width of the image in pixels
🗑
|
||||
| <map> | tag element for an image map
🗑
|
||||
| ID | Name of the image map
🗑
|
||||
| Name | Also the name of the image map
🗑
|
||||
| <area> | tag element to define the clickable areas of an image map
🗑
|
||||
| Alt (referring to image map) | What happens when the user clicks
🗑
|
||||
| COORDS (image map) | Shape of the rectangle, circle, or polygon in x,y pixel coordinates
🗑
|
||||
| HREF (image map) | Address of the page that will appear when the user clicks in the area
🗑
|
||||
| SHAPE (image map) | Assigned a type that represents the area
🗑
|
||||
| x1,y1,x2,y2 | Specifies the coordinates of the left, top, right, bottom corner of the rectangle (rect)
🗑
|
||||
| x,y,radius | Specifies the coordinates of the circle center and the radius (circle)
🗑
|
||||
| x1,y1,x2,y2,..,xn,yn | Specifies the coordinates of the edges of the polygon. (poly)
🗑
|
||||
| Cascading Style Sheets or CSS | Style Sheet language used on web sites to specify the appearance of each page element, first version introduced in 1996
🗑
|
||||
| Style rule | List of style properties to an element or group of elements
🗑
|
||||
| Format | selector is a -tag element -id -class
🗑
|
||||
| Style rule precedence | -Browser -User-defined -External -Embedded -Inline
🗑
|
||||
| Under-defined | Modify the settings in the web browser
🗑
|
||||
| External | include in HTML using link element: "externalstyle.css"
🗑
|
||||
| Embedded | Inserted directly in the <head> element
🗑
|
||||
| Inline | Applied directly to a tag element
🗑
|
||||
| CSS Defining Colors | Use color names; hexadecimal numbers
🗑
|
||||
| Hue | tint of the color based on color wheel location
🗑
|
||||
| Saturation | Intensity of the color; 0 percent-100 percent equates to no color-full color
🗑
|
||||
| Lightness | Brightness of the color; 0 percent-100 percent equates to black-white
🗑
|
||||
| Opacity values | How much of the colors below the surface of the current object show through to affect appearance
🗑
|
||||
| rgba | red,green,blue, opacity
🗑
|
||||
| hsla | hue, saturation,lightness, opacity
🗑
|
||||
| font-family | defines font face;fonts
ex. Arial, Times New Roman, Verdana
🗑
|
||||
| font-size | size;sets the font size
🗑
|
||||
| letter-spacing | size;sets the kerning (space between letters)
🗑
|
||||
| word-spacing | size;sets the tracking (space between words)
🗑
|
||||
| Size | is specified as absolute units or relative units
🗑
|
||||
| Absolute units | are a fixed size
🗑
|
||||
| Relative Units | are relative to the size of other objects on the web page
🗑
|
||||
| font-style | type; normal, italic, oblique
🗑
|
||||
| font-weight | weight; normal, bold, bolder, light, lighter
🗑
|
||||
| text-decoration | type; none, underline, overline, line-through
🗑
|
||||
| text-transform | type; capitalize, uppercase, lowercase, none
🗑
|
||||
| font-variant | type; normal, small-caps
🗑
|
||||
| Kerning | space between characters
🗑
|
||||
| tracking | space between words
🗑
|
||||
| leading | space between lines of text
🗑
|
||||
| text-indentation | indent from the left margin
🗑
|
||||
| text-align | alignment;left right center, justify
🗑
|
||||
| vertical-align | alignment; baseline, bottom, middle, sub, super, text-bottom, text-top, top
🗑
|
||||
| list- style type | Ordered or unordered; ol, ul
🗑
|
||||
| Drop shadows | text shadow
🗑
|
||||
| box shadow | box-shadow:inset color offsetY blur spread
🗑
|
||||
| Rotate object | transform style; 2d 3d
🗑
|
||||
| color gradient | linear, radial, repeating
🗑
|
||||
| rounded corners on elements | border-radius:25px
🗑
|
Review the information in the table. When you are ready to quiz yourself you can hide individual columns or the entire table. Then you can click on the empty cells to reveal the answer. Try to recall what will be displayed before clicking the empty cell.
To hide a column, click on the column name.
To hide the entire table, click on the "Hide All" button.
You may also shuffle the rows of the table by clicking on the "Shuffle" button.
Or sort by any of the columns using the down arrow next to any column heading.
If you know all the data on any row, you can temporarily remove it by tapping the trash can to the right of the row.
To hide a column, click on the column name.
To hide the entire table, click on the "Hide All" button.
You may also shuffle the rows of the table by clicking on the "Shuffle" button.
Or sort by any of the columns using the down arrow next to any column heading.
If you know all the data on any row, you can temporarily remove it by tapping the trash can to the right of the row.
Embed Code - If you would like this activity on your web page, copy the script below and paste it into your web page.
Normal Size Small Size show me how
Normal Size Small Size show me how
Created by:
Koliviapop
Popular Computers sets