Cara Membuat Website dengan HTML dan CSS

Sebelum kita membahas teknikal cara membuat website dengan html dan css, ada beberapa tools yang perlu Anda persiapkan terlebih dahulu seperti web browser dan text editor. Dalam tutorial ini kami menggunakan text editor notepad++ dan web browser chrome.

Anda bisa menggunakan tools apapun selain notepad++ dan chrome, dalam tutorial kali ini kami hanya akan membuat website html dan css yang sederhana saja. Kurang lebih tampilan websitenya jika sudah jadi adalah sebagai berikut:Dalam proses pembuatan website dengan html dan css, kami akan menggunakan Bootstrap. Bootstrap adalah perangkat sumber terbuka berupa struktur dasar dokumen html dan css. Dengan Bootstrap Anda akan dengan mudah membuat struktur website yang siap untuk dioptimalkan lebih lanjut.

Intinya dengan bantuan Bootstrap, Anda tidak perlu menerapkan cara membuat website dengan html dari awal. Menarik bukan dan menghemat waktu? Yuk kita langsung mulai membuat website sederhana dengan html dan css.

Membuat Struktur HTML Dasar

Setelah memiliki teks editor, buatlah file HTML baru dengan ekstensi “.html”. Dalam file HTML, Anda perlu menuliskan struktur dasar sebuah halaman web. Berikut contoh struktur dasar HTML:

Selamat Datang di Website Saya!

Ini adalah contoh halaman web.

Dalam contoh di atas, kita memiliki tag sebagai elemen utama. Di dalamnya, terdapat tag yang berisi informasi tentang halaman web, seperti judul halaman, file CSS eksternal, dan file JavaScript eksternal. Bagian utama dari halaman web ditempatkan di dalam tag .

Pengenalan HTML, CSS, dan JavaScript

HTML, CSS, dan JavaScript adalah tiga teknologi utama yang digunakan dalam pembuatan website. HTML (HyperText Markup Language) digunakan untuk membuat struktur dan konten dasar dari sebuah halaman web. CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan dan tata letak elemen-elemen dalam halaman web. Sedangkan JavaScript digunakan untuk memberikan interaksi dan fungsionalitas dinamis pada halaman web.

Dengan menguasai ketiga teknologi ini, Anda dapat membuat website yang menarik dan interaktif. Berikut adalah langkah-langkah untuk memulai:

Cara Membuat Website dengan HTML, CSS, dan JavaScript: Panduan Lengkap untuk Pemula

Sahabat Hostnic! Apa kabar sahabat semua? Semoga sehat selalu. Pada kesempatan ini, kita akan membahas cara membuat website dengan menggunakan HTML, CSS, dan JavaScript. Jika Anda adalah seorang pemula yang ingin mempelajari dasar-dasar pembuatan website, artikel ini akan memberikan panduan lengkap untuk memulai. Mari kita mulai pembahasan lengkapnya.

Pentingnya Tampilan Website Yang Responsive

Website yang responsive bertujuan untuk memberikan pengalaman dan kenyamanan untuk pengguna saat mengakses website kita.

Setelah memahami sedikit penjelasan tentang apa itu makna responsive dan manfaatnya, kita akan mulai dengan materi cara membuat menu navigasi atau navbar yang responsive dengan HTML dan CSS.

Apa manfaat HTML dan CSS

Dengan menguasai HTML dan CSS, kamu akan bisa membuat berbagai macam layout website sesuai kebutuhan pekerjaan atau klien kamu.

Istilah "slicing" adalah mengubah desain yang kamu atau tim designer buat dan menjadikannya kode (HTML dan CSS) sehingga ia bukan lagi sekedar desain, tapi sebuah website yang bisa digunakan oleh banyak orang.

Kamu juga akan membuka pintu pekerjaan yang bernama "front end developer". Sebelum nanti lanjut mempelajari Javascript.

Membuat Navbar Responsive dengan HTML dan CSS

Untuk mengikuti panduan cara membuat navbar responsive dengan HTML dan CSS ini, silahkan teman-teman sediakan sebuah file HTML dan file CSS.

Siapkan file HTML tempat kita akan membuat navbar responsive.

Di sini saya menyiapkan 2 buah file, yaitu :

Membuat Navbar Responsive Dengan Media Query

Langkah selanjutnya kita akan masuk ke proses membuat menu navbar yang responsive.

Sehingga saat dibuka dari perangkat smartphone atau tablet, tampilan navbar kita akan otomatis menyesuaikan desainnya.

Untuk membuat halaman website yang responsive, kita akan sering menggunakan sebuah aturan pada CSS. yaitu @media.

Media query merupakan teknik CSS terbaru yang hadir pada CSS3.

@media adalah aturan dalam CSS yang digunakan untuk membuat gaya tertentu yang hanya berlaku saat diakses dari ukuran layar tertentu juga.

Misal, kita bisa membuat script CSS tertentu yang hanya dijalankan saat halaman website diakses dari ukuran layar laptop, dan juga bisa mengatur suatu script CSS tersebut hanya dijalankan saat diakses dari ukuran layar lain seperti smartphone atau tablet.

Misalnya lagi, kita mau jika warna background website berwarna merah saat diakses dari laptop, dan background nya berubah menjadi kuning jika diakses dari smartphone.

Begitulah kira-kira kegunaan aturan @media di CSS ini.

Jadi bisa mempermudah kita jika kita mau mengatur letak, warna, ukuran font dan desain lainnya saat diakses di berbagai resolusi layar dan perangkat.

Tambahkan script CSS berikut ini pada file style.css.

@media screen and (max-width: 768px) {

display:inline-block;

display: inline-block !important;

Tampilan navbar menjadi lebih rapi karena kita membuat penyesuaian CSS dengan script @media screen and (max-width: 768px) di atas.

Perhatikan pada aturan @media tadi.

Artinya jika halaman website diakses dari layar yang memiliki lebar maksimal 768px, maka :

Maka jadilah tampilan seperti di atas. navbar menjadi lebih ringkas dan rapi.

Coding CSS lainnya yang di atas akan kita bahas juga menurut alur panduan ini, agar lebih mudah dipahami.

Membuat Event Click Pada Menu Navigasi

Langkah selanjutnya, kita akan menampilkan menu saat tombol navigasi diklik.

Agar tombol navigasi bisa menampilkan menu saat di klik, kita harus membuat event dengan javascript.

Kita akan membuat event click() pada tombol menu, script nya bisa kita tulis pada file index.html di atas tag .