Dasar-dasar yang perlu dipelajari dan diketahui dalam Pemrograman HTML

Html adalah sebuah bahasa pemrograman yang digunakan untuk membuat sebuah halaman web. Dokumen Html mirip dengan dokumen dengan tulisan biasa, bedanya pada dokumen Html terdapat perintah-perintah tertentu yang ditandai dengan kode atau dikenal dengan istilah TAG Html.

Dalam dokumen Html, terdapat elemen-elemen pembentuk seperti elemen head, title, body, footer, dll. Sebelum mengetahui lebih mendalam tentang Html, Ada baiknya jika Anda mengetahui beberapa dasar-dasar pada Html berikut ini.

Daftar isi

1. Dokumen Html

<!DOCTYPE html> adalah sebaris kode Html yang menunjukkan deklarasi tipe dokumen yang akan dibuat adalah Html. Artinya, suatu dokumen Html harus dideklarasikan tipe dokumennya dengan sebaris kode tersebut, hal tersebut untuk membedakan bahwa dokumen yang dibuat adalah dokumen Html.

Isi dari dokumen Html bisa ditulis setelah penulisan tag <html> dan ditutup dengan tag </html> atau bisa disebut dengan elemen html. Elemen html adalah susunan kode yang ditulis mulai dari tag pembuka(<html>) sampai penutup tag(</html>).

dalam elemen html terdapat elemen lain seperti elemen head, elemen body, elemen footer, dsb. Bagian utama yang akan terlihat dalam halaman web berada pada elemen body atau terletak diantara tag <body> dan tag </body>.

Bagian lain selain elemen body yang akan terlihat yaitu elemen title. Elemen title atau konten/judul yang berada diantara tag <title> dan </title> akan terlihat di browser toolbar dan akan terlihat juga di halaman search engine seperti google, bing, dsb.

2. Heading pada Html

Elemen Heading atau sebaris kode yang dimulai dari tag <h1> sampai tag </h1> berfungsi untuk membuat judul pada halaman web. Html menyediakan tag heading yang dimulai dari tag <h1> sampai tag <h6>

Daftar Tabel untuk Heading pada Html
NoTagKeterangan
1<h1>Heading Level 1 dengan ukuran 200% dari ukuran normal. font weight Tebal
2<h2>Heading Level 2 dengan ukuran 150% dari ukuran normal. font weight Tebal
3<h3>Heading Level 3 dengan ukuran 117% dari ukuran normal. font weight Tebal
4<h4>Heading Level 4 dengan ukuran 100% dari ukuran normal. font weight Tebal
5<h5>Heading Level 5 dengan ukuran 83% dari ukuran normal. font weight Tebal
6<h6>Heading Level 6 dengan ukuran 67% dari ukuran normal. font weight Tebal

Jika Anda berencana untuk membuat judul utama pada artikel yang nantinya akan ditampilkan pada halaman web, maka bisa menggunakan heading level 1 yaitu tag <h1>. Jika berencana untuk membuat sub judul dari judul utama, maka bisa menggunakan heading level 2 atau tag <h2>, dan seterusnya sampai tag <h6> untuk membuat sub judul dari sub judul sebelumnya.

Secara default, semua tag heading yang dibuat akan tercetak tebal(bold) pada halaman web. Sedangkan Perbedaannya terletak dari ukuran font di tiap-tiap tag, heading level 1 berukuran 200% dari ukuran normal dan seterusnya hingga heading level 6 dengan ukuran font 67% dari ukuran normal.

3. Paragraf pada Html

Setiap konten atau artikel pasti tersusun dari beberapa paragraf, Nah tiap kata yang membentuk suatu paragraf ditulis diantara tag <p> dan tag </p> atau secara keseluruhan disebut elemen p/paragraf.

contoh: <p> ..isi paragraf.. </p>

Ketika tag <p> digunakan untuk membuat paragraf, secara default tag tersebut akan membuat baris kosong diatas dan dibawah paragraf yang dibuat. Hal tersebut bertujuan untuk memisahkan antara paragraf satu dengan paragraf lainnya.

4. Tabel Html

Tabel adalah daftar yang berisi informasi yang ditampilkan dalam bentuk baris dan kolom. Untuk membuat Tabel dalam pemograman Html, Anda memerlukan 3 tag utama antara lain: <table>, <tr>, dan <td>.

Selain ke-3 tag utama, terdapat juga tag lain seperti: <thead>, <tbody>, <tfooter>, namun hanya bersifat optional, tetapi tetap diperlukan jika ingin membuat struktur tabel yang lebih lengkap.

