جلسه هفتم آموزش کد محور زبان برنامه نویسی HTML،
در این قسمت، به ایجاد یک صفحه وب ساده با استفاده از HTML می پردازیم. این صفحه شامل بخش‌های مختلفی مانند هدر، بدنه و فوتر خواهد بود. همچنین از اندازه‌گیری‌ها و لیست‌ها برای تنظیمات ظاهر صفحه استفاده خواهیم کرد.
کد HTML زیر را کپی و اجرا کنید:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>صفحه وب ساده</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f8f8;
margin: 0;
padding: 0;
line-height: 1.6;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
section {
padding: 20px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
margin-bottom: 10px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: absolute;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>صفحه وب ساده</h1>
</header>
<section>
<h2>بخش اصلی</h2>
<p>اینجا محتوای اصلی صفحه وب قرار دارد. می‌توانید متن، تصاویر و لینک‌ها را در اینجا قرار دهید.</p>
<h3>لیست نمونه:</h3>
<ul>
<li>مورد ۱</li>
<li>مورد ۲</li>
<li>مورد ۳</li>
</ul>
<h3>تصویر نمونه:</h3>
<img src="https://via.placeholder.com/300" alt="تصویر نمونه">
<h3>لینک نمونه:</h3>
<p><a href="https://www.example.com">لینک به سایت دیگر</a></p>
</section>
<footer>
<p>© ۲۰۲۴ تمامی حقوق محفوظ است.</p>
</footer>
</body>
</html>در این کد، از تگ‌های مختلف HTML مانند <header>، <section>، <ul>، <li>، <img> و <footer> برای ساختاردهی صفحه استفاده شده است. همچنین با استفاده از CSS، ظاهر صفحه بهبود یافته و به صورت مرتب و زیبا نمایش داده شده است. این کد یک مقدار از CSS Flexbox نیز استفاده می‌کند تا بخش‌ها را به خوبی چیده کند.
قوانین ارسال دیدگاه