اسکریپت نمایش مشخصات شهرها با HTML
در دنیای وب، ایجاد صفحات برای نمایش اطلاعات مختلف از جمله مشخصات شهرها، یکی از کارهای رایج است. با استفاده از HTML، CSS و JavaScript می‌توانیم یک اسکریپت ساده و مؤثر برای نمایش مشخصات شهرها طراحی کنیم.
ساختار HTML
ابتدا، باید یک ساختار پایه برای صفحه HTML خود ایجاد کنیم. به عنوان مثال:
```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>
<div id="city-info"></div>
<script src="script.js"></script>
</body>
</html>
```
CSS برای زیبایی
استفاده از CSS می‌تواند به زیبایی صفحه کمک کند. به عنوان مثال:
```css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
text-align: center;
color: #333;
}
.city {
background-color: white;
margin: 20px;
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,
- 1);
```
اسکریپت JavaScript
حالا بیایید یک اسکریپت ساده بنویسیم که مشخصات شهرها را نمایش دهد. برای مثال:
```javascript
const cities = [
{
name: "تهران",
population: "9 میلیون",
area: "730 کیلومتر مربع",
attractions: "برج میلاد، کاخ گلستان"
},
{
name: "مشهد",
population: "3 میلیون",
area: "351 کیلومتر مربع",
attractions: "حرم امام رضا، باغ نادری"
}
];
function displayCities() {
const cityInfo = document.getElementById('city-info');
cities.forEach(city => {
const cityDiv = document.createElement('div');
cityDiv.className = 'city';
cityDiv.innerHTML = `<h2>${city.name}</h2>
<p>جمعیت: ${city.population}</p>
<p>مساحت: ${city.area}</p>
<p>جاذبه‌ها: ${city.attractions}</p>`;
cityInfo.appendChild(cityDiv);
});
}
window.onload = displayCities;
```
نتیجه‌گیری
این اسکریپت ساده، با استفاده از HTML، CSS و JavaScript، اطلاعات مشخصات شهرها را به روشی زیبا و کاربرپسند نمایش می‌دهد. شما می‌توانید با افزودن ویژگی‌های بیشتر، مانند تصاویر یا نقشه‌ها، آن را گسترش دهید. با استفاده از این الگو، می‌توانید به راحتی اطلاعات دیگر شهرها را هم نمایش دهید.
