دوره آموزشی رایگان طراحی وب سایت ۲۶ اسفند ۱۴۰۱ زمان خواندن: ۱۳ دقیقه

دوره آموزش رایگان html و css همراه با تمرین

دوره آموزش رایگان html و css همراه با تمرین

سلام به کاربران عزیز ویرا وردپرس ، من سامان اعطاسی تصمیم گرفتم دوره مقدماتی html و css بهتون آموزش بدم و همراه با تمرین و از همه مهم تر این دوره آموزشی رایگان می باشد. این دوره کاملا به صورت متنی و همراه با حل تمرین می باشد ولی سعی میکنم به صورت ویدیویی هم آموزش هارو رکورد کنم و آپلود کنم داخل هر جلسه ولیییی قولللل نمیدممممم :)))) ، خب دیگه بریم سراغ آموزش و مقدمات آموزش شما برای اینکه html و css یاد بگیرید کاربران ویندوزی برای شروع فقط نیاز به notepad خود ویندوز دارن (الان میتونم بهتون بگم از ادیتور های مختلف استفاده کنید ولی خواهشا اینکارو نکنید چون باید انگشت هاتون عادت کنند به کد نویسی و سرعت کدنویسیتون بالا بره از چند جلسه بعد حتما میگم از چه ادیتوری نصب کنید ) حتما تمرینات کامل حل کنید من جواب تمرین هارو در جلسه بعدی هر تمرین براتون قرار میدم بزن بریم….

HTML و CSS چیست؟

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

ایجاد یک صفحه وب ساده

برای ایجاد یک صفحه وب ساده، به یک ویرایشگر متن نیاز دارید. در ویرایشگر متن، کد زیر را وارد کنید:

مثال

<!DOCTYPE html>
<html>
<head>
  <title>صفحه وب ساده</title>
</head>
<body>
  <h1>این یک عنوان است</h1>
  <p>این یک پاراگراف است</p>
</body>
</html>

 

 

این کد یک صفحه وب ساده با یک عنوان و یک پاراگراف ایجاد می‌کند.

ساختار اصلی یک صفحه HTML

هر صفحه HTML از چهار بخش اصلی تشکیل شده است:

  • تگ <html>: این تگ نشان‌دهنده شروع و پایان یک صفحه HTML است.
  • تگ <head>: این تگ برای قرار دادن اطلاعات مربوط به صفحه وب استفاده می‌شود، مانند عنوان صفحه، توضیحات صفحه، و استایل‌های CSS.
  • تگ <body>: این تگ برای قرار دادن محتوای اصلی صفحه وب استفاده می‌شود.

مفاهیم اولیه CSS

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

  • رنگ‌ها: CSS برای تعیین رنگ عناصر HTML استفاده می‌شود.
  • فونت‌ها: CSS برای تعیین فونت عناصر HTML استفاده می‌شود.
  • اندازه‌ها: CSS برای تعیین اندازه عناصر HTML استفاده می‌شود.

افزودن CSS به صفحه HTML

برای افزودن CSS به صفحه HTML، می‌توانید از تگ <style> استفاده کنید. تگ <style> در بخش <head> صفحه HTML قرار می‌گیرد.

کد زیر یک مثال از نحوه افزودن CSS به صفحه HTML است:

<!DOCTYPE html>
<html>
<head>
  <title>صفحه وب ساده</title>
  <style>
    h1 {
      color: red;
      font-size: 20px;
    }
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>این یک عنوان است</h1>
  <p>این یک پاراگراف است</p>
</body>
</html>

 

این کد رنگ عنوان را قرمز و اندازه آن را 20px می‌کند. همچنین رنگ پاراگراف را آبی و اندازه آن را 16px می‌کند.

چند نکته برای شروع

  • برای یادگیری HTML و CSS، می‌توانید از منابع آنلاین و کتاب‌های آموزشی استفاده کنید.
  • تمرین مداوم کلید یادگیری HTML و CSS است.
  • اگر در مورد چیزی گیج هستید، از انجمن‌های آنلاین یا فروم‌های پشتیبانی کمک بگیرید.

نتیجه

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

