وردپرس

اموزش کامل HTML و CSS به زبان فارسی [آپدیت شد]

لیست دروس این دوره

بخش ابتدا: html چه است؟
۱۰

بخش دوم: آشنایی با تگ p (پاراگراف) و تگ های heading (عنوان)
۱۰

بخش سوم: معرفی css و روش ارتباط آن با html
۱۰

بخش چهارم: آشنایی با متاتگ charset و انواع استایل نویسی
۱۰

بخش پنجم: تولید جدول در HTML
۱۰

بخش ششم: تولید لینک توسط از تگ a
۱۰

بخش هفتم: نشان عکس ها با تگ img
۱۰

بخش هشتم: استفاده از فهرست ها در HTML – تگ ul و ol
۱۰

میانگین امتیازات: ۱۰

قبل از معرفی HTML، طراحی یک پیج وب به شدت محدود بود. و از آنجا که هیچ ویرایشگری برای HTML وجود نداشت، پیشرفت دهندگان وب مجبور بودند زبان کدنویسی را به عنوان یک مأموریت یاد بگیرند که بسیار سخت و خسته کننده بود.
برای اینکه وارد دنیای طراحی وب شویم می‌بایست اول در قدم صفر، html و css را یاد بگیریم.HTML مخفف عبارت Hyper Text Mark-Up Language است. این یک زبان کدنویسی است که به وسیله پیشرفت دهندگان در سراسر جهان برای تم بندی پیجها وب گزینه استفاده قرار می گیرد. اکثر کسب و کارهایی که به تازگی پیاده سازی شده اند می توانند برای طراحی و پیشرفت سایت خود از HTML استفاده کنند.

لیست مقاله

چرا HTML؟

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

بسیاری از ابزارهای پیشرفت وب مانند Dreamweaver و FrontPage از HTML ساپورت می کنند که در مقایسه با سایر زبان های کدنویسی آسان تر است.

چرا CSS؟

  • یکی از دلایل استفاده از CSS اینست که HTML را اتمام می کند. HTML و CSS هر دو دارای نقاط ضعف هستند، اما هنگامی که با یکدیگر ترکیب می شوند در طراحی وب قدرتمند تر دیده می شوند.
  • هنگامی که از CSS استفاده می کنید، پیجها شما نه تنها فوری تر بارگذاری می شوند، بلکه می توانند فوری تر از قبل گزینه استفاده قرار گیرند.

برای یادگیری طراحی وب و SEO پیشنیاز شما یادگیری HTML و CSS است. در این دوره قصد داریم صفر تا صد آن را به شما اموزش دهیم. با ما همراه باشید.


بخش ابتدا: html چه است؟

تو بخش ابتدا اموزش html قراره چه چیزهایی رو اموزش ببینیم؟

  • معرفی html
  • آشنایی با ساختار html
  • آغاز کد نویسی html

دریافت ویدیو با لینک مستقیم

کد زیر ساختار html هست! و مسلما می‌بایست تو همه پروژه هاتون استفاده کنید.

<!doctype html>  <html>  <head>  <title>عنوان سایت</title>  </head>  <body>  </body>  </html>  

بخش دوم: آشنایی با تگ p (پاراگراف) و تگ های heading (عنوان)

تگ p برای تعریف یک بلوک متن به عنوان پاراگراف استفاده می شود.این عنصر HTML یکی از اصول اولیه در HTML است.

بیشتر بخوانید  معرفی فونت ایران سنس دست نویس IRANSansDN

پاراگراف ها در داخل برچسب <p> و </ p> نوشته می شوند.

هنگامی که یک بلوک متن به وسیله برچسب های پاراگراف احاطه شده است، براوزر به طور اتوماتیک فضای سفید قبل و پس از پاراگراف را اضافه می کند.

جلسه ابتدا با ساختار html آشنا شدیم. اکنون تو این جلسه چی یاد می گیریم؟

  • آشنایی با تگ پاراگراف یا همون تگ p
  • آشنایی با تگ های عنوان یا همون heading

دریافت ویدیو با لینک مستقیم

تو کد زیر از تگ های عنوان و تگ پاراگراف استفاده کردیم. بررسی کنید که مسلما داخل تگ body نوشته بشه!

<!doctype html>  <html>  <head>  <title>عنوان سایت</title>  </head>  <body>  <h1>تگ عنوان</h1>  <h2>تگ عنوان</h2>  <h3>تگ عنوان</h3>  <h4>تگ عنوان</h4>  <h5>تگ عنوان</h5>  <h6>تگ عنوان</h6>  <p>متن عنوان</p>  </body>  </html>  

بخش سوم: معرفی css و روش ارتباط آن با html

CSS (Cascading Style Sheet) برای تعریف ارائه یا روش نشان وبسایت گزینه استفاده قرار می گیرد.

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

تو این جلسه قراره چی یاد بگیریم؟

  • معرفی زبان css
  • روش اتصال css به html
  • آغاز کد نویسی در css

