نمایش شهرها در HTML
HTML، به عنوان زبان نشانه‌گذاری اصلی وب، ابزاری قدرتمند برای نمایش اطلاعات مختلف به‌ویژه داده‌های جغرافیایی، مانند شهرها، می‌باشد. در اینجا، به جنبه‌های مختلف
نمایش شهرها در HTML
می‌پردازیم.STRUCTURE OF HTML
برای شروع، باید ساختار HTML را ایجاد کنیم. استفاده از تگ‌های مناسب، مانند `<div>`, `<ul>`, و `<li>`, برای دسته‌بندی و نمایش اطلاعات ضروری است. به عنوان مثال:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
- 0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>شهرهای ایران</h1>
<ul>
<li>تهران</li>
<li>اصفهان</li>
<li>شیراز</li>
</ul>
</body>
</html>
```
این کد، لیستی از شهرهای ایران را به شکل ساده نمایش می‌دهد.
STYLING WITH CSS
برای زیباتر کردن نمایش، CSS می‌تواند به‌کار رود. با استفاده از CSS، می‌توان به عناصر HTML ظاهری زیبا و جذاب داد.
```css
body {
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background-color: #f2f2f2;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
}
```
این کد CSS، به لیست شهرها ظاهری مدرن و شیک می‌دهد.
INTERACTIVE ELEMENTS
برای تعامل بیشتر، می‌توانید از جاوا اسکریپت استفاده کنید. به‌عنوان مثال، نمایش جزئیات هنگام کلیک بر روی هر شهر:
```html
<script>
const cities = document.querySelectorAll('li');
cities.forEach(city => {
city.addEventListener('click', () => {
alert(`شهر انتخابی: ${city.textContent}`);
});
});
</script>
```
این کد به کاربر اجازه می‌دهد تا با کلیک بر روی هر شهر، نام آن را مشاهده کند.
CONCLUSION
در نهایت، با ترکیب HTML، CSS و جاوا اسکریپت، می‌توان به‌راحتی اطلاعات مربوط به شهرها را به شکل جذاب و کاربرپسند در وب سایت‌ها نمایش داد. فراموش نکنید که به اصول دسترسی و طراحی پاسخگو نیز توجه کنید تا تجربه کاربری بهتری فراهم نمایید.
