Tutorial HTML

Ini adalah beberapa tentang tutorial HTML yang akan di jelaskan dalam link di bawah ini :

1. Perkenalan dengan HTML
2. Dasar-dasar HTML
3. Membuat Paragraf dan Judul dalam HTML
4. Meletakkan Gambar pada HTML
5. Membuat Tautan pada HTML
6. Membuat Tabel pada Halaman HTML
7. Membuat suatu List pada HTML
8. Membuat Form Isian pada HTML

Untuk lebih lengkapnya tentang tutorial HTML klik di sini


Get a Glitter Calendar Click Here

Membuat Form Isian pada HTML

Tutorial HTML
8. Membuat Form Isian pada HTML

Form isian atau borang dalam istilah bahasa Indonesianya, dapat kalian buat di halaman web kalian untuk berbagai macam keperluan. Misalnya untuk aplikasi buku tamu, login, registrasi, dan lain sebagainya. Dibanding skill pelajaran html lainnya seperti membuat paragraf atau memasukkan gambar, membuat form relatif lebih sulit. Untuk itu kalian sebaiknya membaca setiap petunjuk disini agar lebih mudah memahami cara membuat form ini.

Di bawah ini adalah contoh sebuah form atau borang dengan berbagai macam jenis input.
Nama Kalian :
Password :
Hobi : Baca
Berenang
Pernah ke Klikbelajar.com sebelumnya? Sudah
Belum
Mana yang kalian sukai?
Ceritakan tentang diri kalian :




Diatas adalah contoh dari form sederhana yang akan kalian pelajari disini. Sekarang siapkan bahan-bahannya, yaitu <form>, <input>, <select>, dan <option>.

Sebelum mulai mempelajari tiap tag, ada baiknya kalian mengetahui bahwa untuk membuat sebuah form yang dapat dikirim dan diproses di server kalian harus mengetahui PHP dan SQL. Disini kalian hanya mempelajari dasarnya saja yaitu bagaimana cara menampilkan sebuah form yang baik.

Sekarang kalian lihat form diatas, dan perhatikan bahwa tiap baris mempunyai jenis input yang berbeda-beda. Apa itu input? Input adalah sesuatu yang dimasukkan oleh pembaca halaman web kalian misalnya teks. Dari atas ke bawah :
Text
Password
Checkbox
Radio
Select
Textarea


Input tipe Text digunakan untuk memasukkan karakter-karakter yang jumlahnya tidak terlalu banyak. Berbeda dengan Textarea yang dapat menampung karakter dalam jumlah besar. Contoh penggunaannya adalah sebagai berikut :
view plaincopy to clipboardprint?
Nama : <input type="text" size="25" />
Pesan Anda : <input type="textarea" cols="20" rows="20" />


Sedangkan untuk input tipe Password hampir sama dengan Text hanya saja karakter yang diketik dalam kolom password otomatis akan terlihat ***** untuk menjaga kerahasiaan dari password tersebut.
Cara membuatnya cukup mudah :
view plaincopy to clipboardprint?
Password : <input type="password" size="25" />

Silahkan script html tersebut kalian coba pada papan tulis di bawah.

Checkbox, Radio, dan Select merupakan elemen dari form yang digunakan untuk memilih dari beberapa pilihan yang disediakan.



Checkbox

Checkbox digunakan jika pilihan yang disediakan dapat dipilih lebih dari satu. Lihat penggunaannya berikut ini :

view plaincopy to clipboardprint?
Pelajaran yang kalian sukai :
<INPUT type="checkbox"> Matematika
<INPUT type="checkbox"> Fisika
<INPUT type="checkbox"> Kimia
<INPUT type="checkbox"> Sejarah




Radio

Radio digunakan apabila pilihan yang disediakan hanya dapat dipilih satu saja. Contoh penggunaannya :

view plaincopy to clipboardprint?
Pelajaran yang kalian sukai :
<INPUT type="radio" name="favorit" value="matematika"> Matematika
<INPUT type="radio" name="favorit" value="fisika"> Fisika
<INPUT type="radio" name="favorit" value="kimia"> Kimia
<INPUT type="radio" name="favorit" value="sejarah"> Sejarah



Select

Select digunakan apabila tampilan pilihan yang kita sediakan berbentuk dropdown. Sebenarnya aplikasinya mirip dengan Radio yaitu pilihan yang boleh dipilih hanya satu. Select digunakan selalu bersamaan dengan Option. Berikut ini adalah contoh penggunaannya :

view plaincopy to clipboardprint?
Pelajaran yang kalian sukai :
<SELECT name="favorit"><OPTION>Matematika
<OPTION>Kimia
<OPTION>Fisika
<OPTION>Bahasa
</SELECT>


Silahkan kode-kode diatas dicoba di papan tulis dibawah agar kalian lebih memahami aplikasinya.

Membuat Suatu Daftar Urutan atau List pada HTML

Tutorial HTML
7. Membuat Suatu Daftar Urutan atau List pada HTML

Memo Hari Ini
Yang harus dilakukan :

Bayar tagihan listrik
Nganterin Ayah ke bandara
Beli lampu neon buat di taman
Ambil cucian di laundry
Nelpon Mirza


Diatas adalah contoh dari daftar atau list yang dapat dibuat di HTML. List tersebut dapat kalian buat dengan mudah menggunakan tag yang sesuai yaitu tag <ul>, <ol>, dan <li>.

Dalam membuat suatu list maka sebaiknya kalian bertanya dulu ke diri kalian, apakah list yang akan kalian buat itu harus berurutan atau tidak. Jika jawabannya adalah berurutan maka kalian sebaiknya memakai tag <ol>, namun apabila list yang akan dibuat tidak harus berurutan seperti contoh diatas maka kalian sebaiknya memakai tag <ul>. Tag <li> digunakan untuk membuat detail dari list tersebut.

Tag <ol> adalah kependekan dari Ordered List, yang artinya list secara berurutan. List yang ditampilkan nanti oleh tag ini akan menampilkan nomor disebelah kiri dari detail. Lihat contoh dibawah ini:


Memo Hari Ini
Yang harus dilakukan :
Nelpon Mirza
Bayar tagihan listrik
Ambil cucian di laundry
Nganterin Ayah ke bandara
Beli lampu neon buat di taman


Contoh diatas adalah versi berurutan dari memo yang ditulis pada contoh sebelumnya. Perhatikan bahwa sekarang list yang ada menggunakan nomor urut untuk menentukan prioritas yang harus dikerjakan. Nomor urut ini tampil karena ia menggunakan tag <ol>. Inilah perintah HTML untuk menampilkan list tersebut.
view plaincopy to clipboardprint?
<ol>
<li>Nelpon Mirza</li>
<li>Bayar tagihan listrik</li>
<li>Ambil cucian di laundry</li>
<li>Nganterin Ayah ke bandara</li>
<li>Beli lampu neon buat di taman</li>
</ol>


Kalian dapat melihat disini penggunaan <ol> dan <li> , dimana <ol> digunakan untuk memberi petunjuk kepada browser bahwa list yang ditampilkan harus menggunakan nomor urut, dan <li> digunakan untuk membuat detail dari list. Mudah bukan?

Sekarang kalian pasti dapat menebak contoh penggunaan Unordered List, atau list secara tidak berurut, persis seperti pada contoh pertama. Yap, perintahnya sama dengan Ordered List namun tag <ol> diganti dengan <ul>. Lihat contoh berikut:
view plaincopy to clipboardprint?
<ul>
<li>Bayar tagihan listrik</li>
<li>Nganterin Ayah ke bandara</li>
<li>Beli lampu neon buat di taman</li>
<li>Ambil cucian di laundry</li>
<li>Nelpon Mirza</li>
</ul>

