Masukkan file grafik ke halaman web. Memasukkan grafik ke dalam dokumen HTML

Yang diketahui tentang pria ini hanyalah
bahwa dia tidak di penjara, tetapi mengapa dia tidak di penjara tidak diketahui.
Tandai Twain.

Ini adalah pelajaran tentang cara menyisipkan gambar dalam HTML, cara mendesainnya, cara membungkus teks di sekitar gambar, dll. Bagaimanapun, diketahui bahwa gambar membuat situs lebih menarik dan berbeda dari sumber daya lainnya, sehingga kemampuan menggunakan tag dan atributnya sangat berguna di Internet modern. Namun hal utama di sini adalah rasa proporsional!

Grafik yang berlebihan akan membuat halaman html menjadi lebih berat dan karenanya meningkatkan waktu pemuatannya. Selain itu, kehadiran gambar dalam jumlah besar akan mengalihkan perhatian pengunjung dari konten utama situs (kecuali tentu saja grafik adalah konten utama situs). Jadi, jagalah secukupnya dan gunakan hanya jika diperlukan. Dan Anda akan bahagia!

Dalam pelajaran tentang, saya telah berbicara tentang bagaimana Anda dapat menggunakan gambar sebagai latar belakang dokumen HTML. Sekarang mari kita bicara tentang bagaimana grafik digunakan di “lapisan atas” halaman html.

§ 1. Cara menyisipkan gambar

Untuk memasukkan gambar ke dalam HTML, gunakan tag IMG Dengan wajib atribut SRC. Atribut ini memberi tahu browser jalur ke file gambar. Itu. untuk menyisipkan gambar dengan nama logo.jpg ke tempat tertentu pada halaman (asalkan halaman dan gambar tersebut berada dalam satu folder(direktori)) Anda perlu memasukkan kode html berikut di tempat ini:

src="logo.jpg">

Jika gambar dan halaman berada di berbeda direktori (folder), maka Anda perlu menentukan jalur ke gambar relatif halaman. Misalnya, jika halaman html terletak di direktori (folder) situs, di direktori (folder) yang sama terdapat subdirektori (folder) gambar, di mana gambar logo.jpg kita berada, maka untuk memasukkannya Anda perlu untuk tulis seperti ini:

gambar/logo.jpg">

Atau Anda tidak perlu khawatir dan menunjukkannya alamat lengkap gambar tersebut. Misalnya seperti ini:

http://www..png">

Dalam kasus terakhir, browser akan menampilkan kode seperti ini:

Catatan. Jika gambarnya berada di komputer Anda, tetapi Anda ingin memasukkannya ke halaman Internet, maka tidak akan ada hasilnya. Untuk melakukan ini, Anda harus memindahkan gambar ke suatu tempat terlebih dahulu di internet(Misalnya, ). Dan tunjukkan alamat lengkap di kode halaman sampai saat ini dengan sebuah gambar.

Selain atribut yang diperlukan SRC di tag IMG Ada beberapa atribut opsional lainnya. Mari kita lihat lebih dekat.

§ 2. Menentukan ukuran gambar

Mari kita mulai dengan atribut yang dapat Anda atur dimensi gambar(lebih tepatnya, mengintai ruang untuk dimensi ini di halaman). Di sini mereka:

lebar- lebar gambar dalam piksel atau persentase;

tinggi- tinggi gambar dalam piksel atau persentase.

Jika atribut ini digunakan, pertama-tama ia akan mengalokasikan ruang untuk grafik, menyiapkan tata letak dokumen, menampilkan teks, dan baru kemudian memuat gambar. Pada saat yang sama, ini akan menempatkan gambar dalam persegi panjang dengan ukuran yang dipilih, meskipun lebar dan tinggi sebenarnya dari gambar lebih besar (kompres) atau lebih kecil (peregangan). Jika atribut ini tidak digunakan, browser akan segera memuat gambar, dan tampilan teks serta elemen lain yang mengikutinya akan tertunda.

Lebar dan tinggi gambar dapat ditentukan dalam piksel (ukuran gambar akan konstan berapa pun resolusi layarnya) dan dalam persentase (ukuran gambar akan bergantung pada resolusi layar pengguna). Misalnya:

