Komputer

Cara Membuat Website Sederhana Dengan HTML Dan CSS

By sisitekno #komputer, #teknologi
Cara Membuat Website Sederhana Dengan HTML Dan CSS

Mungkin Anda bertanya-tanya, bagaimana cara membuat website sendiri tanpa harus menguasai bahasa pemrograman yang rumit? Jawabannya terletak pada fondasi pengembangan web: HTML dan CSS. Artikel ini akan memandu Anda langkah demi langkah dalam cara membuat website sederhana dengan HTML dan CSS, memastikan Anda memahami dasar-dasar yang esensial untuk memulai perjalanan Anda di dunia web development.

Mengapa Mempelajari HTML dan CSS?

Sebelum kita melangkah lebih jauh, mari pahami mengapa HTML (HyperText Markup Language) dan CSS (Cascading Style Sheets) adalah titik awal yang sempurna:

Cara Membuat Website Sederhana dengan HTML dan CSS

  1. Fondasi Web: Setiap website yang Anda kunjungi, tidak peduli seberapa kompleksnya, dibangun di atas HTML sebagai strukturnya dan CSS sebagai gayanya.
  2. Kontrol Penuh: Dengan menguasai keduanya, Anda memiliki kendali penuh atas tata letak, konten, dan tampilan visual website Anda.
  3. Mudah Dipelajari: Dibandingkan bahasa pemrograman lain, HTML dan CSS relatif mudah dipahami bagi pemula, memungkinkan Anda melihat hasil kerja Anda secara instan.
  4. Gerbang ke Dunia Pengembangan Web: Ini adalah langkah pertama yang kokoh sebelum Anda menyelami JavaScript, framework, atau backend development.

Persiapan Awal: Alat yang Anda Butuhkan

Untuk memulai membuat website sederhana, Anda hanya memerlukan dua hal utama:

  1. Editor Teks/Kode: Ini adalah tempat Anda akan menulis kode HTML dan CSS. Beberapa pilihan populer yang direkomendasikan untuk pemula adalah:
    • Visual Studio Code (VS Code): Gratis, kaya fitur, dan sangat populer di kalangan developer.
    • Sublime Text: Ringan dan cepat.
    • Notepad++ (untuk Windows) / TextEdit (untuk Mac): Bisa, namun kurang fitur dibandingkan VS Code.
      Kami sangat menyarankan penggunaan VS Code karena dukungan extension dan fitur auto-completion yang membantu.
  2. Browser Web: Seperti Google Chrome, Mozilla Firefox, atau Microsoft Edge. Anda akan menggunakannya untuk melihat hasil pekerjaan Anda.

Langkah 1: Membangun Struktur dengan HTML (The Skeleton)

HTML adalah bahasa markup yang digunakan untuk membuat struktur dan konten halaman web. Bayangkan HTML sebagai kerangka atau tulang belulang dari website Anda.

Struktur Dasar Dokumen HTML

Setiap dokumen HTML memiliki struktur dasar sebagai berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Sederhana Saya</title>
    <!-- Di sinilah kita akan menautkan file CSS nanti -->
</head>
<body>
    <!-- Semua konten yang terlihat oleh pengguna akan berada di sini -->
</body>
</html>

Mari kita bedah bagian-bagian pentingnya:

  • <!DOCTYPE html>: Deklarasi ini mendefinisikan bahwa dokumen ini adalah dokumen HTML5.
  • <html lang="id">: Elemen root dari halaman HTML. Atribut lang="id" menunjukkan bahasa utama konten adalah Indonesia, baik untuk SEO maupun aksesibilitas.
  • <head>: Berisi metadata tentang halaman, seperti judul halaman yang muncul di tab browser (<title>), set karakter (<meta charset="UTF-8">), dan viewport untuk responsivitas (<meta name="viewport">). Konten di dalam <head> tidak terlihat langsung di halaman web.
  • <body>: Berisi semua konten yang akan ditampilkan di browser, seperti teks, gambar, video, dan lain-lain.