Sangat mudah! kalian dapat mencobanya di papan tulis pada bagian bawah halaman ini.

Ada satu lagi jenis list dalam HTML namun pemakaiannya sangat jarang sekali di luar sana. List itu adalah Definition List. List ini digunakan untuk menampilkan suatu daftar istilah-istilah berikut penjelasannya. Contohnya adalah seperti ini:
Obeng
Perkakas yang digunakan untuk memutar suatu skrup
Stop Kontak
Suatu panel yang digunakan sebagai sumber listrik
Mur
Pasangannya baut, digunakan untuk menjepit sesuatu, bagian laki-lakinya
Baut
Pasangannya Mur, digunakan untuk menjepit sesuatu, bagian perempuannya



Perhatikan bahwa tiap istilah berada di sebelah kiri dan penjelasannya berada di bawahnya dengan agak menjorok ke kanan. Inilah yang disebut dengan Definition List. Untuk membuatnya kita akan membutuhkan,
<dl> untuk membuat suatu Definition List
<dt> untuk menampilkan suatu istilah, kependekan dari Definition Term
<dd> untuk menampilkan penjelasan dari istilah sebelumnya, kependekan dari Definition Description

Penggunaan dari tag-tag diatas adalah seperti ini:
view plaincopy to clipboardprint?
<dl>
<dt>Obeng</dt>
<dd>Perkakas yang digunakan untuk memutar suatu skrup</dd>
<dt>Stop Kontak</dt>
<dd>Suatu panel yang digunakan sebagai sumber listrik</dd>
<dt>Mur</dt>
<dd>Pasangannya baut, digunakan untuk menjepit sesuatu, bagian laki-lakinya</dd>
<dt>Baut</dt>
<dd>Pasangannya Mur, digunakan untuk menjepit sesuatu, bagian
perempuannya</dd>
</dl>


Kalian dapat mencobanya di papan tulis yang disediakan di bagian bawah halaman ini.

Membuat Tabel pada Halaman HTML

Tutorial HTML
6. Membuat Tabel pada Halaman HTML

Tabel seperti yang kalian tahu terdiri dari kolom dan baris. Pada tabel data-data dimasukkan dalam kombinasi antara kolom dan baris tertentu. Beberapa baris dan kolom dari tabel bisa digabungkan untuk membuat tampilan yang sesuai dengan kebutuhan data kita. Pada html semua itu dapat dilakukan, namun tentunya kita harus mengetahui terlebih dahulu bahan-bahan apa saja yang diperlukan untuk meracik sebuah tabel. Untuk meracik sebuah tabel kita akan membutuhkan bahan-bahan sebagai berikut, <table>, <tr>, dan <td>.

Untuk membuat sebuah tabel maka susun bahan-bahan tersebut menjadi seperti ini,
view plaincopy to clipboardprint?
<table>
<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>


Susunan seperti kode diatas akan membuat sebuah tabel sederhana yang berukuran 2 X 2, yaitu 2 kolom dan 2 baris. Sekarang perhatikan karena konsep dari tabel ini cukup sulit namun akan menjadi mudah apabila kalian memperhatikan penjelasan berikut.

Tabel dari html adalah berdasarkan kepada baris atau row. Anggap kamu ingin memasukkan data pada baris pertama kolom pertama maka pertama kali yang kalian harus lakukan adalah membuat sebuah baris lalu setelah itu membuat kolom, baru setelahnya memasukkan data. Apabila kalian ingin memasukkan data pada kolom kedua baris pertama maka kalian harus membuat sebuah baris, kemudian buat kolom pertama, setelah itu buat kolom kedua, baru isi datanya. Jadi intinya baris dulu baru kolom.

<tr> digunakan untuk membuat suatu baris baru. Sedangkan <td> digunakan untuk membuat kolom/data. Supaya gampang mengingatnya, ingat saja huruf belakangnya, tr --> r = row, td --> d = data.

Setelah mengetahui dasarnya, maka selanjutnya kita akan belajar untuk menyatukan 2 kolom pada sebuah tabel. Lihat contohnya dibawah ini, kita akan membuat sebuah tabel dimana terdapat 2 kolom yang digabungkan. 1
2 3
4 5



Lihat, pada baris pertama, kolom pertama dan kedua digabung sehingga isi dari kolom tersebut bisa sepanjang 2 kolom. Biasanya penggabungan kolom seperti contoh diatas digunakan untuk membuat judul dari tabel.

Lalu sekarang bagaimana cara membuatnya agar bisa digabungkan ? Asal kita mengetahui bahan tambahannya hal itu mudah sekali untuk dilakukan. Bahan tambahan tersebut berupa atribut dari <td> yang bernama colspan. Lihat di bawah ini untuk cara penggunaannya.
view plaincopy to clipboardprint?
<table>
<tr>
<td colspan="2">Ini adalah kolom yang digabungkan</td>
</tr>
<tr>
<td>baris 2, kolom 1</td>
<td>baris 2, kolom 2</td>
</tr>
<tr>
<td>baris 3, kolom 1</td>
<td>baris 3, kolom 2</td>
</tr>
</table>

Perhatikan bagian "Ini adalah kolom yang digabungkan", sebelumnya terlihat perintah <td colspan="2"> bukan ? Ini adalah contoh penggunaan colspan. Colspan memerintahkan agar beberapa kolom digabungkan tergantung dari nilai yang dituliskan. Pada contoh diatas nilai tersebut adalah "2" sehingga 2 kolom digabungkan menjadi satu dan hasilnya dapat kalian lihat seperti contoh tabel diatas.

Contoh diatas adalah untuk menggabungkan kolom secara horisontal, namun bagaimana cara menggabungkan kolom secara vertikal? Berikut ini kita akan belajar untuk menggabungkan kolom 2 secara vertikal. Lihat tabel dibawah ini. 1
2 3
5



Perhatikan tabel diatas, kolom 2 dan kolom 4 digabung sehingga kolom 4 nya hilang. Untuk membuat tabel seperti diatas atribut tambahan yang diperlukan adalah rowspan. Mudah bukan mengingatnya? jika masih dalam satu baris kita menggunakan colspan sedangkan apabila pidah baris kita menggunakan rowspan. Dibawah ini adalah perintah yang digunakan untuk membuat tabel seperti diatas.
view plaincopy to clipboardprint?
<table>
<tr>
<td colspan="2">Ini adalah kolom yang digabungkan</td>
</tr>
<tr>
<td rowspan="2">baris 2, kolom 1</td>
<td>baris 2, kolom 2</td>
</tr>
<tr>
<td>baris 3, kolom 2</td>
</tr>
</table>

Kalian dapat mencobanya di papan tulis yang disediakan di bagian bawah halaman ini.

Ada atribut-atribut lain yang berhubungan dengan tabel seperti border, align, cellpadding, dan sebagainya yang dapat kalian pelajari lebih lanjut di bagian penjelasan tag HTML.

Membuat Tautan atau Hyperlink dalam HTML

Tutorial HTML
5. Membuat Tautan atau Hyperlink dalam HTML

Hyperlink atau tautan dalam HTMl sangatlah penting karena ia yang menghubungkan antara satu alaman dengan halaman lain. Untuk membuat Hyperlink, bahan yang diperlukan adalah <a>. Tag ini kependekan dari anchor. Lihat kode di bawah ini.
view plaincopy to clipboardprint?
<a href="http://klikbelajar.com">Klik Saya</a>


kode diatas hasilnya akan seperti dibawah ini

Klik Saya