lebar="50" tinggi="20">

lebar="10%" tinggi="5%">

§ 3. Teks alternatif

Jika pengguna telah menonaktifkan tampilan gambar di pengaturan browser, maka alih-alih gambar, teks alternatif dapat ditampilkan yang menjelaskan jenis grafik apa yang seharusnya ada di sana. Hal ini dicapai dengan menggunakan atribut ALT:

Dalam hal ini, browser akan mencadangkan ruang pada halaman untuk gambar, tetapi alih-alih gambar itu sendiri, browser akan menampilkan teks yang Anda tulis dalam nilai atribut ALT:

Saya ulangi, ini akan terjadi jika pengguna menonaktifkan tampilan grafik. Jika tidak, gambar akan menyembunyikan teks alternatif.

§ 4. Menyelaraskan gambar

Menggunakan atribut yang sudah Anda ketahui meluruskan Anda dapat mengontrol perataan gambar relatif terhadap elemen lain di halaman html. Pada atribut meluruskan Ada beberapa arti, tetapi saat ini kami paling tertarik pada dua arti:

kiri- gambar terletak di tepi kiri halaman, dan teks mengalir di sekitar gambar di sebelah kanan;

Kanan- gambar terletak di tepi kanan halaman, dan teks serta elemen lainnya mengalir di sekitar gambar di sebelah kiri.

Misalnya kode HTML

browser akan tampil seperti ini

Dan kode HTML ini:

akan terlihat seperti ini:

Untuk menghentikan teks membungkus gambar, Anda dapat menggunakan tag Br(akrab bagi kita dari bagian sebelumnya tentang). Di tag Br ada atribut jernih, yang dapat mengambil tiga nilai:

kiri- menghentikan teks yang membungkus gambar rata kiri;

Kanan- menghentikan teks yang membungkus gambar rata kanan;

semua- menghentikan teks yang membungkus gambar rata kiri dan kanan.

Tag HTML bertanggung jawab untuk menampilkan gambar

gambar HTML Bisa berupa gambar apa saja dalam format PNG, JPEG dan GIF.
Kode HTML untuk gambar ditentukan oleh tag .
gambar HTML dapat menjadi latar belakang halaman web.
gambar HTML dapat didefinisikan sebagai hyperlink.

Di folder D\My_first_site\ atau folder lain tempat Anda memiliki file index.html, letakkan gambar dengan ekstensi, katakanlah, .jpg, beri nama apa pun yang Anda suka, misalnya xxx.

Memasukkan gambar ke dalam kode HTML suatu halaman:

Menandai - tidak berpasangan. Perhatikan cara penutupannya.

Atribut dan nilai

- wajib diisi, ini menunjukkan sumber gambar.
alt="" - mendefinisikan teks alternatif, komentar yang dibaca oleh robot pencari saat menganalisis konten halaman web. Itu juga perlu ditunjuk.
width="" - menentukan lebar gambar dalam piksel.
height="" - menentukan tinggi gambar dalam piksel.

Tunjukkan dimensi sebenarnya - dengan cara ini Anda akan menjaga kualitas gambar aslinya.

Untuk pengembangan web, gambar dalam tiga format dapat diterapkan: PNG (.png), JPEG (.jpg) dan GIF (.gif). Adobe Photoshop adalah alat khusus untuk membuat grafik untuk situs web. Ini dapat digunakan untuk mengkonversi satu format gambar ke format lainnya.

gambar HTML | Margin horizontal dan vertikal

atau jarak horizontal dan vertikal antara gambar dan teks

Hasil:

Atribut dan nilai

hspace="" - mendefinisikan jarak horizontal antara gambar dan teks.
vspace="" - mendefinisikan jarak vertikal antara gambar dan teks.

Gambar latar belakang HTML

atau latar belakang halaman yang ditentukan oleh gambar

Kami memiliki gambar berikut:

Mari kita tulis kode untuk halaman terpisah:

Atribut background dan background-image dibahas dalam .

Memasukkan gambar dan urutannya → ../images/primer-img.jpg → lihat.

