Sederhana.co.id Semua Serba Sederhana
Hello Sobat Sederhana! Apakah kamu ingin membuat sebuah website sederhana tapi tidak tahu harus mulai dari mana? Tenang saja, kali ini saya akan membahas step-by-step cara membuat web sederhana menggunakan Sublime Text. Langsung saja kita mulai!
1. Persiapan Awal
Sebelum memulai membuat website, ada beberapa hal yang perlu dipersiapkan terlebih dahulu. Pertama, pastikan kamu sudah menginstall Sublime Text di laptop atau komputer kamu. Jika belum, kamu bisa download installer-nya di website resmi Sublime Text.
Kedua, kamu juga membutuhkan browser untuk melihat hasil dari website yang kamu buat. Browser yang direkomendasikan adalah Google Chrome atau Mozilla Firefox.
Ketiga, pastikan laptop atau komputer kamu terkoneksi ke internet karena kita akan menggunakan beberapa library dari internet untuk mempercantik tampilan website.
Setelah semua persiapan tersebut sudah terpenuhi, maka kita bisa mulai membuat website sederhana.
2. Membuat File HTML
Langkah pertama dalam membuat website adalah membuat file HTML. Caranya cukup mudah, buka aplikasi Sublime Text dan tekan tombol Ctrl+N pada keyboard.
Kemudian, ketikkan kode berikut ini pada file yang baru dibuat:
| Kode HTML |
|---|
| <!DOCTYPE html> <html> <head> <title>Judul Website</title> </head> <body> </body> |
Kode tersebut merupakan dasar dalam membuat file HTML. Jangan lupa untuk memberikan judul pada website kamu dengan mengganti Judul Website pada baris ke-4.
Setelah berhasil membuat file HTML, simpan file tersebut dengan menekan tombol Ctrl+S pada keyboard. Untuk nama file, kamu bisa memberikan nama apa saja yang kamu inginkan, namun pastikan nama filenya berakhiran .html.
3. Membuat Struktur Header
Setelah membuat file HTML, langkah selanjutnya adalah membuat struktur header pada website. Struktur header terdiri dari logo, judul, dan navigasi menu.
Untuk membuat logo, kamu bisa menggunakan gambar logo yang sudah kamu miliki. Letakkan gambar tersebut pada folder yang sama dengan file HTML, kemudian tambahkan kode berikut pada file HTML:
| Kode HTML |
|---|
| <header> <img src=”logo.png” alt=”Logo”> </header> |
Pada kode di atas, logo.png adalah nama file gambar logo kamu. Pastikan file gambar tersebut berada pada folder yang sama dengan file HTML. Jangan lupa juga untuk memberikan alternatif teks pada gambar kamu dengan mengganti Logo pada baris ke-2.
Selanjutnya, tambahkan judul pada website kamu dengan kode berikut:
| Kode HTML |
|---|
| <h1>Judul Website</h1> |
Letakkan kode tersebut tepat setelah tag <header>. Sesuaikan judul dengan nama website kamu.
Terakhir, tambahkan navigasi menu dengan kode berikut:
| Kode HTML |
|---|
| <nav> <ul> <li><a href=”#”>Home</a></li> <li><a href=”#”>Tentang Kami</a></li> <li><a href=”#”>Kontak</a></li> </ul> </nav> |
Letakkan kode tersebut tepat setelah tag <header>. Kode tersebut masih dalam bentuk dummy link (#). Nantinya, kamu bisa menggantinya dengan link yang sesuai dengan halaman website kamu.
4. Membuat Struktur Konten
Setelah membuat struktur header, langkah selanjutnya adalah membuat struktur konten pada website kamu. Struktur konten terdiri dari beberapa bagian seperti banner, artikel, dan footer.
Pertama-tama, tambahkan banner pada website kamu dengan kode berikut:
| Kode HTML |
|---|
| <section id=”banner”> <h2>Selamat Datang di Website Kami</h2> <p>Website ini berisi informasi seputar…</p> </section> |
Kode tersebut akan menampilkan sebuah banner di halaman website kamu. Sesuaikan konten pada banner dengan tujuan website kamu.
Selanjutnya, tambahkan artikel pada website kamu dengan kode berikut:
| Kode HTML |
|---|
| <article> <h3>Judul Artikel Pertama</h3> <p>Isi dari artikel pertama…</p> </article> |
Tambahkan kode di atas sebanyak artikel yang ingin kamu tampilkan pada website kamu. Sesuaikan judul dan isi artikel dengan konten yang kamu inginkan.
Terakhir, tambahkan footer pada website kamu dengan kode berikut:
| Kode HTML |
|---|
| <footer> <p>Copyright © 2021 Nama Kamu</p> </footer> |
Pada kode di atas, ubah Nama Kamu dengan nama kamu atau nama website kamu. Footer akan ditampilkan pada bagian bawah halaman website kamu.
5. Mempercantik Tampilan Website dengan CSS
Setelah berhasil membuat struktur website, langkah selanjutnya adalah mempercantik tampilan website kamu dengan CSS. CSS merupakan bahasa pemrograman yang digunakan untuk mengatur tampilan website seperti warna, font, dan layout.
Buat sebuah file baru pada Sublime Text dengan menekan tombol Ctrl+N pada keyboard. Kemudian, simpan file tersebut dengan nama style.css pada folder yang sama dengan file HTML.
Setelah itu, tambahkan kode berikut pada file style.css:
| Kode CSS |
|---|
| body { background-color: #f2f2f2; } header { #banner { article { article h3 { footer { |
Pada kode di atas, terdapat beberapa pengaturan seperti warna latar belakang, warna teks, ukuran margin, dan sebagainya. Kamu bisa mengubah pengaturan tersebut sesuai dengan keinginan kamu.
Setelah berhasil membuat CSS, hubungkan file CSS tersebut dengan file HTML kamu dengan menambahkan kode berikut di dalam tag <head> pada file HTML:
| Kode HTML |
|---|
| <link rel=”stylesheet” href=”style.css”> |
Setelah itu, simpan kembali file HTML kamu dan buka halaman website tersebut pada browser untuk melihat hasilnya.
FAQ
1. Apa itu Sublime Text?
Sublime Text adalah aplikasi teks editor yang sering digunakan dalam pengembangan web. Aplikasi ini memiliki fitur-fitur yang memudahkan dalam menulis kode seperti highlighting kode, autocompletion, dan lain-lain.
2. Apa itu file HTML?
File HTML adalah file yang berisi kode pemrograman HTML yang digunakan untuk membuat website. HTML merupakan bahasa pemrograman dasar yang digunakan untuk membuat struktur website seperti judul, paragraf, gambar, dan lain-lain.
3. Apa itu CSS?
CSS adalah bahasa pemrograman yang digunakan untuk mengatur tampilan website. Dengan CSS, kamu bisa mengatur warna, font, dan layout halaman website.
4. Apa itu browser?
Browser adalah aplikasi yang digunakan untuk melihat halaman website. Beberapa contoh browser yang sering digunakan adalah Google Chrome, Mozilla Firefox, dan Safari.
5. Apa saja yang perlu dipersiapkan sebelum membuat website?
Sebelum membuat website, kamu perlu mempersiapkan Sublime Text, browser, dan koneksi internet. Selain itu, kamu juga membutuhkan gambar atau konten yang ingin ditampilkan pada website kamu.