Belajar HTML dan CSS dari Asas untuk Bina Website Pertama Anda

HTML (HyperText Markup Language) dan CSS (Cascading Style Sheets) adalah dua bahasa pengaturcaraan yang menjadi asas utama dalam pembangunan laman web. Kedua-duanya memainkan peranan yang berbeza tetapi saling melengkapi untuk mencipta laman web yang berfungsi dengan baik dan menarik secara visual.

Adakah anda faham? Atau masih sedikit keliru? Hahaha...
Mempelajari asas utama HTML dan CSS adalah sangat penting sekiranya anda ingin membangunkan sesebuah laman web. Setelah anda memahami asas HTML dan membuat beberapa percubaan, anda boleh beralih ke langkah seterusnya, sama ada untuk mempelajari pembangunan backend laman web anda.

Namun, sekiranya anda masih baru dalam dunia HTML dan CSS, jangan risau! Anda boleh teruskan membaca dan menguji cara dengan apa yang saya kongsikan ini.

HTML dan CSS ialah dua teknologi utama dalam pembangunan frontend. Kedua-duanya memainkan peranan penting dalam membina serta menggayakan bahagian laman web yang dapat dilihat dan digunakan secara langsung oleh pengguna.

Manakala backend merujuk kepada bahagian laman web atau aplikasi yang berfungsi di belakang tabir. Ia mengendalikan pemprosesan data, logik perniagaan, dan interaksi dengan pangkalan data, biasanya menggunakan pelbagai bahasa pengaturcaraan bergantung kepada pilihan pembangun (developer).

Tetapi dalam artikel ini, saya hanya akan memberi penjelasan tentang HTML dan CSS, atau dengan kata lain, frontend development.

Untuk backend, saya akan terangkan dalam artikel seterusnya atau dalam Bahagian 2 nanti.

Apa Itu HTML?

HTML (HyperText Markup Language) ialah bahasa penanda yang digunakan untuk membina dan menyusun kandungan sesuatu laman web. Ia menentukan struktur asas sesebuah halaman web dengan elemen seperti teks, imej, pautan, butang, dan borang.

HTML bukanlah bahasa pengaturcaraan kerana ia tidak mempunyai fungsi logik seperti pengiraan atau pemprosesan data. Sebaliknya, ia berperanan sebagai rangka utama laman web yang mengatur susunan kandungan secara sistematik menggunakan tag tertentu.

Selain itu, HTML juga memainkan peranan penting dalam SEO (Search Engine Optimization) kerana ia membantu enjin carian memahami struktur kandungan laman web. HTML biasanya digunakan bersama CSS untuk reka bentuk dan JavaScript untuk menambah elemen interaktif.

Secara keseluruhannya, HTML adalah asas utama dalam pembangunan laman web dan merupakan langkah pertama yang perlu dipelajari sebelum mendalami teknologi web lain seperti CSS dan JavaScript.

Contoh:

<!DOCTYPE html>
<html>
<head>
    <title>Laman Web Saya</title>
</head>
<body>
    <h1>Selamat Datang ke Laman Web Saya</h1>
    <p>Ini adalah contoh perenggan.</p>
    <a href="https://www.google.com">Klik di sini untuk ke Google</a>
</body>
</html>

Penjelasan Kod:

Berikut adalah beberapa contoh dan keterangan:

<!DOCTYPE html> Menentukan dokumen ini menggunakan HTML5.
<html> Tag utama yang membungkus keseluruhan kod HTML.
<head> Mengandungi metadata dan tajuk laman web.
<title> Tajuk laman yang dipaparkan pada tab pelayar.
<body> Bahagian utama yang mengandungi teks dan elemen lain.
<h1> Tajuk utama atau heading.
<p> Perenggan teks.
<a> Pautan ke laman lain.

Ini adalah asas HTML yang belum sempurna, saya hanya memberi contoh asas html, untuk penambahan meta data dan lain-lain kita akan bincangkan di article bab SEO.

Apa Itu CSS?

CSS (Cascading Style Sheets) ialah bahasa gaya yang digunakan untuk mengawal reka bentuk dan susun atur laman web. Dengan CSS, anda boleh mengubah warna, jenis fon, saiz teks, jarak antara elemen, serta mengawal kedudukan dan animasi sesuatu objek di dalam laman web.

CSS berfungsi bersama HTML dengan memberikan gaya kepada elemen-elemen yang telah dibina. Ini membantu dalam mencipta laman web yang lebih menarik, kemas, dan responsif tanpa perlu mengubah struktur HTML itu sendiri.

Terdapat tiga cara utama untuk menggunakan CSS dalam laman web:

Penjelasan CSS:

Inline CSS – Gaya digunakan terus dalam elemen HTML.
Internal CSS – Gaya ditulis dalam bahagian <style> di dalam fail HTML.
External CSS – Gaya ditulis dalam fail berasingan dengan sambungan .css dan dipautkan ke HTML.

CSS juga menyokong media queries, yang membolehkan reka bentuk laman web berubah mengikut saiz skrin pengguna, menjadikannya lebih responsif untuk pelbagai peranti seperti telefon pintar, tablet, dan komputer.

Secara keseluruhannya, CSS adalah elemen penting dalam pembangunan laman web kerana ia membantu mencipta pengalaman pengguna yang lebih baik dengan reka bentuk yang lebih profesional dan mesra pengguna.

Contoh CSS

Berikut adalah contoh CSS asas yang biasanya akan di gunakan di sesebuah webiste

/* Warna latar belakang dan teks utama */
body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
    color: black;
    margin: 0;
    padding: 0;
}

/* Gaya untuk tajuk utama */
h1 {
    color: darkblue;
    text-align: center;
    font-size: 28px;
    margin-top: 20px;
}

/* Gaya untuk perenggan */
p {
    font-size: 16px;
    line-height: 1.5;
    text-align: justify;
    margin: 10px 20px;
}

/* Pautan (link) */
a {
    color: red;
    text-decoration: none;
}

a:hover {
    color: green;
    text-decoration: underline;
}

/* Butang */
button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    display: block;
    margin: 20px auto;
}

button:hover {
    background-color: darkblue;
}

/* Layout menggunakan Flexbox */
.container {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.box {
    width: 45%;
    background-color: lightgray;
    padding: 20px;
    text-align: center;
}

/* Responsif untuk skrin kecil */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        align-items: center;
    }

    .box {
        width: 100%;
    }
}

Berikut adalah beberapa penjelasan ringkas mengenai HTML dan CSS.

Menggunakan HTML dan CSS Secara Bersama.

Sekarang, kita akan menggabungkan HTML dan CSS dalam satu projek untuk melihat bagaimana kedua-duanya berfungsi bersama.

Ada beberapa cara untuk memanggil css atau memasukan css dalam kod html, berikut

External CSS (CSS Luaran)

Kaedah ini menggunakan fail .css berasingan dan dipanggil dalam fail HTML menggunakan tag

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

Internal CSS (CSS Dalaman)

Kod CSS ditulis dalam tag <style> di dalam fail HTML itu sendiri.

<head>
    <style>
        body {
            background-color: lightblue;
            font-family: Arial, sans-serif;
        }
    </style>
</head>

Setiap kaedah mempunyai kegunaan tersendiri, tetapi penggunaan External CSS lebih disarankan untuk mengurus gaya dengan lebih teratur.

Contoh HTML & CSS

<!DOCTYPE html>
<html lang="ms">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laman Web Contoh</title>
<style>
/* Warna latar belakang dan teks utama */
body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
    color: black;
    margin: 0;
    padding: 0;
}

/* Gaya untuk tajuk utama */
h1 {
    color: darkblue;
    text-align: center;
    font-size: 28px;
    margin-top: 20px;
}

