Contoh project web sederhana : membangun website Training dengan HTML dan CSS

Halaman utama situs web Unu Kalbar Training dirancang untuk memberikan informasi yang jelas dan menarik bagi pengunjung. Dalam dunia digital saat ini, memiliki situs web yang terstruktur dengan baik sangat penting untuk menarik perhatian pengguna dan memberikan pengalaman yang positif. Kode HTML yang digunakan dalam halaman ini mencakup berbagai elemen yang berfungsi untuk menyajikan konten dengan cara yang terorganisir dan mudah diakses. Kode dimulai dengan deklarasi <!DOCTYPE html>, yang menunjukkan bahwa dokumen ini adalah HTML5. Deklarasi ini sangat penting karena memberi tahu browser tentang jenis dokumen yang akan dirender. Dengan menggunakan HTML5, pengembang dapat memanfaatkan fitur-fitur terbaru yang ditawarkan oleh standar web, seperti elemen semantik dan API yang lebih baik. Ini juga memastikan bahwa halaman dirender dengan benar di berbagai browser, memberikan pengalaman yang konsisten kepada pengguna.

Bagian <head> berisi informasi penting yang tidak terlihat langsung di halaman tetapi sangat berpengaruh terhadap SEO (Search Engine Optimization) dan pengaturan halaman. Di dalam bagian ini, terdapat beberapa elemen yang memiliki fungsi spesifik. Tag <meta charset="UTF-8"> digunakan untuk memastikan bahwa semua karakter ditampilkan dengan benar, termasuk karakter khusus yang mungkin ada dalam konten. Ini sangat penting untuk memastikan bahwa pengguna dari berbagai latar belakang dapat membaca konten tanpa masalah. Selain itu, tag <meta http-equiv="X-UA-Compatible" content="IE=edge"> memastikan bahwa halaman dirender dengan standar terbaru di Internet Explorer. Ini membantu menghindari masalah kompatibilitas yang mungkin muncul pada versi lama browser. Tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> sangat penting untuk desain responsif. Dengan pengaturan ini, halaman dapat ditampilkan dengan baik di berbagai perangkat, baik itu ponsel, tablet, maupun desktop. Ini memungkinkan pengguna untuk mengakses situs dengan nyaman tanpa harus melakukan zoom in atau zoom out, yang sering kali mengganggu pengalaman pengguna.

Tag <title>Home | Selamat datang</title> memberikan judul halaman yang muncul di tab browser dan hasil pencarian. Judul ini membantu pengguna dan mesin pencari memahami konten halaman. Judul yang baik dan relevan dapat meningkatkan klik dan membantu dalam peringkat SEO, sehingga lebih banyak orang dapat menemukan situs ini melalui pencarian. Tag <link rel="stylesheet" href="style.css"> menghubungkan file CSS eksternal yang mengatur gaya dan tata letak halaman. Dengan memisahkan konten (HTML) dan presentasi (CSS), pengembang dapat dengan mudah mengelola dan memperbarui tampilan situs tanpa mengubah struktur konten. Ini juga meningkatkan keterbacaan kode dan memudahkan kolaborasi antara pengembang dan desainer.

Bagian <body> berisi konten yang terlihat oleh pengunjung. Ini adalah bagian terpenting dari halaman yang menyajikan informasi kepada pengguna. Bagian header mencakup nama situs dan navigasi. Nama situs ditampilkan dengan tag <h1>, yang penting untuk SEO karena menunjukkan topik utama halaman. Penggunaan tag heading yang tepat membantu mesin pencari memahami struktur konten dan memberikan bobot lebih pada informasi yang paling penting. Navigasi disusun menggunakan daftar tidak terurut (<ul>), yang memudahkan pengunjung untuk menjelajahi situs dengan tautan ke halaman lain seperti Home, Portofolio, Contact, Blog, dan About. Navigasi yang jelas dan mudah diakses sangat penting untuk pengalaman pengguna yang baik, karena memungkinkan pengunjung menemukan informasi yang mereka cari dengan cepat.

Bagian slider menyambut pengunjung dengan pesan dan gambar yang relevan. Dengan menggunakan tag <h2> dan <p>, pengunjung diberikan informasi tentang lembaga dan program pelatihan yang ditawarkan. Gambar yang ditampilkan menggunakan tag <img> memberikan visualisasi yang menarik, meningkatkan daya tarik halaman. Slider ini berfungsi sebagai elemen visual yang menarik perhatian pengunjung dan memberikan kesan pertama yang positif. Pesan yang disampaikan dalam slider juga berfungsi untuk menginformasikan pengunjung tentang nilai dan tujuan lembaga. Bagian portofolio menampilkan proyek-proyek yang telah dilakukan oleh Unu Kalbar Training. Dengan menggunakan div yang terstruktur, setiap proyek dapat disajikan dengan deskripsi singkat. Ini memberikan bukti kredibilitas kepada pengunjung dan menunjukkan pengalaman lembaga dalam bidang pelatihan.

Selanjutnya, bagian kontak memberikan informasi yang jelas tentang cara menghubungi Unu Kalbar Training. Dengan menyertakan alamat email dan nomor telepon, pengunjung dapat dengan mudah mengajukan pertanyaan atau permintaan informasi lebih lanjut. Informasi kontak yang jelas dan mudah diakses sangat penting untuk membangun kepercayaan dan memfasilitasi komunikasi antara lembaga dan pengunjung. Bagian footer menyajikan informasi hak cipta dan tautan ke media sosial, yang penting untuk memberikan pengunjung cara untuk terhubung dengan lembaga di platform lain. Dengan menyertakan tautan ke media sosial, pengunjung dapat mengikuti perkembangan.

untuk projectnya dapat di di lihat di repo github : Aditya Pratama Badra