Diploma in
Coding and Technology
HTML attributes
Working with HTML attributes
Creating tables in HTML
Using multimedia in HTML
Objectives
Loading…
HTML attributes
Attributes provide additional
information about elements and
expands the functionality elements.
Attributes control the behaviour of
each element.
Always
Attribute
specified in
names and
the start or
values are
opening tag of
case sensitive
an element
HTML attributes
Attributes
comprise of
two parts a
name and a
value
HTML
attributes
The name is the property of the element
you want to alter or set.
In the following example, the name of the
property is align.
The value of the align property is set to
either left, centre or right.
Common attributes
Attributes Details
id Specifies a unique identifier for an element
class Used to define equal styles for elements with the same class name
href Specifies the URL (web address) for a link
target Specifies where to open a linked document
Eg. _blank/_self/_parent
style Specifies an inline CSS style for an element
src Specifies the URL (web address) or path for an image
alt Used to display an alternative text for an image, when the image cannot be
displayed
width provide width parameters for elements such as images
provide height parameters for elements such as images
Core attributes
id class
Core attributes
id
• Must be unique to a single element.
• Used to reference HTML element in CSS and
JavaScript.
• Preceded by # when referenced in CSS.
Core attributes
class
• Can be assigned to one or more elements that
share similar characteristics.
• Used to reference HTML element in CSS and
JavaScript.
• Preceded by . when referenced in CSS.
Let’s code!
Loading…
HTML tables
A web table is an HTML structure
which consists of multiple table
rows with each row containing one
or more table cells.
• Tables are block-level elements.
• The size of the table is defined by
the number of rows, cells and
content.
HTML table tags
Element/Tag Details
<table> Defines table
<tr> Defines a row in a table
<th> Defines a header cell in a table
<td> Defines a cell in a table
HTML tables
HTML table structure
Header cell
<th></th>
Table
Table row
<table></table>
<tr></tr>
Data cell
<td></td>
HTML tables
borders
Loading…
Images in HTML
Images improve the design and layout of a
web page. In order to place a simple image
on a webpage, use the <img> tag.
Common image attributes
Attributes Details
src Specifies the URL (web address) or path for an image
alt Used to display an alternative text for an image, when the image cannot be displayed
width provide width parameters for elements such as images
height provide height parameters for elements such as images
Images in HTML
(Image source: moto1.com)
Audio in HTML
The <audio> tag specifies a standard
way to embed audio in a web page.
Web browsers generally support a
variety of audio formats each with its
own natively built in controls.
Common audio attributes
Attributes Details
controls Specifies that audio controls should be displayed (such as a play/pause button etc)
autoplay Specifies that the audio will start playing as soon as it is ready
loop Specifies that the audio will start over again, every time it is finished
muted Specifies that the audio output should be muted
src Specifies the URL of the audio file
Audio in HTML
When embedding the <audio> tag
it is important to at least add the
“src” and “controls” attribute for
the element to load correctly.
HTML videos
To show a video in HTML, use the
<video> element. It is a good idea
to always include “width” and
“height” attributes.
Videos in HTML
When embedding the <video> tag
it is important to at least add the
“src” and “controls” attribute for
the element to load correctly.
(Video source: cars.co.za)
