Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

CS214 Web Page Design > Chapter 7 - Adding Images > Flashcards

Chapter 7 - Adding Images Flashcards

1
Q

Scalable Vector Graphics (SVG)

A

a special image type that is mathematically calculated into existence

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

bitmapped (raster images)

A

images that are made up of a grid of colored pixels

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

external image

A

making a link directly to the image file

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

MIME type

A

official media type

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

<img></img>

A

adds an inline image

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

phrasing element

A

elements that stay in the flow of text, aligned with the baseline of the text, and do not cause any line breaks

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

replaced element

A

an element that is replaced by an external file when the page is displayed

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

non-replaced

A

text elements that have their content right there in the source

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

src=”URL”

A

source (location) of the image

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

hotlinking

A

linking to an image on another server

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

cache

A

a space for temporarily storing files on the hard disk

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

alt=”text”

A

alternative text

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

alternative text (alt text)

A

serves as a substitute for the image content, conveying the same information and function - used by screen readers, search engines, and graphical browsers when the image doesn’t load

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

null

A

empty

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

width=”number”

A

image width in pixels

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

height=”number”

A

image height in pixels

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

application

A

example

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

standalone SVG

A

SVG text files saved with the .svg suffix

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

<svg>
</svg>

A

an inline SVG image

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

inline

A

copy the content of the SVG file and paste it directly into the HTML document

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

pixels

A

little squares of colored light that make up a screen display

22
Q

device pixels (hardware pixels, physical pixels)

A

the pixels that make up the screen itself

23
Q

ppi

A

pixels per inch

24
Q

resolution

A

number of pixels per inch

25
Q

reference pixel (points, PT, Device Independent Pixels, DP, DiP, CSS pixels)

A

a measurement used for layout purposes

26
Q

device-pixel-ratio

A

the ratio of the number of device pixels to CSS pixels

27
Q

px

A

pixels

28
Q

x-descriptor

A

tells the browser to make a selection based on screen resolution size only, with no regard for the dimensions of the screen or viewport

29
Q

viewport

A

the size of the browser

30
Q

viewport-based selection

A

image sizes change based on the size of the browser viewport

31
Q

w-descriptor

A

width descriptor that provides the actual pixel width of each image

32
Q

Document Object Model (DOM)

A

outline structure

33
Q

preloader

A

goes to get all images from the server upon opening a web page.

34
Q

vw

A

viewport width units

35
Q

media condition

A

describes a parameter such as the width of the viewport

36
Q

<picture>...</picture>

A

specifies a number of image options

37
Q

<source></source>

….</source>

A

specifies alternate image sources

38
Q

art-direction-based selection

A

accomplished with the picture element that picks which image to display that includes pictures of different sizes, crops, etc.

39
Q

MIME type (File MIME Types)

A

the type of file

40
Q

polyfill

A

a script that makes older browsers behave as though they support a new technology

41
Q

Which attributes must be included in every img element?

A

The src and alt attributes are required for the document to be valid. If the src attribute is omitted, the browser won’t know which image to use. you may leave the value of the alt attribute empty if alternative text would be meaningless or clumsy when read in context.

42
Q

Write the markup for adding an image called furry.jpg that is in the same directory as the current document.

A

<img></img>

43
Q

Name two reasons to include alternative text for an img element

A

a) Because HTML documents are not valid if the alt attribute is omitted
b) alt approves accessibility by providing a description of the image if it is not available or not viewable

44
Q

What might be going wrong if your images don’t appear when you view the page in a browser? There are three possible explanations

A

a) the URL is incorrect, so the browser is looking in the wrong place or for the wrong filename
b) the image file is not in an acceptable format
c) the image file is not named with the proper suffix (.gif, .jpg, or .png)

45
Q

What is the difference between an x-descriptor and a w-descriptor

A

x-descriptors specify the screen resolution used for targeting high-resolution monitors. the w-descriptor provides the actual size of the image file that the browser uses to make the best selection based on viewport width

46
Q

What is the difference between a device pixel and a CSS (reference) pixel?

A

a device pixel is the square of colored light that makes up the screen display; CSS pixels make up the grid that devices use to lay out what appears on the screen; the CSS pixel may be made up of multiple device pixels

47
Q

What is cache and how does it affect web page performance?

A

Disk cache is where browsers temporarily store files downloaded over the network so they can be reused. Taking advantage of cached resources eliminates the need for repeated server requests for the same file and can increase performance

48
Q

Name one advantage and one disadvantage of adding an SVG to a page with the img element

A

Advantages include simple and familiar markup, excellent browser support, image caching, and available fallbacks
Disadvantages include the inability to manipulate the parts of the SVG with style sheets or JavaScript.

49
Q

Name one advantage and one disadvantage of inline SVG

A

Advantages include the ability to take advantage of all fo SVG’s features (animation, scripting, and applying CSS style rules), good browser support, and fewer server requests.
Disadvantages include potentially unwieldy amounts of code in the HTML document, more complicated image maintenance, and lack of caching.

50
Q

When would it be appropriate to add an SVG to a page as a background image with CSS?

A

When it is purely presentational and not part of the editorial content of the page.

51
Q

What is this bit of code describing, and when might you need to use it? image/svg+xml

A

image/svg+xml is the MIME type of an SVG file. You may need to include it as the value of the type attribute in the picture element or use it to configure your server to recognize SVG files as images

52
Q

What is this bit of code describing, and where would you find it? http://www.w3.org/2000/svg

A

http://www.w3.org/2000/svg is the pointer to the SVG namespace as standardized by W3C. It appears as the value of the xmlns (XML namespace) attribute in svg elements.

CS214 Web Page Design (12 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions