Cara Meratakan Gambar ke Tengah Halaman dalam HTML

Unduh PDF
Disusun bersama Staf wikiHow

Unduh PDF

Penjajaran gambar merupakan keahlian penting untuk dipelajari saat Anda mengodekan halaman web. Sayangnya, seiring berubahnya kode, beberapa penanda HTML menjadi “kedaluwarsa” dan tidak dikenali oleh peramban web. Namun, coba ikuti metode-metode ini untuk meratakan gambar ke tengah halaman dalam kode HTML. Jika tidak berhasil, coba lakukan pengodean dalam Cascading Style Sheets (CSS).

Metode 1
Metode 1 dari 2:

Menjajarkan Gambar dalam Teks

Unduh PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/01\/Center-an-Image-in-HTML-Step-1-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/01\/Center-an-Image-in-HTML-Step-1-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Dalam pengodean HTML, Anda bisa meratakan teks ke tengah halaman menggunakan kata tersebut. Namun, Anda perlu mengidentifikasi penjajaran gambar menggunakan kata “ middle ”. Gambar bukan merupakan elemen baris teks sehingga diidentifikasi sebagai elemen selain teks.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/20\/Center-an-Image-in-HTML-Step-2-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/20\/Center-an-Image-in-HTML-Step-2-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Gunakan penanda paragraf untuk menunjukkan baris teks baru. Awali penanda dengan <p>, kemudian tulis teks yang diinginkan.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/31\/Center-an-Image-in-HTML-Step-3-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/31\/Center-an-Image-in-HTML-Step-3-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    gif”. Setelah itu, cantumkan deskripsi gambar dengan mengetikkan alt=”deskripsi gambar” .
    • Segmen “src” memberi tahu halaman web bahwa informasi yang ditambahkan setelahnya merupakan URL gambar.
    • Segmen “alt” memberi tahu halaman bahwa informasi yang ditambahkan setelahnya merupakan deskripsi atau keterangan gambar.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1b\/Center-an-Image-in-HTML-Step-4-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1b\/Center-an-Image-in-HTML-Step-4-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Tikkan align=”middle”> . Ini merupakan akhir dari penanda gambar. [1]
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fe\/Center-an-Image-in-HTML-Step-5-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fe\/Center-an-Image-in-HTML-Step-5-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Setelah itu, akhiri penanda dengan </p>. Sebagai contoh, secara keseluruhan penanda akan tampak seperti ini: <p>Kami sedang mempelajari HTML. <img src=”fotoanjingmenari.gif” alt=”anjing menari” align=”middle> Inilah contoh kode kami. </p>
    Iklan
Metode 2
Metode 2 dari 2:

Menjajarkan Gambar dalam Penanda Elemen Tengah

Unduh PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d2\/Center-an-Image-in-HTML-Step-6-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-6-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d2\/Center-an-Image-in-HTML-Step-6-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Anda bisa memuat gambar dalam elemen yang diratakan ke tengah halaman. Namun, ruang atau spasi tambahan akan disisipkan di sekitar elemen.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a4\/Center-an-Image-in-HTML-Step-7-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-7-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a4\/Center-an-Image-in-HTML-Step-7-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Awali dengan meratakan elemen ke tengah halaman. Tikkan <center>.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/88\/Center-an-Image-in-HTML-Step-8-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-8-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/88\/Center-an-Image-in-HTML-Step-8-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-8-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Tikkan, misalnya, <img src=”gambaranjingmenari.gif” alt=”anjing menari” .
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5a\/Center-an-Image-in-HTML-Step-9.jpg\/v4-460px-Center-an-Image-in-HTML-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5a\/Center-an-Image-in-HTML-Step-9.jpg\/v4-728px-Center-an-Image-in-HTML-Step-9.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Masukkan kode, misalnya, height=”200”width=”200”> atau ukuran lain yang Anda inginkan. Ini adalah akhir dari penanda gambar.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/60\/Center-an-Image-in-HTML-Step-10.jpg\/v4-460px-Center-an-Image-in-HTML-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/60\/Center-an-Image-in-HTML-Step-10.jpg\/v4-728px-Center-an-Image-in-HTML-Step-10.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Sebagai contoh, kode HTML Anda secara keseluruhan akan tampak seperti ini:
    <center><img src=”gambaranjingmenari.gif” alt=”anjing menari” height=”200” width=”200”></center>. [2]
    Iklan


Peringatan

  • Perlu diingat bahwa penanda penjajaran dan perata tengah memiliki waktu kedaluwarsa. Ini artinya kode tidak bisa lagi digunakan di masa mendatang. Meskipun tidak ada tanggal pasti mengenai waktu kedaluwarsanya, pada akhirnya peramban tidak akan bisa mengenali kedua penanda tersebut dan kode-kode yang Anda gunakan harus diperbarui dalam gaya CSS atau HTML5.
Iklan

wikiHow Terkait

Cara
Memperbesar Volume Komputer
Cara
Memperbaiki Laptop yang Tidak Mengisi Daya
Cara
Mengatur Kecerahan Layar di Komputer Windows 7
Cara
Mengatur Komputer untuk Mengakses LAN
Cara
Mematikan Komputer Secara Otomatis pada Waktu Tertentu
Cara
Menutup Jendela Aplikasi pada Komputer dan Ponsel
Cara
Mengetikkan Simbol pada Laptop
Cara
Menghubungkan Laptop ke Proyektor
Cara
Menghubungkan Printer ke Komputer Anda
Cara
Menghubungkan Perangkat Audio ke Komputer
Cara
Membalikkan Layar Komputer Anda
Cara
Menonaktifkan Tombol Function
Cara
Menggunakan Aplikasi AirDroid pada Android
Cara
Menghubungkan Headset ke PC
Iklan

Referensi

  1. ↑ http://www.w3schools.com/tags/att_img_align.asp
  2. ↑ http://www.netmechanic.com/news/vol7/html_no10.htm

Tentang wikiHow ini

Bahasa lain
Halaman ini telah diakses sebanyak 42.291 kali.

Apakah artikel ini membantu Anda?

Iklan