Senin, 20 April 2026

Pengembangan Web Dasar: HTML & CSS untuk Profil Diri

 Dasar HTML dan CSS

“Pernahkah kalian mengunjungi website yang menarik? Apa saja yang membuatnya terlihat rapi, berwarna, dan mudah dibaca?”

 
Di balik tampilan yang memukau itu, terdapat bahasa pemrograman yang bekerja sama untuk menciptakan keajaiban digital. Dua bahasa yang paling dasar dan wajib kamu kuasai adalah HTML dan CSS.

  • Website yang menarik bukan hanya teks dan gambar, tetapi juga hasil kerja sama antara HTML (kerangka) dan CSS (dekorasi).

  • HTML mengatur struktur konten (judul, paragraf, gambar, tautan).

  • CSS mengatur tampilan visual (warna, font, tata letak, efek).

  • Dengan menguasai keduanya, siswa dapat membuat website sendiri, memahami dasar pengembangan web, dan memodifikasi tampilan sesuai keinginan.

jadi HTML dan CSS merupakan dua komponen dasar dalam pengembangan web. Keduanya bekerja sama untuk menghasilkan tampilan website yang tidak hanya berfungsi, tetapi juga menarik secara visual.

Apa itu HTML dan CSS?

HTML (HyperText Markup Language) adalah bahasa yang digunakan untuk membuat struktur dasar sebuah halaman web. Bayangkan HTML seperti kerangka sebuah rumah, yang menentukan letak ruangan, pintu, dan jendela. Dengan HTML, kita bisa membuat judul, paragraf, gambar, tautan, dan elemen-elemen lainnya di halaman web.

CSS (Cascading Style Sheets) berfungsi untuk mempercantik tampilan halaman web yang telah dibuat dengan HTML. Jika HTML adalah kerangka rumah, maka CSS adalah cat, furnitur, dan dekorasi yang membuat rumah terlihat menarik. Dengan CSS, kita bisa mengatur warna, font, ukuran, tata letak, dan efek-efek visual lainnya pada elemen-elemen HTML.

Mengapa Harus Belajar HTML dan CSS?

  • Membuat Website Sendiri: Kamu bisa mewujudkan ide-ide kreatifmu menjadi sebuah website pribadi, portofolio, atau bahkan bisnis online.
  • Memahami Dasar-dasar Web Development: HTML dan CSS adalah fondasi yang kuat untuk mempelajari bahasa pemrograman web lainnya seperti JavaScript.
  • Kustomisasi Tampilan: Kamu bisa mendesain website sesuai dengan selera dan kebutuhanmu tanpa harus bergantung pada template yang sudah jadi.
  • Meningkatkan Keterampilan: Belajar HTML dan CSS akan melatih logika berpikirmu dan kemampuan memecahkan masalah.

Mulai dari Mana?

  1. Text Editor: Pilihlah text editor yang sesuai dengan preferensimu. Beberapa pilihan populer adalah Visual Studio Code, Sublime Text, atau Atom.
  2. Browser: Setiap perubahan kode yang kamu buat akan langsung terlihat di browser. Google Chrome, Mozilla Firefox, dan Microsoft Edge adalah pilihan yang baik.
  3. Belajar Dasar-dasar HTML:
    • Struktur Dasar: Pelajari tag-tag HTML seperti <html>, <head>, <body>, <h1>, <p>, <img>, <a>, dan lain-lain.
    • Atribut: Pahami cara menambahkan atribut pada tag untuk memberikan informasi tambahan, misalnya src untuk gambar, href untuk tautan, dan id untuk identifikasi.
  4. Mengenal CSS:
    • Selector: Pelajari cara memilih elemen HTML yang ingin kamu styling menggunakan selector seperti tag, id, dan class.
    • Property dan Value: Setiap properti CSS memiliki nilai yang berbeda-beda, misalnya color untuk mengatur warna, font-size untuk mengatur ukuran font, dan background-color untuk mengatur warna latar belakang.
  5. Praktik: Cobalah membuat halaman web sederhana dan teruslah berlatih. Semakin sering kamu berlatih, semakin mahir kamu akan menjadi.

HTML (HyperText Markup Language): Tulang Belakang Website

Seperti yang sudah kita bahas, HTML adalah bahasa yang digunakan untuk membuat struktur dasar sebuah halaman web. Bayangkan HTML seperti kerangka sebuah bangunan. Setiap elemen dalam HTML diwakili oleh tag, yang diawali dengan tanda kurung siku (<) dan diakhiri dengan tanda kurung siku (>) seperti <html>, <head>, <body>.

