Bagian ini berisi informasi kontak sekolah…

© 2024 Website Sekolah XYZ

Dengan struktur dasar ini, kamu sudah bisa membuat halaman website dengan bagian-bagian seperti header, nav, section, dan footer.

Cara Membuat Website Sekolah dengan HTML

Sebelum memulai penulisan kode HTML, ada beberapa hal yang perlu kamu persiapkan. Pertama-tama, kamu harus tahu apa saja elemen yang biasanya ada dalam sebuah website sekolah, seperti informasi tentang sekolah, program pendidikan, dan kontak. Selain itu, siapkan juga gambar-gambar atau media lain yang akan ditampilkan di website, seperti foto sekolah atau logo.

Setelah semua persiapan selesai, kamu siap untuk mulai menulis kode! Website sekolah yang sederhana sebenarnya tidak memerlukan banyak hal yang rumit, kok. Cukup dengan HTML, kamu sudah bisa membuat website yang cukup informatif dan mudah dinavigasi oleh pengunjung.

Peralatan yang Dibutuhkan untuk Membuat Website

Untuk membuat website sederhana dengan HTML, kamu hanya membutuhkan beberapa alat dasar yang semuanya bisa diakses secara gratis. Pertama, kamu butuh teks editor seperti Notepad di Windows atau TextEdit di Mac. Jika kamu ingin teks editor yang lebih canggih, bisa juga menggunakan Visual Studio Code atau Sublime Text yang memiliki banyak fitur tambahan untuk memudahkan penulisan kode.

Selanjutnya, kamu butuh browser seperti Google Chrome, Firefox, atau Edge untuk melihat hasil dari kode HTML yang kamu tulis. Itulah alat-alat dasar yang kamu perlukan untuk memulai. Setelah itu, kamu bisa langsung mulai menulis kode!

Sekarang, kita masuk ke bagian teknis: bagaimana sebenarnya HTML disusun? Setiap halaman web yang dibuat dengan HTML memiliki struktur dasar yang harus diikuti. Pada dasarnya, struktur ini terdiri dari beberapa elemen penting:

Halo Dunia!

Ini adalah paragraf pertama saya di website HTML saya.

Dalam contoh di atas, kita punya beberapa elemen kunci seperti , yang memberitahu browser bahwa ini adalah dokumen HTML, serta , , dan . Elemen-elemen ini membantu menyusun halaman agar tampil dengan benar di browser.

Pengertian CSS dan Fungsinya

Sedangkan CSS merupakan kependekan dari Cascading Style Sheets, yaitu bahasa yang dipakai untuk menentukan bagaimana halaman web akan ditampilkan, elemen-elemen di dalamnya seperti apa, serta style desain web akan bagaimana.

CSS lah yang membuat tampilan website jadi atraktif dan menarik. CSS ini bukan bahasa pemrograman, lebih tepatnya disebut dengan bahasa style sheet. Namun selain berfungsi mengatur tampilan halaman web yang berbasis HTML, CSS juga memiliki fungsi lain.

Mulai dari mempercepat waktu loading website, menawarkan banyak variasi tampilan web, mempermudah mengelola kode, dan membuat tampilan website rapi di ukuran layar yang berbeda.

Sebelumnya disebut mengenai mengelola kode, karena pada bahasa CSS ini yang dipakai memang sebuah kode.

Tidak seperti HTML yang menggunakan serangkaian tag dan ditulis berulang untuk halaman yang berbeda. Pada CSS Anda cukup menuliskan kode untuk mengubah tampilan web keseluruhan.

Dalam membuat website Anda perlu menguasai HTML dan CSS. Setelah memahami cara menggunakannya, Anda bisa membuat jenis website apapun, misalnya company profile, portofolio, ataupun blog pribadi.

Membuat Daftar (List)

Selain teks dan gambar, kamu juga bisa menambahkan daftar ke dalam website. HTML menyediakan dua jenis daftar, yaitu daftar berurutan (ordered list) dan daftar tidak berurutan (unordered list).

Untuk membuat daftar berurutan, gunakan elemen