Pembuatan Tabel dalam website sering digunakan, misalnya menampilkan data yang berasal dari database, menampilkan data keuangan atau data nilai siswa, dsb. Oleh karena itu, sangat dipenting untuk dipelajari tentang bagaimana cara membuat tabel dalam pemrograman Html.

5. Link Html

Link adalah hal yang umum pada website, bisa dikatan setiap halaman website memerlukan adanya sebuah Link. Link menjadi penghubung antara suatu halaman dengan halaman lainnya. Link biasanya ditandai dengan teks berwarna biru dan bergaris bawah.

Link pada halaman web bisa dalam bentuk gambar maupun teks, gambar atau teks yang sudah dirubah menjadi link tersebut jika diklik akan menuju ke alamat lain sesuai dengan alamat yang ditulis dalam elemen link.

Untuk membuat link html, Anda bisa memulainya dengan menggunakan tag <a> dan ditutup dengan tag </a>. Tag A memiliki atribut HREF, tanpa adanya HREF, sebuah link yang dibuat akan tercetak seperti teks biasa.

Pada atribut href, Anda bisa mengisi nilai/value berupa url atau alamat yang akan dituju. Selain atribut HREF terdapat juga atribut NAME, HREF digunakan jika anchor teks akan digunakan sebagai link, sedangkan NAME digunakan jika anchor teks akan digunakan sebagai tujuan.

6. Gambar Html

Tampilan dalam suatu halaman web akan lebih menarik jika ditambahkan beberapa gambar pendukung. Pada Html, terdapat beberapa format gambar yang didukung seperti: GIF, JPEG, PNG, dll.

Namun tidak semua format gambar didukung oleh kebanyakan browser, Sebagai alternatif anda bisa menambahkan gambar dengan format GIF atau JPEG yang banyak dikenali oleh mayoritas browser.

Untuk menambahkan gambar pada halaman web, Anda bisa menggunakan tag <img> yang dibantu dengan atribut SRC. Pada atribut SRC, Anda bisa mengisinya dengan nilai berupa alamat/url lokasi tempat gambar disimpan. Beberapa atribut lain pada Tag <img> seperti: src, width, height, align, alt.

7. Daftar Html(LIST)

Untuk menampilkan data atau informasi dalam bentuk DAFTAR dalam halaman web. Html memiliki beberapa tag khusus, untuk membuat daftar secara acak/tidak terurut bisa menggunakan tag <ul>(unordered list).

Sedangkan untuk membuat daftar secara terurut atau penting urutannya, maka bisa menggunakan tag <ol>(ordered list). Selain ke-2 tag yaitu UL dan OL, Html menyediakan tag pendukung untuk menampung daftar isian/item yaitu tag <li>(list item).

8. Form Html

Form adalah daftar isian yang biasanya digunakan untuk meminta informasi dari user kemudian diolah. Pengolahan form biasanya dilakukan pada server dengan menggunakan skirp yang bersifat server-side seperti skrip Php, Asp, Ruby, Java(via JavaServerPages), dsb.

Untuk membuat form, Anda memerlukan beberapa tag html antara lain: <form>, <select>, <input>, dsb. Berikut sedikit penjelasan dari beberapa tag untuk membuat form.

8.1  Tag Form

Tag form merupakan tag utama yang digunakan untuk mendefinisikan sebuah form. Tag form mempunyai 2 atribut yang bisa dikatakan wajib untuk membuat sebuah form yaitu atribut METHOD dan ACTION.

Atribut Method untuk menentukan metode pengolahan form yaitu method GET atau POST. Sedangkan atribut Action pada tag Form digunakan untuk menentukan URL atau lokasi file yang digunakan untuk mengolah form.

8.2  Tag Select

Tag select adalah tag yang digunakan untuk membuat sebuah daftar pilihan. Tag select digunakan bersamaan dengan tag <option>, tag option memiliki beberapa atribut yaitu: value, selected.

Atribut value digunakan untuk memberi nama pada item pilihan, sedangkan atribut selected digunakan untuk memberikan pilihan default.

8.3  Tag Input

Tag input digunakan untuk membuat elemen-elemen yang digunakan untuk meminta informasi kepada user, misalnya: kotak teks, kotak teks dalam bentuk password, check box, radio, tombol submit/reset, dsb.

Tag Input tidak memerlukan tag penutup seperti pada kebanyakan tag tag lainya. beberapa atribut untuk tag Input antara lain: Name, Size, Value, Checked, Type, dsb.

Khusus untuk atribut type, atribut type menentukan jenis inputan yang akan dapat dibuat. Beberapa jenis inputan yang bisa dibuat seperti: text, password, check box, radio, submit, reset, dsb.