Tag-tag HTML yang Penting:

  • <html>: Tag pembuka dan penutup untuk seluruh dokumen HTML.
  • <head>: Bagian kepala dokumen, berisi informasi tentang halaman seperti judul, meta data, dan link ke file CSS.
  • <body>: Bagian tubuh dokumen, berisi konten yang akan ditampilkan di halaman.
  • <h1> hingga <h6>: Tag untuk membuat judul dengan berbagai tingkat kepentingan.
  • <p>: Tag untuk membuat paragraf.
  • <img>: Tag untuk menyisipkan gambar.
  • <a>: Tag untuk membuat tautan.
  • <ul> dan <ol>: Tag untuk membuat daftar tidak bernomor dan bernomor.
  • <table>: Tag untuk membuat tabel.
  • <div>: Tag untuk membagi konten menjadi bagian-bagian yang lebih kecil.

Atribut:

Atribut memberikan informasi tambahan tentang suatu elemen. Contohnya, atribut src pada tag <img> digunakan untuk menentukan sumber gambar, sedangkan atribut href pada tag <a> digunakan untuk menentukan tujuan tautan.

Struktur dasar HTML yang wajib diketahui:

html
<!DOCTYPE html>
<html>
  <head>
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Ini judul utama</h1>
    <p>Ini paragraf pertama saya.</p>
    <img src="gambar.jpg" alt="deskripsi gambar">
    <a href="https://example.com">Klik tautan ini</a>
  </body>
</html>

Tag penting yang dijelaskan secara fungsional:

  • <html> : sebagai wadah seluruh dokumen.

  • <head> : berisi informasi teknis halaman (judul, meta, link CSS).

  • <body> : semua yang tampak di browser.

  • <h1> sampai <h6> : judul dengan tingkatan (h1 paling besar/penting).

  • <p> : paragraf.

  • <img> : menampilkan gambar (wajib ada atribut src dan alt).

  • <a> : tautan (wajib atribut href).

  • <ul>, <ol>, <li> : daftar tidak berurutan dan berurutan.

  • <div> : pembungkus kelompok elemen untuk memudahkan styling.

Atribut: informasi tambahan pada tag. Contoh:

  • src untuk sumber gambar

  • href untuk tujuan tautan

  • id atau class untuk menandai elemen (sangat berguna untuk CSS)

Latihan singkat (10 menit):
Buat file index.html, tulis struktur dasar lalu tambahkan judul Profil Saya, satu paragraf, satu gambar (gunakan URL gambar dari internet), dan satu tautan ke media sosial.

Tips: buat kamu yang menggunakan Notepad di Windows, simpanlah nama filenya dengan menggunakan tanda petik contoh :"hello-world.html" agar ekstensinya .html, bukan .txt. atau file - Save - file name: hello-world.html -save as type : all file

CSS (Cascading Style Sheets): Hiasan yang Membuat Website Menarik

CSS digunakan untuk mengatur tampilan elemen HTML. Dengan CSS, kamu bisa mengubah warna, ukuran, font, tata letak, dan banyak lagi aspek visual dari halaman webmu.

Cara Kerja CSS:

  1. Selector: Bagian ini digunakan untuk memilih elemen HTML yang ingin kamu gaya.
  2. Property: Bagian ini menentukan aspek yang ingin kamu ubah (misalnya, warna, ukuran font).
  3. Value: Bagian ini menentukan nilai untuk properti tersebut.

Konsep Penting dalam CSS:

  • Specificity: Menentukan gaya mana yang akan diterapkan jika ada beberapa gaya yang bertentangan.
  • Inheritance: Gaya dari elemen induk dapat diwariskan ke elemen anak.
  • Box Model: Setiap elemen HTML dianggap sebagai sebuah kotak yang memiliki margin, border, padding, dan content.
  • Layout: Cara mengatur posisi elemen di halaman menggunakan teknik seperti float, position, dan flexbox.

Praktik Terbaik:

  • Semantik HTML: Gunakan tag HTML sesuai dengan semantiknya, sehingga mesin pencari dan pengguna dapat lebih mudah memahami struktur halaman web.
  • CSS External: Letakkan kode CSS dalam file terpisah (misalnya, style.css) untuk menjaga kerapihan kode dan memudahkan pengelolaan.
  • Responsif Design: Buat website yang dapat menyesuaikan tampilannya dengan berbagai ukuran layar.
  • Validasi: Pastikan kode HTML dan CSS kamu valid menggunakan validator online.

