آموزش طراحی سایت

آموزش کد نویسی یک سایت از ابتدا به کمک html و css

By میثم همتی Last updated خرداد ۲۱, ۱۴۰۴ 1

آنچه در این مطلب میخوانید:

در جلسه هفتم از آموزش html و css میپردازم به کد نویسی یک سایت از ابتدا

از جلسه اول تا اینجا با قسمت های مختلف html و css آشنا شدیم و در این جلسه میخوام به کمک تمامی تگ هایی که یاد گرفتیم

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

مشاهده ویدئو از یوتیوب:

https://www.youtube.com/watch?v=aH_7H397RSM
برای دانلود پروژه نهایی به انتهای صفحه مراجعه کنید

دانلود سورس کد کامل پروژه

کد نویسی یک سایت از ابتدا به کمک HTML و CSS: راهنمای جامع

پاسخ به سؤال اصلی: کدنویسی یک سایت از ابتدا با HTML و CSS به معنای ساختاردهی محتوا با HTML و زیباسازی ظاهر آن با CSS است. این روش به شما کنترل کامل بر طراحی و عملکرد وب‌سایت می‌دهد و پایه و اساس توسعه وب محسوب می‌شود.

مقدمه: چرا باید کدنویسی سایت را از پایه یاد بگیریم؟

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

HTML چیست و چرا اولین گام است؟

HTML (HyperText Markup Language) زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب است. این زبان به مرورگر می‌گوید که هر بخش از محتوای شما (متن، تصاویر، لینک‌ها و…) چه نوع عنصری است و چگونه باید ساختاربندی شود. HTML اسکلت اصلی وب‌سایت شما را تشکیل می‌دهد.

HTML چگونه کار می‌کند؟

HTML از “تگ‌ها” (Tags) برای نشانه‌گذاری محتوا استفاده می‌کند. هر تگ دستورالعملی را برای مرورگر ارائه می‌دهد. برای مثال، تگ <p> برای پاراگراف، تگ <h1> برای عنوان اصلی و تگ <img> برای تصاویر استفاده می‌شود.

مثال کد HTML ساده:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>اولین سایت من</title>
</head>
<body>
    <h1>به وب‌سایت من خوش آمدید!</h1>
    <p>این یک پاراگراف آزمایشی است.</p>
    <a href="https://example.com">لینک به یک سایت دیگر</a>
    <img src="image.jpg" alt="تصویر نمونه">
</body>
</html>

<!DOCTYPE html>: نوع سند را مشخص می‌کند.
<html>: ریشه سند HTML.
<head>: حاوی متادیتای صفحه مانند عنوان (که در تب مرورگر نمایش داده می‌شود) است.
<body>: تمام محتوای قابل مشاهده سایت در این بخش قرار می‌گیرد.

CSS چیست و چطور به HTML زیبایی می‌بخشد؟

CSS (Cascading Style Sheets) زبانی است که برای توصیف ظاهر و نمایش اسناد HTML استفاده می‌شود. به عبارت دیگر، CSS به وب‌سایت شما رنگ، فونت، چیدمان و هر آنچه که زیبایی بصری را تشکیل می‌دهد، اضافه می‌کند. اگر HTML اسکلت باشد، CSS لباس و آرایش آن است.

CSS چگونه کار می‌کند؟

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

مثال کد CSS ساده:

فرض کنید می‌خواهید عنوان <h1> قرمز و پاراگراف <p> آبی باشد.

CSS

h1 {
    color: red;
    font-size: 36px;
}

p {
    color: blue;
    line-height: ۱.۵;
}

روش‌های اضافه کردن CSS به HTML:

CSS داخلی (Internal CSS): با استفاده از تگ <style> در بخش <head> سند HTML.

HTML

<head>
    <style>
        body {
            background-color: lightblue;
        }
    </style>
</head>

CSS خطی (Inline CSS): با استفاده از ویژگی style مستقیماً در تگ HTML. (توصیه نمی‌شود مگر در موارد خاص).
HTML
```
<p style="color: green;">این متن سبز است.</p>
```
CSS خارجی (External CSS): بهترین و پرکاربردترین روش، ایجاد یک فایل جداگانه با پسوند .css و لینک کردن آن به سند HTML با تگ <link>.
HTML
```
<head>
    <link rel="stylesheet" href="style.css">
</head>
```
(محتوای style.css همان کد CSS مثال قبل خواهد بود.)

گام به گام: مراحل کدنویسی یک سایت از ابتدا

برای شروع کدنویسی سایت خود، به یک ویرایشگر کد (مانند VS Code، Sublime Text یا Atom) و یک مرورگر وب نیاز دارید.

گام ۱: ایجاد ساختار فایل پروژه

چگونه فایل‌های پروژه را سازماندهی کنیم؟ یک پوشه اصلی برای پروژه خود ایجاد کنید. داخل آن، یک فایل index.html (برای صفحه اصلی) و یک پوشه css (برای فایل‌های CSS) و images (برای تصاویر) بسازید.

ساختار پوشه:

my-website/
├── index.html
├── css/
│   └── style.css
└── images/
    └── logo.png
    └── hero.jpg

گام ۲: ایجاد فایل `index.html` و پایه HTML

فایل index.html را با ساختار پایه HTML پر کنید. این فایل نقطه شروع وب‌سایت شماست.

کد پایه index.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>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">خانه</a></li>
                <li><a href="#">درباره ما</a></li>
                <li><a href="#">خدمات</a></li>
                <li><a href="#">تماس با ما</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="hero">
            <h1>به وب‌سایت ما خوش آمدید!</h1>
            <p>اینجا محتوای اصلی و جذاب شما قرار می‌گیرد.</p>
            <button>اکنون شروع کنید</button>
        </section>

        <section id="about">
            <h2>درباره ما</h2>
            <p>ما چه کسی هستیم و چه کاری انجام می‌دهیم.</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 نام وب‌سایت شما. تمامی حقوق محفوظ است.</p>
    </footer>
</body>
</html>

lang="fa" و dir="rtl" برای پشتیبانی از زبان فارسی و جهت نمایش راست به چپ ضروری هستند.
<meta charset="UTF-8">: برای نمایش صحیح حروف فارسی.
<meta name="viewport" ...>: برای واکنش‌گرایی (Responsive Design) و نمایش صحیح در دستگاه‌های مختلف.

گام ۳: اضافه کردن CSS برای استایل‌دهی

فایل css/style.css را برای زیباسازی وب‌سایت خود ایجاد و ویرایش کنید.

مثال کد style.css:

CSS

/* تنظیمات عمومی */
body {
    font-family: 'Arial', sans-serif;
    margin: ۰;
    padding: ۰;
    box-sizing: border-box; /* برای محاسبه درست ابعاد عناصر */
    direction: rtl; /* جهت نمایش راست به چپ */
    text-align: right; /* تراز متن به راست */
}

/* استایل‌دهی هدر */
header {
    background-color: #۳۳۳;
    color: white;
    padding: 1rem ۰;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: ۰;
    margin: ۰;
}

nav ul li {
    display: inline;
    margin: ۰ 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

nav ul li a:hover {
    color: #ffd700;
}

/* استایل‌دهی بخش هیرو */
#hero {
    background-color: #f4f4f4;
    padding: 4rem 2rem;
    text-align: center;
}

#hero h1 {
    color: #۳۳۳;
    font-size: ۲.5rem;
    margin-bottom: 1rem;
}

#hero p {
    color: #۶۶۶;
    font-size: ۱.2rem;
    margin-bottom: 2rem;
}

#hero button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
}

#hero button:hover {
    background-color: #0056b3;
}

/* استایل‌دهی فوتر */
footer {
    background-color: #۳۳۳;
    color: white;
    text-align: center;
    padding: 1rem ۰;
    position: relative;
    bottom: ۰;
    width: ۱۰۰%;
}

نکات مهم در CSS:

box-sizing: border-box;: این ویژگی اطمینان می‌دهد که padding و border به ابعاد عنصر اضافه نمی‌شوند و طراحی واکنش‌گرا را ساده‌تر می‌کند.
واحدها: استفاده از واحد‌های rem و em به جای px برای اندازه‌گذاری فونت و فاصله‌ها، انعطاف‌پذیری بیشتری در طراحی واکنش‌گرا ایجاد می‌کند.
کلاس‌ها و آیدی‌ها: برای انتخاب دقیق‌تر عناصر در CSS، می‌توانید از class (برای چندین عنصر) و id (برای یک عنصر منحصر به فرد) در HTML استفاده کنید.

گام ۴: افزودن تصاویر و محتوای واقعی

چگونه تصاویر را به سایت خود اضافه کنیم؟ تصاویر را در پوشه images قرار دهید و با استفاده از تگ <img> در HTML به آن‌ها ارجاع دهید.

HTML

<img src="images/my-image.jpg" alt="توضیح تصویر" width="۵۰۰" height="۳۰۰">

alt attribute: بسیار مهم برای سئو و دسترسی‌پذیری. توضیح کوتاهی از محتوای تصویر را ارائه دهید.
width و height: برای جلوگیری از تغییر ناگهانی چیدمان صفحه در هنگام بارگذاری تصویر (Layout Shift).

گام ۵: طراحی واکنش‌گرا (Responsive Design)

چطور سایت را برای نمایش در موبایل و تبلت بهینه کنیم؟ با استفاده از “Media Queries” در CSS می‌توانید ظاهر سایت را بر اساس اندازه صفحه نمایش تغییر دهید.

مثال Media Query:

CSS

@media (max-width: 768px) {
    /* استایل‌هایی که فقط در صفحه‌های کوچکتر از ۷۶۸ پیکسل اعمال می‌شوند */
    nav ul li {
        display: block; /* آیتم‌های منو زیر هم قرار می‌گیرند */
        margin: 10px ۰;
    }

    #hero h1 {
        font-size: 2rem;
    }
}

