Mengenal HTML dan CSS: Pengertian, Sejarah, Fungsi, dan Cara Penggunaannya

Mengenal HTML dan CSS: Pengertian, Sejarah, Fungsi, dan Cara Penggunaannya Hai teman-teman! Berjumpa lagi dengan saya di dailamiahmad.my.id. Untuk menjadi seorang web developer wajib hukumnya mempelajari HTML dan CSS. HTML dan CSS adalah dua teknologi dasar yang digunakan dalam pembuatan halaman web. HTML membangun struktur dari sebuah situs, sementara CSS berperan dalam menentukan tampilan dan desainnya. Dalam artikel ini, saya akan membahas secara lengkap tentang HTML dan CSS, mulai dari pengertian, sejarah, fungsi, cara penggunaan, hingga contoh sintaksnya. 

Tapi sebelum lanjut ke materi, Jika teman-teman ingin membaca artikel lainnya yang relevan dengan pembahasan kali ini silahkan cek artikel-artikel di bawah ini.

Baca Juga :

• Belajar HTML dan CSS untuk Pemula: Buat 'Hello, World!' dan Biodata Diri
• Tutorial Membuat Form HTML dan CSS
• Cara Membuat Tabel dengan HTML: Panduan Lengkap
• Panduan Langkah Demi Langkah: Cara Menggunakan Heading dan Link HTML untuk Pemula

Oke kita lanjutkan ke pembahasan utama tentang HTML dan CSS

Mengenal HTML dan CSS: Pengertian, Sejarah, Fungsi, dan Cara Penggunaannya

Pengertian HTML dan CSS

Apa Itu HTML?

HTML (HyperText Markup Language) merupakan sebuah bahasa markup yang berfungsi untuk membangun kerangka dasar suatu halaman web. Dengan HTML, kita bisa menentukan elemen-elemen seperti teks, gambar, tautan, tabel, dan lainnya agar bisa ditampilkan oleh browser. HTML bekerja dengan menggunakan tag yang mengatur bagaimana informasi ditampilkan.

Apa Itu CSS?

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan desain halaman web. CSS memungkinkan kita untuk memberikan warna, mengubah font, menyesuaikan tata letak, dan menambahkan efek visual pada elemen HTML. Dengan CSS, tampilan sebuah website bisa menjadi lebih menarik dan responsif.

Sejarah HTML dan CSS

Sejarah HTML

HTML pertama kali diciptakan oleh Tim Berners-Lee pada tahun 1991 sebagai fondasi awal pengembangan halaman web. Versi awalnya sangat sederhana, hanya berisi elemen-elemen dasar untuk membuat halaman web. Seiring waktu, HTML mengalami perkembangan. Berikut Beberapa perkembangan dari HTML antara lain yaitu:

• HTML 2.0 (1995) Mulai mendukung formulir dan elemen dasar lainnya.
• HTML 3.2 (1997) Menambahkan dukungan untuk tabel dan skrip.
• HTML 4.01 (1999) Menghadirkan peningkatan dalam struktur dokumen.
• HTML5 (2014 – sekarang) Versi terbaru dengan dukungan untuk multimedia, grafis, dan aplikasi web yang lebih interaktif.

Sejarah CSS

CSS pertama kali diperkenalkan oleh W3C pada tahun 1996 sebagai solusi untuk mengatur tampilan halaman web dengan lebih baik. Sebelum adanya CSS, semua pengaturan tampilan dilakukan langsung di HTML, yang membuat kode menjadi sulit dikelola. Seiring waktu, CSS berkembang menjadi beberapa periode. Berikut perkembangan CSS dai beberapa periode 

• CSS1 (1996) Mengatur tampilan dasar seperti warna dan font.
• CSS2 (1998) Menambahkan fitur tata letak seperti positioning dan z-index.
• CSS3 (2001 – sekarang) Membawa banyak fitur canggih seperti animasi, efek transisi, dan desain responsif.

Fungsi HTML dan CSS

Fungsi HTML

Dalam proses pembuatan halaman web, HTML memiliki peran utama dengan beberapa fungsi penting, di antaranya

• Membentuk Struktur Halaman Web HTML menentukan bagaimana elemen-elemen web tersusun.
• Menampilkan Konten HTML memungkinkan kita untuk menampilkan teks, gambar, video, dan elemen multimedia lainnya.
• Menyediakan Navigasi HTML memungkinkan pembuatan tautan (link) untuk berpindah dari satu halaman ke halaman lainnya.
• Membantu Interaksi dengan Pengguna HTML mendukung formulir yang bisa digunakan untuk interaksi pengguna, seperti login atau pendaftaran.

Fungsi CSS

CSS digunakan untuk mengatur tampilan halaman web agar lebih menarik dan rapi. Berikut beberapa fungsi utama CSS yaitu :

• Meningkatkan Desain dan Estetika CSS memungkinkan pengaturan warna, font, dan tata letak.
• Membantu Responsivitas Dengan CSS website dapat dibuat responsif agar tampilan menyesuaikan dengan berbagai ukuran layar.
• Menambahkan Animasi dan Efek Visual CSS memungkinkan efek transisi, hover, dan animasi lainnya tanpa memerlukan JavaScript.
• Memisahkan Konten dari Tampilan CSS memudahkan pengelolaan kode dengan memisahkan desain dari struktur HTML.

Cara Menggunakan HTML dan CSS

Cara Menggunakan HTML

HTML ditulis dalam file dengan ekstensi .html. Struktur dasar dari sebuah file HTML adalah sebagai berikut

Cara Menggunakan CSS

CSS dapat diterapkan dalam HTML dengan tiga cara yaitu :

• Inline CSS Ditulis langsung di dalam tag HTML.

• Internal CSS diletakkan dalam tag <style> yang berada di dalam bagian <head> pada dokumen HTML.

• External CSS disimpan dalam file terpisah dengan format .css dan dihubungkan ke HTML menggunakan tag <link>. Kemudian dihubungkan ke HTML dengan tag <link>.

Contoh Penulisan HTML dan CSS

• Buat sebuah file dengan nama styles.css isi dengan kode dibawah ini

• Buat file Html seperti dibawah ini simpan dengan nama index.php

Kesimpulan

Gimana teman-teman, Sudah mulai ada gambaran terkait HTML dan CSS ? Yoi teman-teman, wajib buat kalian yang mau mulai belajar atau bermimpi menjadi seorang web developer  untuk bejarar dan memahami HTML dan CSS. Oke saya review ulang sedikit ya.

Dalam dunia pengembangan web, HTML dan CSS menjadi dua teknologi dasar yang saling melengkapi. HTML bertanggung jawab atas struktur halaman, sedangkan CSS mengatur tampilan agar lebih menarik dan responsif. Jika teman-teman sudah memahami keduanya, kita dapat mulai membangun website sendiri dari nol. Kuncinya banyak belajar dan berlatih agar kita terbiasa dalam membuat koding HTML dan CSS. Teman-teman jika ada kritik dan saran atau sekedar bertanya silahkan tulis di kolom komentar ya. Sampai jumpa di artikel-artikel menarik lainnya.