Belajar Menggunakan HTML dan CSS ( Bagian 1 )

Berikut adalah tutorial dasar step by step menggunakan HTML dan CSS.

Contoh halaman web yang sudah jadi:

Document HTML menggunakan <tag> untuk memberitahu browser bagaimana seharusnya sebuah content diformat. Dalam HTML untuk semua jenis <tag> harus dimulai dengan <tag> pembuka dan </tag> penutup.

1. Header dan Paragraph. Pada umumnya halaman web memiliki dokumen heading yang ditandai dengan <h1> sampai <h6> semakin besar angkanya meka semakin kecil ukuran tulisan yang dihasilkan. Setelah heading maka akan diikuti dengan paragraph atau isi tulisan, untuk memasukkan paragraph dapat dengan menggunakan <p>. pada web contoh di atas, tulisan "Selamat datang! Masukkan email anda:" dibuat dengan menggunakan <p>. dengan kode sebagai berikut:

<p>Selamat datang! Masukkan email anda:</p>  



2. Form Email. Form email dibuat dengan menggunakan:

<input type="email">  

dengan memasukkan script tersebut maka akan keluar box untuk memasukkan email seperti pada gambar contoh. Dalam potongan script tersebut type disebut dengan atribut sedangkan "email"disebut value. untuk tombol submit dibuat dengan menggunakan:

<input type="submit">  

Dalam box email biasanya dibuat tulisan transparan untuk membantu pengunjung tulisan seperti apa yang harus dimasukkan. Cukup tambah <placeholder="kalimat transparan yang ingin ditunjukkan"> pada email input. Sehingga menjadi seperti ini:

<input type="email" placeholder="Masukkan email anda">  



3. Kesimpulan. Sampai di sini maka kode keseluruhan dari webpage yang sudah dibuat adalah sebagai berikut:

<p>Selamat datang! Masukkan email anda:</p>  
<input type="email" placeholder="Masukkan email anda">  
<input type="submit">  

Jika kode HTML tersebut di jalankan pada browser maka tampilannya sebagai berikut:

Pada pelajaran berikutnya anda akan mempelajari penggunaan CSS pada HTML agar halaman web dapat menjadi lebih bagus dan dapat makin menyerupai seperti halaman web contoh di atas.

Selanjutnya menuju ke bagian ke dua.

Geri Muhano

Web programmer di erabelajar.com. Alumni UIN Jakarta.