Atribut href pada tag <a> berfungsi sebagai tempat informasi alamat yang dituju. Apabila kalian ingin alamat yang dituju adalah google maka tuliskan href="http://www.google.com". Cara penulisan alamat ini ada dua macam yaitu absolut dan relatif. Penulisan alamat absolut adalah penulisan alamat yang lengkap sedangkan relatif yang alamat singkatnya. Sekarang begini anggap kalian tinggal di daerah terpencil di pulau Rote (ada yang tahu pulau Rote?). Kalian berniat mengirim surat ke Jakarta melalui pos. Kalian pasti akan menuliskan alamat lengkapnya besert RT RW dan Kelurahannya untuk memastikan surat tersebut sampai di tujuan bukan? Namun apabila kalian akan mengirim surat ke teman yang rumahnya hanya berbeda 3 rumah dari rumah kalian, kalian dapat menuliskan nomor rumah dan menitipkannya pada ketua RT untuk menyampaikannya bukan?

Hal yang sama dapat kalian analogikan ke dalam tipe penulisan alamat href. Tipe Absolut adalah penulisan alamat lengkap menggunakan RT RW dan Kelurahan yang dalam html contohnya seperti ini,
view plaincopy to clipboardprint?
<a href="http://klikbelajar.com/pelajaran-sekolah/pelajaran-bahasa/bahasa-inggris/belajar-bahasa-inggris-past-continous/">Klik Saya</a>


Tipe absolut ini digunakan apabila alamat yang dituju jauh diluar tempat penyimpanan halaman yang kalian edit sekarang. Namun apabila kalian mempunyai dua file dalam satu folder yaitu coba1.html dan coba2.html, dan kalian sekarang sedang mengedit halaman coba1.html. Apabila kalian ingin menaruh tautan ke halaman coba2.html maka kalian cukup menulis sebagai berikut
view plaincopy to clipboardprint?
<a href="coba2.html">Klik untuk menuju halaman coba2</a>

Lihat perbedaannya, yang absolut menggunakan http:// dan juga menuliskan folder-folder yang menyertainya, sedangkan yang relatif cukup menuliskan nama file yang dituju karena berada dalam satu folder.

Hyperlink juga bisa diletakkan dalam gambar. Caranya sama persis seperti menaruh hyperlink pada tulisan hanya saja tag <a> dan </a> menjepit tag gambar <img>. Sekarang perhatikan kode di bawah ini.
view plaincopy to clipboardprint?
<a href="coba2.html"><img src="gambarkodok.jpg" /></a>


Kode diatas adalah contoh hyperlink dimana ketika gambar kodok di klik maka halaman coba2.html akan terbuka. Karena gambar "gambarkodok.jpg" ditulis dalam bentuk relatif maka gambar kodok tersebut diletakkan dalam satu folder yang sama. Jika tidak maka gambar kodok tersebut tidak akan muncul. Untuk belajar lebih lanjut tentang penempatan gambar pada halaman web silahkan buka pelajaran sebelumnya "Meletakkan Gambar pada halaman HTML".

Dalam membuat hyperlink juga ada pilihan untuk jendela pembukanya, apakah di halaman yang sama atau di halaman baru sehingga halaman sebelumnya tidak tertutup. Untuk membuat pilihan seperti ini tambahkan atribut target pada tag <a>. Lihat kode dibawah ini.
view plaincopy to clipboardprint?
<a href="http://klikbelajar.com" target="_blank">Munculkan
Klikbelajar.com di halaman baru</a>
<a href="http://klikbelajar.com">Munculkan
Klikbelajar.com di halaman ini</a>


Apabila kalian menginginkan halaman baru dibuka di jendela yang lain maka gunakan target="_blank" sedangkan apabila kalian menginginkan halaman yang dibuka pada halaman itu juga maka hilangkan atribut target maka ia secara default akan membuka pada halaman itu sendiri.

Meletakkan Gambar pada HTML

Tutorial HTML
4. Meletakkan Gambar pada HTML

Gambar adalah salah satu elemen dasar pada halaman situs yang turut meningkatkan cita rasa suatu situs disamping nilai fungsionalitasnya. Penggunaan gambar pada halaman situs dapat berupa ilustrasi dari suatu tulisan, foto, elemen halaman, dan iklan. Cara yang termudah untuk meletakkan gambar ke suatu halaman html adalah dengan menaruh gambar yang bersangkutan ke dalam folder satu file dengan file htmlnya kemudian dipanggil melalui tag <img>. Yap, tag ini adalah bahan dasar yang diperlukan untuk meletakkan gambar pada halaman html.

Cara pengunaannya seperti ini, lihat kode dibawah ini
view plaincopy to clipboardprint?
<img src="gambar_mobil.jpg" alt="gambar mobil" />


Tag <img> berbeda penggunaannya dengan tag html lain, karena ia tidak menjepit suatu tulisan, melainkan menutup dirinya sendiri. Coba kalian perhatikan di akhir tag ia menutupnya sendiri dengan /> bukan? Lalu apa artinya atribut src dan alt? Atribut src adalah atribut yang berisi info dimana lokasi gambar itu berada. Sedangkan atribut alt berguna untuk menampilkan tulisan yang keluar apabila browser yang digunakan tidak memperbolehkan tampilnya gambar. Src adalah kependekan dari Source (sumber) dan Alt adalah kependekan dari Alternative (alternatif teks).

Penempatan gambar terhadap teks juga dapat dimodifikasi melalui atribut align. Silahkan kalian coba kode berikut di papan tulis di bawah.
view plaincopy to clipboardprint?
Teks sejajar
<img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif"
align="bottom" />
dengan gambar<br />
Teks ditengah-tengah
<img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif"
align="middle" />
gambar<br />
Teks diatas
<img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif"
align="top" />
gambar


Gunakan align="bottom untuk membuat bagian bawah dari gambar rata dengan bagian bawah tulisan, dan gunakan align="middle" untuk membuat gambar berada di tengah-tengah tulisan, namun apabila kalian menginginkan bagian atas gambar rata dengan bagian atas tulisan (rata atas) maka kalian dapat menggunakan align="top".

Pasti kalian juga akan bertanya apabila gambar tersebut tidak diantara tulisan melainkan pada bagian tersendiri dan tidak diapit oleh teks bagaimana cara membuatnya menjadi disebelah kiri atau kanan halaman? Gunakan align="left" dan align="right" untuk membuatnya rata kiri dan rata kanan. Namun apabila kalian ingin membuat gambar yang ditengahkan kalian harus menambahkan tag <center> dan </center>. Lihat kode dibawah untuk lebih jelasnya.
view plaincopy to clipboardprint?
<img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif"
align="left" /><br /><br />

<img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif"
align="right" /><br /><br />

<center>
<img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif" />
</center>


Kalian juga bisa membuat suatu gambar sebagai background dari halaman html kalian. Caranya cukup mudah yaitu pada tag <body> kalian tambahkan atribut background. Lalu isi dengan nama file gambarnya.
view plaincopy to clipboardprint?
<body background="namafilegambarkalian.gif">

Supaya bagus gambar yang kalian punya sebaiknya berukuran minimal 800 X 600 piksel.

Setelah membaca, kalian juga mencoba ya agar kalian tambah mengerti ingat Practice Makes Perfect! Juga jangan lupa untuk mengirimi kami hasil screenshot image gallery yang telah berhasil kalian buat :)

Membuat Paragraf dan Judul dalam HTML

Tutorial HTML
3. Membuat Paragraf dan Judul dalam HTML

Sekarang kita akan membahas tentang cara membuat paragraf dan judul. Kembali lagi ke analogi membuat kue, untuk membuat 'kue' paragraf tentu kita harus tahu bahan-bahannya bukan? Untuk membuat 'kue' paragraf bahan-bahan yang dibutuhkan hanyalah <p>, sedangkan untuk judul kita akan membutuhkan <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Setelah bahan-bahannya kita ketahui maka kita akan mulai membuat 'kue'nya. Masih ingat kan struktur html itu seperti apa? yap seperti hamburger, maka untuk membuat 'kue' paragraf ini kalian akan menjepit isi dari paragraf kalian dengan bahan yang telah kalian ketahui sebelumnya yaitu <p> dan </p>.

