Pengenalan HTML dan CSS
Pemahaman yang mendalam saat belajar HTML dan CSS akan sangat berguna ketika membuat sebuah halaman web.
Jika menelusuri tentang lowongan pekerjaan untuk bagian frontend development, HTML dan CSS selalu menjadi keahlian yang wajib untuk dikuasai.
Baiklah, langkah yang perlu diambil untuk menguasai HTML dan CSS dimulai dari pengenalan terlebih dahulu.
Apa itu HTML?
Menurut Wikipedia Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).
Dokumen HTML Sederhana
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Judul Pertama Saya</h1>
<p>Paragraf Pertama Saya</p>
</body>
</html>Penjelasan:
- Deklarasi <! DOCTYPE html> mendefinisikan dokumen ini sebagai HTML5
- Elemen <html> adalah elemen root dari sebuah halaman HTML
- Elemen <head> berisi informasi meta tentang dokumen
- Elemen <title> menentukan judul untuk dokumen
- Elemen <body> berisi konten halaman yang terlihat
- Elemen <h1> mendefinisikan heading besar
- Elemen <p> mendefinisikan sebuah paragraf
Gunakan browser seperti (Chrome, IE, Firefox, Safari) untuk menampilkan dokumen html seperti gambar dibawah ini:
| Versi | Tahun |
|---|---|
| HTML | 1991 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML | 2000 |
| HTML5 | 2014 |
- Seorang user atau pengunjung saat mengunjungi website tertentu akan melakukan permintaan ke server melalui web browsernya.
- Web server akan menanggapi permintaan tersebut dengan mengirimkan halaman website seperti file HTML.
- File HTML ini akan di terjemahkan oleh web browser dan di tampilkan ke user.
Menurut Wikipedia Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.
Mengapa Menggunakan CSS?
CSS digunakan untuk menentukan gaya pada halaman web, termasuk desain, tata letak, dan variasi tampilan untuk berbagai perangkat dan ukuran layar.
Contoh Sederhana:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1 style="background-color: red;color: white;">Judul Pertama Saya</h1>
<p style="background-color: green;color: white;">Paragraf Pertama Saya</p>
</body>
</html>Contoh Menggunakan Selector ID judul dan paragraf:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
<style>
#judul {
background-color: red;color:white;
}
#paragraf {
background-color: green;color: white;
}
</style>
</head>
<body>
<h1 id="judul">Judul Pertama Saya</h1>
<p id="paragraf">Paragraf Pertama Saya</p>
</body>
</html>Contoh Menggunakan Selector CLASS judul dan paragraf:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
<style>
.judul {
background-color: red;color:white;
}
.paragraf {
background-color: green;color: white;
}
</style>
</head>
<body>
<h1 class="judul">Judul Pertama Saya</h1>
<p class="paragraf">Paragraf Pertama Saya</p>
</body>
</html>Hasilnya seperti gambar dibawah ini:
Penjelasan:
- Selector ID ini merupakan selector untuk menentukan bagian yang hanya ada satu pada halaman. Jadi selector ID ini tidak bisa dipanggil lebih dari satu. Selector ini ditulis dengan awalan pagar atau "#" beserta nama ID nya.
- Selector Class juga sama seperti id. Bedanya adalah jika id hanya boleh dipanggil satu kali saja, kalau class bisa dipanggil berkali kali pada satu halaman. Selector ini ditulis dengan awalan titik atau "." Beserta nama Class nya.
Demikianlah tutorial Pengenalan HTML dan CSS Semoga bermanfaat, terima kasih.