Ayo Belajar HTML dan CSS

Ditulis oleh Amir - ARTEES.ID diperbarui Mei 18, 2024

Diterbitkan Mei 17, 2024

BSD City - Artees. Ayo Belajar Bareng HTML dan CSS mau, mari pahami dulu Pengertian dan dasar-dasarnya.

HTML (HyperText Markup Language) dan CSS (Cascading Style Sheets) adalah dua teknologi dasar yang digunakan untuk membangun dan merancang halaman web. HTML menyediakan struktur dasar dari halaman web, sementara CSS mengatur gaya dan tata letak.

HTML Struktur Halaman Web

HTML adalah bahasa markup yang digunakan untuk membuat struktur halaman web. Elemen-elemen HTML diwakili oleh tag, seperti `<html>`, `<head>`, `<body>`, `<h1>` hingga `<h6>`, `<p>`, `<a>`, dan masih banyak lagi. Setiap tag memiliki fungsi tertentu. Contoh dasar dari struktur HTML adalah:


<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman</title>
</head>
<body>
    <h1>Selamat Datang di Situs Web Saya</h1>
    <p>Ini adalah paragraf pertama.</p>
    <a href="https://www.example.com">Kunjungi contoh.com</a>
</body>
</html>

CSS Gaya dan Tata Letak

CSS adalah bahasa yang digunakan untuk mendesain dan mengatur tata letak halaman web yang ditulis dengan HTML. Dengan CSS, Anda dapat mengubah warna, font, spasi, dan tata letak elemen HTML. Berikut adalah contoh penggunaan CSS untuk mendesain halaman HTML di atas:


body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    color: #666;
    padding: 10px;
}

a {
    color: #008cba;
    text-decoration: none;
}

Untuk menghubungkan CSS dengan HTML, Anda dapat menambahkan link ke file CSS eksternal di dalam tag `<head>`:


<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

HTML dan CSS adalah dasar dari pengembangan web. HTML memberikan struktur dan konten, sementara CSS memberikan gaya dan tata letak. Keduanya bekerja sama untuk membuat halaman web yang menarik dan fungsional. Dengan menguasai HTML dan CSS, Anda bisa membuat situs web yang tidak hanya informatif tetapi juga menarik secara visual.

Biar lebih mantep lagi kami akan Share Video dari Kelas Komputer Online agar lebih Jelas ya