Anggap kalian akan bercerita mengenai pengalaman kalian liburan ke pantai. Tentunya paragraf yang akan kalian buat tidak begitu jauh dari apa yang kami tulis berikut ini,

"Hari Sabtu lalu aku dan sekeluarga pergi ke Pantai Anyer. Kami pergi kesana karena diajak oleh Ayah untuk melepas penat. Kami berangkat dari rumah pukul 6 pagi menggunakan mobil dan sampai disana pukul 11 siang.

Sesampainya disana kami langsung mencari restoran karena kami semua sangat lapar. Kamipun makan dan setelah makan, kami menuju hotel yang telah dipesan Ayah. Setelah beristirahat sebentar kami semua langsung menuju pantai untuk bermain-main. Kami bermain lempar tangkap bola dan bermain kejar-kejaran. Suasananya seru sekali tak terasa waktu sudah menunjukkan pukul 5.00 sore. Kami pun pulang ke hotel dan mandi. Pada pukul 6.00 kami kembali ke pantai lagi untuk menyaksikan matahari terbenam sambil memakan snack yang kami bawa dari rumah. Kami menginap semalam di hotel dan pulang keesokan harinya."

Untuk membuat paragraf seperti diatas maka kita tulis struktur html dasar yaitu <html>, <head>, dan <body> lalu kita masukkan bahan untuk membuat paragraf yaitu <p> lalu masukkan isinya, seperti berikut ...
view plaincopy to clipboardprint?
<html>
<head>
<title>Belajar Membuat Paragraf</title>
</head>
<body>

<P>
"Hari Sabtu lalu aku dan sekeluarga pergi ke Pantai Anyer.
Kami pergi kesana karena diajak oleh Ayah untuk melepas penat.
Kami berangkat dari rumah pukul 6 pagi menggunakan mobil dan sampai
disana pukul 11 siang.
</P>
<P>
Sesampainya disana kami langsung mencari restoran karena kami semua
sangat lapar. Kamipun makan dan setelah makan, kami menuju hotel yang
telah dipesan Ayah. Setelah beristirahat sebentar kami semua langsung
menuju pantai untuk bermain-main. Kami bermain lempar tangkap bola dan
bermain kejar-kejaran. Suasananya seru sekali tak terasa waktu sudah
menunjukkan pukul 5.00 sore. Kami pun pulang ke hotel dan mandi. Pada
pukul 6.00 kami kembali ke pantai lagi untuk menyaksikan matahari
terbenam sambil memakan snack yang kami bawa dari rumah. Kami menginap
semalam di hotel dan pulang keesokan harinya."
</P>

</body>
</html>


Perhatikan kode html diatas, karena contoh paragraf terdiri dari dua paragraf maka kode yang dibuat pun harus menggunakan dua <p> dan dua </p>. Kalian dapat mencoba kode diatas ke dalam papan tulis yang disediakan dibawah. Lalu bagaimana agar paragraf yang kalian tampilkan memakai huruf miring semua seperti pada contoh diatas? Untuk membuat tulisan miring atau cetak tebal, atau bergaris bawah kalian harus mengetahui bahan tambahan yang diperlukan, yaitu <i>, <b>, dan <u>. Masing-masing tag ini merupakan kepanjangan dari italic (huruf miring), bold (cetak tebal), dan underline (garis bawah). Cara memakai bahan-bahan ini bagaimana? Sama seperti hamburger kita, dijepit saja isinya, lihat kode dibawah ini ...
view plaincopy to clipboardprint?
<html>
<head>
<title>Belajar Membuat Paragraf</title>
</head>
<body>

<P>
<I>
"Hari Sabtu lalu aku dan sekeluarga pergi ke Pantai Anyer.
Kami pergi kesana karena diajak oleh Ayah untuk melepas penat.
Kami berangkat dari rumah pukul 6 pagi menggunakan mobil dan sampai
disana pukul 11 siang.
</I>
</P>
<P>
<I>
Sesampainya disana kami langsung mencari restoran karena kami semua
sangat lapar. Kamipun makan dan setelah makan, kami menuju hotel yang
telah dipesan Ayah. Setelah beristirahat sebentar kami semua langsung
menuju pantai untuk bermain-main. Kami bermain lempar tangkap bola dan
bermain kejar-kejaran. Suasananya seru sekali tak terasa waktu sudah
menunjukkan pukul 5.00 sore. Kami pun pulang ke hotel dan mandi. Pada
pukul 6.00 kami kembali ke pantai lagi untuk menyaksikan matahari
terbenam sambil memakan snack yang kami bawa dari rumah. Kami menginap
semalam di hotel dan pulang keesokan harinya."
</I>
</P>

</body>
</html>

Lihat, mirip seperti hamburger kan :) .

Dalam membuat paragraf tentu kalian sewaktu-waktu akan membutuhkan paragraf yang rata kiri, rata kanan, rata tengah, dan rata kanan kiri. Untuk membuat ini kalian akan membutuhkan atribut yang bernama "align". Ada 4 nilai align, yaitu left (rata kiri), right (rata kanan), centre (rata tengah), dan justify (rata kanan kiri). Sekarang lihat kode dibawah untuk cara pemakaian atribut ini.
view plaincopy to clipboardprint?
<P align="right">
Sesampainya disana kami langsung mencari restoran karena kami semua
sangat lapar. Kamipun makan dan setelah makan, kami menuju hotel yang
telah dipesan Ayah. Setelah beristirahat sebentar kami semua langsung
menuju pantai untuk bermain-main. Kami bermain lempar tangkap bola dan
bermain kejar-kejaran. Suasananya seru sekali tak terasa waktu sudah
menunjukkan pukul 5.00 sore. Kami pun pulang ke hotel dan mandi. Pada
pukul 6.00 kami kembali ke pantai lagi untuk menyaksikan matahari
terbenam sambil memakan snack yang kami bawa dari rumah. Kami menginap
semalam di hotel dan pulang keesokan harinya.
</P>


Untuk menjadikannya rata kiri atau tengah tinggal mengganti kode "right" menjadi "left" atau "centre".

Judul dari paragraf atau Heading dalam bahasa Inggris menggunakan bahan-bahan yang telah disebutkan di awal tulisan yaitu <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. <h1> adalah judul utama dan paling besar sedangkan <h6> adalah yang paling kecil. Contoh penulisan judul paragraf dapat kalian lihat dibawah.
view plaincopy to clipboardprint?
<h1>Contoh Judul Paragraf</h1>
<h2>Contoh Judul Paragraf</h2>
<h3>Contoh Judul Paragraf</h3>
<h4>Contoh Judul Paragraf</h4>
<h5>Contoh Judul Paragraf</h5>
<h6>Contoh Judul Paragraf</h6>


Kalian dapat melihat perbedaan keenam judul tersebut dengan menuliskannya di papan tulis.

Pada bagian penjelasan tag dijelaskan atribut-atribut lain yang berkaitan dengan paragraf dan judul. Kalian dapat menemukannya secara lengkap disana. Pelajaran berikutnya yaitu HTML link atau tautan.

Dasar-dasar HTML

Tutorial HTML
2. Dasar-dasar HTML

Pengetahuan pertama tentang HTML yang harus kamu miliki adalah struktur dari HTML. Struktur HTML ini dapat kamu ibaratkan seperti Hamburger. Pernah makan? Kalau belum, kamu akan melihat roti bulat yang ditumpuk-tumpuk dengan isi sayuran didalamnya. Struktur HTML ini mirip seperti Hamburger, sayuran yang dijepit oleh roti tersebut adalah isi dari kedua tag HTML yang menjepitnya. Apa itu tag? Sekarang kita langsung lihat saja pada struktur sederhana dari HTML.

Di bawah ini adalah struktur dasar suatu file html,
view plaincopy to clipboardprint?
<html>
<head>
<title>Sedang Belajar</title>
</head>
<body>

aku belajar html nih ..

</body>
</html>


kode yang dimulai dengan tanda "<" dan diakhiri dengan tanda ">" (tanpa tanda kutip) merupakan tag-tag HTML. Tag-tag ini menandai bagian-bagian pada halaman situs agar ditampilkan sesuai dengan standar tampilannya. Tag HTML dasar adalah yang kalian lihat diatas, yaitu html, head, dan body, inilah roti dari hamburger kita, mereka masing-masing menjepit isinya. Perhatikan kode paling atas dan paling bawah, yaitu
view plaincopy to clipboardprint?
<html>

dan
view plaincopy to clipboardprint?
</html>

Kedua tag tersebut adalah tag utama dari HTML, segala yang terdapat dalam tag ini adalah bagian dari html.

Berikut ini adalah penjelasan singkat mengenai tag dasar diatas. Tag <head> dan </head> digunakan untuk meletakkan informasi-informasi penting yang tidak ditampilkan oleh browser sehingga ketika kita tidak akan melihatnya pada halaman situs. Tulisan didalam <head> dan </head> hanya dapat dilihat apabila kita mengklik 'View Source' pada browser Internet Explorer, atau 'View Page Source' pada Mozilla Firefox. Keduanya dapat ditemukan dengan klik kanan pada halaman situs yang dilihat. Tag <head> ini umumnya berisi judul (tag <title> dan </title>) dari halaman situs dan beberapa informasi tambahan lainnya.

Tag <body> dan </body> adalah isi dari halaman situs. Disini tulisan, gambar, tabel, kalian akan ditampilkan di browser. Itulah mengapa tag ini disebut body atau badan. Ada banyak tag-tag HTML lain yang bisa ditampilkan disini misalnya <img> untuk menampilkan gambar, <p> untuk menampilkan paragraf, <table> untuk menampilkan tabel, dan masih banyak lagi. Tag-tag ini dapat kalian temukan definisinya dan cara pemakaiannya pada pembahasan khusus tag.

Satu hal mendasar lagi yang harus kalian ketahui dalam membangun situs kalian menggunakan html adalah atribut. Atribut berbeda dengan tag, atribut adalah keterangan untuk tag. Misalnya untuk tag body ada beberapa atribut seperti bgcolor, dan background. Contohnya seperti dibawah ini,
view plaincopy to clipboardprint?
<html>
<head>
<title>Sedang Belajar</title>
</head>
<body bgcolor=red>

aku belajar html nih ..

</body>
</html>

Atribut bgcolor=red artinya adalah, "Tampilkan latar belakang merah pada halaman situs..". Sehingga latar belakang dari halaman yang kalian buat akan berwarna merah. Atribut-atribut yang lain dapat kalian temukan pada bagian tag yang bersangkutan.

Penjelasan diatas merupakan dasar-dasar dari HTML. Kalian dapat mencobanya sendiri di komputer kalian dengan menggunakan notepad atau wordpad, caranya dengan menulis kode-kode html dalam notepad atau wordpad lalu simpan sebagai [dot]html. Jangan lupa untuk memilih pilihan 'All Files' untuk 'Save as Type'nya sehingga file yang tersimpan bukan [dot]txt. Atau kalian juga dapat mencobanya langsung disini, dengan menulis kode-kode tersebut di papan tulis dibawah ini. Setelah selesai kalian dapat melihat hasilnya dengan menekan tombol 'Lihat Hasilnya!'. Papan tulis ini akan ada di setiap pelajaran HTML berikutnya untuk memudahkan kalian mencoba kode-kode HTML dalam pelajaran tersebut.

Tutorial HTML

Sebuah Web atau Blog tidak bisa lepas dari yang namanya HTML (Hyper Text Mark up Language) karena HTML inilah yang mendasari sebuah web/blog. Walaupun sekarang kita bisa membuat web/blog hanya dengan klak-klik mouse tapi setidaknya kita harus sedikit mengerti tentang dasar-dasar HTML, ya tho?. Dalam tutorial kali ini kita tidak akan membahas tentang semua dasar-dasar HTML tapi kita akan mempelajari tag-tag atau kode-kode penting yang sering digunakan dalam membangun sebuah web/blog misalnya cara membuat link, menampilkan gambar, mengganti warna font, membuat barus baru dll. Ok marikita mulai pelajaranya :

* CARA MEMASUKKAN GAMBAR
kode :
<img src="http://kendhin.890m.com/banner-trik.gif" border="0" height="17" width="90">
keterangan :
yang warna biru adalah lokasi gambar kamu.
height="17" width="90" adalah ukuran lebar dan tinggi gambar
hasil :


* CARA MEMBUAT LINK
Kode :
<a href="http://trik-tips.blogspot.com" >trik blog </a>
Keterangan :
Text warna biru adalah link yang dituju.
Tulisan "trik blog" adalah tulisan yang ditampilkan.
Jika pingin yang dikasih link bukan tulisan melainkan gambar maka ganti tulisan tersebut dengan kode gambar seperti diatas, sehinga kodenya akan seperti ini :
<a href="http://trik-tips.blogspot.com" target="_blank"><img src="http://kendhin.890m.com/banner-trik.gif" border="0" height="17" width="90"> </a>
Jika pingin link yang dituju dibuka dalam window baru maka tambahkan kode target="_blank" setelah kode "http://trik-tips.blogspot.com"
Hasil :
trik blog (dibuka pada window yg sama)
(dibuka pada window baru)

* CARA MENGETENGAHKAN TEXT/GAMBAR
Kode :
<center>text</center>
Keterangan :
Ganti tulisan "text" dengan tulisan yana kamu inginkan, tau bisa juga diganti dengan gambar

* CARA MEMBUAT BARIS BARU
Kode :
<br>
Keterangan :
Tambahkan kode tersebut sebelum objek (text/gambar) yang dinginkan

* MEMBUAT HURUF TEBAL, MIRING DAN BERGARIS BAWAH
Kode :
<b>text</b>
<i>text</i>
<u>text</u>
Hasil :
Tebal
Miring
Garis Bawah

* MEMBERI WARNA TEXT
<font color="#FF0000"> text </font>
<font color="red"> text </font>
Keterangan :
Ganti text yang dicetak tebal dengan warna atau kode warna kesukaanmu.
Hasil :
Merah
biru

* KODE-KODE WARNA

Warna	Kode
	#000000
	#999999
	#FFFFFF
	#FF0000
	#00FF00
	#0000FF
	#FFFF00
	#00FFFF
	#FF00FF
	#9900FF
	#FF6600

Kode2 warna selengkapnya bisa dilihat DISINI

* PENULISAN KARAKTER-KARAKTER KHUSUS
Ada beberapa karakter yang tidak bisa ditulis secara langsung, jika ditulis maka akan hilang atau berubah, jadi untuk menuliskanya harus menggunakan kode-kode tertentu, berikut ini contoh karakter-karakter tersebut :

Karakter	Kode
>	>
<	&lt;
&	&amp;
"	&quot;
(spasi)	&nbsp;

Perkenalan dengan HTML

Tutorial HTML
1. Perkenalan dengan HTML

HTML adalah bahasa pemrograman dasar yang digunakan untuk membangun sebuah situs. HTML sangat mudah digunakan dan diaplikasikan, oleh karena itu apabila kalian ingin belajar membangun sebuah situs sendiri maka bahasa HTML wajib kalian pelajari. Pelajaran HTML ini akan diberikan dalam bahasa yang mudah dimengerti sehingga kalian dapat belajar mulai dari nol alias tidak tahu apa-apa tentang html.