dan
1. :
   1. Pertama
   2. Kedua
   3. Ketiga

   Sedangkan untuk daftar tidak berurutan, kamu bisa menggunakan elemen

   :
   • Pertama
   • Kedua
   • Ketiga

   Mengupload Website ke Internet

   Setelah website kamu selesai dibuat, langkah selanjutnya adalah meng-upload-nya ke internet agar bisa diakses oleh orang lain. Kamu bisa menggunakan layanan hosting gratis seperti GitHub Pages atau Netlify. Kedua layanan ini memungkinkan kamu mengunggah website HTML secara gratis.

   Kamu cukup membuat akun, mengunggah file HTML, dan dalam beberapa menit, website kamu akan live di internet!

   Sesuaikan Desain Web HTML dan CSS

   Setelah Anda selesai download template html dan css yang nanti akan kita gunakan sebagai desain utama website, saatnya kita lakukan modifikasi bagian beranda terlebih dahulu. Karena nantinya di template yang sudah kita download, ada beberapa bagian yang akan kita hapus dan disesuaikan dengan sketsa yang sudah kita buat dalam demo ini.

   Ikuti saja langkah-langkah di bawah ini ya untuk mengetahui cara membuat website dengan html dan css yang mudah dan cepat.

   Langkah 1: Pertama kami sarankan untuk membuat terlebih dahulu sketsa kasar untuk desain website yang akan di buat.

   Dalam panduan ini, kami akan membuat halaman website yang simple isinya tentang profil Anda. Kurang lebih jika kita lihat sketsa di atas, minimal halaman websitenya ada menu navigasi, full headline yang ada di bawah menu, konten utama tengah dan footer.

   Langkah 2: Buka file index.html, kita tentukan bagian yang akan dihapus dan bagian yang akan kita pakai. Sekarang mari kita pelajari setiap baris demi baris yang ada di file index.html dan hapus beberapa baris yang tidak diperlukan, simak penjelasannya ada di bawah ini sebagai petunjuk baris mana yang perlu Anda hapus.

   Langkah 3: Sekarang kita akan ubah sedikit kode di bagian comment . Perhatikan kode html untuk about di bawah ini:

   Pada bagian dua baris pertama tersebut diubah menjadi kode di bawah ini:

   Baris tag 

   ,

   ---

   dan kode  Get Started! juga kita hapus karena tidak dibutuhkan, jadi kode akan berubah menjadi seperti ini:

   Langkah 4: Simpan perubahan dan cek dengan menggunakan browser chrome, jika hasilnya seperti di bawah ini maka proses modifikasi telah berhasil.

   Langkah 5: Kita buat warnanya berubah menjadi warna putih, caranya hapus bagian kode bg-primary di dalam 

   tag utama.

   Semula kodenya seperti ini:

   Isi teks disini

   Setelah bagian bg-primary (ditandai dengan bold) dihapus, kodenya akan menjadi seperti di bawah ini:

   Isi teks disini

   Langkah 6: Sekarang kita akan menambahkan beberapa paragraf, karena halaman website yang kita buat ini untuk halaman personal jadi kita tambahkan paragraf yang sesuai dengan profile personal yang ingin diperkenalkan melalui halaman ini.

   Ganti Isi teks disini dengan teks versi Anda sendiri!

   Panjang teks yang bisa Anda tambahkan sesuai dengan kebutuhan Anda, teks diatas hanya contoh saja dalam demo ini.

   Langkah 7: Setelah menambahkan teks, langkah selanjutnya adalah menambahkan gambar. Karena website yang kita buat bertujuan untuk memperkenalkan profil, maka perlu ditambahkan gambar foto profil.

   Caranya dengan menambahkan kode di bawah ini:

   

   Setelah ditambahkan, berikut tampilan kode secara lengkapnya.

   Catatan: Nama file image, sesuaikan dengan file image yang Anda gunakan.

   Langkah 8: Selanjutnya kita akan memodifikasi bagian portfolio, Karena website yang kita buat untuk seorang freelancer SEO Content Writer Tech, kita akan menambahkan link yang bisa di klik. Kode untuk bagian Portfolio adalah sebagai berikut:

   Category bisa diganti menjadi nama kliennya.

   Project Name bisa diganti dengan nama project yang pernah dikerjakan. Contohnya adalah sebagai berikut:

   Dan hasilnya nanti adalah sebagai berikut:

   Bagian gambar juga bisa Anda sesuaikan dengan project yang Anda kerjakan. Mengganti gambar sangat mudah, Anda hanya tinggal memasukkan gambar ke direktori template assets/img/portfolio/fullsize dan untuk gambar thumbnail ke direktori assets/img/portfolio/thumbnails.

   Selanjutnya di bagian kode html ganti nama image sebelumnya dengan nama file image yang baru, perhatikan gambar di bawah ini:

   Sekarang kita lanjutkan ke langkah 9 untuk memodifikasi bagian contact.

   Langkah 9: Masih di file index.html, kita akan memodifikasi bagian contact yaitu menghapus bagian form contactnya. Kami menginginkan pengunjung menghubungi pemilik website secara langsung melalui nomor telepon atau email yang dicantumkan disana.

   Di bagian contact yang ditandai dengan  hapus semuanya dan ganti dengan kode di bawah ini:

   Get In Touch!

   ---

   Siap untuk memulai proyek Anda berikutnya bersama kami? Hubungi kami dan kami akan menghubungi Anda sesegera mungkin!

   +62 (nomor telepon yang dapat dihubungi)

   Hasilnya akan seperti di bawah ini:

   Langkah 10: Kami belum mengubah bagian Masthead, bagian ini adalah headline dari sebuah website. Oke kita lanjutkan langkah terakhir mengubah bagian Masthead ya, pertama ganti tulisan “Your Favorite Place for Free Bootstrap Themes” menjadi headline yang Anda inginkan.

   Dalam demo ini kami mengganti tulisan “Your Favorite Place for Free Bootstrap Themes”  menjadi “I Ready Write Epic Tech Content SEO”. Sedangkan untuk bagian sub contentnya berisikan deskripsi singkat tentang jasa content writer teknologi.

   Misalnya kami mengubahnya menjadi seperti di bawah ini:

   Bagian terakhir mengubah title dan navbar brand, cara mengubahnya Anda bisa perhatikan gambar di bawah ini:

   Selesai, sekarang Anda sudah berhasil membuat halaman website sederhana menggunakan template dari Bootstrap.

   Itulah cara membuat website dengan html dan css yang bisa Anda coba untuk membuat website impian Anda. Hanya dengan menggunakan template gratisan dari Bootstrap, Anda sudah bisa membuat website yang responsif.

   Namun jika Anda tidak memiliki waktu untuk mempraktekkan cara membuat website ini, Anda bisa menggunakan jasa pembuatan website profesional atau membuat website menggunakan WordPress, cek artikel tentang cara membuat website dengan WordPress.

   Oh iya website yang Anda buat di demo ini masih bersifat statis karena hanya terdiri dari html dan css saja, tidak ada database dan lainnya. Ditambah lagi website tersebut hanya bisa Anda akses secara offline, karena semua asetnya disimpan di komputer.

   Lantas, bagaimana caranya agar bisa dilihat banyak orang? Tentu saja Anda perlu meng online kan terlebih dahulu websitenya. Caranya Anda memerlukan layanan hosting untuk menyimpan aset website Anda.

   Akan tetapi, Anda tidak bisa sembarangan membeli hosting web, karena nantinya akan mempengaruhi kinerja website. Sebagai salah satu pertimbangan, Anda bisa menggunakan salah satu layanan web hosting dari Exabytes Indonesia yang telah dilengkapi fitur keamanan mumpuni.

   Sudah siap ya untuk membangun website Anda sendiri, yuk langsung saja pilih layanan hosting Anda dan miliki website impian Anda.

   Selamat mencoba, good luck!

   Pada kesempatan kali ini, kita akan membuat layout pada sebuah halaman website.

   Sebelumnya kita sudah pernah bahas disini (https://www.webhozz.com/blog/belajar-web-design-membuat-layout-dengan-html-css/).

   Tapi, pada pembahasan kali ini akan lebih kompleks.

   Kita akan menggunakan CSS Eksternal. Karena selama ini kita menulis script kode css pada tag lebih tepatnya pada tag