Tutorial Dasar Website-Menampilkan Gambar dan video youtube

Rafiqi, S.Kom.
Rafiqi, S.Kom.
Juli 19, 2024
2
show

Menampilkan Gambar, Video dll 

Hi Web Developer! kali ini guru design akan berbagi tutorial cara menampilkan gambar dan video dari youtube ke website atau blog. Pada tutorial sebelumnya kita telah mempelajari Tutorial Membuat Table, langsung ketutorialnya Jadi untuk menampilkan gambar, video dll di website sangat mudah tinggal kita gunakan tag dibawah ini:

Jika file foto dan video bersumber di direktori atau hosted sendiri 

<img src="namafoto.jpg" height="100" width="200"></img>
<iframe frameborder="0" height="100" width="200" src="namavideo.mp4"></iframe>
<!-- Atur tinggi sesuai kebutuhan contoh 100 dan lebar 200 -->

 

Jika file foto dan video bersumber di direktori atau hosted lain

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn4EXvhrkZTcYLMkxT7YzYEkTlWHhuE9Cc_miuu3SZhMDFckQ6R545ibAi_usgMtg31EArazUy-M1hDpqSVb9HefQu1cnzpTgWWYak7m27jEeqD2dDGo6brM8lAwA5FnNxY2b8T385nwE/s320/unnamed.jpg" height="100" width="200"></img>
<iframe frameborder="0" height="100" width="200" src="https://www.youtube.com/embed/pSizN3pjjyw"></iframe>
<!-- Atur tinggi sesuai kebutuhan contoh 100 dan lebar 200 -->

 

Begini Penerapannya

 

<html>
    <head>
        <title> Judul mu tulis disini </title>
    </head>
        <body>
            <h4>Menampilkan Foto</h4>
            <img src="namafoto.jpg" height="100" width="200"></img>
            <h4>Menampilkan Video</h4>
            <iframe frameborder="0" height="100" src="namavideo.mp4" width="200"></iframe>
        </body>
</html>

 

Begini Demonya

Menampilkan Foto

Demo

Menampilkan Video


Catatan

Dengan sarat file video atau foto dalam satu folder dengan file index.html/index.php, jika berbeda folder maka seperti berikut penyelesaiannya:
 Latihan
      Image
      index.php
Dari gambar di atas foto berada di dalam folder Image berati penulisannya seperti ini:

<img src="namafoto.jpg" height="100" width="200"></img>
<!-- Menjadi seperti ini: -->
<img src="Image/namafoto.jpg" height="100" width="200"></img>

NEXT tutorial-dasar-website-link-hyperlink (Coming Soon)
Sekian tutorialnya trimakasih semoga bermanfaat. 
Rafiqi, S.Kom.