Привет, ребята! Сегодня мы погружаемся в захватывающий мир создания каталога веб-сайтов. Независимо от того, являетесь ли вы начинающим разработчиком или опытным профессионалом, это руководство познакомит вас с несколькими методами создания каталога веб-сайтов с нуля. Мы рассмотрим все: от базового HTML и CSS до более продвинутых методов использования JavaScript и PHP. Итак, хватайте любимый напиток, пристегивайтесь и начнем!
- Основы HTML и CSS.
Для начала давайте создадим простой каталог веб-сайта с использованием HTML и CSS. Вот фрагмент кода, который поможет вам начать:
<!DOCTYPE html>
<html>
<head>
<title>My Website Directory</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Website Directory</h1>
<ul>
<li><a href="http://example.com">Example Website</a></li>
<li><a href="http://example2.com">Another Example Website</a></li>
<!-- Add more website entries here -->
</ul>
</body>
</html>
- Функциональность поиска JavaScript.
Далее давайте улучшим каталог нашего веб-сайта, добавив функцию поиска с использованием JavaScript. Это позволит пользователям искать определенные веб-сайты в каталоге. Вот пример того, как это реализовать:
<!-- Add this code snippet inside the body element -->
<input type="text" id="searchInput" onkeyup="searchDirectory()" placeholder="Search...">
<ul id="websiteList">
<li><a href="http://example.com">Example Website</a></li>
<li><a href="http://example2.com">Another Example Website</a></li>
<!-- Add more website entries here -->
</ul>
<script>
function searchDirectory() {
let input = document.getElementById('searchInput').value.toLowerCase();
let websites = document.getElementById('websiteList').getElementsByTagName('a');
for (let i = 0; i < websites.length; i++) {
let websiteName = websites[i].innerHTML.toLowerCase();
if (websiteName.includes(input)) {
websites[i].style.display = '';
} else {
websites[i].style.display = 'none';
}
}
}
</script>
- Динамический каталог веб-сайтов с помощью PHP и MySQL.
Теперь давайте поднимем каталог нашего веб-сайта на новый уровень, сделав его динамическим с использованием PHP и MySQL. Это позволит нам хранить информацию о веб-сайте в базе данных и динамически извлекать ее. Вот пример:
<!-- Create a MySQL database named 'website_directory' and a table named 'websites' with columns 'id', 'name', and 'url' -->
<!-- Add this PHP code snippet to retrieve and display websites from the database -->
<?php
$connection = mysqli_connect('localhost', 'username', 'password', 'website_directory');
if ($connection) {
$query = "SELECT * FROM websites";
$result = mysqli_query($connection, $query);
if (mysqli_num_rows($result) > 0) {
echo "<ul>";
while ($row = mysqli_fetch_assoc($result)) {
echo "<li><a href='" . $row['url'] . "'>" . $row['name'] . "</a></li>";
}
echo "</ul>";
} else {
echo "No websites found.";
}
mysqli_close($connection);
} else {
echo "Failed to connect to the database.";
}
?>
Поздравляем! Вы узнали несколько методов создания каталога веб-сайта. От базовой структуры HTML и CSS до добавления функций поиска JavaScript и создания динамического каталога с помощью PHP и MySQL — теперь у вас есть инструменты для создания впечатляющего каталога веб-сайта. Так что вперед, проверяйте свои новые знания и создайте потрясающий каталог, который поможет пользователям исследовать Интернет!