Beranda
Programming

HTML SVG, HTML Media, dan HTML Video

4 min read


A. PENDAHULUAN
    a. Pengertian

    HTML SVG adalah singkatan dari (Scalable Vector Grapichs), SVG digunakan untuk mendefinisikan grafik untuk web.

    Multimedia adalah penggunaan komputer untuk menyajikan dan menggabungkan teks, suara, gambar, animasi, audio, dan video dengan alat bantu (tool) dan tautan (link) sehingga pengguna dapat melakukan navigasi, berinteraksi, berkarya, dan berkomunikasi. Multimedia sering digunakan dalam pembuatan situs web.

    Yang termasuk multimedia pada web adalah suara (audio), musik, video, film, dan animasi.

    Elemen HTML <video> digunakan untuk menampilkan video di halaman web.


    b. Latar Belakang Masalah

    Dalam pembuatan website, diperlukan adanya video untuk mengenalkan atau menunjukkan kepada pengguna web.


B. MAKSUD DAN TUJUAN

    Dapat menguasai HTML dan tujuannya setelah menguasai HTML bisa masuk ke jenjang berikutnya untuk bisa membangun sebuah template yang nantinya akan di buat website.


C. BATASAN DAN RUANG LINGKUP PEKERJAAN

    W3Schools

  • HTML SVG
  • HTML Media
  • HTML Video

 

D. TARGET DAN HASIL YANG DIHARAPKAN

    Mengetahui dan memahami HTML SVG, HTML Media, dan HTML Video.


E. METODE PELAKSANAAN

  • Memabaca
  • Memahami
  • Latihan Tryit Yourself

 

F. ALAT DAN BAHAN

  • Laptop
  • Internet
  • Visual Studio Code

 

G. TARGET WAKTU

    4 Jam (08.00-12.00 WIB)


H. TAHAPAN PELAKSANAAN

    HTML SVG

  • SVG Rectangle
<svg width="400" height="100">
<rect width="400" height="100"
style="fill:rgb(0,0,255); stroke-width:10; stroke:rgb(0,0,0)" />
</svg>

Outputnya akan seperti ini :

  • SVG Rounded Rectangle

<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:rgb(0,0,255); stroke-width:10; stroke:rgb(0,0,0); opacity:5" />
</svg>

     Outputnya akan seperti ini :

  • SVG Star
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime; stroke:purple; stroke-width:5; fill-rule:evenodd;" />
</svg>

    Outputnya akan seperti ini :

  • SVG Logo
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%"
style="stop-color:rgb(255,255,0) ;stop-opacity:1" />
<stop offset="100%"
style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana"
x="50" y="86">Adib</text>
</svg>

    Outputnya akan seperti ini :


 

    HTML Media

    Multimedia memiliki berbagai macam format. Hampir semua hal yang kita dengar atau lihat, seperti gambar, musik, suara, video, rekaman, film, animasi, dan banyak lagi adalah sebuah media. 


    HTML Video

    Elemen <video> pada HTML berfungsi untuk menampilkan video pada halaman web. Untuk menampilkan sebuah video pada kode HTML, maka gunakan elemen <video>.

<video height="320" width="240" controls>
<source src="arema.mp4" type="video/mp4">
</video>

    Autoplay element <video>

    Untuk membuat video memulai dan memutar secara otomatis, gunakan atribut autoplay pada HTML. Tambahkan muted setelah autoplay agar video Anda mulai diputar secara otomatis (tetapi dibisukan): 

<video height="320" width="240" controls autoplay muted>
<source src="arema.mp4" type="video/mp4">
</video>

    Outputnya akan seperti ini :

 

 

I. TEMUAN PERMASALAHAN DAN PENYELESAIANNYA

    Pada saat SVG Logo tidak muncul di browser

    Penyelesaian :

    Kurang memberi

text fill="#ffffff"


J. KESIMPULAN

    Jadi, Multimedia adalah penggunaan komputer untuk menyajikan dan menggabungkan teks, suara, gambar, animasi, audio, dan video dengan alat bantu (tool) dan tautan (link) sehingga pengguna dapat melakukan navigasi, berinteraksi, berkarya, dan berkomunikasi.


K. REFERENSI

Anda mungkin menyukai postingan ini

Posting Komentar