IES: HTML-recog dk10 Flashcards

1
Q
  • Each area tag must have this attribute to specify the hyperlink’s target
  • Used on: <a>, <area>, <base>, and <link>.
  • <a> or <area>: specifies the link’s URL.
  • <base>: specifies base URL for all relative URLs on a page.
  • <link>: specifies external resource URL (e.g. stylesheet file)
A
href
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q
  • Element specifying SELF-CONTAINED CONTENT, like illustrations, diagrams, photos, code listings, etc.
  • Content related to the main flow
  • Position independent of main flow/ should’nt affect doc flow.
  • Additional way to insert <img>s into a web page: <img> can be nested within making <img> self-contained.
  • Embeds <img> related to the main text content but removed would’nt disrupt the meaning: <img> can now be positioned away from text & referenced by a <figcaption>.
  • Example coding:
    ~~~
    <_________>
    <img></img>
    <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption></__________>
    ~~~
A

<figure>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q
  • Element defines a caption for a <figure>.
  • Can be placed as the first or last child of the <figure>.
  • Should include the <figure>’s label as well as its title / descriptive caption.
  • Example coding:
    <figure>
    <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
    <\_\_\_\_\_>Fig.1 - Trulli, Puglia, Italy.</\_\_\_\_\_\_>
    </figure>
A

<figcaption>

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

