Jenis-Jenis List pada HTML

Jenis-Jenis List pada HTML - Bagi seorang developer web pasti sudah tidak asing lagi dengan hal-hal yang terkit dengan list atau daftar. Untuk membuat sebuah daftar barang misalnya pada HTML tidaklah sulit. Namun sebelum mempelajari lebih lajut tentang bagaimana cara membuatnya, alangkah baiknya kita memahami terlebih dahulu jenis dan tipe-tipe list pada HTML. Mari kita perhatikan gambar berikut :

Gambar Jenis List HTML

Ordered List

List jenis ini merupakan list yang memiliki urutan tertentu. Ada lima jenis tipe list yang dapat digunakan diantaranya menggunakan angka arab, huruf abjad kapital, huruf abjad kecil, angka romawi besar, dan angka romawi kecil.

Contoh penerapan pada baris kode :

Baris kode disamping merupakan salah satu contoh cara membuat list dengan urutan menggunakan angka arab. Untuk tipe yang lainnya kita hanya perlu mengganti value pada attribut type. Untuk membuat sebuah Ordered List harus dimulai dengan tag <ol>. Seluruh anggota list dituliskan masing-masing diantara tag <li>. dan diakhiri dengan penutup tag </ol>. Default dari Ordered List adalah list dengan type angka arab 1,2,3 . . dst yang artinya apabila baris kode hanya menggunakan tag <ol> tanpa memberikan attribut type maka type angka arab lah yang akan tampak pada browser.

Hasil yang tampak pada Browser :

UnOrdered List

List jenis ini merupakan list yang tidak memiliki aturan urutan tertentu. Ada empat type yang dapat digunakan diantaranya disc, circle, square dan none. 

Baris kode disamping merupakan salah satu contoh cara membuat UnOrdered List dengan type circle. Untuk type yang lainya hampir sama dengan Ordered List, kita hanya perlu mengganti value dari property list-style-type. Perlu diperhatikan bahwa tag untuk membuat Unordered list adalah tag <ul> berbeda dengan Ordered List yang menggunakan tag <ol>. Default dari UnOrdered List adalah list dengan type disc yang artinya apabila baris kode hanya menggunakan tag <ol> tanpa memberikan attribut style dan properti list-style-type maka type disc lah yang akan tampak pada browser.

Hasil yang tampak pada browser :

Selain kedua jenis list tersebut masih ada lagi jenis list namun tidak termasuk keduanya yaitu Description List. List tipe ini digunakan untuk membuat daftar deskripsi pada setiap anggota List.

Mari kita Lihat baris kode berikut :

Description List dibangun dengan tag <dl> yang mana setiap anggotanya dibuat dengan tag <dt> dan setiap deskripsi dari anggota tersebut dibuat dengan tag <dd>.




Hasil yang tampak pada Browser :

Sebuah anggota dalam list dapat berupa list baru yang mana memiliki beberapa anggota sendiri. Kondisi seperti itu biasa disebut dengan Nested List. Masih Bingung ? yuk langsung kita perhatikan baris kode berikut :

Baris kode ke-11 sampai baris kode ke-15 merupakan sebuah list sendiri yang disisipkan pada salah satu anggota dari list utama sehingga tampak seperti sebuah list didalam list, itulah yang disebut Nested List.

 Hasil yang tampak pada Browser :

Bagaimana temen-temen, mudah sekali bukan cara membuat list di HTML? Semoga Tutorial Jenis-Jenis List pada HTML kali ini dapat dengan mudah dipahami ya. Salam Belajar, Tetap Semangat !

Dasar-Dasar HTML

Dasar-Dasar HTML - Setelah mengenal dan memahami postingan saya sebelumnya tentang Pengertian dan Perkenalan HTML sekarang saya akan membahas mengenai Dasar-Dasar HTML yang mana akan membahas tentang Elemen Bertingkat, Attribut, Heading, Paragraf, Format Teks, Quote, Komentar, Link dan Gambar. Yuk langsung saja ke pembahasanya.

Elemen Bertingkat

