Cara memasukkan gambar dalam mode HTML

Cara memasukkan gambar dalam mode HTML

Memasukkan Gambar ke dalam Halaman Web

Gambar meningkatkan tampilan visual dari halaman web dengan membuat mereka lebih menarik dan berwarna-warni.

Dengan <img> tag ini digunakan untuk menyisipkan gambar di dalam dokumen HTML. Ini adalah elemen kosong dan berisi atribut saja. Sintaks <img> tag dapat diberikan dengan:

<img src="url" alt="some_text">

Berikut contoh sisipan tiga gambar pada halaman web:

<img src="kites.jpg" alt="Flying Kites">

<img src="sky.jpg" alt="Cloudy Sky">

<img src="balloons.jpg" alt="Balloons">

Setiap gambar harus membawa setidaknya dua atribut: kode src atribut, dan alt atribut.

Dengan src atribut memberitahu browser mana untuk menemukan gambar. Nilainya adalah URL dari file gambar.

Padahal, alt atribut menyediakan teks alternatif untuk gambar, jika hal ini tidak tersedia atau tidak dapat ditampilkan karena beberapa alasan. Nilainya harus bermakna pengganti gambar.

Catatan : Seperti <br> ini , <img> elemen ini juga merupakan elemen kosong, dan tidak memiliki tag penutup. Namun, dalam XHTML menutup sendiri berakhir dengan "/>".

diperlukan alt atribut menyediakan teks alternatif deskripsi untuk gambar jika user untuk beberapa alasan tidak dapat melihat itu karena koneksi yang lambat, gambar tidak tersedia di URL yang ditentukan, atau jika pengguna menggunakan pembaca layar atau non-browser grafis.

Pengaturan Lebar dan Tinggi Gambar

Yang width dan height atribut yang digunakan untuk menentukan lebar dan tinggi dari sebuah gambar.

Nilai dari atribut ini ditafsirkan dalam piksel secara default.

<img src="kites.jpg" alt="Flying Kites" width="300" height="300">

<img src="sky.jpg" alt="Cloudy Sky" width="250" height="150">

<img src="balloons.jpg" alt="Balloons" width="200" height="200">

Anda juga dapat menggunakan style atribut untuk menentukan lebar dan tinggi gambar. Mencegah style sheets dari mengubah ukuran gambar secara tidak sengaja, karena gaya inline memiliki prioritas tertinggi.

<img src="kites.jpg" alt="Flying Kites" style="width: 300px; height: 300px;">

<img src="sky.jpg" alt="Cloudy Sky" style="width: 250px; height: 150px;">

<img src="balloons.jpg" alt="Balloons" style="width: 200px; height: 200px;">

Catatan: Ini adalah praktik yang baik untuk menentukan baik width dan height atribut untuk gambar, sehingga browser dapat mengalokasikan banyak ruang untuk gambar sebelum di-download. Jika tidak, gambar loading dapat menyebabkan distorsi atau berkedip dalam tata letak situs web anda.

Menggunakan HTML5 Elemen Gambar

Kadang-kadang, skala gambar ke atas atau ke bawah untuk menyesuaikan perangkat yang berbeda (atau ukuran layar) tidak bekerja seperti yang diharapkan. Juga, mengurangi gambar dimensi menggunakan width dan height atribut atau properti tidak mengurangi ukuran file asli. Untuk mengatasi masalah ini HTML5 telah memperkenalkan <picture> tag yang memungkinkan anda untuk menentukan beberapa versi dari sebuah gambar untuk menargetkan berbagai jenis perangkat.

Satu <picture> elemen berisi nol atau lebih <source> elemen-elemen, yang masing-masing mengacu ke berbagai sumber gambar, dan salah satu <img> unsur di akhir. Juga masing-masing <source> elemen memiliki media atribut yang menentukan media kondisi (mirip dengan media query) yang digunakan oleh browser untuk menentukan kapan suatu sumber tertentu harus digunakan. Mari kita coba contoh:

<picture>

    <source media="(min-width: 1000px)" srcset="logo-large.png">

    <source media="(max-width: 500px)" srcset="logo-small.png">

    <img src="logo-default.png" alt="My logo">

</picture>

Catatan: browser akan mengevaluasi setiap anak <source> elemen dan memilih pertandingan terbaik di antara mereka; jika tidak ada kecocokan yang ditemukan, URL dari <img> elemen src atribut yang digunakan. Juga, <img> tag harus ditentukan sebagai anak terakhir dari <picture> elemen.

Bekerja dengan Gambar Peta

Gambar peta memungkinkan anda untuk menentukan titik-titik pada gambar, yang bertindak seperti sebuah hyperlink.

Ide dasar di balik menciptakan gambar peta adalah untuk memberikan cara mudah untuk menghubungkan berbagai bagian dari suatu gambar tanpa membaginya menjadi terpisah file gambar. Sebagai contoh, sebuah peta dunia yang mungkin memiliki masing-masing negara hyperlink untuk informasi lebih lanjut tentang negara itu.

Mari kita coba contoh sederhana untuk memahami bagaimana hal itu benar-benar bekerja:

<img src="objects.png" usemap="#objects" alt="Objects">

<map name="objects">

    <area shape="circle" coords="137,231,71" href="clock.html" alt="Clock">

    <area shape="poly" coords="363,146,273,302,452,300" href="sign.html" alt="Sign">

    <area shape="rect" coords="520,160,641,302" href="book.html" alt="Book">

</map>

Satu name atribut dari <map> tag ini digunakan untuk referensi peta dari <img> tag yang menggunakan usemap atribut. Dengan <area> tag ini digunakan dalam <map> elemen untuk mendefinisikan daerah yang dapat diklik pada gambar. Anda dapat menentukan sejumlah daerah diklik dalam sebuah gambar.

Catatan : gambar peta tidak boleh digunakan untuk navigasi situs. Mereka tidak search engine friendly. Yang valid menggunakan gambar peta dengan peta geografis.

Tip : Ada banyak alat-alat online yang tersedia untuk membuat gambar peta. Beberapa advanced editor seperti Adobe Dreamweaver juga menyediakan satu set alat untuk dengan mudah menciptakan peta gambar.

Membuat Tabel di HTML

Tabel HTML yang memungkinkan anda untuk mengatur data ke dalam baris dan kolom. Mereka umumnya digunakan untuk menampilkan data tabular seperti daftar produk, pelanggan rincian, laporan keuangan, dan sebagainya.

Anda dapat membuat tabel menggunakan <table> elemen. Dalam <table> elemen ini, anda dapat menggunakan <tr> unsur-unsur untuk membuat baris, dan untuk membuat kolom dalam satu baris, anda dapat menggunakan <td> unsur-unsur. Anda juga dapat mendefinisikan sel header untuk sekelompok sel tabel dengan menggunakan <th> elemen.

Contoh berikut menunjukkan yang paling dasar struktur dari sebuah tabel.

<table>

    <tr>

        <th>No.</th>

        <th>Name</th>

        <th>Age</th>

    </tr>

    <tr>

        <td>1</td>

        <td>Peter Parker</td>

        <td>16</td>

    </tr>

    <tr>

        <td>2</td>

        <td>Clark Kent</td>

        <td>34</td>

    </tr>

</table>

Tabel-tabel yang tidak memiliki perbatasan dengan default. Anda dapat menggunakan CSS border properti untuk menambahkan batas ke meja. Juga, sel-sel tabel yang berukuran cukup besar agar sesuai dengan isi dengan default. Untuk menambahkan lebih banyak ruang di sekitar konten dalam sel tabel, anda dapat menggunakan CSS padding properti.

Berikut aturan gaya tambahkan 1-pixel border untuk tabel dan 10-piksel padding untuk sel-sel.

table, th, td {

    border: 1px solid black;

}

th, td {

    padding: 10px;

}

