Belajar Dasar - Dasar HTML dan CSS

Halo sobat Artikel Multimedia, postingan kali ini berisi materi tentang pengenalan HTML dan CSS serta hubungan antar keduanya. Sebagian sobat mungkin sudah pernah mendengar tentang HTML ataupun CSS, bagi sobat yang belum pernah dan ingin tahu, kita akan membahas nya di sini.

HTML (HyperText Markup Language) merupakan bahasa markup yang pada dasarnya digunakan untuk membuat struktur dan konten dari sebuah halaman website. HTML berguna untuk menyusun elemen-elemen seperti judul, paragraf, gambar, tautan (link), tabel, formulir (form).

Berikut contoh struktur dasar HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Halaman Web Saya</title>
</head>
<body>
    <h1>Selamat Datang!</h1>
    <p>Ini adalah contoh halaman web sederhana saya.</p>
    <img src="image01.jpg" alt="Contoh Gambar">
</body>
</html>

Fungsi utama dari HTML, yaitu:

Menentukan struktur dokumen website.
Menyediakan kerangka untuk semua elemen website.
Menjadi ruang bagi css untuk mengatur tampilan (styling) halaman.

Sedangkan CSS (Cascading Style Sheets) merupakan bahasa yang digunakan untuk mengatur bentuk tampilan (style) dari elemen-elemen HTML. CSS mengontrol aspek visual seperti warna, ukuran tulisan (font), tata letak, marging, padding, dan border, serta animasi dan efek transisi pada halaman website.

Berikut contoh penulisan CSS:

h1 {
color: blue;
font-size: 36px;
}

p {
color: gray;
line-height: 1.5;
}

HTML dan CSS memiliki hubungan saling melengkapi satu sama lain untuk bekerja sama dalam membuat halaman website yang menarik dan terstruktur. Hubungan antar keduanya dapat diilustrasikan dengan perumpamaan HTML sebagai kerangka/tulang (struktur) dan CSS sebagai kulit/pakaian (tampilan).

Berikut contoh gabungan antar HTML dan CSS:

<!DOCTYPE html>
<html>
<head>
<title>Contoh Integrasi HTML dan CSS</title>
<style>
    body {
      background-color: #f0f0f0;
      font-family: Arial;
    }
    h1 {
      color: blue;
    }
</style>
</head>
<body>
<h1>Selamat Datang!</h1>
<p>Ini adalah halaman web saya.</p>
</body>
</html>

Adapun cara untuk menghubungkan HTML dan CSS dibagi menjadi 3 cara, yaitu:

1. Inline CSS: Caranya ditambahkan langsung dalam tag HTML.

<p style="color: blue;">Teks berwarna biru</p>

2. Internal CSS: Caranya ditambahkan di dalam tag <style> yang masih berada di dalam tag <head> seperti berikut.

3. External CSS: Cara ini dilakukan dengan membuat file HTML dengan file CSS secara terpisah. Sehingga pada saat style dari file css ini ingin digunakan maka harus ditambahkan tag link pada HTML seperti berikut untuk memanggilnya.

Sekian penjelasan singkat mengenai HTML dan CSS, jika sobat tertarik dengan materi terkait multimedia silakan kunjungi postingan kami lainnya di blog ini. Terima kasih ...