Apa itu HTML dan CSS

Jika Anda ingin terjun ke dunia blogging atau developer website, HTML dan CSS adalah 2 hal yang sangat penting untuk dipelajari untuk mendesain halaman situs yang Anda miliki.

Tapi, apakah Anda sudah tahu apa itu sebenarnya HTML dan CSS? Mari simak pembahasan berikut ini.

Apa itu HTML dan CSS

HTML adalah kode untuk struktrur halaman web, sedangkan CSS adalah kode untuk menambahkan desain pada struktur tersebut. CSS membutuhkan HTML, sedangkan HTML bisa saja tidak membutuhkan CSS.

Struktur HTML : Elemen, Tag, dan Atrribute

Warna biru adalah elemen HTML, dengan kata lain semua kode yang diantara elemen tersebut bisa disebut sebagai kode HTML. Warna hijau adalah elemen CSS, maka semua kode diantara elemen <style> … </style> adalah kode CSS.

Warna putih adalah elemen pada HTML, yang terdiri dari struktur head dan body. Meski tidak mutlak, dari kode diatas bisa dipahami bahwa umumnya di dalam elemen <head> terdiri dari elemen <style> atau kode CSS, yakni untuk desain. Sementara pada elemen <body> adalah untuk elemen yang memiliki tag dan attribute, atau bersifat kerangka.

Warna kuning adalah tag, dan warna merah adalah attribute. Jadi elemen yang berupa kode < … ></ … >, sedangkan tag dan attribute yang dimasukkan dibagian dalamnya. Fungsinya bisa diketahui sendiri dengan memperhatikan struktur kode diatas dan bagaimana hasil tampilannya ketika dieksekusi pada halaman web.

Attribute CSS: Style dan Class

Mari kita beralih ke kode desain atau CSS. Seperti yang disampaikan sebelumnya, pada umumnya kode CSS disimpan di dalam element <style> yang terdapat di struktur head, yang kemudian memanggil elemen yang sudah dimasukkan dalam struktur body untuk diberikan gaya tampilan yang diinginkan.

Kode tersebut adalah tag h1 dari kode sebelumnya. Tanpa attribute, maka untuk mendesain tag diatas harus melalui kode CSS yang dimasukkan pada elemen <style> dengan memanggil elemen h1.

Untuk cara selanjutnya lebih direkomendasikan, yaitu dengan memberi attribute class pada elemen tersebut yang kemudian dipanggil melalui kode CSS. Silahkan perhatikan lagi kode di bawah ini.

Elemen h1 pada kode diatas tidak lagi memakai attribute style, melainkan class. Attribute class merupakan langkah untuk mendefinisikan kode desain CSS tertentu dengan kata kunci unik. Bisa dilihat attribute class yang dimasukkan adalah “syams”, yang kemudian dipanggil menggunakan .syams di dalam style. Tinggal diberi kode desain saja pada class syams tersebut.

Cara yang ini sangat direkomendasikan untuk di aplikasikan pada banyak bentuk elemen atau tag yang memerlukan desain tertentu.

Penutup

Nah itulah pembahasan singkat tentang HTML dan CSS untuk mempermudah Anda memahami kode HTML dan CSS ketika ingin mengedit atau mendesain suatu halaman website.

Untuk pengenalan lebih dalam, kami akan membahas HTML dan CSS di artikel selanjutnya secara terpisah ya.

Semoga bermanfaat!