Struktur kode pada HTML merupakan struktur kode yang bertingkat yang mana suatu elemen dapat dibentuk dengan menggabungkan elemen-elemen yang lain baik beberapa elemen yang sama maupun elemen yang berbeda. Contoh logika sederhananya seperti cerita berikut ini "Ibaratkan sebuah website adalah sebuah rumah. Rumah dibangun dengan elemen seperti lantai, tembok, atap, dan lain sebagainya. Elemen-elemen tersebut tidak berdiri sendiri alias dibangun dengan cara menyatukan beberapa elemen lain. Elemen tembok misalnya, ia dibangun dengan beberapa elemen yang berbeda yaitu batu batako, pasir, semen, kapur dan sebagainya. Sedangkan elemen atap dibentuk dengan beberapa elemen yang sama yaitu genteng yang disusun rapi". Bagaimana sudah ada gambaran bukan??? Masih belum ya. Oke langsung aja ke baris kode dibawah ini.
Pada baris kode disamping dapat kita lihat bahwa elemen <body> dibangun oleh satu elemen judul dengan tag <h1> dan dua elemen paragraf dengan tag <p>. Hal demikian lah yang disebut Elemen bertingkat karena elemen <body> tidak dapat berdiri sendiri.

Attribut

Attribut pada HTML merupakan pelengkap yang menempel pada tag layaknya kancing yang menempel pada baju meskipun tidak semua baju wajib ada kancingnya. Begitu pula dengan attribut pada HTML yang tidak selalu menempel pada tag. Penggunaan attribut sendiri dapat dituliskan dengan format nama Attribut = "isi attribut" . Berikut adalah beberapa contoh attribut pada HTML :

a. Attribut title yang merupakan attribut yang dapat menempel pada banyak tag yang berfungsi untuk menampilkan sebuah judul tersembunyi dan hanya akan muncul ketika pointer menunjuk pada elemen tersebut. Lebih jelasnya mari kita lihat baris kode berikut ini.

Hasilnya ketika dibuka di Browser :

Tulisan "Aku Cupuh"  muncul pada saat pointer menunjuk ke tulisan "Developer Cupuh" kaena pada tah <h1> diberikan attribut tittle.

b. Attribut href  merupakan attribut yang melekat pada tag <a> yang berfungsi untuk link. untuk penjelasanya akan dijelaskan pada bagian elemen link.

c. Attribut height dan width yang merupakan attribut untuk mengatur ukuran panjang dan lebar suatu elemen. attribut ini biasanya lebih sering melekat pada tag <img>. 

d. Attribut alt yang merupakan attribut yang melekat pada tag <img>. attribut ini akan dibahas lebih lanjut pada  elemen gambar.

Heading

Heading pada HTML merupakan format penulisan judul yang bertujuan agar pemberian judul pada halaman website dapat memiliki standard hierarki. tag untuk heading sendiri dimulai dari yang paling besar yaitu tag <h1> sampai tag <h6>.

Hasilnya ketika dibuka di Browser :

Paragraf

Paragraf pada HTML dibentuk dengan menggunakan tag <p>dan ditutup dengan tag </p>.

Format Teks

Dalam HTML ada beberapa tag yang dapat digunakan untuk menampilkan format teks yang berbeda dengan teks normalnya. Hal ini sangat perlu untuk diperhatikan karena terkadang kita pasti ingin memberikan efek teks yang berbeda pada sebagian teks tertentu. Beberapa Format Teks yang dapat digunakan sebagai berikut ini:

a. Teks Efek Tebal efek ini dapat dibuat dengan menggunakan tag <b>.

b. Teks Efek Strong efek ini hampir sama dengan efek tebal namun efek ini berfungsi sebagai penekanan pada kata tertentu misalnya dan dibuat dengan tag <strong>.

c. Teks Miring yang merupakan hasil dari tag <i>.

d. Empesize Teks yang merupakan efek yang hampir sama dengan Teks Miring namun efek ini hasil dari tag <em>.

e. Marked Teks yang merupakan penandaan teks agar dapat memperoleh perhatian khusus. Efek ini dibuat dengan teg <mark>.

f. Small Teks dapat dibuat dengan menggunakan tag <small>.

dan masih ada beberapa efek Teks lain yang bisa dilihat disini.

Quote

Membuat quote pada html dapat dengan menggunakan tag <q>. Contoh pada baris kode berikut ini .

Hasil pada Browser :

Komentar

Komentar pada baris kode HTML berfungsi untuk memberikan penjlasan terkait dengan baris kode yang ingin diberikan komentar yang mana komentar ini akan diabaikan oleh browser dan tidak akan tampil di laman browser. Komentar pada HTML ditulis diantara tanda <!-- komentar -->.

Masih belum kepikiran ??? Yuk diperhatikan gambar berikut.

Hasil yang muncul di browser :

Keterangan : baris kode ke 7 tidak akan tampil pada browser karena baris tersebut merupakan komentar yang dibuat oleh si pembuat website agar orang lain dapat dengan mudah memahami baris kode yang dibuatnya.

