HTML dan CSS

3 min readJul 14, 2023

Pada saat kamu mengkases website, browser akan membuat sebuah HTTP(Hypertext Transfer Protocol) ke server. Nah, salah satu hal yang biasa ditransfer melalui HTTP adalah HTML.

HTML

Baiklah kalau begitu, mari kita bahas mengenai HTML. HTML merupakan singkatan dari Hypertext Markup Language. HTML merupakan bahasa yang digunakan untuk menyusun halaman web atau bisa dibilang kerangka webpage.

Mari kita bahas menggunakan contoh dari halaman super sederhana ini.

Halaman di atas dihasilkan dengan kode HTML di bawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Halo dunia</title>
    <link rel="stylesheet" href="./hello.css">
</head>
<body>
    <div class="content">
        <h1 class="content-header">Hello world</h1>
    </div>
</body>
</html>

Pada contoh di atas terdapat beberapa komponen yang ada pada HTML. <!DOCTYPE html> merupakan bagian yang menginformasikan kepada browser jenis dokumen yang akan digunakan. Pada contoh di atas jenis dokumen yang digunakan adalah HTML5.

Selanjutnya adalah element pada HTML. HTML disusun dari berbagai macam element. Yuk kita bahas mengenai bagian dari element pada HTML.

Lanjut bahas element halaman web super simple yang tadi dijadikancontoh.

Pertama adalah html(<html></html>) yang merupakan element pembungkus keseluruhan teks HTML. Segala element lain perlu dituliskan dalam element html ini.

Kemudian ada element head (<head></head>) yang berisi informasi mengenai halaman yang akan ditampilkan. Element head ini juga yang membantu search engine(Google, Bing, Yahoo) serta browser untuk merender halaman. Di dalam element head biasanya akan berisi mengenai metadata, judul, dan berkas CSS. Content pada element title (<title></title>) akan mempengaruhi judul dari halaman(yang ditampilkan pada bagian tab di browser)

Selanjutnya ada element head (<body></body) nantinya akan diproses oleh browser dan ditampilkan kepada user. Pada contoh di atas, browser akan menampilkan element div(<div></div>) dan h1 (<h1></h1>) ke layar pengguna.

Ok, mari lihat tampilan yang dihasilkan jika berkas html tersebut dibuka.

Hasilnya masih belum sesuai dengan yang dicontohkan. Hal ini terjadi karena belum adanya berkas CSS.

CSS

CSS merupakan singkatan dari Cascading Style Sheet. CSS berfungsi untuk mengatur tampilan dari halaman. Jadi mari lihat CSS yang digunakan pada halaman web yang dicontohkan.

.content {
    background-color: blueviolet;
}

.content-header {
    font-size: 70px;
    text-align: center;
    color: aliceblue;
}

Mari bahas mengenai bagian bagian dari CSS.

https://www.w3schools.com/css/img_selector.gif

Untuk mengatur tampilan menggunakan CSS perlu ditentukan terlebih dahulu element mana yang akan diatur tampilannya tampilannya. Selector akan digunakan untuk hal ini. Terdapat banyak jenis selector pada CSS. Beberapa diantaranya adalah

tag-name -> selector terhadap tag
#elementid -> selector terhadap id
.class-name - selector terhadap kelas pada element

Jadi pada contoh CSS di atas file CSS tersebut menggunakan 2 selector, pertama untuk kelas content (.content) dan kedua untuk kelas content-header (.content-header).

Setelah menentukan element mana yang mau diatur selanjutnya mari ubah tampilannya. Pada CSS untuk mengubah tampilan bisa dilakukan dengan mendeklarasikan properti dan nilai yang akan diatur.

Segala properti dan nilai yang mau dideklarasikan perlu dituliskan di dalam kurung kurawal setelah selector. Format yang digunakan pada deklarasi style adalah sebagai berikut.

property1: value1;
property2: value2;

Jadi pada contoh CSS yang sebelumnya kita telah menuliskan aturan terhadap kelas content akan memiliki background berwarna blueviolet.

Kesimpulan

Jadi dengan menggunakan HTML kita dapat membuat struktur dari web dan dengan CSS kita dapat mengatur tampilan halaman web lebih jauh.

HTML dan CSS

HTML

CSS

Kesimpulan

Written by Muhamad Sepryan Astrayesa