Cara Membuat Search Engine di HTML – Apakah Anda pernah membayangkan membuat search engine sendiri? Meskipun tidak sekompleks Google, membangun search engine sederhana menggunakan HTML bisa menjadi pengalaman yang mengasyikkan dan bermanfaat. Di artikel ini, kelashtml akan membahas langkah-langkahnya secara detail agar mudah dipahami oleh pemula.
Alat yang Harus Anda Siapkan
Berikut ini beberapa alat yang harus Anda siapkan untuk membuat search engine di html:
- Perangkat laptop,
- Notepad++ (Text editor code),
- Google chrome (Web browser),
- Niat yang kuat.
Cara Membuat Search Engine di HTML
1. Buat Folder Project Search Engine
Pertama-tama, buatlah folder baru di komputer Anda dan beri nama sesuai dengan proyek ini, misalnya “MySearchEngine“.
2. Buat Sebuah File search_engine.html
Buka editor teks favorit Anda dan buatlah file baru dengan nama “search_engine.html” di dalam folder proyek yang telah Anda buat tadi. File ini akan menjadi halaman utama dari search engine yang akan kita bangun.
Berikut ini file html yang harus Anda tambahkan untuk membuat search engine di html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Engine</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="search-container">
<input type="text" placeholder="Search...">
<button type="submit">Search</button>
</div>
</body>
</html>3. Buat File style.css
Selanjutnya, buatlah file CSS untuk mengatur tampilan dari search engine. Buatlah file baru dengan nama “style.css” di dalam folder proyek yang sama.
Berikut ini file css yang harus Anda tambahkan untuk dapat membuat search engine di html:
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
}
.search-container {
text-align: center;
}
input[type="text"] {
padding: 10px;
width: 300px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
button {
padding: 10px 20px;
background-color: #007bff;
border: none;
border-radius: 5px;
color: white;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}4. Mengubah Tampilan Search Engine
Dalam file “search_engine.html“, Anda dapat menggunakan tag HTML seperti <input>, <button>, dan <div> untuk membuat form pencarian dan menampilkan hasilnya. Gunakan file “style.css” untuk mengatur tata letak dan tampilan elemen-elemen ini agar sesuai dengan preferensi Anda.
5. Save & View Tampilan
Setelah menulis kode HTML dan CSS, pastikan untuk menyimpan perubahan yang telah Anda buat. Lalu, buka file “search_engine.html” menggunakan browser web untuk melihat tampilan dari search engine yang telah Anda buat. Anda dapat melakukan penyesuaian lebih lanjut pada tampilan dan fungsionalitas sesuai dengan kebutuhan.
Preview hasil
Berikut ini preview hasil search engine di html jika Anda berhasil membuatnya:
Penutup
Dengan mengikuti panduan sederhana ini, Anda telah berhasil membangun search engine menggunakan HTML. Meskipun sederhana, proyek ini memberikan pengalaman berharga dalam pemahaman dasar tentang bagaimana search engine bekerja. Jangan ragu untuk terus mengeksplorasi dan mengembangkan kemampuan Anda dalam pemrograman web.
