Ada tiga hal yang perlu kamu tahu sebelum bermain dengan elemen teks. Ada Paragraph, Heading, dan List. Paragraph dulu yang dibahas. Kodenya dalam HTML adalah <p> dan fungsinya adalah membuat paragraf. Format penulisannya seperti ini.
<p>apa paragraf yang ingin Anda tulis </p>
Dalam HTML, penulisan harus dimulai dengan kode dan kurung tajam dan diakhiri dengan kode, garis miring dan kurung tajam. Kamu menulis paragraf yang kamu inginkan di antara kedua tanda ini. Tulisan yang ada di dalam kedua tanda inilah yang nantinya akan dibaca sebagai konten paragraf dalam HTML sederhana Anda.
Yang kedua adalah Heading. Heading dalam surat disebut kop. Kop surat. Jadi ini adalah tulisan yang ada di atas desain HTML sederhana Anda. Heading memiliki enam varian, dengan kode <h1> sebagai ukuran terbesar dan <h6> sebagai ukuran terkecil. Untuk tingkat ketebalannya juga sama. <h1> memiliki ketebalan paling tebal sementara <h6> memiliki ketebalan yang terkecil. Formatnya juga sama, tapi perhatikan kode Heading-nya.
Bila Anda ingin menulis Heading dengan ukuran terbesar, maka formatnya sebagai berikut:
<h1>tulis Heading yang Anda inginkan</h1>
Untuk Heading 2, Heading 3, Heading 4, Heading 5, dan Heading 6, Anda hanya tinggal mengganti kodenya saja. Untuk Heading 2 <h2>, Heading 3 <h3>, Heading 4 <h4>, dan seterusnya. Ukurannya nanti akan berbeda, sesuai dengan yang tadi saya jelaskan.
Yang ketiga adalah List. Di dalam Microsoft Word, List ibarat Bullets and Numbering, dan fungsinya adalah untuk membuat daftar. Ada dua jenis List disini, yaitu Unordered List dan Ordered List.
Unordered List memiliki kode <ul> dan dalam Microsoft Word ini seperti Bullets. Dalam Unordered List, ada tiga pilihan Bullets. Ada default, berbentuk bulatan hitam, circle, berbentuk bulatan putih, dan square, berbentuk kotak. Dalam List akan selalu ada yang disebut List Item, yang merupakan cabang dari setiap list. Kodenya adalah <li>. Anggaplah Unordered List adalah orangtuanya dan List Item adalah anaknya. Format penulisan dalam Unordered List adalah sebagai berikut:
<ul type='default/circle/square' (pilihan bebas)>
<li>menu</li>
</ul>
Dalam penulisan list, Anda harus menuliskan salah satu pilihan type-nya, apakah mau default, atau mau circle, atau mau square. Ini nanti akan dipakai untuk menulis list item-nya. List item dari list ini digunakan untuk menulis sub-menu dari sebuah menu yang ada dalam web.
Selain ada Unordered List, juga ada Ordered List. Kodenya <ol> dan dalam Microsoft Word ini seperti Numbering. Ini disebut juga sebagai list ber-index. Dalam Ordered List, juga ada tiga pilihan Numbering. Yang pertama adalah penomoran biasa, dengan kode '1', penomoran alfabet, dengan kode 'a', dan penomoran Romawi, dengan kode 'i'. Sama halnya dengan Unordered List, Ordered List juga memiliki List Item. Kodenya juga sama, yaitu <li>. Format penulisan Ordered List adalah sebagai berikut:
<ol type='1'/'a'/'i' (pilihan bebas)>
<li> menu</li>
<ul>
Dalam penulisan list ini juga sama. Anda harus menuliskan salah satu pilihan type-nya. Mau penomoran angka, alfabet, atau Romawi. Sisanya kurang lebih sama. Fungsi dari list item-nya juga sama.
Sekarang inilah contoh penulisan HTML dengan menggunakan elemen teks tadi.
<html>
<head>
<title>elemen teks</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>ini contoh penulisan paragraf ini contoh penulisan paragraf ini contoh penulisan paragraf ini contoh penulisan paragraf ini contoh penulisan paragraf ini contoh penulisan paragraf</p>
<ul type='square'>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ul>
<ol type='1'>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ol>
Coba Anda copy-paste ini ke Notepad, save as dengan format .html (sebelumnya ubah dulu tipe penyimpanannya menjadi all files) dan setelah di-save, buka di browser Anda. Apa efek yang akan terjadi.
Bila misalnya Anda ingin membuat sub-menu tambahan dalam list item, caranya gampang. Buka lagi pekerjaan Anda dalam Notepad yang tadi sudah disimpan, dan lalu tambahkan ini pada list menu yang tadi sudah Anda buat sebelumnya, seperti ini:
<ul type='square'>
<li>menu 1</li>
<li>menu 2</li>
<ol type='1'>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
</ol>
<li>menu 3</li>
</ul>
<ol type='1'
<li>menu 1</li>
<li>menu 2</li>
<ul type='square'>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
</ul>
<li>menu 3</li>
</ol>
Biar nggak bikin repot, kalian langsung saja tulis mulai dari bagian <ol type='1'> hingga </ol> dan lalu save lagi dengan menekan kombinasi tombol Ctrl+S. Jika sudah disimpan, buka lagi pekerjaan Anda di browser dan lihat perubahan yang terjadi. Jika browser-nya masih ada, tinggal tekan tombol Reload yang ada di menu atas browser, dan lihat apa yang terjadi. Bila berhasil, maka Anda sudah menguasai elemen teks.
Setelah Anda berhasil menguasai elemen teks, saatnya bermain. Buka Notepad Anda lagi atau pilih New pada menu File yang ada di atas Notepad, dan ketik atau copy-paste proyek sederhana yang saya buat ini. Kebetulan setelah saya berhasil menguasai elemen teks ini, saya langsung terpikir untuk membuat proyek HTML sederhana ini, dengan menggunakan elemen teks. Inilah proyeknya...
<html>
<head>
<title>Cherrybelle</title>
</head>
<body>
<h1>CHERRYBELLE</h1>
<h3>The Girlband from Indonesia</h3>
<p>Cherrybelle adalah girlband dari Indonesia yang terdiri atas 9 personil. Berdiri tanggal 27 Februari 2011 di Puncak, girlband ini terbentuk dari sebuah audisi yang sangat ketat dan sudah menjalani masa training yang cukup lama dan berat. Kesembilan personil ini adalah Cherly, Angel, Anisa, Christy, Devi, Felly, Gigi, Ryn, dan Wenda. Pada tanggal 18 Juni 2011 mereka tampil perdana di televisi dengan single pertamanya yang berjudul Dilema. Sejak saat itulah Cherrybelle mulai dikenal oleh masyarakat dan terus menampilkan yang terbaik, serta memberi warna baru di dunia musik Indonesia. Pada bulan Agustus mereka mengeluarkan Mini Album berjudul "Love Is You" dan sudah terjual lebih dari 5000 kopi. Sebutan untuk para fansnya adalah Twibi dan mereka selalu hadir di setiap penampilan Cherrybelle. Kini girlband ini sudah berusia delapan bulan dan sudah melekat di hati para penggemarnya.</p>
<ul type='square'>
<li>HOME</li>
<li>NEWS<li>
<li>MEET THE CHIBIS</li>
<ol type='1'>
<li>CHERLY CHIBI</li>
<li>ANGEL CHIBI</li>
<li>ANISA CHIBI</li>
<li>CHRISTY CHIBI</li>
<li>DEVI CHIBI</li>
<li>FELLY CHIBI</li>
<li>GIGI CHIBI</li>
<li>RYN CHIBI</li>
<li>WENDA CHIBI</li>
</ol>
<li>LOVE IS YOU</li>
<ol type='a'>
<li>DILEMA</li>
<li>I'LL BE THERE FOR YOU</li>
<li>BEAUTIFUL</li>
<li>LOVE IS YOU</li>
<li>BEST FRIEND'S FOREVER</li>
</ol>
<li>MEDIA</li>
<ol type='i'>
<li>PHOTOS</li>
<li>VIDEOS</li>
</ol>
<li>SPECIAL FOR TWIBI</li>
<ol type='1'>
<li>DOWNLOADS</li>
<ul type='circle'>
<li>WALLPAPERS</li>
<li>SCREENSAVERS</li>
<li>AUTOGRAPH CARD</li>
<li>RINGTONES</li>
<li>APPLICATIONS</li>
</ul>
<li>CHIBI'S BLOG</li>
<li>GAMES</li>
<li>TWIBI TO CHIBI</li>
<li>CHIBI IN SOCIAL MEDIA</li>
</ol>
<li>CONTACTS</li>
<li>PARTNERS</li>
</ul>
</body>
</html>
Sesudah Anda ketik/copy-paste proyek saya ini, simpan dengan format yang tadi sudah saya bilang sebelumnya, dan lalu buka di browser Anda. Jika hasilnya persis seperti dengan yang ada di gambar, maka Anda berhasil.
Kalau misalnya mau dimodifikasi, silakan... yang pasti ini konsep awalnya. Pada nantinya, dari satu konsep ini bisa berkembang menjadi sesuatu yang lebih detail dan lebih rumit. Tapi itu lebih baik dibahas nanti saja. Ini masih sederhana dan masih awal. Untuk kelanjutannya, tunggu saja tanggal mainnya.
Baiklah, segitu saja kuliah singkat via blog saya. Semoga bermanfaat bagi Anda. Soal kenapa gw memilih Cherrybelle sebagai bahan percobaan elemen teks HTML ini, yah itu memang kepikirannya ke arah situ... bukan dibuat-buat. Nanti kalau misalnya ada ilmu HTML yang menarik lagi, nanti akan saya coba share pada kalian semua. Sekian dulu tulisan saya, Happy Enjoy!
Tidak ada komentar:
Posting Komentar