[TUGAS DESAIN WEB] Macam-Macam Tag HTML5 Beserta Fungsinya #PART4

Oleh Alex

Jumat, 26 Oktober 2018

Tag HTML Audio Video

<audio> Tag untuk membuat isi suara (tag baru HTML5)

<source> Tag untuk membuat sumber beberapa media untuk elemen media (<video> dan <audio>) (tag baru HTML5)

<track> Tag untuk membuat trek teks untuk elemen media (<video> dan <audio>) (tag baru HTML5)

<video> Tag untuk membuat sebuah video atau film (tag baru HTML5)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>
<video width="320" height="240" controls>
  <source src="vid.mp4" type="video/mp4">
</video>
</body>
</html>

hasilnya

Tag HTML Images

<img> Tag untuk membuat gambar

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<img src="logo.png" alt="Gambar" width="42" height="42">
</body>
</html>

hasil

<map> Tag untuk membuat gambar-peta

<area> Tag untuk membuat area dalam gambar-peta

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Map</title>
        </head>
    <body>
    <img src="mapku.jpg" alt="Planets"
usemap="#mapku">
<map name="mapku">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

    </body>
</html>

hasil

<canvas> Digunakan untuk menggambar grafik, melalui scripting (JavaScript ) (tag baru HTML5)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 100);
</script>
</body>
</html>

hasilnya

<figcaption> Tag untuk membuat sebuah caption untuk elemen <figure> (tag baru HTML5)

<figure> Menentukan konten mandiri (tag baru HTML5)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<figure>
  <img src="logo.png" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Ini ficaption.</figcaption>
</figure>
</body>
</html>

hasilnya

Tag : Desain Web

Welcome to My Blog