Belajar HTML Part 3 Menambahkan Images & List

Belajar HTML Part 3 Menambahkan Images & List

Assalamualaikum Wr. Wb.

Selamat malam bro, bagaimana kabarnya ? Sehat kan ? Alhamdulillah masih hidup. Nah Pada kesempatan kali ini kita akan melanjutkan belajar tentang HTML. Nah Langsung saja daripada waktu terbuang sia-sia.

PENGERTIAN

• Images adalah sebuah perintah untuk menampilkan gambar di dalam HTML. Menampilkan gambar pada HTML termasuk penting, dalam membuat website atau membuat aplikasi berbasis web bayangkan apa jadinya jika website tanpa gambar, kesannya akan terlihat sepi dan membosankan. Tag yang digunakan untuk menambahkan gambar yaitu <img>

• List di dalam HTML berarti memberikan suatu data dalam bentuk daftar untuk memudahkan kita dalam membacanya dan memahaminya. Tag yang digunakan di dalam list yaitu <li>. List terbagi menjadi dua yaitu Ordered list & Unordere list. Ordered list berfungsi untuk menampilkan daftar list dalam bentuk huruf atau angka. Tag yang digunakan dalam ordered list ini yaitu <ol>. Sedangkan Unordered list berfungsi untuk menampilkan daftar list dalam bentuk bullet. Tag yang digunakan untuk membuat unordered list yaitu <ul>.

LATAR BELAKANG

Ingin memahami dan belajar lebih lanjut tentang HTML, baik itu secara teori maupun syntax-syntaxnya.

MAKSUD & TUJUAN

Memudahkan kita untuk membuat web design dengan Tag tersebut. Karena Tag tersebut sering digunakan dalam membuat sebuat web.

ALAT & BAHAN 

• PC/Laptop
• Text Editor
• Browser

LANGKAH KERJA

• Menambahkan Images di dalam HTML

Di dalam HTML untuk menambahkan sebuah gambar bisa menggunaka perintah berikut.

<img src="facebook.jpg" >

Di dalam perintah tersebut dapat kita simpulkan bahwa untuk menambahk sebuah gambar itu digunakan tag <img> dan jangan lupa tambahkan attributes "src" yang berfungsi untuk menentukan sumber gambar berada. Jadi logikannya gambar itu akan ditampilkan jika sumbernya jelas. Misalnya jika kita menambahkan gambar dari internet, maka kita memasukkan link gambar tersebut. Contoh kita akan menambahkan icon facebook ke dalam HTML kita maka perintahnya.

<img src="https://www.facebook.com/images/fb_icon.png">

Untuk menambahkan file dari folder yaitu:

<img src="/home/mamadz/Documents/belajar HTML/fb_icon.png"

Dan inilah Hasilnya.

Untuk memberi ukuran yang kita inginkan, maka di dalam tag tersebut kita tambahkan sebuah attribute "width" untuk lebar dan "heght" untuk tingginya. Contoh sebagai berikut.

<img src="https://www.facebook.com/images/fb_icon.png" width="100px" height="150px">

Satuan dalam images bermacam-macam ada px (pixel), pt (point), inc (inchi), cm (centimeter), % (persen), m (meter), dll. Pemakaian satuan tersebut tergantung pada kebutuhan kalian sendiri.

Satu lagi untuk menambahkan alternatife pada gambar. Alternatife ini berfungsi untuk memberikan alternatif jika gambar tersebut tidak bisa dibuka. Maka alternatife ini berisi tentang deskripsi dari gambar tersebut. Attribute yang digunakan yaitu menggunakan "alt". Dan berikut contoh penggunaannya.

<img src="https://www.facebook.com/images.fb_config.png" alt="foto_facebook">

• Menambahkan List ke dalam HTML

Dalam membuat list pada HTML ini terdapat dua jenis tampilan list yang bisa di gunakan yaitu ordered list dan unordered list. Seperti di atas sudah saya jelaskan perbedaan dari jenis dua tampilan tersebut. Langsung saja berikut penulisan list dalam HTML.

Kita coba menggunakan tag <ul>, yaitu menampilkan list dalam bentuk bullet atau simbol lainnya.

Kita lihat hasilnya seperti ini.

Selanjutnya kita gunakan tag <ol> untuk menampilkan list dalam bentuk angka atau huruf. Beriku contoh penulisannya.

Dan berikut hasilnya, perhatikan perbedaannya. 

Nah sekarang sudah tahu kan perbedaan tag <ul> dan tag <ol> di dalam list HTML. Walaupun belajar itu awalnya sulit tapi jika kita terus menerus dan istiqomah maka kita akan menemukan jalannya.

Sekian dari saya, kurang lebihnya mohon maaf. Jangan lupa ikuti kami agar lebih dekat Hehe.

Syukron

Wassalamualaikum Wr. Wb.

Referensi

Buku Belajar HTML dan CSS dasar oleh Diki Alfaribi Hadi