تگ‌های متنی

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

  • <h1> تا <h6>: این تگ‌ها برای ایجاد عناوین با اندازه‌های مختلف استفاده می‌شوند.
  • <p>: این تگ برای ایجاد پاراگراف‌ها استفاده می‌شود.
  • <b>: این تگ برای ضخیم کردن متن استفاده می‌شود.
  • <i>: این تگ برای ایتالیک کردن متن استفاده می‌شود.
  • <u>: این تگ برای زیرخط‌دار کردن متن استفاده می‌شود.
  • <strong>: این تگ برای برجسته کردن متن استفاده می‌شود.
  • <em>: این تگ برای تأکید بر متن استفاده می‌شود.
  • <code>: این تگ برای نمایش کد استفاده می‌شود.
  • <pre>: این تگ برای نمایش متن بدون قالب‌بندی استفاده می‌شود.
حتما بخوانید :)  آموزش تصویری نصب تم روی وردپرس

مثال

کد زیر یک صفحه HTML ساده را ایجاد می‌کند که از تگ‌های متنی برای قالب‌بندی متن استفاده می‌کند:

<!DOCTYPE html>
<html lang="fa">
<head>
  <title>صفحه وب ساده</title>
</head>
<body>
  <h1>عنوان صفحه</h1>
  <p>این یک پاراگراف است.</p>
  <b>متن ضخیم</b>
  <i>متن ایتالیک</i>
  <u>متن زیرخط‌دار</u>
  <strong>متن برجسته</strong>
  <em>متن تأکید</em>
  <code>کد</code>
  <pre>متن بدون قالب‌بندی</pre>
</body>
</html>

 

حتما تست کنید و خروجی ببینید با کد زدن و تمرین کردن هست که کد نویسیتون قوی میشه و یاد میگیرید.

 

 

تگ‌های تصویر <img>

HTML شامل یک تگ برای قرار دادن تصاویر در صفحات وب است. تگ <img> برای قرار دادن تصاویر استفاده می‌شود.

مثال

کد زیر یک صفحه HTML ساده را ایجاد می‌کند که از تگ <img> برای قرار دادن یک تصویر استفاده می‌کند:

<!DOCTYPE html>
<html lang="fa">
<head>
  <title>صفحه وب ساده</title>
</head>
<body>
  <img src="image.jpg" alt="یک تصویر">
</body>
</html>

 

صفت‌های تگ <img>

تگ <img> دارای چندین صفت است که می‌توان از آنها برای کنترل نحوه نمایش تصویر استفاده کرد. برخی از صفت‌های پرکاربرد عبارتند از:

  • src: این صفت آدرس تصویر را مشخص می‌کند.
  • alt: این صفت یک متن جایگزین را برای تصویر مشخص می‌کند.
  • width: این صفت عرض تصویر را مشخص می‌کند.
  • height: این صفت ارتفاع تصویر را مشخص می‌کند.

مثال

کد زیر یک صفحه HTML ساده را ایجاد می‌کند که از صفت‌های تگ <img> برای تغییر اندازه و نمایش متن جایگزین استفاده می‌کند:

 

<!DOCTYPE html>
<html lang="fa">
<head>
  <title>صفحه وب ساده</title>
</head>
<body>
  <img src="image.jpg" alt="یک تصویر" width="100" height="100">
</body>
</html>

 

 

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

 

لیست‌ها ul و ol

لیست‌ها برای سازماندهی و نمایش اطلاعات به صورت منظم استفاده می‌شوند. HTML شامل دو نوع لیست است:

  • لیست‌های غیرمرتب (unordered list): این لیست‌ها با استفاده از تگ‌های <ul> و <li> ایجاد می‌شوند.
  • لیست‌های مرتب (ordered list): این لیست‌ها با استفاده از تگ‌های <ol> و <li> ایجاد می‌شوند.

ساخت لیست‌های غیرمرتب

برای ایجاد یک لیست غیرمرتب، از تگ‌های <ul> و <li> استفاده می‌شود. تگ <ul> نشان‌دهنده شروع و پایان یک لیست غیرمرتب است. تگ <li> نشان‌دهنده یک آیتم در یک لیست غیرمرتب است.

مثال

کد زیر یک صفحه HTML ساده را ایجاد می‌کند که یک لیست غیرمرتب را نمایش می‌دهد:

<!DOCTYPE html>
<html lang="fa">
<head>
  <title>صفحه وب ساده</title>
</head>
<body>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
</body>
</html>

 

 

ساخت لیست‌های مرتب

برای ایجاد یک لیست مرتب، از تگ‌های <ol> و <li> استفاده می‌شود. تگ <ol> نشان‌دهنده شروع و پایان یک لیست مرتب است. تگ <li> نشان‌دهنده یک آیتم در یک لیست مرتب است.

