IES: HTML-recog dk9 Flashcards
1
Q
- The table header element groups special table info and header content before the table content.
- Table data should not appear here
- Used in conjunction with the
<tbody>&<tfoot>:
Specifies each part of a table (header, body, footer).
Can enable scrolling of table body independent of the header & footer.
Can enable printing of header & footer at each page top & bottom of a multiple-page table. - Must have one or more
<tr>tags inside. - Must be a child of a
<table>; after any<caption>&<colgroup>’s; and before any<tbody>,<tfoot>, &<tr>’s. - This element,
<tbody>, and<tfoot>will not affect the layout of the table by default. - Example coding:
~~~
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<!--...-->
</table>
~~~
</tbody></table>
A
<thead>
2
Q
- Used to group the body content in an HTML table.
- When <thead> and/or <tfoot> is present, the <tr>’s bearing table content must all be placed within this element.
- In long tables, multiple table bodies can be used.
- Used in conjunction with the
<thead>&<tfoot>:
Specifies each part of a table (header, body, footer).
Can enable scrolling of table body independent of the header & footer.
Can enable printing of header & footer at each page top & bottom of a multiple-page table. - Note: Must have one or more
<tr>tags inside. - Must be: a child of a
<table>; after any<caption>,<colgroup>, &<thead>’s; and before the<tfoot>. - By default,
<thead>,<tbody>, and<tfoot>do not affect the table layout. - Example coding:
~~~
<table>
<thead>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
~~~
A
<tbody>
3
Q
- Column tags can specify greater control over column width and appearance.
- (The default width for a column is the width of the column content)
- No closing tag
- Specifies column properties for each column within a
<colgroup>element. - Useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
A
<col>
4
Q
- Attribute allowing cells to merge and the cell content to spread over multiple columns.
- Defines the number of columns a cell should cover.
- (Syntax):
<td \_\_\_\_\_\_\_="number">
(The value"number"specifies the number of columns a cell should cover.) - Specifies that the parameters & rules of one
<th>or<td>is represented/applied over multiple columns. - Example coding:
~~~
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
...
<tr>
<td \_\_\_\_\_\_\_\_\_="2">Sum: $180</td>
</tr>
</table>
~~~
A
colspan
5
Q
- This attribute specifies that the parameters and rules of one column is represented/applied over multiple columns
- Can be used with the
<col>or<colgroup>elements. - Example coding (ignore parentheses inserted in coding- for flashcards only):
~~~
<table>
<colgroup>
<col (\_\_\_\_\_="2" style="background-color:red;")>
<col (style="background-color:yellow;")>
</colgroup>
<!--...-->
</table>
~~~
A
span
6
Q
- Specifies a group of one or more columns in a table for formatting allowing styling of both column groups and individual columns.
- Useful for applying styles to entire columns, instead of repeating styles for each cell or each row.
- Must be a child of a
<table>, after any<caption>& before any<thead>,<tbody>,<tfoot>, &<tr>’s. - To define different properties to a column within a grouping, use the
<col>tag within this grouping tag.
A
<colgroup>
7
Q
- Adds an image to an HTML doc
- Preferably includes these attributes: src, width, height, alt
- It is more efficient (consider site load time) to adjust an image with a graphics editor to the actual dimensions of the content area it will occupy
A
<img>
8
Q
- Specifies the breadth of an element, in pixels.
- Can be used on the following:
<canvas>,<embed>,<iframe>,<img>,<input>,<object>, and<video> -
<img>: Recommended to specify the pixel width of the content area the image will occupy on the page -
<img>Only scale an image down from the actual image size: Scaling up causes pixelation of the image. -
<img>The image size need not be exact to the specified content area, but the h x w proportion should be maintained to avoid distortion in the image. - For
<input>, the width attribute is used only with<input type="image">.
A
width
9
Q
- Specifies the height of the element, in pixels.
- Can be used on the following elements:
<canvas>,<embed>,<iframe>,<img>,<input>,<object>, and<video> -
<img>Recommended to specify the pixel height of the area the element will occupy on the page - (only scale an image down from the actual image size: Scaling up causes pixelation of the image)
-
<img>The image size need not be exact to the specified content area, but the h x w proportion should be maintained to avoid distortion in the image.
A
height
10
Q
- Attribute specifying the location (URL) of an external resource by either its absolute or relative path.
- Can be used on the following elements:
<audio>,<embed>,<iframe>,<img>,<input>,<script>,<source>,<track>, and<video>
A
src
11
Q
- Provides alternative information for an image if a user for some reason cannot view it such as:
Slow connection,
An error in the src attribute,
The user requires the use of a screen reader - Can be used on the following:
<area>,<img>, and<input>. -
<area>(validation will fail unless each includes an alt attribute). -
<img>Required for this element. -
<input>Can only be used with<input type="image">.
A
alt
12
Q
- Bitmap file format for web graphics.
- Computers display graphic files onscreen by reading the bitmap to determine which colours to use to “paint” the screen.
- A method using an array of binary data to define a display space (such as .gif files).
- It defines the values of the pixels (or bits) including the colours in an image or display.
- Bitmapped font: each character is defined as a pattern of dots in a bitmap.
- (Should avoid for web graphics as the file sizes are quite large.)
A
.bmp
13
Q
- The Portable Network Graphics file format.
- Transfers images on the internet
- Optimum file type for web bitmap graphics: popular and non-proprietary
- The most frequently used uncompressed raster image format on the internet (raster: a rectangular pattern of parallel scanning lines followed by the electron beam on a tv screen or monitor).
- Lossless data compression format created to replace the .gif file.
- Able to display transparent backgrounds.
- Capable of containing 24bit RGB color palettes and greyscale images.
- Capable of accepting lots of editing effects.
A
.png
14
Q
- Possible if an image map is added to define hotspot areas for each hyperlink
- Required: the image tag must include a usemap attribute to specify a map name prefix by a hashtag
- The image map itself is contained between <map> tags and it’s name is specified by a name attribute.
A
Single image targeting multiple hyperlink resources
15
Q
- Element used to define an image map (an image with clickable
<area>s). - The required “name” attribute is associated with the
<img>’s usemap attribute and creates a relationship between the image and the map. - Contains a number of
<area>elements that define the clickable areas in the image map. - Example coding (ignore parentheses inserted into coding- for flashcards only):
~~~
<img (src=”workplace.jpg” alt=”Workplace” usemap=”#workmap” width=”400” height=”379”)>
<_____ (name=”workmap”)>
<area (shape=”rect” coords=”34,44,270,350” alt=”Computer” href=”computer.htm”)>
<area (shape=”rect” coords=”290,172,333,250” alt=”Phone” href=”phone.htm”)>
<area (shape=”circle” coords=”337,300,44” alt=”Cup of coffee” href=”coffee.htm”)>
</_____>
~~~
A
<map>