Membuat File HTML Pertama Anda (index.html)

  1. Buka editor kode Anda.

  2. Buat file baru dan simpan dengan nama index.html di dalam folder MyWebsite yang telah Anda buat. Nama index.html adalah konvensi standar untuk halaman beranda sebuah website.

  3. Salin dan tempelkan struktur dasar HTML di atas ke dalam file index.html Anda.

  4. Tambahkan beberapa konten sederhana di dalam tag <body>:

    <body>
    <h1>Selamat Datang di Website Sederhana Saya!</h1>
    <p>Ini adalah paragraf pertama di website saya. Saya sedang belajar membuat website dengan HTML dan CSS.</p>
    <a href="https://www.google.com" target="_blank">Kunjungi Google</a>
    <img src="https://via.placeholder.com/150" alt="Gambar Contoh">
    <ul>
        <li>Item Daftar 1</li>
        <li>Item Daftar 2</li>
        <li>Item Daftar 3</li>
    </ul>
</body>
    • <h1>: Judul utama. HTML memiliki h1 hingga h6 untuk hierarki judul.
    • <p>: Paragraf teks.
    • <a>: Tautan (hyperlink). Atribut href menentukan URL tujuan, dan target="_blank" akan membuka tautan di tab baru.
    • <img>: Gambar. Atribut src menentukan lokasi gambar, dan alt adalah teks alternatif jika gambar tidak bisa dimuat (penting untuk SEO dan aksesibilitas).
    • <ul> dan <li>: Daftar tidak berurutan (unordered list).

  5. Simpan file index.html.

  6. Buka file index.html Anda di browser. Anda bisa melakukannya dengan mengklik kanan file tersebut dan memilih "Open with" > browser pilihan Anda, atau cukup seret file index.html ke jendela browser. Anda akan melihat konten Anda, namun tampilannya masih sangat polos.

Langkah 2: Mempercantik dengan CSS (The Skin)

CSS adalah bahasa yang digunakan untuk mengatur tampilan visual dari elemen-elemen HTML Anda. Bayangkan CSS sebagai kulit, warna, dan gaya dari website Anda.

Cara Menautkan CSS ke HTML

Ada tiga cara menautkan CSS, namun yang paling umum dan direkomendasikan adalah external stylesheet.

  1. Buat file baru di dalam folder MyWebsite dan beri nama style.css.

  2. Buka file index.html Anda dan tambahkan baris berikut di dalam tag <head>, tepat di bawah tag <title>:

    <link rel="stylesheet" href="style.css">

    Baris ini memberitahu browser untuk "menghubungkan" file style.css ke halaman HTML ini.

Dasar-dasar CSS: Selektor dan Properti