```

  • Element used to contain multiple image sources: browser selects most appropriate size - different devices or screen sizes
  • Gives web developers more flexibility in specifying image resources (selection can include totally different images).
  • Contains one or more <source>s, each referring to different images through srcset.
  • Each <source> has media attribute defines when image is most suitable.
  • Can enclose a final regular <img> for display on older web browsers not supporting multiple image selection feature.
  • Example coding:
    <\_\_\_\_\_\_\_>
    <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
    <source media="(min-width:465px)" srcset="img_white_flower.jpg">
    <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
    </\_\_\_\_\_\_\_\_\_>
A

<picture>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q
  • Attribute defines the set of images browser is allowed to choose from, & what size each image is.
  • Specifies URL of the image to use in different situations.
  • Is required when <source> is used in <picture>.
  • Example coding:
    <picture>
    <source media="(min-width:650px)" \_\_\_\_\_\_\_\_="img_pink_flowers.jpg">
    <source media="(min-width:465px)" \_\_\_\_\_\_\_\_="img_white_flower.jpg">
    <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
    </picture>
A

srcset

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q
  • Specifies multiple media resources for media elements, such as <video>, <audio>, & <picture>
  • Allows specification of alternative files the browser may choose from, based on browser support or viewport width.
  • The browser will choose the first one it supports, so file list precedence is important as to which is used.
  • Does not require a closing tag
  • Example coding:
    <audio controls>
    <\_\_\_\_\_\_\_ src="horse.ogg" type="audio/ogg">
    <\_\_\_\_\_\_\_ src="horse.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
    </audio>
A

<source>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q
  • Specifies communication method/device the linked document is optimized for: target URL is designed for special devices (like iPhone) , speech or print communication forms.
  • Specifies the minimum screen width suitable for the source element image (Ex. coding: \_\_\_\_\_\_=”(min-width : 500px)” )
  • Can accept several values.
  • Can be used on the following elements: <a>, <area>, <link>, <source>, and <style>.
  • Only used if the href attribute is present.
  • This attribute is purely advisory.
  • Example coding:
    ~~~
    <a href=”att_a_______.asp?output=print”
    ______=”print and (resolution:300dpi)”>
    Open _______ attribute page for print.</a>
    ~~~
A

media

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q
  • Defines the minimum width of an element.
  • Property of the media attribute of a source element.
  • Assigns a minimum screen-width requirement In order for an image to be displayed on a specific device.
  • If content is smaller than the minimum width, the minimum width will be applied.
  • If content is larger than the minimum width: has no effect.
  • Used in CSS styling
A

Min-width property

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q
  • Element defines an external resource to be embedded into an HTML document
  • Can specify dimensions to width and height attributes;
  • When appropriate, can include a usemap attribute;
  • Fall-back text can be included.
  • Can specify the resources URL to its data attribute and the resource type to its type attribute
  • Must contain at least one data attribute OR one type attribute: The resource type must be a valid MIME type describing the resource.
A

<object>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q
  • Defines a container for an external resource, such as a web page, a picture, a media player, or a plug-in application.
  • Integrates an external resource for interaction with the HTML document
  • Picture display: better to use an <img> ;
  • HTML display: better to use <iframe> ;
  • Video or audio display: better to use <video> or <audio>.
A

<embed>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q
  • Scalable vector graphics are
  • Scalable Vector Graphics is a web-friendly (supported by browsers that support modern HTML) vector file format.
  • As opposed to raster (graphic representing a 2D pic as a rectangular matrix or grid of pixels) files like JPEGs, vector files store images via mathematical formulas based on points and lines on a grid.
  • Vector graphics store the graphic info as a series of paths: highly efficient way to describe graphics.
  • Can be scaled without a loss of fidelity;
  • can be enlarged without suffering pixelation ;
  • can be zoomed without a loss of definition
  • can be printed without a loss of resolution;
  • Can be given JavaScript functionality:
  • can be animated.
  • Can be embedded in HTML by specifying the MIME type of “image/\_\_\_+xml” to the <embed>’s type attribute
  • Example coding:
    <body>
    <\_\_\_\_ width="400" height="200">
    <rect width="200" height="100" x="100" y="50" rx="20" ry="20" fill="blue" />
    Sorry, your browser does not support inline \_\_\_\_.
    </\_\_\_\_>
    </body>
A

SVG

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q
  • The inline frame
  • creates a fixed area on page to display embedded external resource (a web page within a web page).
  • Width & Height Dimensions must be specified(scroll bar appears when exceeded).
  • The external resource URL is specified to its src
  • Optional: include a name as a unique identifier for frame.
  • Accessibility: always include title attribute
  • Example coding:
    <\_\_\_\_\_\_\_ src ="externalContent.html" width="400" height="300">
    <p>Your browser does not support iframes.</p>
    </\_\_\_\_\_\_\_>
A

<iframe>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q
  • Used on: <a>, <area>, <base>, & <form>.
  • <a> & <area> : Specifies where to open the linked document.
  • <base> : Specifies the default target for all hyperlinks & forms in the page.
  • <form> : Specifies a name or a keyword indicating where to display response received after submitting the form.
  • Optional: defaults to _self when no value is provided.
  • Example coding:
    <a href="https://www.w3schools.com" \_\_\_\_\_\_="_blank">Visit W3Schools</a>
A

target

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q
  • **Embeds sound content **in documents.
  • May contain one or more sources: represented using src or <source> (the browser will choose the first one it supports).
  • Can also be the destination for streamed media.
  • Fall back message can be included between opening & closing tags if element is unsupported.
  • Include an id so as to be referenced.
  • Only 3 supported formats in HTML: .mp3 ; .wav ; .ogg
  • Example coding:
    <\_\_\_\_\_\_ controls loop>
    <source src="horse.ogg" type="\_\_\_\_\_\_/ogg">
    <source src="horse.mp3" type="\_\_\_\_\_\_/mpeg">
    Your browser does not support the \_\_\_\_\_\_ tag.
    </\_\_\_\_\_\_>
A

<audio>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q
  • Boolean attribute
  • Specifies the browser should immediately begin playing the audio resource
  • Should avoid automatic audio playback in a website as many users detest this feature
  • Example coding:
    ~~~

<audio controls autoplay>

<source></source>

<source></source>

Your browser does not support the audio element.
</audio>
~~~

A

autoplay

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q
  • Boolean attribute
  • Specifies the browser should replay the audio or video resource again every time it is finished.
  • Example coding:
    ~~~

<audio controls loop>

<source></source>

<source></source>

Your browser does not support the audio tag.
</audio>
~~~

A

loop

17
Q
  • Boolean attribute
  • Specifies the browser should display user controls (such as a play/pause button etc) to start or stop the audio or video playing.
  • Example coding:
    ~~~

<audio controls loop>

<source></source>

<source></source>

Your browser does not support the audio tag.
</audio>
~~~

A

controls

18
Q
  • Specifies if and how the media file should be loaded when the page loads.
  • Accepts values of auto or none to suggest whether the browser should load the audio resource so it is ready to play.
  • Can provide for the browser a hint as to the best user experience.
  • May be ignored in some instances: Is ignored if autoplay is present.
  • Example coding:
    ~~~

<audio controls preload=”none”>

<source></source>

<source></source>

Your browser does not support the audio element.
</audio>
~~~

A

preload

19
Q
  • Coder / decoder as well as compression / decompression.
  • **A hardware- or software-based process for large amounts of data. **
  • Example: Windows Media Player provides a limited set of these.
  • Compresses/shrinks media files to save device space & efficiently send those files over a network such as the internet.
  • There are hundreds of different ones: not all browsers incorporate the same.
  • Used in applications to:
    Play media files for users
    Create media files for users
    Send media files over a network.
A

Codec

20
Q
  • Advanced Audio Coding
  • A commonly used audio compression codec developed by MPEG (Moving Picture Experts Group)
  • The most commonly supported audio codec
  • Designed as .mp3 format successor, generally achieves higher sound quality than .mp3 encoders at the same bit rate.
  • Available in every major browser and device for .mp3 audio
  • An audio coding standard for lossy (unnecessary information is discarded) digital audio compression.
  • Two common versions of AAC: AAC-LC (Low complexity) and AAC-HE (High Efficiency).
  • Has been standardized by ISO (International Organization for Standardization) and IEC (International Electrotechnical Commission) as part of the MPEG-2 and MPEG-4 specifications.
A

.AAC