اموزش کامل HTML و CSS به زبان فارسی [آپدیت شد]
قبل از معرفی 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 است.
پاراگراف ها در داخل برچسب <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; } 