Gambar HTML - tautan

Contoh kode:

border="0" - membatalkan batas tautan grafis.

atau semua cara yang mungkin untuk memusatkan gambar

Contoh kode:

Gambar HTML di tengah halaman

Apa yang perlu Anda perhatikan di sini? → Pertama, fakta bahwa dimensinya ditunjukkan - ini mempercepat pemuatan gambar. Kedua, atribut alt="" ditentukan, yang juga sangat diinginkan untuk dilakukan meskipun tidak ada teks alternatif. Dalam kasus pertama, pemusatan ditentukan HTML parameter, dan yang kedua - menggunakan penyertaan linier dari cascading style sheet.

Bagian visual adalah salah satu aspek terpenting ketika bekerja dengan situs web. Tentu saja, fungsinya lebih rendah, tetapi Anda tidak boleh mengabaikannya terlebih dahulu. Hari ini kita akan berbicara tentang cara memasang gambar HTML di situs web Anda. Apakah hanya ada satu kemungkinan atau beberapa kemungkinan? Bagaimana cara menyisipkan gambar HTML ke situs web saya sehingga pengguna lain dapat melihatnya? Apa yang lebih baik digunakan untuk tujuan ini – server atau komputer? Apa itu HTML? Singkatan ini dapat diuraikan sebagai berikut: bahasa markup dokumen hypertext.

Dengan menggunakan bahasa ini, dasar situs masa depan terbentuk. Penempatan semua elemen utama situs juga dikerjakan di sini. Kemudian file php yang bertanggung jawab untuk transfer data dan cascading style sheet dikonfigurasi di sini. Dasar dari setiap halaman web adalah HTML. Anda juga dapat melakukan penyesuaian gambar menggunakan bahasa ini. Anda dapat melakukan operasi ini dengan cara lain, tetapi jika Anda perlu memastikan pemuatan awal beberapa objek sederhana, lebih baik menggunakannya. Mari kita mulai menjelajahi masalah terkait penyisipan gambar HTML.

Bagaimana cara menggunakan tag img?

Mari kita beralih ke masalah penggunaan grafik. Bagaimana cara menyisipkan gambar ke dalam dokumen HTML? Pertama-tama, operasi ini berarti menyisipkan file sebagai objek halaman terpisah. Tag img digunakan untuk penambahan ini. Tag ini mengacu pada elemen sebaris yang berisi konten yang dapat diganti. Ini hanya mencakup empat bagian bahasa markup hypertext. Salah satunya adalah src, tinggi, lebar. Kami akan membicarakannya lebih lanjut. Bagian lainnya adalah objek, semat, iframe. Tag berfungsi seolah-olah memiliki elemen sebaris. Perbedaannya adalah konten eksternal asing digunakan dan ditampilkan. Dalam hal ini, harus ada file pihak ketiga yang akan dimuat. Jika Anda memiliki pertanyaan tentang memulihkan gambar latar belakang dalam HTML, sebaiknya segera buang pertanyaan tersebut. Ini hanya akan ditampilkan ketika komputer tempat gambar berada sedang berjalan.

Menggunakan atribut src

Kami sedang mengerjakan masalah memasukkan gambar grafik ke dalam dokumen HTML. Untuk menentukan jalur ke gambar yang akan dimuat, gunakan src. Skema umumnya adalah sebagai berikut: Anda perlu menggunakan atribut ini, tanda sama dengan dan memasukkan alamat. Ketika browser mencapai tag saat mengurai HTML, itu akan membuat area di mana elemen sebaris akan ditampilkan. File eksternal akan dimuat ke dalamnya di masa mendatang. Jalur ini tidak boleh mengandung kesalahan, karena ke sinilah program akan menuju. Jika program ini tidak menemukan file tersebut, ikon kesalahan akan ditampilkan, yang tidak terlihat terlalu estetis.
Untuk menyisipkan gambar ke dalam tabel di dokumen HTML, Anda perlu menulis semua kode yang diperlukan di sel yang diinginkan.

Pengaturan Gambar

