به این دوره آموزشی خوش آمدید! در این دوره، به شما نشان خواهیم داد که چگونه با استفاده از دو زبان اصلی وب، یعنی HTML و CSS، یک وب سایت ساده و جذاب بسازید. نگران نباشید، این آموزش برای مبتدیان طراحی شده است و نیازی به هیچ پیش زمینه ای ندارید.
HTML (HyperText Markup Language) زبان نشانه گذاری استاندارد برای ایجاد صفحات وب است. با استفاده از HTML، ساختار و محتوای صفحات وب خود را مشخص می کنید. این شامل متن، تصاویر، لینک ها، و سایر عناصر موجود در صفحه است. به زبان ساده، HTML اسکلت وب سایت شما را تشکیل می دهد.
CSS (Cascading Style Sheets) زبان استایل دهی است که برای کنترل ظاهر و نحوه نمایش عناصر HTML استفاده می شود. با استفاده از CSS، می توانید رنگ ها، فونت ها، حاشیه ها، فاصله ها و بسیاری از ویژگی های دیگر را تغییر دهید. CSS به وب سایت شما زیبایی و جذابیت می بخشد.
برای شروع این دوره، به موارد زیر نیاز دارید:
ابتدا، دو فایل جدید ایجاد کنید:
فایل `index.html` را با کد زیر پر کنید:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>وب سایت ساده من</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>به وب سایت من خوش آمدید!</h1>
<nav>
<ul>
<li><a href="#">صفحه اصلی</a></li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">تماس با ما</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>آخرین مقالات</h2>
<article>
<h3>عنوان مقاله اول</h3>
<p>متن خلاصه مقاله اول.</p>
</article>
<article>
<h3>عنوان مقاله دوم</h3>
<p>متن خلاصه مقاله دوم.</p>
</article>
</section>
</main>
<footer>
<p>کپی رایت © 2023. تمامی حقوق محفوظ است.</p>
</footer>
</body>
</html>
در این کد، ساختار اصلی یک صفحه وب را تعریف کرده ایم. تگ های `<header>`، `<nav>`، `<main>` و `<footer>` بخش های مختلف صفحه را مشخص می کنند. تگ `<link>` فایل CSS را به فایل HTML متصل می کند.
فایل `style.css` را با کد زیر پر کنید:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav li {
display: inline;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
در این کد، استایل های مختلفی را برای عناصر HTML تعریف کرده ایم. می توانید رنگ ها، فونت ها، فاصله ها و سایر ویژگی ها را به دلخواه خود تغییر دهید.
اکنون، فایل `index.html` را در مرورگر خود باز کنید. شما باید یک وب سایت ساده با ساختار و استایل های تعریف شده را مشاهده کنید.
برای بهبود وب سایت خود، می توانید موارد زیر را امتحان کنید:
منابع آنلاین زیادی برای یادگیری HTML و CSS وجود دارد. می توانید از وب سایت هایی مانند W3Schools، MDN Web Docs و Codecademy استفاده کنید. همچنین، دوره های آموزشی آنلاین در پلتفرم هایی مانند Udemy و Coursera نیز در دسترس هستند.
برای ساخت یک وب سایت ساده با HTML و CSS، نیازی به دانش برنامه نویسی ندارید. اما، اگر می خواهید وب سایت های پیچیده تر با قابلیت های تعاملی بسازید، باید زبان های برنامه نویسی مانند JavaScript را نیز یاد بگیرید.
برای انتشار وب سایت خود در اینترنت، به یک هاستینگ وب نیاز دارید. هاستینگ وب، فضایی است که فایل های وب سایت شما در آن ذخیره می شوند و از طریق اینترنت در دسترس کاربران قرار می گیرند. شرکت های هاستینگ زیادی وجود دارند که می توانید از آن ها استفاده کنید. همچنین، بعد از انتشار وب سایت، به سئو و بهینه سازی سایتتان نیاز دارید که کاربران بتوانند از طریق جستجو در گوگل به وب سایت شما برسند.
ساخت یک وب سایت جذاب و بهینه سازی شده می تواند چالش برانگیز باشد. اگر نیاز به کمک دارید یا می خواهید سئو وب سایت خود را به متخصصان بسپارید، با ما تماس بگیرید:
09190994063 - 09376846692
ما با افتخار به شما کمک می کنیم تا وب سایتی حرفه ای و موفق داشته باشید!