Arama Kutusu HTML Link
HTML, web sayfalarını oluşturmak için kullanılan bir işaretleme dilidir. Bu dilin sunduğu çeşitli etiketler ve özellikler, kullanıcıların web sitesi deneyimini geliştirmek için kullanılabilir. Bu makalede, arama kutusu oluştururken HTML linklerini nasıl kullanabileceğinizi keşfedeceğiz.
Arama Kutusu Oluşturma
Arama kutusu, bir web sitesinde kullanıcının belirli bir terimi aramasını sağlayan önemli bir özelliktir. Bu özelliği kullanıcı dostu hale getirmek için, arama sonuçlarını başka bir sayfada veya aynı sayfada göstermek için bir HTML linkiyle birleştirebilirsiniz.
HTML’de arama kutusunu oluşturmak için <form> ve <input> etiketlerini kullanırız. Öncelikle, aşağıdaki gibi bir form etiketi oluşturarak arama kutusunu belirleyebiliriz:
<form action="arama-sonuclari.html">
action özelliği, arama terimini göndermek için hangi sayfaya yönlendirileceğini belirtir. Bu örnekte, arama sonuçlarını göstereceğimiz “arama-sonuclari.html” sayfasına yönlendirilecektir.
Ardından, aşağıdaki gibi bir <input> etiketi ekleyerek kullanıcının arama terimini girmesini sağlayabiliriz:
<input type="text" name="arama-terimi" placeholder="Arama yap">
type özelliği, bu alanın bir metin alanı olduğunu belirtir. name özelliği, bu alanın verilerini gönderirken nasıl adlandırılacağını belirtir. placeholder özelliği, kullanıcıya hangi tür veri girmesi gerektiğini gösterir.
Son olarak, aşağıdaki gibi bir HTML linki ekleyerek arama kutusunu gönderebiliriz:
<a href="arama-sonuclari.html">Ara</a>
Bu HTML linki, “arama-sonuclari.html” sayfasına yönlendirir ve kullanıcının arama sonuçlarını görüntülemesini sağlar.
Örneğin, kullanıcının “ChatGPT” terimini aradığını varsayalım. Kullanıcı arama terimini girdikten sonra arama kutusunu göndermek için HTML linkine tıklar. Bu, “arama-sonuclari.html” sayfasına yönlendirilir ve kullanıcıya “ChatGPT” ile ilgili arama sonuçları gösterilir.
HTML linklerini arama kutusuyla birleştirerek, kullanıcıların kolayca arama yapabilmesini ve doğrudan arama sonuçlarını görüntüleyebilmelerini sağlayabilirsiniz.
Bu makalenin ikinci parçasında, arama sonuçlarının nasıl hazırlanacağını ve gösterileceğini keşfedeceğiz. İkinci parça için bir sonraki cevaba geçebilirsiniz.
Arama Sonuçlarını Gösterme
İlk bölümde, HTML linklerini kullanarak bir arama kutusu oluşturmayı öğrendik. Şimdi ikinci bölümde, arama sonuçlarını nasıl hazırlayacağımızı ve göstereceğimizi inceleyeceğiz.
Arama Sonuçlarının Hazırlanması
Arama sonuçlarını göstermek için HTML’de çeşitli yöntemler kullanabilirsiniz. Bunlardan biri, arama sonuçlarını bir tablo veya liste şeklinde göstermektir. Örneğin, aşağıdaki gibi bir HTML tablosu kullanarak arama sonuçlarını listeleyebiliriz:
<table>
<tr>
<th>Başlık</th>
<th>Açıklama</th>
<th>Link</th>
</tr>
<tr>
<td>ChatGPT Nedir?</td>
<td>ChatGPT hakkında bilgilendirici bir makale.</td>
<td><a href="chatgpt.html">Detaylar</a></td>
</tr>
<tr>
<td>HTML Nedir?</td>
<td>HTML hakkında temel bilgiler.</td>
<td><a href="html.html">Detaylar</a></td>
</tr>
</table>
Bu tablo, her bir arama sonucunu bir satırda gösterir. Her satırda, başlık, açıklama ve bir HTML linki bulunur. Kullanıcılar, “Detaylar” linkine tıklayarak ilgili sayfaya yönlendirilir.
Bunun yanı sıra, arama sonuçlarını bir liste şeklinde de gösterebilirsiniz. Aşağıdaki gibi bir HTML listesi kullanarak arama sonuçlarını listeleyebiliriz:
<ul>
<li><a href="chatgpt.html">ChatGPT Nedir?</a> - ChatGPT hakkında bilgilendirici bir makale.</li>
<li><a href="html.html">HTML Nedir?</a> - HTML hakkında temel bilgiler.</li>
</ul>
Bu liste, her bir arama sonucunu bir liste öğesi olarak gösterir. Her öğede, başlık ve açıklama yer alır. Kullanıcılar, başlığa tıklayarak ilgili sayfaya yönlendirilir.
Arama Sonuçlarının Gösterilmesi
Arama sonuçlarını hazırladıktan sonra, bu sonuçları kullanıcılara nasıl göstereceğinizi belirlemeniz gerekmektedir. Arama sonuçlarını aynı sayfada göstermek için, arama kutusunun bulunduğu sayfada sonuçları gösteren bir bölüm oluşturabilirsiniz. Örneğin:
<div id="arama-sonuclari">
<h2>Arama Sonuçları</h2>
<table>
<tr>
<th>Başlık</th>
<th>Açıklama</th>
<th>Link</th>
</tr>
<tr>
<td>ChatGPT Nedir?</td>
