Mohon tunggu...
Timothy Geraldo
Timothy Geraldo Mohon Tunggu... Mahasiswa - Mahasiswa

Saya adalah mahasiswa Teknologi Informasi, program studi Teknik Informatika, yang antusias mengembangkan solusi teknologi inovatif. Aktif di seni musik, saya menyeimbangkan logika dan kreativitas.

Selanjutnya

Tutup

Inovasi

Panduan Membuat Website Statis Sederhana dengan HTML dan CSS

4 Desember 2024   21:27 Diperbarui: 4 Desember 2024   21:59 120
+
Laporkan Konten
Laporkan Akun
Kompasiana adalah platform blog. Konten ini menjadi tanggung jawab bloger dan tidak mewakili pandangan redaksi Kompas.
Lihat foto
Inovasi. Sumber ilustrasi: PEXELS/Jcomp

Langkah 3: Menambahkan Gaya dengan CSS

Selanjutnya, kita tambahkan tampilan menarik pada website menggunakan file style.css. Masukkan kode berikut:
/* Atur gaya umum */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* Gaya header */
header {
    background: #4CAF50;
    color: white;
    text-align: center;
    padding: 1rem;
}

/* Gaya navigasi */
nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    background: #333;
    margin: 0;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

/* Gaya konten utama */
main {
    padding: 2rem;
    text-align: center;
}

/* Gaya footer */
footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 1rem;
    position: relative;
    bottom: 0;
    width: 100%;
}

Langkah 4: Menjalankan Website

  1. Simpan kedua file tersebut di folder proyek.
  2. Buka file index.html menggunakan browser dengan klik kanan Open With Pilih browser pilihanmu.

Hasilnya, kamu akan melihat website sederhana dengan:

  • Header hijau dengan teks.
  • Navigasi dengan tautan.
  • Konten utama yang rapi.
  • Footer dengan hak cipta.

HALAMAN :
  1. 1
  2. 2
  3. 3
Mohon tunggu...

Lihat Konten Inovasi Selengkapnya
Lihat Inovasi Selengkapnya
Beri Komentar
Berkomentarlah secara bijaksana dan bertanggung jawab. Komentar sepenuhnya menjadi tanggung jawab komentator seperti diatur dalam UU ITE

Belum ada komentar. Jadilah yang pertama untuk memberikan komentar!
LAPORKAN KONTEN
Alasan
Laporkan Konten
Laporkan Akun