اسکریپت نمایش مشخصات شهرها با 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، اطلاعات مشخصات شهرها را به روشی زیبا و کاربرپسند نمایش می‌دهد. شما می‌توانید با افزودن ویژگی‌های بیشتر، مانند تصاویر یا نقشه‌ها، آن را گسترش دهید. با استفاده از این الگو، می‌توانید به راحتی اطلاعات دیگر شهرها را هم نمایش دهید.
معرفی اسکریپت نمایش مشخصات شهرها با HTML
در دنیای وب، نمایش اطلاعات مربوط به شهرها می‌تواند به کاربران کمک کند تا با ویژگی‌ها و جذابیت‌های هر شهر آشنا شوند. اسکریپت‌های HTML برای این منظور طراحی می‌شوند. در اینجا به بررسی ساختار و عملکرد یک اسکریپت ساده برای نمایش مشخصات شهرها می‌پردازیم.
ساختار HTML
ابتدا، برای ایجاد یک صفحه نمایش مشخصات شهرها، باید از تگ‌های HTML استفاده کنیم. این تگ‌ها شامل عناصر اصلی مانند `<div>`, `<h1>`, `<p>` و `<img>` می‌باشند. این تگ‌ها به ما اجازه می‌دهند تا اطلاعات مربوط به هر شهر را به صورت منظم و زیبا نمایش دهیم.
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
- 0">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.city {
background: #fff;
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,
- 1);
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="city">
<h1>تهران</h1>
<img src="tehran.jpg" alt="شهر تهران">
<p>تهران، پایتخت ایران و یکی از بزرگ‌ترین شهرهای خاورمیانه است. این شهر دارای تاریخچه‌ای غنی و فرهنگی متنوع می‌باشد.</p>
</div>
<div class="city">
<h1>اصفهان</h1>
<img src="isfahan.jpg" alt="شهر اصفهان">
<p>اصفهان، معروف به نصف جهان، به خاطر معماری زیبا و پل‌های تاریخی‌اش شناخته شده است.</p>
</div>
</body>
</html>
```
توضیحات کد
- `<head>`: در این بخش، متا دیتا و استایل‌های صفحه قرار می‌گیرد.
- `<body>`: محتوای اصلی صفحه در این قسمت قرار دارد. برای هر شهر، یک `<div>` مجزا ایجاد می‌شود.
- `<h1>`: عنوان هر شهر را نمایش می‌دهد.
- `<img>`: تصویر مربوط به هر شهر را بارگذاری می‌کند.
- `<p>`: توضیحات مربوط به هر شهر را شامل می‌شود.
نتیجه‌گیری
این اسکریپت، یک نمونه ساده و کارآمد برای نمایش مشخصات شهرها به صورت HTML است. با استفاده از CSS، می‌توانیم ظاهر صفحه را زیباتر کنیم. در نهایت، کاربران می‌توانند با مشاهده این اطلاعات، درک بهتری از هر شهر پیدا کنند. برای توسعه بیشتر، می‌توان به این اسکریپت ویژگی‌های بیشتری مانند تعاملات جاوااسکریپت اضافه کرد.