مثال

کد زیر یک صفحه HTML ساده را ایجاد می‌کند که یک لیست مرتب را نمایش می‌دهد:

<!DOCTYPE html>
<html lang="fa">
<head>
  <title>صفحه وب ساده</title>
</head>
<body>
  <ol>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ol>
</body>
</html>

 

استایل دهی به لیست‌ها با CSS

می‌توان از CSS برای استایل‌دهی به لیست‌ها استفاده کرد. برخی از ویژگی‌های CSS که می‌توان برای استایل‌دهی به لیست‌ها استفاده کرد عبارتند از:

  • list-style-type: این ویژگی نوع نماد لیست را مشخص می‌کند.
  • list-style-position: این ویژگی موقعیت نماد لیست را مشخص می‌کند.
  • list-style-image: این ویژگی یک تصویر را به عنوان نماد لیست تنظیم می‌کند.
  • list-style-width: این ویژگی عرض نماد لیست را مشخص می‌کند.
  • list-style-margin: این ویژگی حاشیه‌های اطراف نماد لیست را مشخص می‌کند.

مثال

کد زیر یک صفحه HTML ساده را ایجاد می‌کند که یک لیست مرتب را نمایش می‌دهد و از CSS برای استایل‌دهی به آن استفاده می‌کند:

<!DOCTYPE html>
<html lang="fa">
<head>
  <title>صفحه وب ساده</title>
  <style>
    ol {
      color: red;
      list-style-type: circle;
    }
  </style>
</head>
<body>
  <ol>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ol>
</body>
</html>

 

حتما بخوانید :)  وردپرس چیست؟

ساخت جداول <Table>

برای ایجاد یک جدول، از تگ‌های <table>، <tr>، <td>، و <th> استفاده می‌شود. تگ <table> نشان‌دهنده شروع و پایان یک جدول است. تگ <tr> نشان‌دهنده یک ردیف در یک جدول است. تگ <td> نشان‌دهنده یک سلول در یک ردیف است. تگ <th> نشان‌دهنده یک سلول عنوان در یک ردیف است.

مثال

کد زیر یک صفحه HTML ساده را ایجاد می‌کند که یک جدول را نمایش می‌دهد:

<!DOCTYPE html>
<html lang="fa">
<head>
  <title>صفحه وب ساده</title>
</head>
<body>
  <table>
    <tr>
      <th>عنوان</th>
      <th>مقدار</th>
    </tr>
    <tr>
      <td>item 1</td>
      <td>value 1</td>
    </tr>
    <tr>
      <td>item 2</td>
      <td>value 2</td>
    </tr>
  </table>
</body>
</html>

 

استایل دهی به جداول با CSS

می‌توان از CSS برای استایل‌دهی به جداول استفاده کرد. برخی از ویژگی‌های CSS که می‌توان برای استایل‌دهی به جداول استفاده کرد عبارتند از:

  • border: این ویژگی حاشیه‌های اطراف جدول را مشخص می‌کند.
  • border-collapse: این ویژگی نحوه ترکیب حاشیه‌های جدول را مشخص می‌کند.
  • border-spacing: این ویژگی فاصله بین حاشیه‌های جدول را مشخص می‌کند.
  • table-layout: این ویژگی نحوه چیدمان جدول را مشخص می‌کند.
  • width: این ویژگی عرض جدول را مشخص می‌کند.
  • height: این ویژگی ارتفاع جدول را مشخص می‌کند.
  • text-align: این ویژگی نحوه چیدمان متن در سلول‌های جدول را مشخص می‌کند.
  • vertical-align: این ویژگی نحوه چیدمان متن در سلول‌های جدول را مشخص می‌کند.
  • font-size: این ویژگی اندازه فونت در سلول‌های جدول را مشخص می‌کند.
  • color: این ویژگی رنگ متن در سلول‌های جدول را مشخص می‌کند.

مثال

کد زیر یک صفحه HTML ساده را ایجاد می‌کند که یک جدول را نمایش می‌دهد و از CSS برای استایل‌دهی به آن استفاده می‌کند:

<!DOCTYPE html>
<html lang="fa">
<head>
  <title>صفحه وب ساده</title>
  <style>
    table {
      border: 1px solid black;
      border-collapse: collapse;
      width: 500px;
      height: 200px;
    }
    th {
      background-color: lightblue;
      color: black;
      text-align: center;
    }
    td {
      background-color: lightgray;
      color: black;
      text-align: center;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>عنوان</th>
      <th>مقدار</th>
    </tr>
    <tr>
      <td>item 1</td>
      <td>value 1</td>
    </tr>
    <tr>
      <td>item 2</td>
      <td>value 2</td>
    </tr>
  </table>
</body>
</html>

 

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

 

فرم‌ها و ورودی‌ها

فرم‌ها برای جمع‌آوری اطلاعات از کاربران استفاده می‌شوند. ورودی‌ها عناصری هستند که کاربران می‌توانند برای وارد کردن اطلاعات در فرم استفاده کنند.

ایجاد فرم‌ها با <form>, <input>, <textarea>, و <button>

برای ایجاد یک فرم، از تگ <form> استفاده می‌شود. تگ <form> نشان‌دهنده شروع و پایان یک فرم است.

برای ایجاد یک ورودی، از تگ <input> استفاده می‌شود. تگ <input> انواع مختلفی دارد که هر کدام برای جمع‌آوری نوع خاصی از اطلاعات استفاده می‌شوند. برخی از انواع ورودی‌های پرکاربرد عبارتند از:

  • <input type=”text”>: این ورودی برای جمع‌آوری متن استفاده می‌شود.
  • <input type=”password”>: این ورودی برای جمع‌آوری رمزعبور استفاده می‌شود.
  • <input type=”email”>: این ورودی برای جمع‌آوری آدرس ایمیل استفاده می‌شود.
  • <input type=”number”>: این ورودی برای جمع‌آوری اعداد استفاده می‌شود.
  • <input type=”date”>: این ورودی برای جمع‌آوری تاریخ استفاده می‌شود.
  • <textarea>: این ورودی برای جمع‌آوری متن چند خطی استفاده می‌شود.
  • <button>: این ورودی برای ایجاد یک دکمه استفاده می‌شود.

مثال

کد زیر یک صفحه HTML ساده را ایجاد می‌کند که یک فرم را نمایش می‌دهد:

<!DOCTYPE html>
<html lang="fa">
<head>
  <title>صفحه وب ساده</title>
</head>
<body>
  <form action="submit.php" method="post">
    <input type="text" name="name" placeholder="نام">
    <input type="email" name="email" placeholder="آدرس ایمیل">
    <input type="password" name="password" placeholder="رمزعبور">
    <textarea name="message" placeholder="پیام"></textarea>
    <button type="submit">ارسال</button>
  </form>
</body>
</html>

 

نحوه مدیریت و ارسال داده‌ها با فرم‌ها

برای مدیریت و ارسال داده‌های فرم، از روش‌های زیر می‌توان استفاده کرد:

متد GET: این متد داده‌های فرم را به صورت رشته در URL ارسال می‌کند.
متد POST: این متد داده‌های فرم را به صورت مخفی ارسال می‌کند.
مثال

کد زیر یک صفحه HTML ساده را ایجاد می‌کند که از متد POST برای ارسال داده‌های فرم استفاده می‌کند:

 

حتما بخوانید :)  آموزش تصویری مراحل و نحوه نصب وردپرس

استایل دهی به فرم‌ها و ورودی‌ها با CSS

می‌توان از CSS برای استایل‌دهی به فرم‌ها و ورودی‌ها استفاده کرد. برخی از ویژگی‌های CSS که می‌توان برای استایل‌دهی به فرم‌ها و ورودی‌ها استفاده کرد عبارتند از:

  • display: این ویژگی نحوه نمایش فرم یا ورودی را مشخص می‌کند.
  • width: این ویژگی عرض فرم یا ورودی را مشخص می‌کند.
  • height: این ویژگی ارتفاع فرم یا ورودی را مشخص می‌کند.
  • border: این ویژگی حاشیه‌های اطراف فرم یا ورودی را مشخص می‌کند.
  • border-radius: این ویژگی انحنای گوشه‌های فرم یا ورودی را مشخص می‌کند.
  • background-color: این ویژگی رنگ پس‌زمینه فرم یا ورودی را مشخص می‌کند.
  • font-size: این ویژگی اندازه فونت در فرم یا ورودی را مشخص می‌کند.
  • color: این ویژگی رنگ متن در فرم یا ورودی را مشخص می‌کند.

مثال

