Home / Tutorial HTML5
Tampilkan postingan dengan label Tutorial HTML5. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial HTML5. Tampilkan semua postingan
Senin, 05 Maret 2018
Jumat, 23 Februari 2018
Rabu, 21 Februari 2018
Tutorial HTML5
Belajar HTML Part 18 - Atribut Class dan Id
Menggunakan Atribut Class
Atribut class bisa juga disebut sebagai pengelompokan elemen-elemen dalam HTML. Atribut class digunakan untuk mengelompokan dan menentukan style atau tampilan pada elemen HTML. Atribut class bisa dipakai berulangkali pada dokumen HTML. Dengan kata lain, sebuah nama class dapat dipanggil beberapa kali pada elemen-elemen yang ada pada halaman web.
Tutorial HTML5
Tipe circle, untuk menampilkan list menjadi bulatan kecil yang memiliki luang di tengah.
Tipe square, untuk menampilkan list menjadi kotak hitam kecil.
Tipe none, untuk meniadakan tanda list.
Hasilnya:
Hasilnya:
Demikian pembahasan tentang membuat List pada HTML.
Belajar HTML Part 16 - Membuat List di HTML
Contoh List di HTML
List terdiri dari 2 jenis:
type="A", tipe ini akan menampilkan list dengan huruf kapital:
Contoh
type="a", tipe ini akan menampilkan list dengan huruf kecil:
Contoh
type="I", tipe ini akan menampilkan list dengan bilangan romawi besar:
Contoh
type="i", tipe ini akan menampilkan list dengan bilangan romawi kecil:
Contoh
Hasilnya:
Unordered List di HTML
List terdiri dari 2 jenis:
- Ordered List (list yang berurutan)
- Unordered List (list yang tidak berurutan)
Ordered List di HTML
Untuk membuat Ordered list (list yang berurutan) gunakan tag <ol>. Setiap list item dimulai dengan tag <li>. Secara default, list item akan ditampilkan dengan angka.
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List HTML </h2>
<ol>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
</body>
</html>
type="1", tipe ini akan menampilkan list dengan angka (type default):
Contoh
<ol type="1">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
type="A", tipe ini akan menampilkan list dengan huruf kapital:
Contoh
<ol type="A">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
type="a", tipe ini akan menampilkan list dengan huruf kecil:
Contoh
<ol type="a">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
type="I", tipe ini akan menampilkan list dengan bilangan romawi besar:
Contoh
<ol type="I">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
type="i", tipe ini akan menampilkan list dengan bilangan romawi kecil:
Contoh
<ol type="i">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
Hasilnya:
Unordered List di HTML
Untuk membuat unordered list gunakan tag <ul>. Setiap list item dimulai dengan tag <li>. Secara default, list item akan ditampilkan dengan lingkaran hitam kecil.
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List HTML</h2>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>
</body>
</html>
Properti CSS list-style-type digunakan untuk menentukan tipe style list item.
Tipe disc, untuk menampilkan list menjadi lingkaran hitam kecil (tipe default)
Contoh
<ul style="list-style-type:disc">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>
Tipe circle, untuk menampilkan list menjadi bulatan kecil yang memiliki luang di tengah.
Contoh
<ul style="list-style-type:circle">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>
Tipe square, untuk menampilkan list menjadi kotak hitam kecil.
Contoh
<ul style="list-style-type:square">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>
Tipe none, untuk meniadakan tanda list.
Contoh
<ul style="list-style-type:none">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>
HTML juga mendukung list deskripsi atau description list. List deskripsi biasa digunakan untuk menentukan deskripsi atau penjelasan mengenai istilah suatu kata.
Untuk membuat Description List, seluruh list harus berada di dalam pasangan tag <dl> dan </dl>. Setiap deskripsi atau judul istilah, kita menggunakan tag <dt>. Sedangkan untuk penjelasan istilah tersebut, kita menggunakan tag <dd>.
Untuk membuat Description List, seluruh list harus berada di dalam pasangan tag <dl> dan </dl>. Setiap deskripsi atau judul istilah, kita menggunakan tag <dt>. Sedangkan untuk penjelasan istilah tersebut, kita menggunakan tag <dd>.
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>Description List</h2>
<dl>
<dt>Kopi</dt>
<dd>- Bagus diminum saat panas</dd>
<dt>Susu</dt>
<dd>- Bagus diminum saat sarapan</dd>
</dl>
</body>
</html>
Nested List adalah list item yang berisi list item atau bisa dikatakan sebagai list item yang berulang.
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>Nested List</h2>
<ul>
<li>Kopi</li>
<li>Teh
<ul>
<li>Teh Panas</li>
<li>Teh Dingin</li>
</ul>
</li>
<li>Susu</li>
</ul>
</body>
</html>
Hasilnya:
Catatan: List item dapat berisi list baru, dan elemen HTML lainnya, seperti gambar, link, dll
List Horizontal
List pada HTML bisa ditata dalam berbagai cara dengan menggunakan properti CSS. Salah satu cara yang populer adalah list horizontal, yang biasa digunakan untuk membuat menu atau navigasi:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Beranda</a></li>
<li><a href="#news">Berita</a></li>
<li><a href="#contact">Kontact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Hasilnya:
Demikian pembahasan tentang membuat List pada HTML.
Tutorial HTML5
Belajar HTML Part 15 - Membuat Tabel di HTML
Membuat Table di HTML
Untuk memuat tabel di HTML gunakan tag <table>.
- Tag <table> digunakan untuk memulai tabel.
- Tag <th> adalah singkatan dari table header, digunakan untuk membuat header pada tabel.
- Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
- Tag <td> adalah singkatan dari table data, digunakan untuk mengimput data ke tabel.
Langganan:
Postingan (Atom)
GORONTALO, INDONESIA
Rekomendasi
-
Dalam penggunaan warna pada HTML, telah ditetapkan beberapa ketentuan seperti penggunaan HTML warna dengan menuliskan nama warna y...
-
CSS Form Form atau bisa juga disebut sebagai daftar isian merupakan salah satu elemen yang digunakan untuk memasukan atau menginput ...
-
CSS Layout - Float float secara etimologi berarti "mengapung" atau "mengambang". Properti float digunakan untu...
-
CSS Layout - Overflow Properti CSS overflow digunakan untuk mengontrol atau menghandle konten yang ukurannya melebihi ukuran par...
-
CSS Layout - Horizontal & Vertikal Align Align adalah penyelarasan, perataan, atau jajaran baik berupa teks, elemen, dan lain-la...
-
Atribut Input dalam Form Atribut-atribut berikut merupakan atribut yang termasuk dalam form di HTML.
-
HTML5 Audio Sebelum HTML5, file audio hanya bisa dimainkan di browser dengan plug-in (seperti flash).
-
CSS Layout Halaman Web Pada tutorial HTML sebelumnya telah dibahas mengenai layout halaman web, akan tetapi di tutorial kali ini ki...
Mengenai Saya
- Octavianus Hasan
- Assalamu'alaikum Wr. Wb. Perkenalkan, saya Octavianus Hasan, lahir di Gorontalo 15 Mei 1995, saya masih berstatus sebagai mahasiswa di salah satu Perguruan Tinggi Swasta di Gorontalo yaitu STMIK Ichsan Gorontalo. Jadi, itu waktu dulu yaa. Untuk sekarang saya sudah lulus, tepatnya 21 Desember 2020. Saat ini saya tengah mengabdi di salah satu Sekolah Menengah di Provinsi Gorontalo yaitu SMK Negeri 4 Gorontalo Utara. Wassalamu'alaikum Wr. Wb.
Kategori Pilihan
- Quotes 1
- Tutorial CSS3 31
- Tutorial HTML5 28