HTML atau biasanya disebut sebagai HyperText Markup Language merupakan bahasa markup standar yang digunakan dalam membangun struktur sebuah halaman website. Dengan HTML, developer dapatmenetapkan elemen-elemen seperti judul halaman, paragraf, gambar, navigasi, hingga form. HTML tidak mengatur tampilan visual website secara detail namun lebih berfokus pada hierarki website agar penggunadapat memahami isi halaman dengan lebih baik. 

CSS atau Cascading Style Sheets dapat digunakan dalam mengatur tampilan visual dari elemen HTML. CSS dapat diterapkan dalam mengatur warna, ukuran, tata letak, animasi, tipografi, dan elemen lainnya dalam halaman web. Dengan CSS, satu struktur HTML yang sama bisa memiliki berbagai desain yang berbeda. Hal ini memungkinkan adanya fleksibilitas dalam pengembangan interface pengguna yang menarik dan responsif. 

Berikut adalah perbedaan dasar dari HTML & CSS: 

Aspek  HTML  CSS 
Fungsi  Menyusun struktur dan konten  Mengatur tampilan visual 
Peran  Menentukan apa yang ditampilkan  Menentukan bagaimana tampilan tersebut terlihat 
Output  Elemen pada halaman web  Desain/layout dari elemen tersebut 

 

HTML menggunakan tag untuk menyusun konten. Setiap tag umumnya memiliki pasangan pembuka dan penutup. Berikut adalah contoh struktur HTML: 

<!DOCTYPE html> 

<html> 

<head> 

 <title>Judul Halaman</title> 

</head> 

<body> 

  <h1> Judul Utama</h1> 

  <p>Isi paragraf pada halaman web.</p> 

</body> 

</html> 

Tag seperti <h1> dan <p> adalah elemen yang menyusun konten, sementara bagian <head> menyimpan informasi tentang halaman seperti judul dan metadata. 

Dalam HTML, terdapat beberapa elemen dasar yang dapat digunakan dalam membuat tampilan website diantaranya: 

  • Heading (<h1>–<h6>) : Untuk judul dan subjudul 
  • Paragraph (<p>) : Untuk teks dalam website 
  • Image (<img>) : Untuk menampilkan gambar 
  • Link (<a>) : Untuk navigasi antarhalaman 
  • Div & Section (<div>, <section>) : Untuk mengelompokkan area suatu konten 

Dalam menyusun struktur website, CSS memiliki peran dalam membuat style setiap elemen. Dalam membuat code CSS, developer dapat menggunakan selector dan declaration block untuk menentukan gaya dari elemen. 

Berikut adalah contoh code CSS yang dapat ditulis untuk mengatur warna dan ukuran font dari heading: 

h1 { 

  color: blue; 

  font-size: 32px; 

} 

Penjelasan: 

  • Selector: h1 → elemen yang dipilih 
  • Property: color dan font-size 
  • Value: blue, 32px 

Dalam menulis code CSS, developer dapat menulisakannya dalam tiga cara yakni: 

  1. Inline (langsung dalam elemen HTML) 
  2. Internal (di dalam <style> pada <head>) 
  3. External (file .css terpisah dan paling disarankan) 

HTML dan CSS merupakan fondasi utama dalam pengembangan web. HTML diguanakn untuk menyusun struktur website, sementara CSS memberikan tampilan yang indah, responsif, dan teratur. Developeryang memahami penggunaan HTML, pemisahan struktur dan tampilan, serta penulisan CSS yang efisien dapat menciptakan website yang bukan hanya menarik secara visual, tetapi juga mudah diakses, mudahdimaintain, dan memiliki performa baik. 

References :