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
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>
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>
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 throughsrcset
. - Each
<source>
hasmedia
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>
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
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>
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
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
9
Q
- Element defines an external resource to be embedded into an HTML document
- Can specify dimensions to
width
andheight
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 itstype
attribute - Must contain at least one
data
attribute OR onetype
attribute: The resource type must be a valid MIME type describing the resource.
A
<object>
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>
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>
’stype
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
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>
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
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>
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