HTML dan CSS

Untuk membuat website, langkah pertama yang perlu kita kuasai adalah HTML, CSS. di tutorial kali ini saya tidak akan membahas secara detail apa itu HTML dan CSS. jadi mungkin pada postngan yang lain saya akan mencoba membahasnya. baik ayo kita mulai tutorial ini dengan mempelajari dasar-dasar dari 2 bahasa pemrogramman ini yang akan membantu kamu membangun situs web yang fungsional dan menarik!.

Persiapkan text editor seperti Visual Studio Code, Notepad++ dan yang sejenisnya, dan browser (Google Chrome, Mozilla Firefox, Safari dll) untuk membuka halaman website yang akan dibuat

1. HTML: Struktur Dasar Website

HTML (HyperText Markup Language) adalah bahasa dasar yang digunakan untuk membuat kerangka dan struktur sebuah situs web. Dengan HTML, Anda dapat menentukan elemen-elemen seperti teks, gambar, tautan, dan lainnya.

Contoh Kode HTML Sederhana:


<!DOCTYPE html>
<html>
<head>
    <title>Website Pertama Saya</title>
</head>
<body>
    <h1>Selamat Datang diwebsite Saya</h1>
    <p>Ini adalah halaman web pertama saya yang menggunakan HTML.</p>
</body>
</html>
</code>

Dalam contoh di atas:

  • <!DOCTYPE html> mendefinisikan dokumen sebagai HTML5.
  • adalah elemen root dari halaman HTML.
  • berisi metadata, seperti judul halaman (<title>).
  • berisi konten yang akan ditampilkan di halaman web, seperti heading (<h1>) dan paragraf (<p>).

2. CSS: Menambahkan Gaya dan Tampilan

CSS (Cascading Style Sheets) digunakan untuk mempercantik tampilan situs web Anda. CSS memungkinkan Anda untuk menambahkan warna, tata letak, dan gaya lainnya ke elemen HTML.

Contoh Kode CSS Sederhana:


<!DOCTYPE html>
<html>
<head>
    <title>Website Pertama Saya</title>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
            text-align: center;
        }
        p {
            font-family: Arial, sans-serif;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Selamat Datang diwebsite Saya</h1>
    <p>Ini adalah halaman web pertama saya yang menggunakan HTML.</p>
</body>
</html>

Dalam contoh di atas, CSS digunakan untuk:

  • Mengatur warna latar belakang halaman (background-color).
  • Mengatur warna teks dan perataan heading (<h1>).
  • Mengatur jenis font dan ukuran teks pada paragraf (<p>).

3. Menggabungkan HTML dan CSS

Dengan menggabungkan ketiga teknologi ini, Anda bisa membuat website yang tidak hanya menarik secara visual tetapi juga fungsional dan interaktif. Berikut adalah contoh sederhana yang menggabungkan HTML dan CSS:

Contoh Kode Kombinasi:


<!DOCTYPE html>
<html>
<head>
    <title>Website Pertama Saya</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #333;
            text-align: center;
            margin-top: 50px;
        }
        p {
            color: #666;
            text-align: center;
        }
        .date-time {
            color: #000;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Selamat Datang diwebsite Saya</h1>
    <p>Ini adalah halaman web pertama saya yang menggunakan HTML dan CSS</p>
</body>
</html>

Dalam contoh di atas, kita membuat halaman yang:

  • Menggunakan HTML untuk struktur dasar.
  • Menggunakan CSS untuk styling.

Kombinasi HTML dan CSS ketika dibuka di Browser Google Chrome

Mulailah dengan langkah-langkah sederhana ini untuk membangun website. Dengan memahami dasar-dasar HTML dan CSS, Anda akan memiliki fondasi yang kuat untuk mengembangkan keterampilan web development Anda. Teruslah berlatih dan eksplorasi lebih dalam untuk menciptakan situs web yang lebih kompleks dan menarik!


Ingin berdiskusi lebih lanjut tentang topik ini? Bergabunglah dengan grup Telegram Komunitas #TukangBikinWeb, klik link dibawah ini, dan jangan lupa support blog ini dengan klik tombol Trakteer yang berwarna merah dibawah ya, terima kasih