دریافت ویدیو با لینک مستقیم

خب برای اینکه از css استفاده کنیم یه فایل با اسم style.css ساخت می‌کنیم و تو فایل html توسط از تگ link فایل سی اس اس رو فراخوانی می کنیم.

<!doctype html>  <html>  <head>  <title>عنوان سایت</title>  <link href="style.css" rel="stylesheet" type="text/css">  </head>  <body>  <h1>تگ عنوان</h1>  </body>  </html>  

اکنون می تونید استایل های موردنظرتون رو تو فایل style.css بنویسید.

// Style.css  body{  background:#ccc;  }  h1{  color:#555;  }  

بخش چهارم: آشنایی با متاتگ charset و انواع استایل نویسی

متاتگ charset کاراکترهای خاص در پیجها وب را صحیح نمایش می دهد.

مشخصه lang زبان پیج html را مشخص می کند.

مشخصه dir جهت نوشتاری متن در پیج را مشخص می کند.

تو بخش چهارم اموزش html و css چه چیزهایی یاد می گیریم؟

  • انواع استایل نویسی در css
  • آشنایی با مشخصه های lang و dir در html
  • استفاده از متاتگ charset

دریافت ویدیو با لینک مستقیم

با تگ charset نوع نشان متن ها رو تو پیج مشخص کرد که ما مقدارش رو utf-8 قرار می‌دیم (برای ساپورت از زبان فارسی)

از مشخصه dir برای راست چین کردن متن ها در صفجه استفاده می کنیم و از مشخصه lang برای مشخص کردن زبان وبسایت استفاده می کنیم.

<!doctype html>  <html lang="fa" dir="rtl">  <head>  <meta charset="utf-8">  <title>عنوان سایت</title>  <link href="style.css" rel="stylesheet" type="text/css">  </head>  <body>  <h1>تگ عنوان</h1>  </body>  </html>  

بخش پنجم: تولید جدول در HTML

تگ <table> برای طراحی یک جدول استفاده می شود.

<tr>، <th>، <td> برچسب هایی هستند که در داخل برچسب <table> استفاده می شوند و نوشته می شوند.

<tr> – جدول ردیف

<th> – عنوان جدول

<td> – داده های جدول

مشخصه width برای تعیین عرض کل جدول استفاده می شود.

مشخصه height برای تعیین ارتفاع جدول استفاده می شود.

اگر مقدار عرض و ارتفاع درصد (٪) داده شوند، اندازه جدول بصورت اتوماتیک براساس اندازه پیج نشان ست آپ خواهد شد.

در بخش پنجم دوره آموزشی HTML و CSS به مبحث تولید جداول می پردازیم.

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

دریافت ویدیو با لینک مستقیم

خب تو قطعه کد پایین یه جدول ساخت می کنیم (توضیحات جامع در ویدیو).

<!doctype html>  <html lang="fa" dir="rtl">  <head>  <meta charset="utf-8">  <title>عنوان سایت</title>  <link href="style.css" rel="stylesheet" type="text/css">  </head>  <body>  <table>  <thead>  <th>عنوان ابتدا</th>  <th>عنوان دوم</th>  <th>عنوان سوم</th>  </thead>  <tbody>  <tr>  <td>متن عنوان</td>  <td>متن عنوان</td>  <td>متن عنوان</td>  </tr>  <tr>  <td>متن عنوان</td>  <td>متن عنوان</td>  <td>متن عنوان</td>  </tr>  <tr>  <td>متن عنوان</td>  <td>متن عنوان</td>  <td>متن عنوان</td>  </tr>  </tbody>  </table>  </body>  </html>  

اکنون توسط از css یه استایل زیبا به این جدول میدیم (توضیحات جامع در ویدیو)