/* Gaya untuk perenggan */
p {
    font-size: 16px;
    line-height: 1.5;
    text-align: justify;
    margin: 10px 20px;
}

/* Pautan (link) */
a {
    color: red;
    text-decoration: none;
    display: block;
    text-align: center;
    margin: 10px 0;
}

a:hover {
    color: green;
    text-decoration: underline;
}

/* Butang */
button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    display: block;
    margin: 20px auto;
}

button:hover {
    background-color: darkblue;
}

/* Layout menggunakan Flexbox */
.container {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.box {
    width: 45%;
    background-color: lightgray;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
}

/* Responsif untuk skrin kecil */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        align-items: center;
    }

    .box {
        width: 100%;
        margin-bottom: 10px;
    }
}
</style>
</head>
<body>

    <h1>Selamat Datang ke Laman Web Saya</h1>

    <p>Laman web ini merupakan contoh bagaimana HTML dan CSS boleh digabungkan untuk menghasilkan reka bentuk yang menarik dan responsif.</p>

    <a href="#">Klik di sini untuk maklumat lanjut</a>

    <button>Klik Saya</button>

    <div class="container">
        <div class="box">
            <h2>Bahagian 1</h2>
            <p>Ini adalah contoh bahagian pertama menggunakan Flexbox.</p>
        </div>
        <div class="box">
            <h2>Bahagian 2</h2>
            <p>Ini adalah contoh bahagian kedua yang berada di sebelah kanan.</p>
        </div>
    </div>

</body>
</html>

Untuk ouitput anda boleh cek dalam codepen https://codepen.io/Nazz-Ren/pen/dPyGLBJ

Perlu anda ketahui dan fahami tentang HTML

Dalam HTML, setiap elemen harus ditutup dengan tag penutup (closing tag) menggunakan garis miring (/). Berikut adalah penjelasan untuk masing-masing elemen yang ditutup dengan / dalam penutup tag:

<div> - </div> Elemen <div> digunakan sebagai container atau pembungkus untuk mengelompokkan elemen-elemen lain dalam sebuah halaman web.

Harus ditutup dengan </div> agar struktur HTML tetap valid.

<p> - </p> - Elemen <p> digunakan untuk menandai paragraf teks dalam HTML.

Harus ditutup dengan </p>, jika tidak, teks setelahnya bisa dianggap masih bagian dari paragraf tersebut.

<h1> - </h1> Elemen <h1> digunakan untuk judul utama dalam halaman web (heading level 1).

Harus ditutup dengan </h1>, jika tidak, seluruh teks di bawahnya bisa dianggap bagian dari judul.

<span> - </span> Elemen <span> adalah elemen inline yang digunakan untuk membungkus teks atau elemen lain tanpa mengubah tata letak.

Harus ditutup dengan </span>, jika tidak, elemen setelahnya bisa terkena efek styling yang sama.

<dt> - </dt> Elemen <dt> digunakan dalam elemen <dl> (Definition List) untuk mendefinisikan istilah atau judul yang akan dijelaskan dalam <dd>.

Harus ditutup dengan </dt> agar struktur daftar definisi tetap valid.

Semua elemen di atas adalah elemen berpasangan yang membutuhkan tag pembuka dan tag penutup agar HTML tetap valid dan terstruktur dengan baik.

Penutup

Sebagai kesimpulan, HTML (HyperText Markup Language) dan CSS (Cascading Style Sheets) adalah dua elemen asas dalam pembangunan laman web.

HTML berfungsi sebagai struktur utama laman web dengan menggunakan elemen-elemen seperti tajuk, perenggan, imej, pautan, dan sebagainya.
CSS pula digunakan untuk memperindah laman web dengan menetapkan warna, saiz teks, susun atur, dan elemen visual lain agar kelihatan lebih menarik dan responsif.

Dengan menguasai HTML dan CSS, anda dapat membina laman web yang tersusun, kemas, dan sesuai untuk pelbagai peranti. Semoga penjelasan ini membantu dalam memahami asas pembangunan web!