Anggap kalian sedang ingin membuat suatu kue. Sebelum membuat suatu kue maka kalian harus mengetahui terlebih dahulu bahan-bahan yang akan kalian gunakan beserta tahapan-tahapannya agar kue itu nanti terasa lezat apabila dimakan. Membuat file html pun demikian, sebelum membuat suatu file html kalian harus mengerti struktur dari file html itu sendiri dan 'bahan-bahan' yang digunakan dalam membuat file tersebut agar file html kalian dapat tampil dengan bagus di browser manapun.

HTML merupakan singkatan dari Hypertext Markup Language yang merupakan bahasa paling standard yang digunakan untuk membuat suatu website. HTML bukanlah merupakan suatu bahasa pemrograman, karena bahasa ini hanya berguna untuk mengontrol tampilan dari suatu halaman (web page) beserta isinya, beda dengan bahasa PHP yang didalamnya dapat mendukung suatu bentuk perulangan (Loop) atau bentuk pengandaian (if-else) sehingga bahasa PHP dapat disebut sebagai suatu bahasa pemrograman. Namun dengan berawal dari bahasa paling dasar ini kamu dapat menambahkan obyek-obyek lainnya seperti gambar, suara, video, dan permainan flash dalam suatu dokumen HTML.

Untuk membuat suatu dokumen HTML, hal-hal yang kamu perlukan hanyalah sebuah text editor biasa seperti : Notepad atau Wordpad (program standar bawaan dari windows) lalu kamu mengetikkan kode HTML didalamnya kemudian di save (simpan) dengan akhiran (ekstensi) .htm atau .html. Sebagai contoh kamu bisa menyimpan dokumen HTML kamu dengan nama belajar.html Bila kamu ingin sebuah HTML editor yang lebih profesional lagi, mungkin kamu bisa menggunakan program MS FrontPage atau bahkan Dreamweaver (editor HTML yang paling terkenal), tetapi tentunya kedua program (software) diatas merupakan software berbayar yang tentunya disini kami amat tidak menyarankan kamu untuk mencari crack-nya atau menggunakan software ilegal. Kemudian apabila file kamu telah disimpan dengan akhiran .html atau .htm maka selanjutnya kamu dapat membukanya dengan software (dalam hal ini disebut browser) seperti : Internet Explorer (bawaan windows) , Mozilla Firefox , Google Chrome , Opera , atau browser lainnya.

Love, Love and Love

Love, Love and Love
Album studio oleh Vierra
Dirilis	Februari 2011
Genre	Power pop
Durasi	39:40
Label	Musica Studios
Kronologi Vierra
My First Love (2009) Love, Love and Love (2011) Singel dari album Love, Love and Love "Takut" "Terlalu Lama" Love, Love and Love adalah album studio kedua karya Vierra yang dirilis pada Februari 2011 melalui Musica Studios. Dari album ini, Vierra telah merilis dua singel yaitu “Takut” dan “Terlalu Lama”. Daftar lagu Seluruh lagu ditulis dan disusun oleh Vierra. No. Judul Durasi 1. "Takut"   3:24 2. "Terlalu Lama"   4:09 3. "Kesepian"   4:12 4. "Pertemuan Singkat"   3:26 5. "Pertanda Cinta"   2:55 6. "Semua Tentangmu"   3:49 7. "Hidup Matiku"   2:48 8. "Don't Cry"   3:10 9. "Di Sisimu"   2:47 10. "Deg-Degan"   3:12 11. "Kepergianmu"   2:48 12. "Cantik"   3:00 Durasi Total: 39:40

My First Love

My First Love
Album studio oleh Vierra
Dirilis	Februari 2009
Genre	Pop rock[1] Power pop[2]
Durasi	41:04
Label	Musica Studios
Kronologi Vierra
My First Love (2009) Love, Love and Love (2011) Singel dari album My First Love "Dengarkan Curhatku" "Bersamamu" "Perih" "Rasa Ini" "Jadi Yang Kuinginkan" "Seandainya" My First Love adalah album debut dari Vierra yang dirilis pada Februari 2009 melalui Musica Studios. Single pertama dari album ini ialah Dengarkan Curhatku, yang kemudian diikuti oleh Bersamamu, Perih, Rasa Ini, Jadi Yang Kuinginkan, dan Seandainya Daftar Lagu Seluruh lagu ditulis dan disusun oleh Kevin Aprilio. No. Judul Durasi 1. "Dengarkan Curhatku"   2:33 2. "Perih"   3:22 3. "Bersamamu"   4:15 4. "No!"   4:12 5. "Terbang"   3:50 6. "To Nessa"   2:29 7. "Rasa Ini"   4:02 8. "Jadi Yang Kuinginkan"   3:10 9. "Tears"   2:54 10. "Manusia"   2:59 11. "Seandainya"   4:25 12. "Bintang"   2:49 Durasi Total: 41:04 Personil Widy Soediro Nichlany - Vokal Kevin Aprilio - Keyboard, Piano Raka Cyril Damar - Gitar Satryanda Widjanarko - Drum Chart Tahun Judul Posisi Angka Penjualan 2009 My First Love 2 52,700 Kopi [sunting] Single Tahun Judul MTV Ampuh Inbox On The Spot Dahsyat Radio Airplay 2009 Dengarkan Curhatku 1 (4 Minggu) 1 (1 Minggu) 1 (2 Minggu) 1 (14 Hari/2 Minggu) 1 (9 Minggu) 2009 Bersamamu 1 (2 minggu) 4 1 (2 Minggu) 1 (14 Hari/2 Minggu) 1 (8 Minggu) 2009 Perih - - - - 1 (3 Minggu) 2009 Rasa Ini - - - - 1 (6 Minggu) 2009 Jadi Yang Kuinginkan - - - - - 2009 Seandainya - 1 - - -

Widy Soediro Nichlany

Widy Soediro Nichlany
Lahir	Widy Soediro Nichlany 8 Mei 1990 (umur 21) Jakarta, Indonesia
Tempat peristirahatan	Jakarta
Nama panggilan	Widy Vierra
Pekerjaan	penyanyi
Tahun aktif	2008 - sekarang
Dipengaruhi oleh	Vierra
Kota asal	Menteng, Jakarta Pusat

Widy Soediro Nichlany atau dikenal sebagai Widy Vierra (lahir di Jakarta, Indonesia, 8 Mei 1990; umur 21 tahun) merupakan seorang penyanyi berkebangsaan Indonesia yang juga merupakan vokalis dari grup musik Vierra. Selain menyanyi, gadis kelahiran 8 Mei 1990 ini memiliki minat yang cukup besar di dunia olahraga, khususnya basket. Sejak SMA, Widi yang tomboi biasa meramaikan lapangan basket di sekolahnya.
Pada tahun 2010, Widy pernah dikabarkan akan diganti sebagai vokalis band Vierra dan ternyata itu cuma gosip saja.

Kevin Aprilio

Kevin Aprilio
Lahir	Kevin Aprilio Sumaatmadja 7 April 1990 (umur 21) Jakarta, Indonesia
Pekerjaan	musisi pianis
Tahun aktif	2008 - sekarang
Orang tua	Addie MS dan Memes

Kevin Aprilio (lahir di Jakarta, Indonesia, 7 April 1990; umur 21 tahun) merupakan seorang penyanyi berkebangsaan Indonesia yang ikut mendirikan grup musik Vierra.

Keluarga dan pendidikan