body{  background:#fff;  }  table{  width:100%;  }  table,tr,th,td{  border:2px dotted #ccc;  font:11px tahoma;  border-collapse:collapse;  padding:10px;  text-align:center;  }  tr:nth-child(even){  background:#ddd  }  

بخش ششم: تولید لینک توسط از تگ a

تگ a برای اتصال یک پیج وب به یک پیج وب دیگر استفاده می شود.

بیشتر بخوانید  راهنما ساده ساخت محتوای پرسونا محور در مارکتینگ محتوایی + مثال اجرا شده

بصورت پیشفرض وقتی اشاره گر ماوس را به لینک (تگ <a> ببرید)، فلش ماوس به یک نماد کوچک به شکل دست می شود.

  • معرفی تگ پرکاربرد a
  • آشنایی با مشخصه های تگ a

دریافت ویدیو با لینک مستقیم

تو کد پایین روش نوشتن تگ a رو می تونید ببینید. یکی از تگ ها به سایت لینک داده و یکی دیگه یه فایل رو دریافت می کنه.

<!doctype html>  <html lang="fa" dir="rtl">  <head>  <meta charset="utf-8">  <title>عنوان سایت</title>  <link href="style.css" rel="stylesheet" type="text/css">  </head>  <body>  <a href="http://wpedu.ir" hreflang="fa" target="_blank" rel="nofollow">آموزشگاه ورد پرس</a>  <a href="https://wpedu.poshtiban.io/p/wpedu/html/HTML%281%29.mp4" download="اموزش ویدویی طراحی سایت">آموزشگاه ورد پرس</a>  </body>  </html>  

بخش هفتم: نشان عکس ها با تگ img

تگ <img> برای قرار دادن عکس روی پیج وب استفاده می شود.

src یکی از ویژگی میزبانی، اجباری است و برای تعیین آدرس عکس استفاده می شود.

  • نشان عکس ها با تگ پرکاربرد img
  • آشنایی با مشخصه های تگ img

دریافت ویدیو با لینک مستقیم

کد پایین یه عکس رو تو پیج براوزر نشان میده. البته بررسی کنید پوشه images رو بسازید و داخلش عکس رو با نام jpg.1 قرار بدین

<!doctype html>  <html lang="fa" dir="rtl">  <head>  <meta charset="utf-8">  <title>عنوان سایت</title>  <link href="style.css" rel="stylesheet" type="text/css">  </head>  <body>  <a href="http://google.com">  <img src="http://wpedu.ir/images/1.jpg" alt="گل" title="گل شماره ۱" width="250" height="250">  </a>  </body>  </html>  

بخش هشتم: استفاده از فهرست ها در HTML – تگ ul و ol

تگ <ul> به عنوان فهرست غیر شمارشی استفاده می شود.

تگ <ul> زمانی استفاده می شود که نیازی به سفارش ترتیبی وجود ندارد.

فهرست غیر شمارشی توسط از تگ <ul> ساخت می شود و تمام موارد فهرست آن در داخل برچسب <li> نوشته شده است.

تگ <ol> به عنوان فهرست مرتب تعریف شده است.

فهرست مرتب شده توسط از برچسب <ol> ساخت می شود و تمام موارد فهرست آن در داخل برچسب <li> نوشته شده است.

  • روش ساخت فهرست با تگ ul
  • روش ساخت فهرست با تگ ol

دریافت ویدیو با لینک مستقیم

تو کد پایین یه فهرست غیر شمارشی توسط از ul و یه فهرست شمارشی با ol ساخت کردیم.

<!doctype html>  <html lang="fa" dir="rtl">  <head>  <meta charset="utf-8">  <title>عنوان سایت</title>  <link href="style.css" rel="stylesheet" type="text/css">  </head>  <body>    <!--فهرست غیر شمارشی -->  <ul>  <li>فهرست شماره ۱</li>  <li>فهرست شماره ۲</li>  <li>فهرست شماره ۳</li>  </ul>    <!--فهرست شمارشی -->  <ol>  <li>فهرست شماره ۱</li>  <li>فهرست شماره ۲</li>  <li>فهرست شماره ۳</li>  </ol>    </body>  </html>  

بخش نهم: استفاده از سلکتور * در CSS

در بخش پنجم اموزش HTML و CSS از سلکتور * استفاده می کنیم.

  • معرفی سلکتور بین المللی *
  • کدهای Reset CSS
  • آشنایی بیشتر با کدهای css

کد css reset چه است؟

هر براوزر دارای مقادیر پیش فرض برای css است. به عنوان نمونه، اکثر مرورگرها به طور پیش فرض لینک ها را آبی و لینک های مخاطب شده را بنفش، اندازه های فونت های H1، H2، H3 و … را متفاوت از یکدیگر نشان می دهند. شما همیشه تعجب می کنید چرا دکمه های ارسال در هر براوزر متفاوت هستند؟ توسط از css reset، نویسندگان CSS می توانند روش نشان المان های داخل پیج را بصورت یکسان نشان دهند.

دریافت ویدیو با لینک مستقیم

یه کد بسیار جامع و خوب css reset براتون آماده کردم که می تونید ازش استفاده کنید.

html, body, div, span, applet, object, iframe,  h1, h2, h3, h4, h5, h6, p, blockquote, pre,  a, abbr, acronym, address, big, cite, code,  del, dfn, em, img, ins, kbd, q, s, samp,  small, strike, strong, sub, sup, tt, var,  b, u, i, center,  dl, dt, dd, ol, ul, li,  fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td,  article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary,  time, mark, audio, video {  margin: 0;  padding: 0;  border: 0;  font-size: 100%;  font: inherit;  vertical-align: baseline;  }  /* HTML5 display-role reset for older browsers */  article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section {  display: block;  }  body {  line-height: 1;  }  ol, ul {  list-style: none;  }  blockquote, q {  quotes: none;  }  blockquote:before, blockquote:after,  q:before, q:after {  content: '';  content: none;  }  table {  border-collapse: collapse;  border-spacing: 0;  }  

منبع

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

نوشته های مشابه

پاسخی بگذارید

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