List pada HTML
List pada HTML merupakan cara penulisan daftar suatu komponen (text, gambar, dll) dalam HTML seperti penulisan daftar menu, daftar nama, dll. Sepeti contoh :
1. Teks urutan pertama
2. Teks urutan kedua
3. Teks Urutan ketiga
List dibagi menjadi 2 macam, yaitu Ordered List (OL) dan Unordered List (UL).
1. Teks urutan pertama
2. Teks urutan kedua
3. Teks Urutan ketiga
List dibagi menjadi 2 macam, yaitu Ordered List (OL) dan Unordered List (UL).
Ordered List
Secara sederhana, ordered list merupakan daftar berdasarkan nomor urut. Ordered List memiliki tag HTML <ol> dengan tag penutup </ol>. Untuk menambahkan setiap satu daftar item pada setiap list tag, menggunakan tag li (List Item), yaitu <li>Item 1</li>. Dengan begitu, cara penulisan Ordered List dapat dilihat sebagai berikut :
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
<!DOCTYPE html>
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<h1>List of my favorite things</h1>
<ol>
<li>Raindrops on roses</li>
<li>Whiskers on kittens</li>
<li>Bright copper kettles</li>
<li>Warm woolen mittens</li>
</ol>
<h2>List of things</h2>
<ol>
<li>computer</li>
<li>smartphone</li>
<li>and a nerd</li>
</ol>
</body>
</html>
Unordered List
Bagaimana jika kita tidak ingin memperdulikan urutan angka pada daftar? Kita dapat menggunakan Unordered List (UL). Unordered List menampilkan daftar pada HTML dengan menampilkan tanda bulat (bullet point). Penulisan pada Unordered List hampir mirip dengan Ordered List. Bedanya, jika Ordered List menggunakan tag <ol>, Unordered List menggunakan tag <ul> dengan tag penutup </ul>.
<!DOCTYPE html>
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<h1>Some random thoughts</h1>
<p>This is my random thoughts</p>
<ul>
<li>work hard</li>
<li>get rich</li>
<li>getting married</li>
<li>going to heaven</li>
</ul>
</body>
</html>
Penggabungan Ordered List dan Unordered List
Ordered List dan Unordered List dapat digabungkan dengan 2 cara, yaitu Ordered list di dalam Unordered List, dan sebaliknya. Berikut contoh penggunaan penggabungan Ordered List dan Unordered List :
<!DOCTYPE html>
<html>
<head>
<title>Penggabungan list</title>
</head>
<body>
<ol>
<li>Hobi
<ul>
<li>Main Komputer</li>
<li>Main Game di Komputer</li>
</ul>
</li>
<li>Cita-cita
<ul>
<li>Naik Haji</li>
<li>Masuk Surga</li>
</ul>
</li>
</ol>
<ul>
<li>Klub Sepakbola Favorit
<ol>
<li>Livorno</li>
<li>Stoke City</li>
<li>Real SOciedad</li>
</ol>
</li>
<li>Film Favorit
<ol>
<li>Lord of the ring</li>
<li>Blackhat</li>
<li>Bloody Monday</li>
</ol>
</li>
</ul>
</body>
</html>
Comment
Comment pada HTML berfungsi untuk membuat catatan/note pada halaman HTML. Selain itu, comment juga kadang digunakan untuk menutupi (disable) suatu kode. Comment tidak akan ditampilkan pada halaman HTML. Penulisan comment diawali dengan tanda <!-- dan diakhiri dengan tanda --> Perhatikan contoh berikut :<!-- <p>Kode ini tidak akan muncul</p>
<p>Ini juga tidak akan muncul</p> -->
<p>Kode ini bakal muncul</p>
<!-- comment -->
<p>Kode ini bakal muncul</p>
<!-- comment -->
Styling
Styling merupakan cara untuk memperindah tampilan pada HTML. Pada umumnya, styling pada HTML dikerjakan oleh CSS yang terpisah. Akan tetapi, HTML juga memiliki bahan-bahan dasar untuk sedikit mempercantik tampilannya sendiri tampa menggunakan CSS yang terpisah. Untuk melakukan styling, HTML menggunakan berbagai attribute di dalam tags-nya. Attribute merupakan sebuah karakteristik atau deskripsi untuk konten pada elemen HTML. Hal ini sedikitnya telah kita pelajari pada Tutorial Dasar-dasar HTML Bagian 1 seperti attribute src di dalam tag <img>, atau href di dalam tag <a>.
Pada bahasan Styling ini, kita akan mencoba mengubah tampilan font, alignment, dan background color.
Font Size
Font Size berfungsi untuk mengubah ukuran teks menjadi besar atau kecil, sesuai dengan ukuran pixel. Untuk mengubah font size, kita dapat menggunakan attribute style. Isi attribute style dengan value font-face, diikuti dengan tanda titik dua (:), lalu isi tambahkan ukurannya, dan diakhiri dengan px (kependekan dari pixel). Sehingga contoh formatnya seperti berikut :
<p style="font-face: 12px">
Agar dapat dipahami lebih lanjut, bisa dicoba contoh code berikut :<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Font Size</title>
</head>
<body>
<p style="font-size:10px"> Some text for you to make tiny! </p>
<p style="font-size:20px"> Some text for you to make normal size!</p>
<p style="font-size:40px"> Some text for you to make super big!</p>
</body>
</html>
Font Color
Penggunaan attribute style sangat berguna, karena tidak hanya digunakan untuk tag <p> saja, akan tetapi dapat digunakan oleh berbagai macam tag. Kali ini, kita akan gunakan attribute style pada tag lain.
Untuk mengubah Font Color (warna font), cukup tambahkan value color:blue pada attribute style (atau warna lain yang dapat dilihan di sini). Contoh :
<h2 style="color: red">
Bagaimana jika kita ingin mengubah ukuran font dan warna font sekaligus? Simple, cukup gabungkan kedua value di dalam attribute style dengan dipisahkan oleh semicolon (;). Contoh :
<h2 style="color: red; font-size: 20px">
Agar kita dapat memahami lebih lanjut, pada contoh di bawah saya juga akan mencoba menggabungkan font-size dengan color. Perhatikan dan coba kode berikut :
<html>
<head>
<title>Mengubah Warna Font</title>
</head>
<body>
<h1 style="color: green; font-size: 16px">Heading</h1>
<p style="color: violet">A giant bear and a little duck were friends.</p>
<p style="color: red; font-size: 10px">But the bear got hungry and ate the duck.</p>
</body>
</html>
Font Family
Setelah mempelajari font-size dan color, selanjutnya kita akan coba mengubah jenis font. Untuk mengubah jenis font, kita menggunakan value font-family. Contoh :
<h1 style="font-family: Arial">Ini Heading dengan Font Arial</h1>
Untuk daftar font yang dapat digunakan, dapat dilihat di sini.
Selain itu, kita juga dapat menggunakannya pada tag lain. Coba kode berikut :
<!DOCTYPE html>
<html>
<head>
<title>Loving the font changes</title>
</head>
<body>
<h1 style="font-family: Arial">Big title</h1>
<ol>
<li style="font-size: 16px; font-family: Arial">This item is big Arial.</li>
<li style="font-size: 12px; font-family: Verdana">This item is medium Verdana.</li>
<li style="font-size: 10px; font-family: Impact">This item is small Impact.</li>
</ol>
</body>
</html>
Alignment
Selain mengubah tampilan teks, kita juga dapat mengubah penjajaran (alignment) teks menjadi rata kiri, kanan, atau tengah. Untuk mengubah alignment, tambahkan value teks-align pada attribute style. Perhatikan dan coba kode berikut :
<!DOCTYPE html>
<html>
<head>
<title>Alignment</title>
</head>
<body>
<h3 style="text-align:center">Favorite Soccer Teams</h3>
<ol>
<li style="text-align:left">Lazio</li>
<li style="text-align:center">QPR</li>
<li style="text-align:right">Real Betis</li>
</ol>
</body>
</html>
Backgroud Color
Di samping styling pada teks, HTML juga dapat mengubah warna latar (Background Color) pada halamannya. Untuk mengubah Background Color, attribute style ditambahkan dengan value background-color, seperti penggunaan color untuk mengubah font color. Perhatikan dan coba kode berikut :
<!DOCTYPE html>
<html>
<head>
<title>Background Color</title>
</head>
<body style="background-color: brown">
<h3>Favorite Soccer Teams</h3>
<ol style="background-color: yellow">
<li>Empoli</li>
<li>Vitesse</li>
<li>West Brom</li>
</ol>
</body>
</html>
Strong & Emphasize
Strong merupakan cara untuk membuat teks menjadi bold. Strong menggunakan tags <strong></strong>. Sedangkan Emphasize merupakan cara untuk membuat teks menjadi italic. Emphasize menggunakan tags <em></em>. Coba contoh kode berikut :<!DOCTYPE html>
<html>
<head>
<title>Strong & Emphasize</title>
</head>
<body>
<p>Do you <em>hear</em> the people <strong>sing</strong>?</p>
<p>No <em>I don't</em>. I'm <strong><em>too</em></strong> busy eating <strong>cake</strong>.</p>
</body>
</html>
Bersambung......
Dasar-dasar HTML Bagian 2 : List, Comment, dan Styling
Reviewed by MCH
on
July 27, 2015
Rating:
Reviewed by MCH
on
July 27, 2015
Rating:
No comments: