SYST10049 learn HTML

Hyperlinks

HTML links are hyperlinks. You can click on a link and jump to another document. When you move the mouse over a link, the mouse arrow will turn into a little hand. A link does not have to be text. A link can be an image or any other HTML element!

Output

Code


<a>link 1</a>
<br>
<a href="URL" target="_blank">link 1</a>

Navigation

Highlights

Example

Output

Code


 <nav>
  <a href="URL" target="_blank">link 1</a>
  <a href="URL" target="_blank">link 2</a>
  <a href="URL" target="_blank">link 3</a>
</nav>

Image

Example03_010

Picture

One of the newest additions is the <picture> element: see Example here

    
<picture>
  <source media="(min-width: 650px)" srcset="images/picture_cats.jpg">
  <source media="(min-width: 465px)" srcset="images/picture_dogs.jpg">
  <img src="images/picture_flower.jpg">
</picture>

Image Map

The <map> tag is used to define an image map. An image map is an image with clickable areas: see Example here

    
<img src="images/workplace.png" alt="Workplace" usemap="#workmap" width="640">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Notebook" href="image-map-notes.html">
  <area shape="rect" coords="480,172,530,250" alt="Phone" href="image-map-phone.html">
  <area shape="circle" coords="520,340,44" alt="Cup of coffee" href="image-map-coffee.html">
</map>

Video

Highlights

Example

Output

Code


<!-- examples become available during course -->

(full code)

Audio

Highlights

Example

Output

Code


<!-- examples become available during course -->

(full code)

Multimedia

Highlights

Example

Output

Code


<!-- examples become available during course -->

(full code)

Marking up interactive content

Hyperlinks

Output

Code

Navigation

Example

Output

Code

Image

Picture

Image Map

Video

Example

Output

Code

Audio

Example

Output

Code

Multimedia

Example

Output

Code