این کد باعث می‌شود که در صفحات با عرض کمتر از ۷۶۸ پیکسل (مثلاً موبایل‌ها)، آیتم‌های منو به جای افقی، عمودی نمایش داده شوند و اندازه فونت عنوان اصلی کمی کوچکتر شود.

ابزارها و منابع مفید

ویرایشگر کد: Visual Studio Code (VS Code) – رایگان و قدرتمند با افزونه‌های فراوان.
منابع یادگیری HTML/CSS:
- W3Schools (w3schools.com)
- MDN Web Docs (developer.mozilla.org)
- FreeCodeCamp (freecodecamp.org)
ابزارهای توسعه مرورگر (Developer Tools): در تمام مرورگرهای مدرن (Chrome, Firefox) با فشردن F12 یا کلیک راست و انتخاب “Inspect” قابل دسترسی هستند. برای اشکال‌زدایی CSS و HTML بسیار مفیدند.

نکات سئو (SEO) برای سایت HTML/CSS

چگونه سایت HTML/CSS خود را برای موتورهای جستجو بهینه کنیم؟

استفاده صحیح از تگ‌های Heading (H1-H6): هر صفحه باید دقیقاً یک تگ <h1> برای عنوان اصلی داشته باشد. از H2 برای عناوین بخش‌های اصلی و H3 برای زیربخش‌ها استفاده کنید.
تگ alt برای تصاویر: همیشه برای تصاویر از ویژگی alt استفاده کنید و توضیحات مرتبط با محتوای تصویر و کلمات کلیدی خود را در آن قرار دهید.
محتوای باکیفیت و منحصربه‌فرد: مهم‌ترین عامل سئو، تولید محتوای ارزشمند و اورجینال است.
سرعت بارگذاری: کد HTML و CSS را بهینه کنید (حذف فضاهای اضافه، فشرده‌سازی) تا سرعت بارگذاری سایت افزایش یابد.
طراحی واکنش‌گرا: گوگل به سایت‌های موبایل-فرندلی اهمیت زیادی می‌دهد.
استفاده از لینک‌های داخلی و خارجی: لینک به صفحات مرتبط در سایت خودتان (داخلی) و به منابع معتبر دیگر (خارجی) اعتبار سایت شما را افزایش می‌دهد.

نتیجه‌گیری و گام بعدی شما

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

آیا آماده‌اید اولین پروژه وب خود را بسازید؟ همین حالا دست به کار شوید! اگر در این مسیر نیاز به راهنمایی بیشتری دارید یا سؤالی برایتان پیش آمده، می‌توانید در بخش نظرات بپرسید یا با ما تماس بگیرید. ما آماده‌ایم تا به شما در مسیر یادگیری کدنویسی کمک کنیم.

سؤالات متداول (FAQ)

Q1: آیا برای کدنویسی سایت حتماً باید برنامه‌نویسی بلد باشم؟ A1: خیر، HTML و CSS زبان‌های برنامه‌نویسی نیستند، بلکه زبان‌های نشانه‌گذاری و استایل‌دهی هستند. یادگیری آن‌ها بسیار ساده‌تر از زبان‌های برنامه‌نویسی است.

Q2: یادگیری HTML و CSS چقدر طول می‌کشد؟ A2: اصول اولیه HTML و CSS را می‌توان در چند روز یا چند هفته یاد گرفت، اما برای تسلط و ایجاد پروژه‌های پیچیده‌تر، نیاز به ماه‌ها تمرین و مطالعه مداوم است.

Q3: آیا با HTML و CSS می‌توانم یک سایت پویا (Dynamic) بسازم؟ A3: خیر. HTML و CSS فقط برای ساختار و ظاهر سایت‌های ثابت (Static) استفاده می‌شوند. برای قابلیت‌های پویا مانند فرم‌های تماس، پایگاه داده و تعامل با کاربر، به زبان‌های برنامه‌نویسی سمت سرور (مانند PHP، Python، Node.js) و جاوا اسکریپت نیاز دارید.

Q4: آیا برای سئو بهتر است از HTML و CSS استفاده کنم یا وردپرس؟ A4: هر دو می‌توانند برای سئو خوب باشند. HTML/CSS کنترل کامل به شما می‌دهد، اما وردپرس ابزارهای سئو آماده و ساده‌ای دارد. مهم‌ترین عامل، کیفیت محتوا و رعایت اصول سئو است، نه پلتفرم.

Q5: چگونه می‌توانم وب‌سایت HTML/CSS خود را آنلاین کنم؟ A5: برای آنلاین کردن سایت، به یک هاستینگ (فضای میزبانی وب) و یک دامنه (آدرس وب‌سایت) نیاز دارید. پس از خرید هاست، فایل‌های HTML و CSS خود را بر روی آن آپلود می‌کنید.

میانگین امتیازات ۵ از ۵

از مجموع ۳ رای

کسب و کار آنلاین

میثم همتی

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

1 نظر

اریا می گوید 4 سال پیش

میشود در مورد کلید ها یا دکمه ها هم مطلب بگذارید

پاسخ

ارسال یک پاسخ