Link

Sebuah link pada HTML dapat dibuat dengan menggunakan tag <a> dan dengan bantuan attribut href  yang mana href disini berisi url dari website yang akan dituju. Contoh penggunaanya dapat dilihat pada gambar berikut ini.

Hasil pada browser :

Keterangan : tulisan link ini pada browser dapat di klik dan akan mengarah ke url yang ditautkan pada attribut href.

Gambar

Gambar dapat ditampilkan pada laman web dengan menggunakan tag <img> dengan bantuan attribut src yang mana attribut ini diberi nilai sumber dari gambar yang ingin ditampilkan. Gambar dapat bersumber dari file kita sendiri maupun dari website lain. Contoh berikut akan lebih menjelaskan.

Hasil pada Browser :

Source gambar : http://9gambar.blogspot.co.id/2015/02/gambar-kartun-lucu-lengkap.html

Keterangan : untuk mengatur ukuran gambar dapat dengan menggunakan attribut width untuk lebarnya dan attribut height untuk panjang gambar. baris kode ke 7 adalah contoh sumber gambar yang berasal dari website lain sedangkan baris kode ke 8 adalah contoh gambar yang bersumber dari file yang berada di komputer.

Demikian pembahasan tentang Dasar-Dasar HTML yang dapat kita pelajari untuk kali ini. Tetap semangat untuk temen-temen belajar websitenya. 

Pengertian dan Perkenalan HTML

Pengenalan dan Perkenalan HTML - HTML merupakan singkatan dari Hypertext Markup Language yang mana HTML ini adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML(source:Wikipedia).

HTML menggambarkan struktur halaman web yang akan dibuat. Sebuah Elemen HTML adalah blok halaman dari website yang mana setiap blok dibangun melalui tag-tag HTML. Apasih yang disebut tag HTML itu? Tag HTML adalah nama elemen yang berada diantara tanda kurang dari(<) dan lebih dari(>). Contoh dari sebuah blok pada HTML yang dibangun menggunakan tag : blok heading atau judul yang dibangun menggunakan tag <h1>,blok paragraf yang dibuat dengan tag <p>, blok tabel yang dibuat dengan menggunakan tag <tabel> dan sebagainya.

Sebuah elemen dibuat dengan menggunakan tag pembuka yang mana tag pembuka ini terdiri dari tanda <tag> kemudian menuliskan elemenya dan ditutup dengan menggunakan tag penutup </tag>. Agar lebih jelas perhatikan gambar berikut :

HTML telah mengalami perkembangan hingga kini telah hadir HTML5 yang semakin memberikan fitur yang lebih lengkap dan lebih sederhana dari versi HTML yang sebelumnya.

Contoh Struktur Sederhana dari HTML 5 :

Penjelasan tiap baris kode:
1. Terdapat deklarasi <!DOCTYPE html> yang merupakan representasi type dokumen yang akan dibuat dan merupakan ciri khas dari HTML5.
2. Tag <html> yang merupakan tag wajib harus ada di baris kode HTML karena tag tersebut yang akan memberitahukan bahwa file yang kita buat adalah file html.
3. Tag <head> berfungsi untuk mengapit berbagai macam fungsi dan informasi yang berkenaan dengan halaman web yang bersangkutan.
4. Tag <title> berfungsi untuk menampilkan judul dari web pada browser.
5. Tag </head> sebagai penutup dari tag <head> pada baris kode nomer 3.
6. Tag <body> merupakan tag pembuka yang mana seluruh elemen yang akan tampil di halaman browser dibangun di dalam tag <body>.
7. Tag <h1> merupakan tag untuk membuat sebuah judul pada artikel yang juga harus ditutup dengan tag </h1>.
8. Tag <p> merupakan tag untuk membangun sebuah paragraf pada artikel yang juga harus ditutup dengan tag </p>.
9. Tag </body> sebagai penutup dari tag <body> pada baris kode nomer 6.
10. Tag </html> tag penutup dari file html yang dibuat.

Baris kode diatas apabila dibuka dibrowser akan tampil hasilnya seperti ini :

Gambar Hasil

Bagaimana perkenalanya dengan HTML ? Seru kan! Belajar membuat website memang tidak mudah bagi para pemula apalagi yang belum memiliki pengetahuan pemrograman dasar, namun juga tidaklah terlalu sulit karena itu hanya masalah waktu dan jam terbang. Semakin kita sering berkutat dengan kode-kode HTML akan semakin mudah kita memahaminya. Tetap semangat belajarnya . . .