IES: HTML dk10

Question 1

• 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)

Answer 1

href

Question 2

• 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 src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</\_\_\_\_\_\_\_\_\_\_>

Answer 2

<figure>

Question 3

• 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>

Answer 3

<figcaption>

Question 4

```

• 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;">
</\_\_\_\_\_\_\_\_\_>

Answer 4

<picture>

Question 5

• 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>

Answer 5

srcset

Question 6

• 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>

Answer 6

<source>

Question 7

• 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>

Answer 7

media

Question 8

• 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

Answer 8

Min-width property

Question 9

• 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.

Answer 9

<object>

Question 10

• 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>.

Answer 10

<embed>

Question 11

• 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>

Answer 11

SVG

Question 12

• 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>
</\_\_\_\_\_\_\_>

Answer 12

<iframe>

Question 13

• 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>

Answer 13

target

Question 14

• **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.
</\_\_\_\_\_\_>

Answer 14

<audio>

Question 15

• 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 src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Answer 15

autoplay

Question 16

• Boolean attribute
• Specifies the browser should replay the audio or video resource again every time it is finished.
• Example coding:

<audio controls **loop**>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

Answer 16

loop

Question 17

• 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 src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

Answer 17

controls

Question 18

• 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 src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Answer 18

preload

Question 19

• 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.

Answer 19

Codec

Question 20

• 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.

Answer 20

.AAC