Contoh Sederhana bisa dipraktekkan menggunakan notepad atau html online:

Kode HTML di atas akan membuat halaman dengan judul “Halaman Pertamaku” dan sebuah paragraf. Sedangkan kode CSS akan membuat latar belakang halaman berwarna biru muda dan judul berwarna putih serta berada di tengah halaman.

Tips Belajar Efektif:

  • Belajar secara bertahap: Mulai dari yang paling dasar dan jangan terburu-buru.
  • Banyak berlatih: Praktik membuat proyek kecil adalah cara terbaik untuk mengasah kemampuanmu.
  • Cari referensi: Ada banyak tutorial, kursus, dan komunitas online yang bisa kamu manfaatkan.
  • Jangan takut mencoba: Eksperimen dengan kode yang berbeda dan lihat hasilnya.

Ingin Belajar Lebih Lanjut?

  • Framework CSS: Pelajari framework seperti Bootstrap untuk mempercepat pengembangan website.
  • Preprocessor CSS: Gunakan preprocessor seperti Sass atau Less untuk membuat CSS yang lebih modular dan efisien.
  • JavaScript: Tambahkan interaktivitas pada halaman webmu dengan JavaScript.

Kesimpulan

HTML dan CSS adalah bahasa pemrograman yang sangat penting untuk membangun website dan juga fondasi yang kuat untuk membangun website. Dengan pemahaman yang baik tentang kedua bahasa ini, kamu akan mampu menciptakan halaman web yang menarik, informatif, dan fungsional. Dengan pemahaman yang baik tentang kedua bahasa ini, kamu akan mampu menciptakan halaman web yang menarik dan informatif.

Judul Tugas: Membuat Web Profil Diri

Instruksi:

Buatlah sebuah halaman web sederhana menggunakan HTML dan CSS dengan ketentuan:

🔹 Isi Wajib:

  • Nama lengkap
  • Foto diri (boleh ilustrasi)
  • Deskripsi diri
  • Hobi
  • Kontak (media sosial/email)

🔹 Ketentuan Teknis:

  • Menggunakan minimal 5 tag HTML berbeda
  • Menggunakan CSS untuk:
    • Warna
    • Font
    • Tata letak sederhana
  • File terdiri dari:
    • index.html
    • style.css

LAMPIRAN: Contoh Kode Lengkap (html dan css eksternal)

File index.html

html
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profil Diri - Andi Wijaya</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="card">
        <div class="foto">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Foto Andi">
        </div>
        <div class="info">
            <h1>Andi Wijaya</h1>
            <p class="tagline">Web Developer & Content Creator</p>
            <p>Saya suka membangun website yang berguna dan berbagi ilmu pemrograman. Saat ini fokus belajar front-end dan UI design.</p>
            <div class="skill">
                <span>HTML5</span>
                <span>CSS3</span>
                <span>JavaScript</span>
                <span>React</span>
            </div>
            <div class="social">
                <a href="#">Twitter</a>
                <a href="#">GitHub</a>
                <a href="#">LinkedIn</a>
            </div>
        </div>
    </div>
</body>
</html>

File style.css

css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #0f172a;
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.card {
    max-width: 900px;
    background: white;
    border-radius: 32px;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    box-shadow: 0 25px 45px rgba(0,0,0,0.2);
}

.foto {
    flex: 1;
    background: #3b82f6;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.foto img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 5px solid white;
    object-fit: cover;
}

.info {
    flex: 2;
    padding: 40px;
}

h1 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.tagline {
    color: #3b82f6;
    font-weight: 500;
    margin-bottom: 20px;
    border-left: 4px solid #3b82f6;
    padding-left: 12px;
}

.skill {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 25px 0;
}

.skill span {
    background: #e2e8f0;
    padding: 5px 15px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 500;
}

.social a {
    display: inline-block;
    margin-right: 12px;
    text-decoration: none;
    background: #0f172a;
    color: white;
    padding: 8px 18px;
    border-radius: 40px;
    font-size: 0.85rem;
    transition: 0.2s;
}

.social a:hover {
    background: #3b82f6;
    transform: translateY(-2px);
}

@media (max-width: 700px) {
    .card {
        flex-direction: column;
        text-align: center;
        margin: 20px;
    }
    .tagline {
        border-left: none;
        padding-left: 0;
    }
    .skill {
        justify-content: center;
    }
}

Diposkan oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)