Terlahir dari pasangan musisi Addie MS dan Memes membuat seorang Kevin Aprilio menjadi terbiasa dengan atmosfer musik sedari kecil. Sejak masih duduk di bangku sekolah TK Kevin sudah belajar alat musik piano secara formal dan ketika ia menginjak sekolah SMP pemilik nama asli Kevin Aprilio Sumaatmaja ini, mulai belajar menulis lagu sendiri. Hal ini tidak lepas dari cita-citanya untuk menjadi musisi dan komposer, mengikuti jejak sang ayah.
Beranjak dewasa, Kevin mulai mahir dalam memainkan tuts – tuts piano. Kelihaiannya dalam bermain piano sudah tidak diragukan lagi. Ia bahkan pernah bermain menjadi pianis tunggal dalam Konser Musicademia Twilite Orrchestra. Kevin pernah membentuk band bernama Andante namun tidak bertahan lama. Kevin pun selanjutnya membentuk sebuah grup band bernama Vierra dengan single hits berjudul "Dengarkan Curhatku". Personilnya pun Kevin mendapatkannya melalui situs jejaring sosial "Friendster" di dunia maya.

 

Vierra

Dari Wikipedia bahasa Indonesia, ensiklopedia bebas

VIERRA
Raka, Widy, Kevin, dan Tryan
Latar belakang
Asal	Jakarta, Indonesia
Genre	Pop rock[1] Power pop[2]
Tahun aktif	2008 - Sekarang
Label	Musica Studios
Situs web	MySpace Vierra
Anggota
Kevin Aprilio Widy Soediro Nichlany Raka Cyril Damar Satryanda Widjanarko

Vierra merupakan sebuah grup band musik asal Jakarta, Indonesia yang dibentuk pada November 2008. Band ini beranggotakan 4 orang yaitu Kevin Aprilio (piano/keyboard), Widy Soediro Nichlany (vokal), Raka Cyril Damar (gitar), dan Satryanda Widjanarko (drum). Pada saat tampil mereka menggunakan bantuan seorang bassist tambahan bernama Deryansha Azhary. Genre musik Vierra dapat dikategorikan sebagai powerpop^[2] dan pop rock^[1]. Sampai saat ini mereka telah merilis 2 buah album yaitu My First Love (2009). dan Love, Love and Love (2011).
Bagi para penggemar Vierra, mereka memiliki sebuah komunitas fans club bernama Vierrania yang dibentuk pada Maret 2009.

Sejarah

Formasi

Pertemanan keempat personil Vierra bearawal dari pertemuan mereka di situs jejaring sosial Friendster.^[3] Pada awalnya, Kevin berniat mengajak Tryan yang sudah ia kenal lebih dulu untuk membentuk sebuah band. Tryan kemudian mengenalkan Kevin kepada Raka untuk mengisi posisi gitar. Setelah itu mereka bertiga sepakat untuk membentuk sebuah band. Lalu, masih didalam Friendster, Raka memperkenalkan Widy kepada Kevin dan Tryan untuk mengisi posisi sebagai vokalis. Kevin yang merasa karakter vokal Widy cocok dengan konsep musiknya, lalu menerimanya sebagai vokalis.^[4]
Pada awalnya Kevin mengusulkan nama "Andante" sebgai nama band mereka. Namun merasa kurang cocok dengan nama tersebut, Tryan lalu mengajukan nama "Vierra" yang berarti "empat".^[4] Vierra pun resmi terbentuk pada bulan November 2008

My First Love

Pada akhir Februari 2009, Vierra merilis album perdana mereka berjudul My First Love. Kevin mengatakan judul My First Love cukup menggambarkan bahwa "album ini memang benar-benar seperti remaja yang pertama kali jatuh cinta. Begitu polos." ^[5]
Sebagai single pertama, mereka merilis "Dengarkan Curhatku" pada Maret 2009. "Dengarkan Curahtku" dengan cukup cepat berhasil menduduki peringkat 5 besar di chart Dahsyat, MTV Ampuh, Derings, dan Inbox. Hal ini membuat nama Vierra langsung melambung di industri musik major Indonesia. Setelah Dengarkan Curhatku, Vierra juga merilis 5 lagu lain sebagai single yaitu: Bersamamu, Perih, Rasa Ini, Jadi Yang Kuinginkan, dan Seandainya.
Pada bulan Juli 2010, Vierra mengadakan sebuah kuis berjudul Seandainya Aku Liburan Bareng Vierra Ke Bali dengan hadiah berkunjung ke Bali bersama Vierra dan untuk menyumbangkan suara ke dalam beberapa lagu terbaru Vierra dalam album kedua mereka.^[6]
My First Love selain berhasil melambungkan nama Vierra, juga berhasil mencapai angka penjualan RBT sebanyak 9 juta dan mendapatkan penghargaan multiplatinum.^[7]

Love, Love & Love

Setelah menuai kesuksesan album perdana mereka, Vierra resmi merilis album kedua mereka berjudul Love, Love and Love pada 14 Februari 2011 memanfaatkan momentum valentine. Pada album ini terlihat sedikit perbedaan dari segi lirik, dimana setiap lagu dalam album ini merupakan pengalaman setiap personil Vierra dan setiap lagunya sedikit terdengar lebih dewasa.^[7]
Dari album ini Vierra telah merilis 2 buah single yaitu Takut dan Terlalu Lama

 Aprilio Story

Aprilio Story adalah sebuah proyek yang diproduseri oleh keyboardist Kevin Aprilio. Aprilio Story terdiri dari dua orang kakak-beradik Abi dan Adri yang mengusung genre musik pop dan emo rock.^[8]

Iklan Televisi

Vierra telah menjadi bintang iklan bagi beberapa produk dalam beberapa media, antara lain:

Produk	Tahun	Artis lain
Mountea	2009	-
Indosat-M3	2009	Saykoji Gita Gutawa
Honda Scoopy	2010	-
Nissan March	2011	Pevita Pearce Donita
Hyundai i10	2011	Asmirandah Samuel Zylgwyn Chelsea Olivia Gita Gutawa
AirAsia	2011	Iwan Fals
VitaCharm	2011	-
Yakult Ace	2011	-
Suzuki APV	2011	Seventeen
Sampoerna Hijau	2012	-

Kasus

Tanggal 6 Juli 2011 Widi diculik seorang 3 pria seragam pada saat naik taksi^[9]

Diskografi

• My First Love (2009)
• Love, Love and Love (2011)

Acara TV

• Bisik - Bisik Menantu RCTI
• Awas Ada Sule 2 (Segera) Global TV
• Fun Games (1 Episode) Trans TV
• Islam Itu Indah (Bintang Tamu) Trans TV
• Siraman Qalbu (Jamaah) MNCTV

Penghargaan

Tahun	Asosiasi	Kategori	Nominasi	Status
2010	Dahsyatnya Award 2010	Artis Pendatang Baru Terdahsyat	Vierra [10]	Menang
		Video Klip Terdahsyat	Dengarkan Curhatku [11]	Nominasi
		Sutradara Video Klip Terdahsyat	Abimael Gandhi pada Dengarkan Curhatku [11]	Nominasi

Tentang SMA Negeri 2 Sidoarjo

Sekolah Dihuni Makhluk Gaib, Guru di SMA Negeri 2 Sidoarjo Disuruh Makan Kembang

Guru di SMA Negeri 2 Sidoarjo di Jalan Kuthuk Barat, terhenyak. Pasalnya, seluruh 57 guru diminta menjalani ritual dengan cara makan kembang mawar oleh paranormal yang didatangkan ke sekolah itu.

Kejadian tersebut berlangsung awal pekan ini, sekitar pukul 11.30 atau seusai rapat yang membahas ujian siswa di sekolah itu. Setiap guru makan satu tangkai kembang mawar, yang sudah disediakan di ruang wakil kepala sekolah.

