Membangun Website dengan HTML dan CSS

October 20, 2023

Dalam era digital saat ini, kemampuan untuk membuat dan mendesain situs web adalah keterampilan yang sangat berharga. Baik Anda seorang profesional yang ingin membangun situs web untuk bisnis Anda, seorang guru yang ingin membuat sumber belajar online, atau seseorang yang hanya ingin belajar lebih banyak tentang bagaimana web bekerja, memahami HTML dan CSS adalah langkah pertama yang bagus.

HTML (HyperText Markup Language) dan CSS (Cascading Style Sheets) adalah dua bahasa pemrograman dasar untuk pembuatan situs web. HTML digunakan untuk membuat struktur dan konten halaman, sedangkan CSS digunakan untuk mendesain dan mengatur tampilan halaman tersebut.

Dalam artikel ini, kita akan membahas dasar-dasar HTML dan CSS, termasuk elemen dan atribut HTML, serta selektor, properti, dan nilai CSS.

***HTML |* *Hypertext Markup Language***

HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur dasar halaman web. HTML menggunakan berbagai elemen dan atribut untuk mendefinisikan dan mengatur konten web.

Elemen HTML

Elemen HTML didefinisikan oleh tag pembuka dan penutup dengan konten di antaranya. Misalnya,

Elemen HTML didefinisikan oleh tag pembuka dan penutup dengan konten di antaranya. Misalnya, <p>Paragraf ini dibuat dengan HTML.</p>.

Beberapa elemen umum meliputi:

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman</title>
</head>
<body>
    <h1>Selamat Datang di Website Saya</h1>
    <p>Ini adalah paragraf pertama.</p>
    <a href="https://www.example.com">Ini adalah link</a>
    <img src="url_gambar" alt="Deskripsi Gambar">
</body>
</html>

<head>: Berisi informasi meta tentang dokumen, seperti judul.
<title>: Mendefinisikan judul halaman web.
<body>: Berisi konten utama halaman web.
<h1> sampai <h6>: Mendefinisikan judul.
<p>: Mendefinisikan paragraf.
<a>: Membuat hyperlink.
<img>: Menyisipkan gambar.

Atribut HTML

Atribut memberikan informasi tambahan tentang elemen. Misalnya, elemen <img> sering menggunakan atribut src (sumber gambar) dan alt (teks alternatif untuk gambar).

<img src="url_gambar" alt="Deskripsi Gambar">

CSS | Cascading Style Sheet

CSS (Cascading Style Sheets) adalah bahasa stylesheet yang digunakan untuk mendesain tampilan halaman web yang telah dibuat dengan HTML. CSS memungkinkan kita untuk mengatur layout, warna, font, dan efek lainnya pada elemen HTML.

Selector

Selector adalah cara yang digunakan CSS untuk memilih elemen HTML yang akan diberi gaya. Ada beberapa jenis selector dalam CSS, di antaranya:

Type Selector: Memilih elemen berdasarkan jenis elemen. Contoh: p, h1, div.
Class Selector: Memilih elemen berdasarkan atribut class. Contoh: .intro, .highlight.
ID Selector: Memilih elemen berdasarkan atribut id. Contoh: #navbar, #header.
Attribute Selector: Memilih elemen berdasarkan atribut tertentu. Contoh: [src], [href="https://www.example.com"].

Properti

Properti dalam CSS mendefinisikan aspek tampilan yang ingin Anda ubah. Beberapa contoh properti CSS meliputi color, font-size, background-color, margin, padding, border, dan banyak lagi.

Nilai

Nilai adalah pengaturan yang Anda berikan untuk properti tertentu. Misalnya, jika propertinya adalah color, maka nilainya bisa berupa red, blue, #ff0000, rgb(255,0,0), dan sebagainya.

Berikut adalah contoh bagaimana selector, properti dan nilai digunakan dalam CSS:

/* Selector */
p {
    /* Properti : Nilai */
    color: red;
    font-size: 16px;
}

Dalam contoh di atas, selector p akan memilih semua elemen paragraf (<p>) dalam dokumen HTML. Kemudian, properti color dan font-size akan menerapkan gaya teks berwarna merah (red) dan ukuran font 16 piksel (16px) ke elemen tersebut.

Contoh lainnya:

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}

a {
    text-decoration: none;
    color: red;
}

img {
    width: 300px;
    height: auto;
}

Menghubungkan CSS dengan HTML

ada tiga cara untuk menerapkan CSS ke dalam HTML:

Inline Styles: Gaya yang diterapkan langsunng ke elemen HTML menggunakan atribut style.

<p style="color:red;">Ini adalah paragraf dengan teks berwarna merah.</p>
Internal Stylesheet: Blok kode CSS ditempatkan di dalam elemen <style> di dalam <head> dokumen HTML.
```
<head>
    <style>
    body {
        background-color: lightblue;
    }
    </style>
</head>
```
External Stylesheet: File CSS eksternal dihubungkan ke dokumen HTML menggunakan elemen <link>.
```
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
```

Dengan menggunakan HTML dan CSS secara bersamaan, kita dapat membuat halaman web yang struktural dan visual menarik. HTML bertanggung jawab untuk struktur dan konten, sementara CSS mengendalikan desain dan tampilan.

Selamat mencoba!

HTML | Hypertext Markup Language