ساخت اولین قالب وبسایت شخصی با HTML و CSS
جمعه 29/فروردین/1404 79 برنامه نویسی

ساخت اولین قالب وبسایت شخصی با HTML و CSS

راهنمای مطالعه:

برای ساخت صفحات وب، دو زبان اصلی وجود دارند: HTML و CSS. برای ساختاردهی و محتوای صفحه از HTML استفاده می شود، در حالی که CSS وظیفه استایل دهی و زیباسازی این محتوا را بر عهده دارد.

CSS و HTML

HTML مخفف کلمات Hyper Text Markup Language است و در واقع یک زبان برنامه نویسی نیست. HTML را یک زبان نشانه گذاری و برچسب گذاری نامیده اند و دلیل آن نیز ایجاد اسکلت اولیه وبسایت هاست. دلیلی که HTML یک زبان برنامه نویسی نیست این است که در آن نمی توانید نشانه ای از ویژگی های یک زبان برنامه نویسی پیدا کنید.

زبان های برنامه نویسی مانند دات نت، جاوا اسکریپت، پایتون، جاوا و... حاوی دستوراتی مانند حلقه، شرط، تابع و... هستند که HTML فاقد این موارد است. در این آموزش، شما یاد خواهید گرفت چگونه یک قالب وب سایت شخصی ساده بسازید که شامل بخش های مختلفی مانند منو، معرفی، نمونه کارها و فوتر است.

هدف این آموزش این است که با ساخت اولین وب سایت خود، مفاهیم اصلی HTML و CSS را یاد بگیرید و درک کنید که چطور این دو زبان می توانند با هم کار کنند تا یک صفحه وب کاربردی و زیبا ایجاد کنند.

در یک دوره آموزشی جامع و مناسب شما نیاز دارید که با مباحث زیر آشنایی پیدا کنید:

  • HTML چیست و چه کاربردی دارد؟
  • ساختار تگ ها در HTML به چه صورت است؟
  • تگ های کاربردی و مواردی که به صورت متناوب از آن ها استفاده می شود کدام ها هستند و به چه روشی مورد استفاده قرار می گیرند؟
  • کار با تگ های تصاویر، لیست ها، لینک ها، صدا، ویدیو و... .
  • پیاده سازی جدوال و iFrame
  • کار با فرم ها
  • کار با ID و Classها
  • بررسی تفاوت Div و Span
  • کارهای با تگ های معنادار
  • آشنایی با متادیتاها

html css

1️⃣ آشنایی با ساختار کلی صفحات وب

قبل از شروع، بیایید نگاهی به ساختار کلی یک صفحه وب بیندازیم. صفحه وب معمولاً از دو بخش اصلی تشکیل می شود:

  • HTML: ساختار اصلی صفحه مانند هدر، محتوا، منو و فوتر را ایجاد می کند.
  • CSS: ظاهر صفحه را تنظیم می کند: رنگ ها، فاصله ها، اندازه ها و موقعیت ها.

هر صفحه وب حداقل به این دو نیاز دارد: یک فایل HTML برای ساختار و یک فایل CSS برای استایل دهی.

2️⃣ شروع پروژه: ایجاد فایل های اولیه

برای شروع، پروژه تان را در کامپیوتر خود ایجاد کنید. مراحل زیر را دنبال کنید:

مرحله اول: ایجاد پوشه پروژه

یک پوشه با نام دلخواه برای پروژه تان بسازید (مثلاً my-first-website).

مرحله دوم: ایجاد فایل های HTML و CSS

در داخل پوشه پروژه، دو فایل بسازید:

  • index.html
  • style.css

مرحله سوم: اتصال فایل CSS به HTML

در فایل index.html، باید فایل CSS را متصل کنید. در قسمت <head> فایل 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>
 
 <!-- محتوا در اینجا قرار می گیرد --> 
 
</body>
 
 </html>

3️⃣ طراحی ساختار کلی صفحه وب

در این بخش، ما یک ساختار ساده برای صفحه وب ایجاد می کنیم که شامل هدر، منو، محتوای اصلی و فوتر است.

ساختار HTML:

نمایش کد HTML

نمونه کد 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>
 
 <!-- محتوا در اینجا قرار می گیرد --> 
 
</body>
 
 </html>

4️⃣ استایل دهی اولیه با CSS

حالا بیایید با استفاده از CSS این ساختار رو زیبا کنیم.

5️⃣ طراحی منوی ساده (Navigation)

در این مرحله، ما یک منوی ساده می سازیم که در هدر قرار می گیرد و به بخش های مختلف صفحه لینک می دهد. این منو قبلاً در ساختار HTML اضافه شده بود. در اینجا نحوه استایل دهی آن با CSS توضیح داده شده است.

نتیجه منوی طراحی شده:

منو به صورت افقی در بالای صفحه قرار می گیرد و هنگام هور کردن (Hover) رنگ لینک ها تغییر می کند.

قالب وب سایت چیست ؟ مزایا و معایب قالب های آماده و سفارشی

6️⃣ بخش معرفی (About Me)

در این بخش، می خواهیم یک بخش ساده "درباره من" ایجاد کنیم که شامل عنوان و توضیحات کوتاه باشد.

HTML برای بخش معرفی:

این بخش در فایل HTML قبلاً ایجاد شده است، اما می توانیم آن را با استایل زیبا کنیم.

کد CSS برای بخش معرفی:

#about { 
 
background-color: #e2e2e2; 
 
padding: 40px; 
 
border-radius: 8px; 
 
}


7️⃣ طراحی بخش نمونه کارها (Projects)

در این بخش، می خواهیم یک گالری از نمونه کارها نمایش دهیم که به صورت کارت های ساده طراحی شده اند.

HTML برای نمونه کارها:

 <section id="projects"> <h2>نمونه کارها</h2> <div class="project"> <h3>پروژه 1</h3> <p>توضیحاتی درباره پروژه 1.</p> </div> <div class="project"> <h3>پروژه 2</h3> <p>توضیحاتی درباره پروژه 2.</p> </div> </section>


CSS برای نمونه کارها:

 .project { background-color: white; padding: 15px; margin-top: 10px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }

8️⃣ طراحی فوتر (Footer)

در فوتر، می خواهیم یک متن ساده "کپی رایت" نمایش دهیم.
HTML برای فوتر:

 <footer>
 <p>&copy; 2025 وب سایت شخصی من</p>
 </footer> 
 footer 
{
 background-color: #333; 
color: white; text-align: center;
 padding: 10px;
 position: fixed;
 bottom: 0; 
width: 100%;
 }

9️⃣ نکات پایانی برای بهبود قالب

فونت های فارسی: برای نمایش بهتر متن های فارسی، از فونت های مناسب مانند Vazir یا Iransans استفاده کنید.

رسپانسیو کردن صفحه: با استفاده از Media Query می توانید صفحه را برای نمایش در موبایل هم بهینه کنید.

کد برای Media Query:

 @media (max-width: 768px) { 
header { font-size: 16px; } 
nav
 ul 
li
 { display: block; margin-bottom: 10px; } 
}

تبریک می گم! شما حالا یک وب سایت ساده با HTML و CSS ساخته اید. این تنها شروع کار شماست. با استفاده از این مهارت ها، می توانید صفحات پیچیده تر و جذاب تری بسازید.
درباره این مطلب دیدگاهی بنویسید...

آدرس پست الکترونیک شما منتشر نخواهد شد.

نظرات (0)
دسته بندی ها
مطالب اخیر
ابر کلید واژه ها