CSS bekerja dengan memilih elemen HTML dan menerapkan properti gaya padanya.

  • Selektor: Digunakan untuk "memilih" elemen HTML yang ingin Anda gayakan.

    • Selektor Elemen: Memilih semua elemen dengan nama tag tertentu (misalnya body, h1, p).
    • Selektor Kelas (.): Memilih elemen dengan atribut class tertentu (misalnya .container, .button). Ini adalah cara paling fleksibel untuk menerapkan gaya ke banyak elemen.
    • Selektor ID (#): Memilih elemen dengan atribut id tertentu (misalnya #header, #main-content). ID harus unik untuk setiap elemen di halaman.

  • Properti dan Nilai: Setelah memilih elemen, Anda dapat menerapkan berbagai properti CSS (misalnya color, font-size, background-color) dengan nilai tertentu (misalnya red, 16px, #f0f0f0).

Membuat File CSS Pertama Anda (style.css)

Buka file style.css yang telah Anda buat dan tambahkan beberapa gaya sederhana:

/* style.css */

body 
    font-family: Arial, sans-serif; /* Mengatur jenis font untuk seluruh halaman */
    margin: 0; /* Menghilangkan margin bawaan browser */
    background-color: #f4f4f4; /* Warna latar belakang halaman */
    color: #333; /* Warna teks default */


h1 
    color: #0056b3; /* Warna biru untuk judul utama */
    text-align: center; /* Teks rata tengah */
    padding: 20px 0; /* Jarak atas dan bawah */
    background-color: #e0e0e0;


p 
    font-size: 1.1em; /* Ukuran font sedikit lebih besar dari default */
    line-height: 1.6; /* Jarak antar baris teks */
    margin: 0 20px 15px; /* Margin kiri-kanan 20px, bawah 15px */


a 
    color: #007bff; /* Warna biru untuk tautan */
    text-decoration: none; /* Menghilangkan garis bawah tautan */


a:hover 
    text-decoration: underline; /* Munculkan garis bawah saat kursor di atas tautan */


img 
    display: block; /* Membuat gambar menjadi elemen blok */
    margin: 20px auto; /* Pusatkan gambar secara horizontal */
    border: 3px solid #0056b3; /* Tambahkan border biru */
    border-radius: 8px; /* Sudut membulat */


ul 
    list-style-type: square; /* Mengubah bullet point menjadi kotak */
    margin: 20px 0 20px 40px; /* Margin untuk daftar */


li 
    margin-bottom: 8px; /* Jarak antar item daftar */

Simpan file style.css. Sekarang, refresh halaman index.html di browser Anda. Anda akan melihat perubahan signifikan pada tampilan website Anda! Teks akan memiliki font yang berbeda, warna yang menarik, dan gambar akan memiliki border.

Tips Tambahan untuk Website Sederhana Anda

Setelah berhasil membuat website sederhana dengan HTML dan CSS, ada beberapa tips untuk meningkatkan kualitasnya:

  1. Gunakan Komentar: Tambahkan komentar di kode HTML (<!-- Komentar Anda -->) dan CSS (/* Komentar Anda */) untuk menjelaskan bagian-bagian kode. Ini sangat membantu untuk pemahaman di kemudian hari atau jika orang lain membaca kode Anda.
  2. Organisasi Kode yang Rapi: Pertahankan indentasi yang konsisten (spasi atau tab) untuk membuat kode lebih mudah dibaca.
  3. Belajar Selektor CSS Lebih Lanjut: Eksplorasi selektor CSS lainnya seperti selektor turunan (div p), selektor atribut (a[target="_blank"]), dan pseudo-class (:hover, :focus).
  4. Responsivitas (Mobile-Friendly): Untuk website yang terlihat bagus di berbagai ukuran layar (ponsel, tablet, desktop), Anda perlu mempelajari Media Queries di CSS. Ini memungkinkan Anda menerapkan gaya yang berbeda berdasarkan lebar layar.
  5. Validasi Kode: Gunakan validator HTML dan CSS (misalnya W3C Validator) untuk memastikan kode Anda bebas dari kesalahan sintaksis.

Langkah Selanjutnya dalam Perjalanan Web Development Anda

HTML dan CSS adalah fondasi yang kuat, namun dunia pengembangan web jauh lebih luas. Setelah Anda nyaman dengan dasar-dasar ini

By sisitekno

Related Post

Komputer

sisitekno
Komputer

Mengenal Port Komputer: USB Type-C, HDMI, DisplayPort

sisitekno
Komputer

Merakit PC Gaming Hemat Biaya Di Bawah 10 Juta

sisitekno

Leave a Reply

Your email address will not be published. Required fields are marked *

You Missed

Komputer

Komputer

Cara Membuat Website Sederhana Dengan HTML Dan CSS

Komputer

Mengenal Port Komputer: USB Type-C, HDMI, DisplayPort

Komputer

Merakit PC Gaming Hemat Biaya Di Bawah 10 Juta