Cara Membuat Web Sekolah Dengan Html Dan Css
Mengisi Bagian Header, Main, dan Footer
Kini saatnya untuk mengisi bagian header, main, dan footer sesuai dengan desain dan wireframe yang sudah dibuat sebelumnya.
Buat file baru dan beri nama file ini “style.css”. File ini fungsi untuk mengatur tampilan website kamu nantinya.
Untuk menghubungkan file HTML dan CSS, masukkan kode berikut pada bagian head:
Setelah itu, kamu dapat mulai menulis kode CSS untuk mengatur tampilan elemen-elemen pada website kamu.
Selamat! Kamu telah berhasil membuat website pribadi dengan HTML dan CSS. Sekarang, kamu bisa mencoba eksplorasi lebih jauh dengan menambahkan konten atau mengubah style pada website kamu. Semoga artikel ini membantu dan selamat mencoba!
Membuat website bisa menjadi tugas yang cukup menantang, terutama bagi mereka yang baru saja mulai belajar tentang pemrograman web. Namun, dengan pemahaman dasar tentang HTML, CSS, dan JavaScript, kamu bisa membuat website sederhana sendiri. Artikel ini akan membahas tentang cara membuat web dengan HTML, CSS, dan JavaScript.
Download Template HTML dan CSS Bootstrap
Dalam panduan cara membuat website dengan html ini kita akan menggunakan salah satu template dari Start Bootstrap. Tenang, template yang digunakan gratis dan mudah untuk dioptimalkan serta dirancang dengan sangat baik.
Yuk kita download terlebih dahulu templatenya.
Langkah 1: Buka website startbootstrap.com untuk mendapatkan template html dan css Start Bootstrap secara gratis dan bebas digunakan.
Langkah 2: Klik Browse Template & Themes.
Langkah 3: Pilih salah satu template sesuai kebutuhan Anda, dalam demo ini kami memilih template Creative karena gratis dan cukup simple jika dilihat dari tampilan yang ada.
Langkah 4: Kemudian klik Free Download dan simpan filenya di lokasi yang mudah ditemukan.
Langkah 5: Setelah selesai di download, buka file tersebut dan pindahkan isinya ke direktori utama akun hosting website Anda. Sebagai permulaan, Anda bisa menggunakan web hosting murah untuk percobaan menerapkan cara membuat website dengan html ini.
Langkah 6: Setelah selesai dipindahkan, buka file tersebut. Caranya klik dua kali di file Index.html dan nantinya akan terbuka di browser chrome yang Anda gunakan.
Selanjutnya kita lanjutkan ke pembahasan selanjutnya.
Menambahkan Style dengan CSS
Setelah membuat struktur dengan html, kita bisa menambahkan style untuk mempercantik tampilan website kita. Untuk itu, buatlah file baru dengan ekstensi .css. Lalu, hubungkan file css tersebut dengan file html dengan menggunakan tag di bagian
html.Di file .css tersebut, kita bisa menambahkan berbagai style sesuai kebutuhan.
Buat File: index.html
Copy dan Pastekan kode dibawah ini kedalam file yang telah dibuat.
Membuat Struktur Dasar dengan HTML
Pertama, kita harus membuat struktur dasar dari website kita. Buat file baru dengan ekstensi .html dan mulai dengan html dasar seperti contoh berikut:
Struktur di atas adalah struktur dasar dari suatu website. Kamu bisa menambahkan konten ke dalam tag
.Langkah Kedua: Aplikasikan CSS
Setelah kamu membuat struktur HTML, selanjutnya adalah CSS. Kamu dapat menambahkan kode CSS kedalam file HTML anda dengan menggunakan tag