Sekarang Anda tahu cara memasukkan gambar ke dalam HTML. Mari kita cari tahu bagaimana hal itu dapat dikonfigurasi. Saat file mulai diunduh ke komputer pengguna, ukuran gambar akan ditentukan secara otomatis. Jika parameter awal file tidak sesuai dengan yang diinginkan, maka parameter lebar dan tinggi, yang ditentukan dalam piksel, dapat membantu dalam hal ini. Kode dalam hal ini akan ditulis sebagai berikut: src, lalu alamat file. Instruksi serupa juga menentukan lebar dan menetapkan lebar yang seharusnya. Parameter terakhir adalah tinggi dan tinggi badan. Tak jarang, webmaster melakukan kesalahan berikut: mereka mengunggah satu file besar ke server, yang ukurannya mencapai beberapa MB. Kemudian jalurnya ditulis dan gambarnya disesuaikan dengan ukuran yang diinginkan. Dengan demikian, pengguna dapat melihat bagaimana gambar kecil dimuat dengan sangat lambat. Dari luar terlihat tidak terlalu menarik.

Rekomendasi untuk bekerja

Untuk menghindari aspek negatif dalam pekerjaan Anda, cobalah untuk memperkecil ukuran gambar terlebih dahulu. Tentu saja, jika Anda tidak benar-benar yakin parameter apa yang perlu Anda gunakan untuk tampilan yang menarik, Anda cukup membuat salinannya dan mencoba bereksperimen dengannya. Anda juga harus ekstra hati-hati saat mengoptimalkan bobot gambar. Penting untuk mengurangi bobot file grafik tanpa kehilangan kualitas dengan mengonversi file ke ekstensi lain, menggunakan program khusus, dan layanan online. Ini akan dihargai tidak hanya oleh pengguna situs, tetapi juga oleh webmaster. File seperti itu akan memakan lebih sedikit ruang di hosting Anda dan memuat lebih cepat.

Contoh kemampuan merekam

Mari pertimbangkan bagaimana Anda dapat menentukan jalur ke gambar.

1.Tetapkan hanya nama file;
2. Tentukan alamat gambar yang terletak di komputer lokal (server);
3. Jalur detail ke lokasi file, yang terletak di host lain.

Jika menggunakan contoh dari poin pertama, gambar harus berada di direktori yang sama. Dalam kasus kedua, lokasinya adalah subfolder yang berhubungan dengan halaman saat ini. Contoh ketiga menentukan jalur absolut dimana gambar yang dicari dapat ditemukan. Dalam kasus terakhir, Anda harus memperhatikan poin berikut: gambar dapat berada di server mana pun, jika penggunaan tersebut tidak dilarang dalam file htaccess, tetapi jika dihapus dari sana, gambar tersebut akan hilang di situs Anda. Keunikan bahasa HTML adalah hanya diperlukan dokumen markup. Semua komponen lainnya dapat diunduh dari server pihak ketiga. Cara-cara ini sering digunakan untuk meningkatkan kecepatan download. Di sini Anda perlu mengetahui cara menggunakan alat ini.

Tujuan alt dan judul

Apa yang harus saya lakukan jika karena alasan tertentu file grafik tidak dimuat bersama dokumen HTML? Jika ejaannya salah, Anda perlu menggunakan atribut alt. Atribut ini melakukan tugas representasi alternatif gambar. Katakanlah grafiknya tidak dimuat, tetapi browser masih membuat area untuk gambar tersebut. Ini juga diperlukan jika pengguna sedang menunggu pemuatan dan perlu menunjukkan kepadanya bahwa program sedang bersiap untuk menerima grafik. Untuk menampilkan teks yang menyertainya, Anda harus menggunakan atribut title. Ini pada dasarnya hanyalah sebuah tooltip dan dapat digunakan pada hampir semua elemen HTML yang terlihat. Ini adalah hal yang baik karena membantu memperjelas beberapa aspek tertentu. Kegunaan dari dua atribut yang diberikan pada subheading ini adalah sebagai berikut: setelah height, alt ditambahkan pada contoh yang telah dibahas sebelumnya, kemudian title, Atribut-atribut ini tidak hanya berfungsi untuk menjamin kenyamanan pengunjung. Mereka juga dapat memberikan dampak positif pada promosi situs web. Untuk alasan ini, Anda harus selalu menggunakan kata kunci di dalamnya. Hal ini akan meningkatkan peringkat sumber daya dalam layanan gambar mesin pencari dan peringkat situs web. Namun, dalam segala hal Anda harus tetap berpegang pada rasionalitas dan kehati-hatian.

