HTML ile Basit Bir Arama Motoru Oluşturma
Günümüzde web siteleri, kullanıcıların bilgiye hızlı ve etkili bir şekilde ulaşabilmesi için arama motorlarına ihtiyaç duyar. Basit bir arama motoru oluşturmak, hem web geliştirme becerilerinizi geliştirmek hem de kullanıcı deneyimini artırmak için harika bir projedir. Bu makalede, HTML, CSS ve JavaScript kullanarak nasıl basit bir arama motoru oluşturabileceğinizi adım adım inceleyeceğiz.
Projenin Temel Gereksinimleri
Bu proje için aşağıdaki temel bileşenlere ihtiyacımız olacak:
- HTML: Arayüzü oluşturmak için kullanılacak.
- CSS: Arayüzün stilini belirlemek için kullanılacak.
- JavaScript: Arama işlevselliğini sağlamak için kullanılacak.
HTML ile Arama Motoru Arayüzü Oluşturma
İlk olarak, basit bir HTML sayfası oluşturarak arama motorumuzun arayüzünü tasarlayalım. Aşağıdaki kod, bir arama çubuğu ve sonuçları görüntülemek için bir alan içermektedir:
HTML Kodu
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basit Arama Motoru</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Basit Arama Motoru</h1>
<input type="text" id="search" placeholder="Arama yapın...">
<button id="searchButton">Ara</button>
<div id="results"></div>
<script src="script.js"></script>
</body>
</html>
Bu HTML kodu, bir başlık, bir arama çubuğu ve bir buton içerir. Kullanıcı arama çubuğuna bir kelime yazdıktan sonra butona tıklayarak arama yapabilir.
CSS ile Arayüzü Stilize Etme
Şimdi, arayüzümüzü daha çekici hale getirmek için bazı CSS stilleri ekleyelim. Aşağıdaki kod, arama motorunun görünümünü iyileştirmek için kullanılabilir:
CSS Kodu
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
padding: 50px;
}
input[type="text"] {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
border: none;
background-color: #5cb85c;
color: white;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #4cae4c;
}
#results {
margin-top: 20px;
}
Bu CSS kodu, sayfanın genel görünümünü iyileştirir ve arama çubuğu ile butona stil ekler. Kullanıcı deneyimini artırmak için butonun üzerine gelindiğinde renk değişimi eklenmiştir.
JavaScript ile Arama İşlevselliği Ekleme
Şimdi, arama işlevselliğini sağlamak için JavaScript kodumuzu ekleyelim. Kullanıcı arama çubuğuna bir kelime yazdığında, belirli bir veri kümesinde bu kelimeyi arayacağız ve sonuçları görüntüleyeceğiz.
JavaScript Kodu
const data = [
"HTML", "CSS", "JavaScript", "React", "Node.js", "Python", "Java", "C++", "Ruby", "PHP"
];
document.getElementById('searchButton').addEventListener('click', function() {
const query = document.getElementById('search').value.toLowerCase();
const results = data.filter(item => item.toLowerCase().includes(query));
displayResults(results);
});
function displayResults(results) {
const resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = '';
if (results.length > 0) {
results.forEach(result => {
const resultItem = document.createElement('div');
resultItem.textContent = result;
resultsDiv.appendChild(resultItem);
});
} else {
resultsDiv.textContent = 'Sonuç bulunamadı.';
}
}
Bu JavaScript kodu, arama butonuna tıklandığında çalışır. Kullanıcının girdiği kelime, veri kümesindeki her bir öğe ile karşılaştırılır ve sonuçlar görüntülenir. Eğer eşleşme yoksa, “Sonuç bulunamadı.” mesajı gösterilir.
Projenin Çalıştırılması
Tüm dosyaları oluşturduktan sonra, HTML dosyanızı bir tarayıcıda açarak arama motorunuzu test edebilirsiniz. Arama çubuğuna bir kelime yazın ve “Ara” butonuna tıklayın. Eşleşen sonuçlar altında görüntülenecektir.
Bu makalede, HTML, CSS ve JavaScript kullanarak basit bir arama motoru oluşturmayı öğrendiniz. Bu temel proje, web geliştirme becerilerinizi geliştirmenin yanı sıra, kullanıcı deneyimini artırmak için arama işlevselliği eklemenin önemini anlamanızı sağlar. Daha karmaşık arama motorları oluşturmak için bu temeli kullanabilir ve projelerinizi geliştirebilirsiniz.