Menampilkan Gambar pada Website dengan HTML | Hello World #4

March 02, 2019 HTML , Programming , Tutorial 0 Comments

Hello World ! Kali ini gue mau kasih tutorial bagaimana menampilkan gambar pada website yang kalian buat. Penting banget bagi kalian untuk membuat website yang menarik salah satunya dengan menambah gambar. Gue menggunakan HTML dalam tutorial ini. Sebelumnya kalian bisa cek post gue tentang dasar html disini.

Sama dengan tutorial sebelumnya gue masih menggunakan microsoft visual code sebagai toolsnya

Dalam menampilkan gambar di website terdapat 2 cara :

1. Menggunakan sumber gambar dalam satu folder

2. Menggunakan sumber gambar dari link

Oke mari kita bahas satu per satu.

Menggunakan sumber gambar dalam satu folder

1. Siapkan gambar yang ingin kalian tampilkan pada website

2. Pindahkan gambar pada tempat yang sama dengan kalian menyimpan file html

3. Buka microsoft visual code
4. Masukkan script code

<img src="foto.jpg" width="200" height="200"/>

Penjelasannya

- <img/> digunakan untuk menampilkan gambar pada website. Kalian harus mengetikkan nama file yang sama dengan nama file gambar yang ingin ditampilkan lengkap beserta ekstensinya.

- src digunakan untuk menuliskan sumber dari gambar. Apakah dari folder atau dari link.

- width dan height digunakan untuk mengatur seberapa besar gambar yang akan ditampilkan.

Menggunakan sumber gambar dari link

1. Kalian harus mengupload gambar kalian ke internet lebih dulu agar kalian mempunyai direct link terhadap gambar tersebut

2. Selanjutnya kalian copy link tersebut dan memasukkannya ke script kode

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlVLgeKcycUVuofisHWLoUUWYnlfQfEryI-_RSWvYlGJpZPhOzpMBf9_dWH4r6jQg1KyHW4F1hnAYmrFYPWt7B-ghBM4UUmMcFVSzhTVy3HjoJzQC0pBF-lIkYag5MtiTBZgWbhAk9AsGj/s1600/Logo_PENS-1.png" width="100" height="100"/>

Mana yang lebih baik

Cara yang pertama banyak dilakukan pada web statis. Cara ini banyak digunakan saat belajar tentang html dasar. Namun kekurangannya hanya si pembuat websitenya saja yang bisa mengakses dan menampilkan gambar yang ia masukkan.

Cara yang kedua merupakan cara yang baik digunakan untuk web dinamis dimana semua orang bisa mengakses dan menampilkan gambar yang kalian masukkan ke website kalian. Namun cara ini memerlukan koneksi internet untuk menampilkannya.

Contoh penggunaan

<!DOCTYPE html>
<html style="background-color:whitesmoke; width: 500px; height: 500px; padding: 50px;">

<head>
    <title>Web Desain 1</title>
</head>

<body style="background-color: darkgrey;">
    <h1 style="padding: 20px;"><center>Personal data</center> </h1>  
        <center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlVLgeKcycUVuofisHWLoUUWYnlfQfEryI-_RSWvYlGJpZPhOzpMBf9_dWH4r6jQg1KyHW4F1hnAYmrFYPWt7B-ghBM4UUmMcFVSzhTVy3HjoJzQC0pBF-lIkYag5MtiTBZgWbhAk9AsGj/s1600/Logo_PENS-1.png" width="100" height="100"/></center>
        <center><img src="foto.jpg" width="200" height="200" style="border-radius: 45%; margin-top: 5px;"/></center>
            <p style="padding-bottom:  50px; padding-left: 35px; padding-right: 20px ">
            Name        : Irfan Izudin </br>
            Birth       : 18/08/99 </br>
            Address     : Tulungagung </br>
            Hobby       : Reading </br>
            College     : Electronic Engginerring Polytechnic Institut of Surabaya </br>            
            </p>

</body>

</html>