Menyelaraskan gambar

Atribut align diperkenalkan untuk keempat elemen bahasa markup yang disebutkan sebelumnya. Dengan menggunakan atribut ini, Anda dapat dengan mudah mengubah lokasi gambar. Itu disejajarkan ke bawah secara default. bagian bawah bertanggung jawab untuk ini. Bagaimana cara membuat perataan atas? Untuk melakukan ini, Anda perlu menggunakan top. Dalam praktiknya, akan terlihat seperti ini: setelah atribut src, di mana pengguna menentukan alamat gambar, atribut align dan nilainya ditambahkan. Pada garis tempat gambar itu berada, gambar itu akan disejajarkan dengan tepi atas. Bagaimana cara memusatkan gambar dalam HTML? Ada pilihan lain untuk menyelaraskan gambar: tengah. Menggunakan fungsi ini tidak akan mengubah apa pun secara mendasar.

Saat menggunakan kode ini, gambar akan sejajar di tengah. Anda dapat membuat teks mengalir di sekitar gambar. Atribut kiri dan kanan digunakan untuk ini. Dalam kasus seperti ini, gambar menjadi mengambang. Shift ke kiri terlihat sama dengan ejaan lainnya. Menggunakan atribut yang tepat menghasilkan hasil yang serupa, tetapi dengan satu perbedaan: gambar akan ditempatkan di sebelah kanan. Penggunaan struktur ini memiliki ciri khas tersendiri. Misalnya, salah satu masalah penting adalah teks terlalu dekat dengan gambar. Akibatnya, terciptalah apa yang disebut efek lengket, yang sangat tidak menyenangkan bagi mata. Hal ini dapat diperbaiki dengan menggunakan kode HTML atau Cascading Style Sheet. Untuk perubahan tersebut Anda harus menggunakan atribut hspace dan vspace. Yang pertama mengatur margin di kanan dan kiri, dan yang kedua mengatur margin di bawah dan atas.

Cara mengatur latar belakang

Saat memasukkan gambar ke halaman website HTML, atribut background sangat berguna. Atribut ini merupakan bagian dari elemen body. Tujuannya adalah untuk mengatur jalur ke file grafik yang harus mengisi sel, tabel, atau halaman terpisah. Penggunaan objek ini dalam praktiknya terlihat seperti ini: alamat gambar yang digunakan ditulis sebagai nilai parameter bodybackground. Gambar latar belakang yang diatur dengan cara ini akan diulang sepanjang sumbu absis dan ordinat, dimulai dari pojok kiri atas.

Kami berharap artikel ini bermanfaat bagi Anda. Selamat membaca!

Gambar secara instan membuat kita memahami betapa menariknya suatu situs atau artikel bagi kita, gambar tersebut menciptakan suasana hati, dan dapat mengungkapkan suatu topik dengan cara yang baru. Terkadang satu foto bernilai seribu kata.

Namun Anda tidak boleh ikut serta jika Anda tidak memiliki Instagram atau toko online. Sebaiknya gambarnya:

informatif
cocokkan dengan skema warna situs Anda
sesuai

Jika Anda tidak memiliki foto yang cocok, Anda dapat menggunakan apa yang disebut stok foto (bank foto) - tempat penyimpanan banyak foto, ilustrasi, dan grafik vektor. Ada banyak sumber daya seperti itu, Anda mungkin pernah mendengar tentang salah satu yang terbesar - Shutterstock, tetapi unduhan di sana berbayar.

Bagi yang tidak suka membayar lebih, di akhir artikel sudah kami siapkan bonus- daftar beberapa bank foto tempat Anda dapat mengunduh sejumlah besar materi indah berkualitas tinggi secara gratis :)

Format gambar

Pada dasarnya ada 3 jenis gambar yang digunakan di World Wide Web:

gif(Format Pertukaran Grafis - format pertukaran gambar)

Ini adalah format pertama yang mulai digunakan di Internet. Kelebihan format ini adalah ketersediaannya animasi dan ukurannya kecil, halaman dimuat dengan cepat. Selain itu, mendukung transparansi. Kekurangan - hanya digunakan 256 warna(itulah sebenarnya mengapa ukurannya kecil), yaitu. tidak dapat digunakan untuk gambar penuh warna.

jpeg, alias jpg(Kelompok Pakar Fotografi Gabungan - Kelompok Pakar Fotografi Gabungan - ini adalah nama organisasi pengembangan)

cocok untuk membuat gambar penuh warna dan berkualitas tinggi, foto. Ukuran gambar seperti itu besar, sehingga biasanya memuat banyak beban di server. Jika Anda perlu mengompres jpeg (untuk bobot gambar yang lebih kecil), kami sarankan untuk mengambil ukuran gambar akhir kelipatan delapan , sehingga penurunan kualitas akan minimal.

png(Grafik Jaringan Portabel - Grafik Jaringan Portabel. Diucapkan dengan cara yang sama seperti ping, yaitu. )

format ini awalnya dikembangkan untuk web, mis. Gambar biasanya berbobot kecil dan tidak memperlambat halaman saat memuat. Format ini dibuat untuk menggantikan gif yang sudah ketinggalan zaman, tetapi tidak seperti itu, format ini tidak mendukung animasi. png-8, seperti gif, hanya menggunakan 256 warna. Format png-24 mendukung 16 juta warna, meski sudah cukup berat. png-32 berisi jumlah warna yang sama dengan png-24, dan ditambah lagi memungkinkan Anda mendapatkan gambar dengan latar belakang transparan , dan Anda dapat menyesuaikan tingkat transparansi. Saat memperkecil ukuran png, tidak ada penurunan kualitas warna.

Mari kita rangkum

gif- untuk animasi

jpeg- untuk foto

png- untuk ikon, tombol, background, logo, screenshot, gambar, teks, foto dengan background transparan

Memasukkan gambar ke dalam file html

Untuk menambahkan gambar ke halaman, gunakan menandai (dari gambar bahasa Inggris - gambar, gambar). Ini adalah tag tunggal dan tidak memerlukan tag penutup. Tag ini berisi atribut di dalamnya.

Atribut src(dari bahasa Inggris source - source) menunjukkan jalur ke file (tempat gambar berada). Jika gambar ada di komputer Anda (situs masih dalam pengembangan) atau di server Anda, gunakan tautan relatif. Jika gambar berasal dari jaringan, maka diperlukan tautan absolut. Baca cara melakukannya di artikel "Tautan".

Jadi, untuk menghubungkan gambar ke halaman web Anda, Anda perlu menulis kode seperti ini:

atribut alternatif(dari bahasa Inggris alternatif - alternatif) menunjukkan teks yang akan dilihat pengguna jika gambar tidak dimuat. Jalurnya salah ditunjukkan, gambar telah dihapus, Internet buruk - mungkin ada banyak alasan, dan diharapkan orang tersebut memahami apa yang ada di balik ikon yang dibenci ini.

Mesin pencari sangat memperhatikan untuk memastikan bahwa atribut ini terisi. Dan validator html (sumber untuk memeriksa kebenaran kode) akan menganggap tidak adanya atribut alt sebagai kesalahan. Jika semua atribut akan diisi, dan juga berisi kata kunci jika memungkinkan - visibilitas situs Anda akan meningkat secara signifikan, mis. itu akan lebih sering ditampilkan dalam pencarian. Ini dari bidang SEO, dan pada tahap ini cukup bagi kita untuk mengetahui bahwa ada atribut seperti itu, dan situs “live” harus mengisinya. Selama situs tersebut ada di disk kita, situs tersebut dapat dibiarkan kosong.

Pada contoh di bawah, kami sengaja menentukan jalur yang tidak ada untuk gambar tersebut sehingga Anda dapat melihat cara kerja atribut alt

Tinggi dan lebar gambar