Secara default, perbatasan di sekitar meja dan sel-sel mereka dipisahkan dari satu sama lain. Tapi anda dapat runtuh mereka menjadi satu dengan menggunakan border-collapse properti pada <table> elemen.

Juga, teks dalam <th> elemen-elemen yang ditampilkan dalam huruf tebal, sejajar horizontal center dalam sel secara default. Untuk mengubah default alignment anda dapat menggunakan CSS text-align properti.

Berikut aturan gaya runtuhnya meja perbatasan dan menyelaraskan header tabel teks ke kiri.

table {

    border-collapse: collapse;

}

th {

    text-align: left;

}

Sebagian besar <table> elemen atribut seperti border, cellpadding, cellspacing, width, align, dll. untuk menata meja penampilan di versi sebelumnya telah turun di HTML5, jadi hindari menggunakan mereka. Menggunakan CSS untuk style HTML tabel sebagai gantinya.

Mencakup Beberapa Baris dan Kolom

Mencakup memungkinkan anda untuk memperpanjang tabel baris dan kolom di beberapa baris dan kolom.

Biasanya, sel tabel tidak dapat melewati ke ruang bawah atau di atas meja lain sel. Namun, anda dapat menggunakan rowspan atau colspan atribut untuk menyertakan beberapa baris atau kolom dalam sebuah tabel.

Mari kita coba contoh berikut untuk memahami bagaimana colspan pada dasarnya bekerja:

<table>

    <tr>

        <th>Name</th>

        <th colspan="2">Phone</th>

    </tr>

    <tr>

        <td>John Carter</td>

        <td>5550192</td>

        <td>5550152</td>

    </tr>

</table>

Demikian pula, anda dapat menggunakan rowspan atribut untuk membuat sel yang mencakup lebih dari satu baris. Mari kita coba contoh untuk memahami cara-turut mencakup pada dasarnya bekerja:

<table>

    <tr>

        <th>Name:</th>

        <td>John Carter</td>

    </tr>

    <tr>

        <th rowspan="2">Phone:</th>

        <td>55577854</td>

    </tr>

    <tr>

        <td>55577855</td>

    </tr>

</table>

Menambahkan Teks ke Tabel

Anda dapat menentukan judul (atau judul) untuk tabel anda menggunakan <caption> elemen.

Dengan <caption> elemen harus ditempatkan langsung setelah pembukaan <table> tag. Secara default, keterangan yang muncul di bagian atas meja, tapi anda bisa mengubah posisinya dengan menggunakan CSS caption-side properti.

Contoh berikut menunjukkan bagaimana menggunakan elemen ini dalam sebuah tabel.

<table>

    <caption>Users Info</caption>

    <tr>

        <th>No.</th>

        <th>Name</th>

        <th>Age</th>

    </tr>

    <tr>

        <td>1</td>

        <td>Peter Parker</td>

        <td>16</td>

    </tr>

    <tr>

        <td>2</td>

        <td>Clark Kent</td>

        <td>34</td>

    </tr>

</table>

Mendefinisikan sebuah Tabel Header, Body, dan Footer

HTML menyediakan serangkaian kategori <thead>, <tbody>dan <tfoot> yang membantu anda untuk membuat lebih terstruktur tabel, dengan mendefinisikan header, body dan footer daerah, masing-masing.

Contoh berikut menunjukkan penggunaan elemen-elemen ini.

<table>

    <thead>

        <tr>

            <th>Items</th>

            <th>Expenditure</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Stationary</td>

            <td>2,000</td>

        </tr>

        <tr>

            <td>Furniture</td>

            <td>10,000</td>

        </tr>        

    </tbody>

    <tfoot>

        <tr>

            <th>Total</th>

            <td>12,000</td>

        </tr>

    </tfoot>

</table>

Catatan : Dalam HTML5, <tfoot> elemen dapat diletakkan baik sebelum atau setelah <tbody> dan <tr> unsur-unsur, tetapi harus muncul setelah salah <caption>, <colgroup>, dan <thead> unsur-unsur.