کد زیر یک صفحه HTML ساده را ایجاد می‌کند که از CSS برای استایل‌دهی به فرم استفاده می‌کند:

<!DOCTYPE html>
<html lang="fa">
<head>
  <title>صفحه وب ساده</title>
  <style>
    form {
      width: 500px;
      height: 200px;
      border: 1px solid black;
      border-radius: 5px;
      background-color: lightgray;
    }
    input {
      width: 200px;
      height: 30px;
      font-size: 16px;
      color: black;
    }
    textarea {
      width: 500px;
      height: 100px;
      font-size: 16px;
      color: black;
    }
    button {
      width: 100px;
      height: 30px;
      background-color: blue;
      color: white;
    }
  </style>
</head>
<body>
  <form action="submit.php" method="post">
    <input type="text" name="name" placeholder="نام">
    <input type="email" name="email" placeholder="آدرس ایمیل">
    <input type="password" name="password" placeholder="رمزعبور">
    <textarea name="message" placeholder="پیام"></textarea>
    <button type="submit">ارسال</button>
  </form>
</body>
</html>

 

فرم‌ها و ورودی‌ها ابزارهای مهمی برای تعامل با کاربران هستند. با استفاده از HTML و CSS، می‌توانید فرم‌ها و ورودی‌های سفارشی ایجاد کنید که نیازهای شما را برآورده می‌کنند.

 

CSS پیشرفته

انتخاب‌گرها (Selectors) و قواعد CSS

انتخاب‌گرها بخش مهمی از CSS هستند که به شما امکان می‌دهند عناصر خاص در صفحه را هدف قرار دهید و به آنها سبک‌دهی کنید. انتخاب‌گرهای CSS به دو دسته تقسیم می‌شوند:

  • انتخاب‌گرهای ساده: این انتخاب‌گرها فقط یک عنصر را هدف قرار می‌دهند.
  • انتخاب‌گرهای ترکیبی: این انتخاب‌گرها چندین عنصر را هدف قرار می‌دهند.

انتخاب‌گرهای ساده

انتخاب‌گرهای ساده به شکل زیر هستند:

selector {
  property: value;
}

مثال

کد زیر یک عنصر p را با رنگ قرمز هدف قرار می‌دهد:

p {
  color: red;
}

 

انتخاب‌گرهای ترکیبی

انتخاب‌گرهای ترکیبی با استفاده از عملیات منطقی مانند and و or می‌توانند چندین عنصر را هدف قرار دهند.

مثال

کد زیر تمام عناصر p را که کلاس my-class دارند را با رنگ قرمز هدف قرار می‌دهد:

.my-class p {
  color: red;
}

 

 

سلسله مراتب و ارث بری در CSS

CSS دارای یک سیستم سلسله مراتبی است که به عناصر امکان می‌دهد از سبک‌های والدین خود ارث ببرند.

مثال

کد زیر یک عنصر div را با رنگ قرمز هدف قرار می‌دهد:

div {
  color: red;
}

 

این کد همچنین باعث می‌شود که تمام عناصر p که در داخل عنصر div قرار دارند نیز قرمز شوند.

تصاویر پس‌زمینه (Background Images)

CSS به شما امکان می‌دهد به عناصر تصاویر پس‌زمینه اضافه کنید.

مثال

کد زیر یک عنصر div را با تصویر پس‌زمینه یک گل target قرار می‌دهد:

div {
  background-image: url("image.jpg");
}

 

تجربه‌ی کاربری (User Experience) با CSS انیمیشن

CSS انیمیشن به شما امکان می‌دهد عناصر صفحه را به صورت پویا حرکت دهید.

مثال

کد زیر یک عنصر div را به صورت عمودی به بالا حرکت می‌دهد:

div {
  animation: move 2s ease-in-out;
}

@keyframes move {
  0% {
    top: 0;
  }
  100% {
    top: 100px;
  }
}

 

انتخاب‌گرها، سلسله مراتب و ارث بری، تصاویر پس‌زمینه و انیمیشن CSS ابزارهای قدرتمندی هستند که می‌توانند به شما کمک کنند تا صفحات وب خود را به صورت سفارشی ایجاد کنید.

 

آموزش css آموزش html آموزش رایگان html
دیدگاه‌ها ۰
ارسال دیدگاه جدید

ارسال دیدگاه جدید

نشانی ایمیل شما منتشر نخواهد شد. بخش های موردنیاز علامت گذاری شده اند *