Anda juga dapat mengatur tinggi dan lebar gambar jika gambar aslinya misalnya. lebih dari yang Anda butuhkan.

Dalam HTML5 disarankan untuk melakukan ini menggunakan CSS atau atribut gaya , seperti ini:

Dalam contoh ini, kami mengambil 30% dari lebarnya, bukan dari gambar aslinya, tetapi dari ukuran jendela browser. Jika lebarnya = 100%, gambar akan terbuka hingga lebar penuh browser. Ingat fitur ini persen, sebagai satuan pengukuran.

Oiya, kalau kita tulis lebarnya saja, hasilnya pasti sama, coba:

< img src = "https://site/tutorials/wp-content/uploads/2016/07/panda.jpg"

alternatif = "panda di pohon" gaya = "lebar:30%;" >

Anda juga dapat mengatur lebar dan tinggi piksel. Dalam kasus panda kita, yang dimensi aslinya adalah 1196 x 796 piksel, agar hewan tersebut tidak menderita saat dikompresi, kita perlu menjaga proporsinya, dan di sini kita tidak dapat melakukannya tanpa kalkulator. Katakanlah kita ingin memperkecil ukuran gambar sebanyak 3 kali lipat, maka kita perlu mengatur dimensinya menjadi 399 x 265 piksel.

Perlu diketahui bahwa jika kita memperbesar gambar secara proporsional, maka cukup menentukan satu parameter saja, misalnya. lebar. Browser pintar itu sendiri akan menghitung ukuran penuh gambar.

Coba jalankan kode ini dan lihat hasilnya:

< img src = "https://site/tutorials/wp-content/uploads/2016/07/panda.jpg"

alternatif = "panda di pohon" gaya = "lebar:399 piksel;" >

Selalu atur dimensi gambar. Biasanya, gambar membutuhkan waktu lebih lama untuk dimuat dibandingkan kode html lainnya. Jika browser mengetahui berapa banyak ruang yang harus dicadangkan untuk gambar, browser dapat terus memuat situs tanpa menunggu gambar dimuat.

Sedikit kapur barus

Jika Anda mengutak-atik kode situs yang dibuat dalam HTML-4 atau bahkan lebih awal, Anda akan melihat bahwa ukuran gambar diatur menggunakan khusus atribut lebar Dan tinggi. Ini adalah metode yang tidak digunakan lagi, meskipun masih valid di HTML5. Namun, kami menyarankan menggunakan gaya, karena Atribut lebar dan tinggi dapat dipengaruhi oleh gaya internal atau eksternal yang akan ada di browser atau file CSS Anda. Kita akan membahas lebih detail mengenai hal ini saat kita melihat CSS, namun untuk saat ini lihat saja contoh bagaimana gaya memengaruhi atribut tinggi dan lebar.

Ada 3 tab di jendela ini: yang pertama Anda melihat kode html, yang kedua kode CSS, dan yang terakhir - seperti biasa, hasilnya. Ini berfungsi seolah-olah tab pertama adalah file index.html, tab kedua adalah file style.css, dan tab ketiga adalah browser. Jadi, sekarang CSS kita mengatakan bahwa semua elemen dengan tag img memiliki lebar 100%. Ukuran default atribut lebar dan tinggi adalah dalam piksel, jadi tidak perlu menambahkan satuan apa pun di sini.

Perbedaan hasilnya terlihat jelas :)

Juga di versi html yang lebih lama, atribut berikut digunakan:

meluruskan, yang digunakan untuk menyelaraskan gambar secara horizontal atau vertikal.

ruang- lekukan di kiri dan kanan gambar dengan konten di sekitarnya (misalnya teks atau gambar yang berdekatan)

vspace- lekukan di atas dan di bawah dari gambar ke konten di sekitarnya.

berbatasan- atur ketebalan bingkai di sekitar gambar (secara default adalah nol)

Saat ini, semua manipulasi ini (dan banyak lagi) dilakukan menggunakan CSS, jadi kami memutuskan untuk tidak mengganggu Anda di sini. Jika Anda masih tertarik bagaimana cara bekerja dengan atribut ini, tulis di komentar, kami akan menambahkan item ini :)