"Para guru dipanggil masuk ke ruang itu secara bergilir. Dalam satu giliran, ada lima guru. Kemudian satu per satu dari mereka memakan kembang mawar," tutur sumber Surya yang mengikuti ritual itu, tetapi keberatan namanya disebutkan.

Dikatakan sumber tadi, saat dikunyah, rasa bunga mawar itu sepet dan sedikit getir (pahit). Kendati rasanya tidak enak, ia terus mengunyah. Alasannya, ritual tersebut dimaksudkan untuk menjauhkan makhluk halus yang selama ini kabarnya bergentayangan di SMAN 2. "Sebetulnya hal itu tidak logis, tetapi kami didesak untuk melakukannya. Dan karena banyak guru melakukan, saya jadi takut juga dengan dampaknya jika tidak ikut memakannya. Ya akhirnya ikut saja," tuturnya.

Apalagi, imbuh dia, ada cerita yang sudah telanjur seperti diyakini di lingkungan sekolah itu bahwa sejumlah kematian guru dan pegawai non-guru di sana adalah akibat pengaruh makhluk gaib 'penghuni' sekolah. Beberapa kali juga terjadi, para siswa di salah satu sekolah favorit di Kota Sidoarjo itu kesurupan.

Mulai tahun 1989 ada sekitar 20 guru yang menderita aneka penyakit tetapi kebanyakan kanker. Tujuh di antaranya meninggal dunia dalam usia relatif muda. Guru yang meninggal dunia pada 1989 yakni Dra Endang Indrawati (47) sakit kanker kelenjar endokrin. Dra Asmaningsih tahun 1989, Erning Suparti Tamsi SH tahun 1998 dan kemudian Dra Endang Suhartuti tahun 1998. Ketiganya menderita kanker payudara.

Guru yang meninggal berikutnya adalah Drs Harjono Hardjowarsito tahun 2001 karena kanker nasofaring, dan Drs Alexander Subiyanto meninggal 2005 karena stroke. Terakhir yang meninggal adalah staf Tata Usaha (TU) SMAN 2, Haryanto, sekitar tahun 2008.

Kematian tujuh guru dan staf itu menimbulkan sejumlah spekulasi. Ada yang menghubung-hubungkannya dengan kemungkinan keberadaan medan magnet di perut bumi, yang kebetulan tepat berada di lokasi sekolah. Juga muncul pula pembicaraan bahwa sekolah itu merupakan 'kerajaan' makhluk halus.

Seorang pemilik warung di depan SMAN 2 mengakui adanya cerita dari mulut ke mulut tentang keangkeran sekolah itu.

"Katanya, makhluk halus itu menampakkan diri sebagai ibu yang menggendong anak kecil di lapangan sekolah. Biasanya, yang melihatnya adalah siswa baru. Saya merinding kalau mendengar ceritanya," kata pemilik warung.

Penuturan senada diungkapkan pedagang lainnya. Katanya, makhluk halus itu bercokol di pos keamanan sekolah di bagian depan. Namun, ia sendiri tidak pernah melihat penampakannya, hanya mendengarnya dari cerita-cerita.

Penjaga SMAN 2, Karmadi (yang dipanggil Pak Di), menegaskan tidak ada apa-apa di sekolah selama ini. Ketika ditanya mengenai ritual guru makan kembang, ia terkesan menjawabnya dengan bergurau. "Makan kembang itu enak mas. Apalagi kembang turi ditaburi bumbu pecel," ucap Karmadi sambil tersenyum.

Karena berkembangnya cerita-cerita tentang adanya makhluk ghaib itu, pada 2006 Kepala Sekolah (Kasek) SMAN 2, Titik Sunarni mengirim surat ke Dinas Pendidikan Nasional (Diknas) Pemkab Sidoarjo. Surat itu berisi permohonan agar SMAN 2 direlokasi atau dipindah. Rupanya, permohonan itu dituruti oleh Diknas. Lahan seluas 1,1 hektar sudah tersedia dan diuruk sehingga tinggal mendirikan bangunan di atasnya.

Kasek SMAN 2 yang coba dikontak Surya beberapa waktu lalu tidak ada di tempat. Wartawan Surya yang datang ke SMAN 2 ditemui oleh koordinator TU, Mukhtadi, yang menyangkal cerita takhayul tentang sekolah itu.

Mukhtadi bahkan menyebut ngawur kabar yang menyatakan bahwa ada 57 guru SMAN 2 melakukan ritual makan kembang. "Dari mana sampeyan dapat informasi itu, mungkin saja ada kru guru yang gelisah sehingga membuat cerita tidak benar di luar," ujarnya.

Wakil Kepala Sekolah (Wakasek) Bidang Humas Drs Amirul, yang sempat sebentar turut menemui Surya di ruang TU, hanya tersenyum saat ditanya mengenai ritual makan kembang yang dilakukan oleh para guru.

Menurut Mukhtadi, semua sekolah pasti 'dijaga' makhluk halus. Ketika dia masih bertugas di SMAN I Sidoarjo, misalnya, cerita tentang adanya makhluk halus juga beredar di sana.

"Macam-macam. Katanya, ada suara orang minta tolong lah atau yang lain," kata dia. Dijelaskannya, ahli ilmu kebumian (geologi) dari luar negeri dan Institut Teknologi Bandung (ITB) serta seorang profesor pernah datang ke SMAN 2 untuk meneliti kemungkinan adanya medan magnet bumi tepat di bawah lokasi sekolah.

Setelah tanah dibor sampai kedalaman 12 meter dan dianalisis, ternyata tidak terdapat kesimpulan yang ganjil. "Nah, itu berarti kematian guru bukan disebabkan oleh pengaruh magnet bumi atau gangguan makhluk halus," jelas Mukhtadi sambil menambahkan bahwa guru yang meninggal dunia itu usianya sudah tua dan beberapa kali dirawat di rumah sakit (RS).

Meski diguncang rumor yang kurang ’sedap’, prestasi SMUN 2 Sidoarjo justru makin moncer. Di tahun 2008, sebanyak 89 siswanya lolos PMDK. Pada tahun 2009 ini, lebih banyak lagi siswa yang diterima di ITB, UI, UGM serta perguruan tinggi negeri di Jatim, seperti ITS, Unair, dan Unesa. "Ini bukti SMUN 2 memang jawara dalam melahirkan siswa berprestasi," ungkap sumber itu.

Anggota DPRD Kabupaten Sidoarjo, Anik Maslachah, mendukung upaya relokasi SMAN 2 secepatnya. Pasalnya, lokasi SMAN 2 saat ini dinilai sudah tidak layak karena siswa sering kesurupan, dan beberapa guru meninggal dunia akibat menderita kanker payudara dan penyakit lain.

"Sebagai tempat, sekolah kan seharusnya mendatangkan kenyamanan dan keamanan bagi anak didik sekaligus para guru?" kata Anik dari Fraksi Kebangkitan Bangsa (FKB). Menurut Anik yang juga anggota tim panitia anggaran (Panggar) untuk relokasi SMAN 2, sudah dilakukan pembelian sebidang tanah di kawasan Jl Lingkar Barat, Kecamatan Candi, sejak 2008 untuk didirikan bangunan sekolah di atasnya. Dana yang dianggarkan dalam pembangunan gedung SMAN 2 yang telah dimulai pada 2009 ini, senilai Rp 9 miliar. Sifat proyeknya jangka panjang atau multi year.

"Mudah-mudahan tahun ajaran 2010 nanti, gedung baru untuk SMAN 2 sudah bisa ditempati," ungkapnya. Sementara itu, Kepala Diknas Pemkab Sidoarjo Drs HMG Hadi Sutjipto yang dihubungi via ponsel, tidak dijawab.