Berikut tutorial singkat tentang cara membuat website sederhana:
Membuat Website Sederhana: Langkah Demi Langkah
Tutorial ini akan memandu Anda dalam membuat website sederhana dari nol. Kita akan menggunakan HTML untuk struktur, CSS untuk tampilan, dan mungkin sedikit JavaScript untuk interaksi (opsional).
1. Persiapan
Anda hanya memerlukan:
* Teks Editor: Notepad (Windows), TextEdit (Mac), Sublime Text, VS Code, atau teks editor lainnya. * Browser: Chrome, Firefox, Safari, atau browser pilihan Anda.
2. Membuat Struktur HTML (index.html)
Buka teks editor Anda dan ketik kode berikut, lalu simpan sebagai `index.html`:
<!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> <link rel="stylesheet" href="style.css"> <!-- Hubungkan ke file CSS --> </head> <body> <header> <h1>Selamat Datang di Website Saya!</h1> <nav> <a href="#">Beranda</a> <a href="#">Tentang Saya</a> <a href="#">Kontak</a> </nav> </header> <main> <p>Ini adalah contoh website sederhana yang dibuat menggunakan HTML dan CSS.</p> </main> <footer> <p>© 2023 Website Sederhana</p> </footer> </body> </html>
Penjelasan:
- `<!DOCTYPE html>`: Mendeklarasikan bahwa ini adalah dokumen HTML5.
- `<html lang=”id”>`: Elemen root HTML dengan bahasa Indonesia.
- `<head>`: Berisi metadata website (judul, charset, tautan ke CSS).
- `<title>`: Menentukan judul website yang muncul di tab browser.
- `<link rel=”stylesheet” href=”style.css”>`: Menghubungkan file HTML ke file CSS (`style.css`).
- `<body>`: Berisi konten website yang akan ditampilkan (header, main, footer).
- `<header>`: Bagian atas website (judul, navigasi).
- `<h1>`: Judul utama website.
- `<nav>`: Menu navigasi.
- `<a href=”#”>`: Tautan (link).
- `<main>`: Konten utama website.
- `<p>`: Paragraf teks.
- `<footer>`: Bagian bawah website (hak cipta, informasi kontak).
3. Memberi Gaya dengan CSS (style.css)
Buat file baru dengan nama `style.css` di folder yang sama dengan `index.html`. Ketik kode berikut:
body { font-family: sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; } header { background-color: #333; color: white; padding: 1em; text-align: center; } nav a { color: white; text-decoration: none; padding: 0.5em 1em; } main { padding: 2em; } footer { background-color: #333; color: white; text-align: center; padding: 1em; }
Penjelasan:
* `body`: Gaya untuk seluruh badan dokumen. * `header`: Gaya untuk bagian header. * `nav a`: Gaya untuk tautan di dalam navigasi. * `main`: Gaya untuk konten utama. * `footer`: Gaya untuk bagian footer.
4. Membuka Website
Buka file `index.html` dengan browser Anda. Anda akan melihat website sederhana dengan tampilan dasar.
5. Pengembangan Lebih Lanjut
Ini hanyalah dasar. Anda bisa menambahkan lebih banyak konten, gambar, dan interaksi dengan JavaScript. Pelajari lebih lanjut tentang HTML, CSS, dan JavaScript untuk membuat website yang lebih kompleks dan menarik.
1000×498 tutorial projects arrea systems from arrea-systems.com 
1242×2208 tutoriel from colos.airbus.helicopters.ouacom.com 
700×700 tutos from anycreations.centerblog.net 
1000×806 des tutoriels abordables fairweb from www.fairweb.fr 
