Belajar HTML 8

 BELAJAR LENGKAP HTML



Cara Mengatur Gambar di HTML

Sampai di sini, Anda sudah bisa memasukkan gambar di HTML. Namun, itu saja belum cukup. Penting untuk mengetahui cara mengatur gambar di HTML supaya gambar tampil lebih menawan dan tentunya sesuai dengan kebutuhan website.

Yuk simak beberapa cara mengatur gambar di HTML berikut in!

Cara 1: Mengubah Dimensi Gambar

Untuk mengatur dimensi gambar, gunakan atribut style. Atribut style mengandung elemen width dan height. Elemen width berfungsi untuk memodifikasi lebar gambar, sedangkan elemen height untuk mengubah tinggi gambar.

Cara Mengatur Dimensi Gambar di HTML

Atribut style cukup sederhana, berikut syntax-nya.

<img src="langit.png" alt="Gambar_Langit" style="width:500px;height:400px;">

Cara menggunakan atribut style juga mudah, cukup tempelkan kode ini pada text editor Anda.

<!DOCTYPE html>
<html>
<head>
  <title>Cara Memasukkan Gambar di HTML</title>
</head>
<body>
  <p> Ini merupakan contoh gambar pada HTML </p>
  <img src="langit.png" alt="Gambar_Langit" style="width:500px;height:400px;">
</body>
</html>

Penting diingat, ketetapan ukuran gambar dalam dokumen HTML adalah pixel (px). Jadi, meski Anda tidak mencantumkan satuan dalam atribut Width dan Height, browser akan tetap menampilkan gambar dalam ukuran pixel.

Cara 2: Memberikan Bingkai Gambar

Ingin membingkai atau memberikan garis tepi pada gambar? Anda bisa menggunakan atribut border.  Hasilnya kira-kira seperti pada gambar di bawah ini.

Cara Mengatur Border di HTML

Anda juga bisa mengatur sendiri level ketebalan border sesuai keinginan, lho. Caranya yaitu dengan mengubah nilai di dalam atribut border. Atribut border itu sendiri dapat ditulis dengan syntax berikut:

<img src="langit.png" border="5">

Secara lengkapnya, Anda bisa memasukkan syntax ini pada text editor.

<!DOCTYPE html>
<html>
<head>
  <title>Cara Memasukkan Gambar di HTML</title>
</head>
<body>
  <p> Ini merupakan contoh gambar pada HTML </p>
  <img src="langit.png" border="5">
</body>
</html>

Cara 3: Mengatur Posisi Gambar

Supaya gambar berada pada sisi yang tepat, Anda harus mengaturnya. Caranya yaitu dengan menggunakan atribut align. Atribut align akan membuat gambar berada pada posisi yang Anda inginkan. Teks yang ditampilkan pun akan menyesuaikan dengan penempatan gambar.

Cara Mengatur Posisi Gambar di HTML

Anda bisa menempatkan gambar ke berbagai posisi: kiri, kanan, tengah, atas, dan bawah. Namun, setiap posisi memiliki syntax yang sedikit berbeda. Berikut adalah kode HTML untuk mengatur gambar ke masing-masing posisi.

<img src="langit.png" align="left">
<img src="langit.png" align="right">
<img src="langit.png" align="middle">
<img src="langit.png" align="top">
<img src="langit.png" align="bottom">

Untuk penerapan syntax di atas dalam dokumen HTML bisa dilihat pada contoh di bawah. 

<!DOCTYPE html>
<html>
<head>
  <title>Cara Memasukkan Gambar di HTML</title>
</head>
<body>
  <p>Ini adalah contoh gambar langit:<img src="langit.png" style="width:500px;height:400px;" align="middle"> dengan align="middle"</p>
</body>
</html>

Komentar

Posting Komentar

Postingan populer dari blog ini

contoh operator logika part 2

Gambar
  Rumus untuk menentukan hasil dari operator logika adalah sebagai berikut: Operator  &&  hanya akan menghasilkan true jika kedua operand bernilai true, selain itu hasilnya false. Operator  ||  hanya akan menghasilkan false jika kedua operand bernilai false, selain itu hasilnya true . Operator  !  Akan membalikkan logika, !false menjadi true, !true menjadi false. Kita juga bisa menggabungkan lebih dari satu operasi seperti contoh berikut: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class BelajarJava {    public static void main(String args[]){                 boolean hasil;              hasil = ( false && true ) || ( true || false );      System.out.println( "Hasil: " + hasil );               hasil = ! false && ( false || true ...
Baca selengkapnya

Variabel PHP

Gambar
VARIABEL PHP Variabel dalam PHP Variable adalah suatu pengenal di dalam program yang merepresentasikan nilai atau data tertentu. Nilai variabel dapat diubah sesuai dengan kebutuhan program. Dalam Bahasa PHP, variable didefinisikan dengan cara membubuhkan tanda  $  (dollar) di depannya. Contoh :         $nama = 'SmartDevTala' Pada contoh di atas, kita dapat membuat variable  $nama  dan mengisi nilai ke dalamnya. Dalam penggunaan variable, PHP sedikit berbeda dengan Bahasa program lain, karena pada bahasa program yang lain pada umumnya perlu mendeklarasikan tipe data pada variabel sebelum menampung nilai di dalamnya, sebagai contoh :        $x = "SmartDevTala";       $x = 8;       $x = 10.3;       $x = true;       $x = ["SmartDevTala",8,10.3,true]; Pada contoh di atas, variable  $x  dapat menampung nilai dari beberapa tipe data, yaitu : string, integer, floati...
Baca selengkapnya

Tipe Data Phyton

Gambar
  Tipe Data Python Tipe data adalah suatu media atau memori pada komputer yang digunakan untuk menampung informasi. Python sendiri mempunyai tipe data yang cukup unik bila kita bandingkan dengan bahasa pemrograman yang lain. Berikut adalah tipe data dari bahasa pemrograman Python : Tipe Data Contoh Penjelasan Boolean True  atau  False Menyatakan benar  True  yang bernilai  1 , atau salah  False  yang bernilai  0 String "Ayo belajar Python" Menyatakan karakter/kalimat bisa berupa huruf angka, dll (diapit tanda  "  atau  ' ) Integer 25  atau  1209 Menyatakan bilangan bulat Float 3.14  atau  0.99 Menyatakan bilangan yang mempunyai koma Hexadecimal 9a  atau  1d3 Menyatakan bilangan dalam format heksa (bilangan berbasis 16) Complex 1 + 5j Menyatakan pasangan angka real dan imajiner List ['xyz', 786, 2.23] Data untaian yang menyimpan berbagai tipe data dan isinya bisa diubah-ubah Tuple ('xyz', 768, 2.23)...
Baca selengkapnya