Apa itu HTML?
Setiap website yang ada di dunia ini dibangun menggunakan bahasa yang dinamakan HTML. HTML menjadi sebuah kerangka membentuk struktur sebuah halaman website.HTML adalah singkatan dari Hyper Text Markup Language. HTML mendeskripsikan struktur halaman sebuah website. Sebuah halaman HTML dibangun oleh blok-blok konten yang disebut elemen HTML.
Dokumen HTML ditampilkan oleh aplikasi yang dinamakan browser. Browser tidak akan menampilkan kode HTML, tetapi menggunakan kode HTML untuk menentukan bagaimana konten dokumen tersebut seharusnya ditampilkan.
Sejak pertama kali web ditemukan, sudah muncul dan berkembang versi dari HTML, yakni bermula dari versi 1 di tahun 1991. Kemudian HTML 2.0 lahir pada tahun 1995 dan HTML 3.2 pada tahun 1997. HTML 4.01 muncul pada tahun 1999 dan disempurnakan dengan XHTML pada tahun 2000. Versi terakhir HTML adalah HTML5 yang diperkenalkan pada tahun 2014 dan digunakan hingga saat ini.
Struktur HTML
Struktur minimum dari sebuah dokumen HTML dapat diamati pada kolom editor di samping.- Deklarasi
<!DOCTYPE html>mendefinisikan dokumen sebagai sebuah halaman HTML5 - Elemen
<html>adalah induk elemen dari sebuah halaman HTML - Elemen
<head>berisi informasi seputar dokumen - Elemen
<title>menetapkan judul dari dokumen HTML - Elemen
<body>adalah induk dari konten halaman yang akan ditampilkan - Elemen
<h1>dan<p>adalah contoh konten yang tampil pada layar
<title> akan tampil di bagian headbar/tab browser dan semua konten yang ada di dalam body akan ditampilkan di dalam jendela browser.Elemen HTML
Sebuah elemen HTML umumnya tersusun dari tag pembuka dan tag penutup, dengan konten yang disimpan diantara keduanya.<namatag>Konten di dalam tag</namatag> < dan >, misalnya <h1> dan <p>.Tag penutup ditulis seperti tag pembuka, dengan diawali karakter garis miring
/ sebelum nama tagnya, misalnya </h1> dan </p>.Konten elemen adalah semua konten yang ada di antara tag pembuka dan tag penutup.
Tag mendefinisikan maksud konten yang ada di dalamnya. Ketika kita menuliskan sebuah konten menggunakan tag
<h1>, misalnya <h1>Halo Coder!</h1> berarti kita mendefinisikan konten "Halo Coders!" sebagai sebuah heading besar. Ketika kita menulis konten di dalam tag <p> maka berarti kita mendefinisikan konten tersebut sebagai sebuah paragraf.Tag sendiri tidak akan ditampilkan di browser. Tag hanya menjadi pengenal untuk browser dalam menentukan seperti apa sebuah konten ditampilkan. Misalnya, ketika kita menulis
<strong>Kereeen!</strong>, maka konten di dalam tag tersebut akan ditampilkan sebagai tulisan yang dicetak tebal, seperti ini:
Kereen!
<br />
<img src="image.jpg" /> <br> dan <img> di atas tidak memiliki tag penutup, melainkan menutup dirinya sendiri dengan diakhiri karakter />.Atribut HTML
Atribut HTML adalah informasi tambahan yang diperlukan oleh sebuah elemen HTML.Pada pembahasan sebelumnya kita sudah melihat contoh elemen
<img>. Elemen ini memiliki konten tambahan di dalam tagnya, yakni src.<img src="image.jpg" /> src yang terdapat di dalam tag <img> adalah salahsatu contoh atribut HTML.Atribut HTML selalu didefinisikan di dalam tag pembuka suatu elemen. Atribut biasanya ditulis dalam bentuk pasangan nama dan nilai atribut dengan format seperti ini:
nama="nilai".Semua elemen HTML dapat mengandung atribut, baik itu atribut yang umum yang dapat dimiliki oleh semua elemen HTML, maupun atribut khusus untuk elemen HTML tertentu. Contoh atribut umum adalah
id dan class. Contoh atribut khusus adalah src pada elemen <img> dan href pada elemen <a>.Nama Atribut
Nama atribut dapat ditulis baik menggunakan huruf kapital maupun huruf kecil, akan tetapi sangat dianjurkan menggunakan huruf kecil semua sebagai sebuah standar sejak versi XHTML.Nilai Atribut
Nilai dari atribut HTML dapat ditulis tanpa menggunakan tanda kutip. Namun dalam banyak kasus tanda kutip harus digunakan untuk membungkus nilai atribut yang mengandung spasi.<h1 title=judul konten>Pendahuluan</h1> <h1 title="judul konten">Pendahuluan</h1>
Tanda Kutip atau Petik?
Nilai atribut dapat menggunakan baik tanda kutip" maupun tanda petik '.
Bila kita membuka dengan tanda kutip, maka tutup juga dengan tanda
kutip. Begitu pula bila membuka dengan tanda petik, maka tutuplah dengan
tanda petik.Hal ini sangat berguna bila nilai atribut mengandung tanda kutip atau petik. Bila nilai atribut mengandung tanda kutip, maka gunakanlah petik untuk membungkus nilai atribut. Dan bila nilai atribut mengandung tanda petik, maka gunakanlah kutip untuk membungkus nilai atribut.
<h1 title='Bosnya "Microsoft"'>Bill Gates</h1>
Headings
Headings adalah elemen HTML yang digunakan untuk menampilkan judul dari sebuah konten. Elemen headings ada 6 jenis, yakni<h1>, <h2>, <h3>, <h4>, <h5> dan <h6>. Elemen
<h1> menunjukkan tingkat kepentingan yang lebih tinggi daripada <h2> dan seterusnya. Elemen <h1> umumnya akan ditampilkan dengan ukuran huruf yang lebih besar dibanding <h2>, dan begitu seterusnya sampai <h6>.Bila kita hendak membuat judul sebuah konten, maka gunakanlah
<h1> sebagai prioritas utama. Bila hendak membuat subjudul di dalam konten, maka gunakan <h2>, dan bila hendak membuat sub-subjudul, maka gunakan <h3>, dan seterusnya.Paragraph
Elemen<p> mendefinisikan sebuah konten paragraf.<p>Ini adalah sebuah paragraf.</p>
<p>Dan ini adalah paragraf lain.</p> <p>Ini adalah sebuah
paragraf.</p> <br> atau <br />.<p>Ini<br>
adalah<br>
sebuah<br>
paragraf.</p>
Text Formatting
Kita dapat menandai bagian-bagian tertentu dari sebuah teks HTML seperti cetak tebal, cetak miring dan lain-lain.<b>- mencetak tebal teks<strong>- menandai teks penting<i>- mencetak miring teks<em>- memberikan penekanan pada teks<mark>- menandai teks dengan sorotan<small>- membuat teks lebih kecil dari ukuran bawaan<del>- memberi coretan pada teks<ins>- mengarisbawahi teks<sub>- membuat tulisan lebih bawah dari garis datar tulisan<sup>- membuat tulisan lebih atas dari garis datar tulisan
Links
HTML link adalah elemen yang digunakan untuk membuat kaitan ke halaman lain. Ketika elemen link diklik maka halaman browser akan berpindah menampilkan halaman lain yang dituju link tersebut.<a href="url">teks link</a> <a> menggunakan atribut href untuk menentukan alamat tujuan link. teks link adalah teks yang akan kita jadikan link. Ketika teks link diklik, maka halaman akan berpindah ke alamat tujuan link.Kita tidak hanya dapat menggunakan teks sebagai link, tapi juga gambar atau elemen lainnya.
<a href="url"><img src="gambar.jpg" /></a>
Atribut Target
Atributtarget kita gunakan untuk menentukan dimana alamat link harus dibuka._self- Membuka alamat link di tab/jendela browser yang sama (nilai bawaan)_blank- Membuka alamat link di tab/jendela browser yang baru_parent- Membuka alamat link di frame induk_top- Membuka alamat link di jendela penuhframename- Membuka alamat link di frame yang namanya sudah ditentukan
_blank untuk menampilkan halaman di tab browser baru. Bila atribut ini tidak dipasang, maka nilai defaultnya adalah _self, artinya alamat link tersebut akan dibuka di jendela yang sedang aktif.Images
Kita dapat menampilkan gambar pada HTML dengan elemen<img>. Elemen ini tidak memiliki konten, hanya menggunakan atribut saja dan tidak memilik tag penutup.<img src="gambar.jpg" /> src digunakan untuk menentukan alamat gambar yang hendak ditampilkan.Kita juga dapat mengatur ukuran gambar menggunakan atribut width untuk panjang gambar dan height untuk tinggi gambar.
<img src="gambar.jpg" width="100px" height="100px" /> Code
Sebagai (calon) programmer tentu Kamu akan sering bersentuhan dengan kode program. Saat Kamu membuat tulisan tentang kode programmu, Kamu akan perlu menampilkan kode agar tampilannya lebih mudah dibaca. Daripada seperti ini:var x = 5;
var y = 6;
alert(x + y);
Tentu akan lebih mudah dan nyaman dibaca bila ditulis seperti ini:
var x = 5;
var y = 6;
alert(x + y); <code> atau <pre> atau kombinasi keduanya. Karena elemen <code> bersifat inline, maka kita dapat menggunakan tag <pre> baru kemudian menuliskan tag <code> dan kodemu di dalamnya.
Comment
Adakalanya kita harus memberikan penjelasan di dalam dokumen HTML tentang bagian-bagian tertentu di dalamnya, agar memudahkan kita atau orang lain untuk memahami isi dari dokumen HTML tersebut. Terlebih lagi bila HTML yang kita tulis sudah ratusan atau bahkan ribuan baris.HTML menyediakan format untuk menulis komentar pada dokumen HTML tanpa menampilkannya di browser.
<!-- ini komentar --> <!-- dan ditutup dengan tag -->.
Komentar dapat ditulis lebih dari satu baris hingga komentar tersebut
ditutup. Semua teks yang ada di dalam tag komentar akan dianggap sebagai
komentar.<!-- ini contoh tag yang dikomentari
<img src="gambar.jpg" />
-->
Block dan Inline
Setiap elemen HTML memiliki mode tampilan (display) bawaannya masing-masing, yang umumnya antara dua nilai, yaitublock dan inline.Block
Elemen dengan mode displayblock akan tampil dengan ukuran width penuh, mengisi ruang kiri dan kanan semaksimal mungkin. Contohnya adalah elemen <h1>-<h6>. Ketika kita menuliskan elemen ini di dalam satu baris pun, browser akan menampilkan elemen ini di masing-masing baris.<h1>Halo Coders</h1> <h2>Apa kabar?</h2> <h1> dan <h2> pada kode di atas akan tetap ditampilkan di baris tersendiri.
Halo Coders
Apa kabar?
block diantaranya adalah <p>, <form>, <div>, <pre> dan lain-lain.Inline
Tidak sepertiblock, elemen dengan mode display inline akan ditampilkan dalam satu baris sesuai ukuran widthnya. Mode inline tidak akan menghabiskan ruang ke kiri dan kanan. Contoh elemen dengan mode inline adalah elemen-elemen formatting seperti <strong> dan <em>.Ini contoh teks berisi elemen <strong>inline</strong>. Elemen inline akan sesuai ukuran <em>width</em> aslinya.
Ini contoh teks berisi elemen inline. Elemen inline akan sesuai ukuran width aslinya.
Beberapa contoh elemen lain yang juga memiliki mode display inline diantaranya adalah <a>, <span>, <img> dan lain-lain.Mengubah Warna Teks dan Latar
Kita dapat memberikan style pada sebuah elemen dengan menuliskan stylenya menggunakan atribut style. Teknik ini dikenal dengan istilah inline style. Penulisan nilai dari artibut style adalah sebagai berikut:<namatag style="property:value;"> property:value dimana property
adalah nama jenis style yang akan diterapkan pada elemen, dan value
adalah nilai dari property stylenya. Kita dapat menerapkan lebih dari
satu style dengan memisahkan antar style dengan tanda titik koma ;.Misalkan kita akan memberi warna pada elemen teks paragraf. Warna bawaan teks pada HTML adalah hitam, dan kita dapat mengganti warna teks dengan warna lain misalnya merah, maka kita tuliskan kode HTML seperti berikut:
<p style="color:red;">Ini teks berwarna merah</p> Selain itu, kita juga dapat mengganti warna latar dari sebuah elemen dengan warna yang kita inginkan. Warna bawaan sebuah elemen adalah
transparent atau transparan. Kita dapat mengubah warna latar dengan menggunakan property background-color.<p style="color:red; background-color:blue;">Ini teks berwarna merah dengan latar biru</p>
Kode di atas akan menampilkan elemen paragraf berisi teks berwarna merah dengan latar berwarna biru.
Mengubah Ukuran dan Perataan Teks
Kita dapat mengatur ukuran font atau teks dengan menggunakan propertyfont-size.<p style="font-size:20px;">Selamat belajar HTML</p> text-align. Nilai untuk property ini diantaranya left, right, center dan justify.<p style="text-align:center;">Selamat belajar HTML</p>
Border
Kita dapat menampilkan border dari sebuah elemen dengan menggunakan propertyborder. Border adalah garis batas luar dari sebuah elemen HTML.border: border-width border-style border-color;
Property border dapat menerima 3 buah nilai berurutan dari border-width, border-style dan border-color. border-width adalah ukuran lebar border, border-style adalah jenis tampilan border dan border-color adalah warna border.<p style="border:1px solid red;">Contoh paragraf dengan border</p>
Contoh kode di atas akan menampilkan elemen paragraf dengan garis
border selebar 1 pixel berwarna merah, seperti tampilan di bawah ini:
Contoh paragraf dengan border
Sisi Border
Umumnya setiap elemen HTML memiliki 4 buah sisi, yakni sisi atas, bawah, kiri dan kanan. Ketika kita membuat style border pada elemen, akan muncul garis border di keempat sisi elemen membentuk kotak.Kita dapat menampilkan hanya sisi tertentu saja dari border, dengan menggunakan property
border-top untuk border atas, border-right untuk border kanan, border-bottom untuk border bawah dan border-left untuk border kiri.<p style="border-top: 1px solid red; border-bottom: 1px solid red;">Contoh paragraf dengan border atas bawah</p>
Contoh kode di atas akan menampilkan elemen paragraf dengan border berwarna merah di bagian atas dan bawah elemen.
Contoh paragraf dengan border atas bawah
Jenis Tampilan Border
solid adalah salahsatu jenis tampilan border, yakni
garis lurus biasa. Terdapat beberapa opsi jenis tampilan border lainnya,
diantaranya:| Nilai | Deskripsi |
|---|---|
| none/hidden | tanpa border |
| solid | border dengan garis tegas |
| dotted | border dengan titik |
| dashed | border dengan strip |
| double | border dengan garis ganda |
| groove | border 3D seperti lembah/parit |
| ridge | border 3D seperti punggung bukit |
| inset | border 3D seperti cekungan |
| outset | border 3D seperti tonjolan |
Padding
Padding adalah property style yang dapat kita gunakan untuk memberi spasi antara konten di dalam elemen dengan border. Padding sangat bermanfaaat untuk membuat tampilan menjadi lebih nyaman dilihat.Coba bandingkan teks ini:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
dengan ini:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Yang manakah yang lebih enak dilihat? Tentu yang kedua, karena kotak kedua memiliki jarak antara batas kotak dengan konten teksnya. Disitulah peran
padding.Padding di Sisi Tertentu
Ketika kita menulis:padding: 15px;
maka spasi akan diterapkan di semua sisi elemen. Bila kita ingin
mengatur padding hanya pada sisi tertentu saja, kita dapat menggunakan
property padding-left untuk padding kiri, padding-top untuk padding atas, padding-right untuk padding kanan dan padding-bottom untuk padding bawah.padding-left: 15px;
padding-bottom: 15px;
Bila kode di atas kita terapkan pada paragraf di contoh sebelumnya, maka tampilannya akan seperti ini:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ada cara lain yang lebih ringkas untuk menentukan ukuran padding dari masing-masing sisi, yakni dengan menggunakan property
padding dan mengisinya dengan beberapa nilai:| nilai | Hasil |
|---|---|
padding:15px; |
|
padding:15px 8px; |
|
padding:15px 8px 4px; |
|
padding:15px 8px 4px 2px; |
|
Margin
Kita dapat mengatur jarak antar elemen, dan jarak elemen dari sisi-sisi elemen induknya, dengan menggunakan propertymargin.<div style="margin:10px;">Contoh teks</div> <div> yang mengambil jarak sebesar 10px di atas, kanan, bawah dan kirinya.Sama seperti property
padding, property margin juga dapat diisi dengan satu hingga 4 nilai untuk mengatur ukuran margin tiap sisi-sisinya. Selain itu kita juga dapat mengatur margin di sisi tertentu dengan menggunakan property
margin-top, margin-right, margin-bottom dan margin-left.Internal Style
Apa yang terjadi bila kita harus memberikan atribut style untuk setiap elemen HTML yang ada di dokumen? Tentu dokumen HTML kita akan nampak berantakan. Untuk itu kita dianjurkan untuk memisahkan style di tempatnya tersendiri, yakni di dalam tag<style>. Hal ini dikenal dengan istilah internal style atau internal CSS (Cascading Style Sheet).<style>
p { background:black; color:white; }
</style> p di atas disebut dengan selector, yakni untuk menentukan elemen mana yang akan diset stylenya. Style untuk elemen ditulis di dalam kurung kurawal setelah selector. Karena elemen yang ditarget adalah
p, maka semua elemen
paragraf di dalam dokumen HTML akan dikenai style ini. Dengan demikian
kita tidak perlu lagi menulis atribut style yang sama berulang untuk
setiap elemen paragraf.Kita juga dapat menuliskan style untuk banyak elemen.
<style>
p { background: black; color: white; }
h1 { color: blue; font-size: 48px; }
</style> Tag
<style> biasanya disimpan di bagian head.Selector class dan id
Adakalanya kita harus memberi style pada elemen tertentu yang lebih spesifik. Bila kita memberi style dengan nama elemennya, maka semua elemen yang ada di halaman tersebut akan dikenai style. Untuk memilih elemen tertentu yang spesifik, kita dapat menggunakan atributclass dan id.<style>
p { font-size:14px; }
p.tebal { font-weight:bold; }
</style>
<p>Ini paragraf.</p>
<p class="tebal">Ini paragraf berteks tebal.</p>
<p class="tebal">Ini paragraf berteks tebal lainnya.</p>
<p>Ini paragraf lain berteks biasa.</p> p yang memiliki
atribut class. Isi atribut classnya adalah nama class. Nama class
inilah yang akan kita gunakan untuk mendefinisikan style. Cara penulisan selector untuk class adalah dengan menuliskan nama class diawali dengan tanda titik
., dalam contoh di atas p.tebal { font-weight:bold; }. Maka setiap paragraf yang memiliki atribut class dengan nilai tebal akan dikenai style ini.Selain atribut class, kita juga dapat menggunakan atribut
id.
Perbedaannya dengan atribut class adalah, atribut class dapat digunakan
pada lebih dari satu elemen. Pada contoh di atas, class tebal dapat
dikenakan ke lebih dari satu elemen p.Atribut
id dengan nilai yang sama hanya dapat dikenakan pada satu elemen saja. Bila kita menambahkan atribut id pada lebih dari satu elemen, maka elemen paling atas dari halaman saja yang akan dikenai style.Selain itu, untuk atribut id, penulisan stylenya adalah dengan menuliskan nama id dengan diawali tanda pagar
#.<style>
p { font-size:14px; }
p#kapital { text-transform:uppercase; }
</style>
<p>Ini paragraf.</p>
<p id="kapital">Ini paragraf dengan huruf kapital.</p>
<p id="kapital">Paragraf ini teksnya tidak akan tebal.</p>
<p>Ini paragraf lain berteks biasa.</p>
Struktur Table
Tabel adalah salah satu objek yang umum digunakan dalam sebuah dokumen, termasuk HTML. Untuk membuat sebuah tabel, paling tidak ada 3 tag yang bakal kita gunakan, yaitu<table>, <tr> dan <td>. Struktur penulisan tabel HTML seperti berikut:<table border="1">
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table> | Baris 1 Kolom 1 | Baris 1 Kolom 2 |
| Baris 2 Kolom 1 | Baris 2 Kolom 2 |
Tag
<table> adalah tag untuk membuat tabel. Kita menggunakan atribut border="1" agar tabel memiliki garis. Tag <tr> digunakan untuk membuat baris tabel. Tag <td> digunakan untuk membuat kolom di dalam baris. Konten disimpan di dalam tag <td> ini.
Table Header
Seringkali kita perlu menampilkan header untuk setiap kolom pada tabel. HTML menyediakan tag<th> untuk memuat konten header kolom.<table border="1">
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
</tr>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
Tabel di atas akan tampil seperti ini:
| Kolom 1 | Kolom 2 |
|---|---|
| Baris 1 Kolom 1 | Baris 1 Kolom 2 |
| Baris 2 Kolom 1 | Baris 2 Kolom 2 |
Colspan
Kita dapat merentangkan sebuah sel pada tabel ke samping, sehingga ukurannya setara dengan beberapa kolom.<table border="1">
<tr>
<th>No.</th>
<th>Nama</th>
</tr>
<tr>
<td>1</td>
<td>Toni</td>
<td>Haryanto</td>
</tr>
<tr>
<td>2</td>
<td>Kresna</td>
<td>Galuh</td>
</tr>
</table>
Pada kode di atas jumlah kolom di tiap barisnya ada 3, kecuali baris header tabel. Hal ini akan membuat tampilannya seperti ini: | No. | Nama | |
|---|---|---|
| 1 | Toni | Haryanto |
| 2 | Kresna | Galuh |
Kolom ketiga tidak memiliki header, padahal kita ingin header Nama digunakan sebagai header untuk kolom kedua dan ketiga di bawahnya. Untuk itu kita dapat menambahkan atribut
colspan pada elemen headernya.<th colspan="2">Nama</th>
Kita merentangkan sel header ini ke samping sebesar 2 sel kolom. sehingga tampilannya akan menjadi seperti ini: | No. | Nama | |
|---|---|---|
| 1 | Toni | Haryanto |
| 2 | Kresna | Galuh |
Rowspan
Kita juga dapat merentangkan sebuah sel pada tabel ke bawah, sehingga tingginya setara dengan beberapa baris.<table border="1">
<tr>
<th>Language</th>
<th>Framework</th>
</tr>
<tr>
<td>PHP</td>
<td>Laravel</td>
</tr>
<tr>
<td>PHP</td>
<td>CodeIgniter</td>
</tr>
<tr>
<td>Ruby</td>
<td>Ruby on Rails</td>
</tr>
<tr>
<td>Ruby</td>
<td>Sinatra</td>
</tr>
</table> | Language | Framework |
|---|---|
| PHP | Laravel |
| PHP | CodeIgniter |
| Ruby | Ruby on Rails |
| Ruby | Sinatra |
Kita dapat menggabungkan beberapa sel yang memiliki nilai yang sama seperti sel PHP dan Ruby di atas, dengan cara menambahkan atribut
rowspan pada sel yang ingin direntangkan ke bawah:<table border="1">
<tr>
<th>Language</th>
<th>Framework</th>
</tr>
<tr>
<td rowspan="2">PHP</td>
<td>Laravel</td>
</tr>
<tr>
<td>CodeIgniter</td>
</tr>
<tr>
<td rowspan="2">Ruby</td>
<td>Ruby on Rails</td>
</tr>
<tr>
<td>Sinatra</td>
</tr>
</table> | Language | Framework |
|---|---|
| PHP | Laravel |
| CodeIgniter | |
| Ruby | Ruby on Rails |
| Sinatra |
Perhatikan baris tabel ke-3 dan ke-5, kita tidak perlu lagi mendefinisikan kolom pertama, karena area kolom sudah digunakan oleh kolom di baris di atasnya.
Border dan Spacing
Saat kita membuat table dengan menambahkan atributborder, kita akan mendapatkan table dengan border dan spasi antar garis bordernya seperti ini: | Tanggal | Hari Besar | |
|---|---|---|
| Juni | 1 | Hari Pancasila |
| Juni | 8 | Hari Laut Sedunia |
| Juli | 12 | Hari Koperasi |
| Juli | 23 | Hari Anak Nasional |
Kita akan ingin mengubah tampilan border bawaan table ini dengan garis yang lebih tegas. Untuk itu kita harus mereset style bawaan table ini dengan style berikut:
table {
border-spacing: 0;
border-collapse: collapse;
} | Tanggal | Hari Besar | |
|---|---|---|
| Juni | 1 | Hari Pancasila |
| Juni | 8 | Hari Laut Sedunia |
| Juli | 12 | Hari Koperasi |
| Juli | 23 | Hari Anak Nasional |
Setelah ini kita dapat mengatur spasi pada
<td> dan <th> menggunakan property padding.
List
Ada 2 jenis list/daftar pada HTML, yaitu ordered list dan unordered list. Ordered list adalah list yang menggunakan urutan karakter seperti angka atau huruf, sedangkan unordered list adalah list yang menggunakan simbol yang sama untuk setiap poin listnya.Letak perbedaannya hanya pada tag pembuka dan penutupnya saja, dimana ordered list menggunakan tag
<ol> dan unordered list menggunakan tag <ul>.<ol>
<li>daftar satu</li>
<li>daftar dua</li>
<li>daftar tiga</li>
</ol>
Kode di atas adalah contoh ordered list, menggunakan tag <ol>. Setiap poin daftar ditulis di dalam elemen <li>. Kode di atas akan ditampilkan seperti ini:
- daftar satu
- daftar dua
- daftar tiga
<ul>
<li>daftar satu</li>
<li>daftar dua</li>
<li>daftar tiga</li>
</ul>
Kode di atas adalah contoh unordered list, menggunakan tag <ul>. Sama seperti ordered list, poin daftar ditulis di dalam elemen <li>. Kode di atas akan ditampilkan seperti ini:
- daftar satu
- daftar dua
- daftar tiga
Nested List
Pada beberapa kasus kita perlu membuat daftar subpoin di dalam poin list. Untuk itu kita dapat membuat list di dalam list.<ol>
<li>
daftar satu
<ul>
<li>subdaftar pertama</li>
<li>subdaftar kedua</li>
<li>subdaftar ketiga</li>
</ul>
</li>
<li>daftar dua</li>
<li>daftar tiga</li>
</ol> - daftar satu
- subdaftar pertama
- subdaftar kedua
- subdaftar ketiga
- daftar dua
- daftar tiga
<li> dari salahsatu poin list induknya.Mengganti Karakter List
Tipe Ordered List
Pada ordered list kita dapat menggunakan tidak hanya list angka saja (1,2,3,dst) tapi juga huruf (a,b,c,dst) dan angka romawi (I,II,III,dst). Untuk mengubah tipe ordered list, kita gunakan atribut di dalam tag<ol>.<ol type="A">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
Contoh kode di atas akan menampilkan list seperti ini:
- List Pertama
- List Kedua
- List Ketiga
| Tipe | Deskripsi |
|---|---|
| type="1" | Item list menggunakan angka (default) |
| type="A" | Item list menggunakan huruf kapital |
| type="a" | Item list menggunakan huruf kecil |
| type="I" | Item list menggunakan angka romawi kapital |
| type="i" | Item list menggunakan angka romawi kecil |
Tipe Unordered List
Bawaan dari unordered list menggunakan lingkaran hitam untuk setiap item listnya. Kita dapat mengganti simbol item tersebut menggunakan style propertylist-style-type.<ul style="list-style-type:circle">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ul>
Contoh kode di atas akan menampilkan list seperti ini:
- List Pertama
- List Kedua
- List Ketiga
| Nilai | Deskripsi |
|---|---|
| disc | Item list menggunakan simbol lingkaran (default) |
| circle | Item list menggunakan simbol garis luar lingkaran |
| square | Item list menggunakan simbol kotak |
| none | Item list tidak menggunakan simbol list |
Reference :
codepolitan
Belajar dasar-dasar HTML
No comments:
Post a Comment