Membuat Website dengan Menggunakan HTML

Mempercantik Tampilan Website dengan Menggunakan CSS

Mempercepat Proses Pembuatan Website dengan Bootstrap

Struktur Dasar Dokumen HTML

Sebelum mulai belajar dan mempraktekan materi yang ada, buatlah sebuah folder pada komputer Anda, misalnya di drive c: dengan nama “websiteku”, folder ini digunakan sebagai folder projek untuk menyimpan semua file latihan Anda.

Bukalah code editor, dan ketikkan baris kode berikut:

PENTING:

Bagi Anda yang belum pernah sama sekali berhubungan dengan kode-kode HTML sangat tidak disarankan untuk copy-paste. Dengan mengetikkan karakter demi karakter, secara tidak langsung Anda sedang melatih diri untuk menjadi seorang programmer (beuh!)

<!DOCTYPE html>
<html lang="id">
  <head> 
    <meta charset="UTF-8">
    <title>Belajar HTML - Panduan.VIP</title>
  </head>

  <body>
    <h1>Panduan.VIP</h1>
    <p>Panduan.VIP tempat belajar online paling asyik!</p>
  </body>
</html>

Jika sudah selesai, silahkan simpan dokumen HTML tersebut pada folder projek Anda dengan nama file “latihan-1.html“.

Kami tidak ingin menjejali Anda dengan banyak teori dan istilah, namun demikian mau tidak mau akan ada beberapa istilah yang perlu Anda ketahui… setidaknya supaya kalau lagi ngobrol di warung kopi bareng temen kelihatan lebih intelek dikitlah bahasanya!

Pada dasarnya, halaman website dibentuk dengan menggunakan tanda-tanda khusus, seperti <html>, <head>, <body>, <h1>, <p> dan lainnya. Tanda-tanda khusus yang digunakan untuk membangun struktur dokumen HTML tersebut dikenal dengan istilah “tag”.

Sebagian besar tag-tag yang ada merupakan tag berpasangan, misalnya untuk membuat suatu paragraf kita harus memulainya dengan tag pembuka <p> dan mengakhirnya dengan tag penutup </p>. Sebuah dokumen HTML juga selalu dimulai dengan tag pembuka <html> dan diakhiri dengan tag penutup </html>, dan masih banyak lagi tag-tag berpasangan lainnya.

Selain tag berpasangan ada juga tag yang berdiri sendiri, seperti pada contoh kode baris di atas ada tag <meta> misalnya, nanti kita juga akan menemui dan menggunakan tag <img> atau tag tak berpasangan lainnya.

Pada baris kode <meta charset=”UTF-8″>, charset merupakan nama “atribut“, yaitu informasi tambahan yang diletakan pada tag pembuka, dan “UTF-8” merupakan nilai dari atribut tersebut.

Untuk contoh lainnya silahkan lihat gambar berikut:

Sekarang kita bahas baris demi baris kode tersebut:

<!DOCTYPE html>

Bukanlah tag HTML, deklarasi <!DOCTYPE> ini berfungsi untuk memberitahu browser jenis dokumen yang ada. Deklarasi <!DOCTYPE> harus ditulis sebelum tag pembuka <html>.


<html lang=”id”> </html>

Seluruh tag-tag HTML harus dibuat diantara tag pembuka <html> dan tag penutup </html>, atribut lang merupakan atribut yang menujukan jenis bahasa yang digunakan pada halaman sebuah website dan ini bersifat opsional, namun sangat disarankan untuk disertakan. Nilai “id” menunjukan bahasa yang dipakai adalah bahasa Indonesia, jika Anda ingin membuat website berbahasa Inggris bisa diisi dengan nilai “en”.

Jika Anda ingin menggunakan bahasa lainnya silahkan lihat referensi daftar kode bahasa yan bisa dipakai di sini https://www.w3schools.com/tags/ref_language_codes.asp


<head> </head>

Berfungsi untuk menampung tag-tag yang berisi informasi yang tidak akan ditampilkan pada halaman website.


<meta charset=”UTF-8″>

Untuk menginstruksikan browser agar menggunakan karakter set UTF-8 pada saat memproses dukumen HTML.


<title> </title>

Digunakan untuk memberikan judul pada suatu halaman website, akan muncul pada jendela browser dan bagian ini yang akan terindex pada mesin pencari sebagai judul halaman.


<body> </body>

Semua tag-tag HTML yang informasinya akan ditampilkan pada halaman website diletakan pada bagian ini.


<h1> </h1>

Berfungsi untuk memberi judul suatu artikel, tag <h1> digunakan untuk membuat judul utama, jika Anda memiliki sub-judul maka Anda bisa membuatnya dengan tag <h2>, <h3> sampai dengan tag <h6>.


<p> </p>

Sebuah paragraf harus dimulai dengan tag pembuka <p> dan diakhiri dengan tag penutup </p>.


Sekarang bukalah dokumen Anda dengan menggunakan browser dengan cara klik dua kali pada nama file HTML tersebut.

Hasilnya akan tampak seperti gambar berikut: