آموزش css html آموزش HTML5 CSS3
آموزش css html آموزش HTML5 CSS3
پیشنمایش زنده لیست دوره

آموزش css html آموزش HTML5 CSS3

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

آموزش طراحی سایت با html و css آموزش طراحی سایت با html و css پروژه محور

معرفی دوره جامع آموزش css و html برای طراحی وب

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

آموزش css

پیش نیازهای این دوره چیست؟

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

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

ویژگی‌های دوره جامع آموزش css و html برای طراحی وب

دوره جامع آموزش css و html برای طراحی وب به نحوی تدریس شده که همه علاقه‌مندان بتوانند در آن شرکت کنند و به طور کامل و جامع با کدنویسی css و html آشنا شوند. فرقی نمی‌کند سطح دانش شما از این دو زبان چقدر باشد. در هر صورت این دوره می‌تواند به شما کمک کند تا در کدنویسی html و css پیشرفت کنید. ما در این دوره آموزش css و html را از مقدماتی تا پیشرفته قرار داده‌ایم. این دوره به صورت ۰ تا ۱۰۰ برگزار می‌شود. تمامی آموزش‌ها پروژه محور هستند. پشتیبانی حرفه‌ای در طول دوره به شرکت کنندگان ارائه می‌گردد. همچنین شما به محتوای این دوره به دو صورت ویدیویی و دانلودی دسترسی خواهید داشت.

آموزش css و css3

آموزش css و html ۰ تا ۱۰۰ از پایه تا پیشرفته

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

برای اینکه به یک طراح وب حرفه‌ای تبدیل شوید باید ابتدا بر زبان‌های html و css مسلط شوید. اگر هیچ گونه آشنایی قبلی با این زبان‌ها ندارید، در این دوره آن‌ها را از ۰ تا ۱۰۰ به شما آموزش می‌دهیم. اما اگر هم از قبل با این دو زبان آشنا هستید و حتی نحوه کدنویسی آن‌ها را می‌دانید، شرکت در این دوره می‌تواند برای شما مفید باشد. زیرا آموزش css پیشرفته و آموزش html پیشرفته را نیز در این دوره برای‌تان آماده کرده‌ایم.

آموزش پروژه محور

در آموزش کدنویسی و طراحی وب تنها بیان تئوری‌ها کافی نیست. شما می‌توانید تمامی تگ‌های html را حفظ کنید، اما تا زمانی که دست به کار نشده و آن‌ها را در عمل استفاده نکنید، به تسلط نمی‌رسید. از این رو در دوره جامع آموزش css و html تمامی آموزش‌ها به صورت پروژه محور برگزار می‌شوند. آموزش css پروژه محور و آموزش html پروژه محور به شما کمک می‌کند همزمان هم دانش کار و هم نحوه انجام آن را بیاموزید. این مساله موجب می‌شود با سرعت بیشتری مباحث را یاد بگیرید.

یکی از مواردی که در یادگیری طراحی وب و به خصوص آموزش css و html اهمیت زیادی دارد، تمرین و تکرار است. شما باید تمامی آموخته‌های خود را بارها تمرین کنید و با تکرار این عمل به آن مسلط شوید. از آنجا که آموزش‌های این دوره به صورت پروژه محور ارائه می‌شوند، شما از همان ابتدا با نحوه تمرین کردن آشنا می‌شوید.

آموزش css پروژه محور

پشتیبانی حرفه‌ای

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

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

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

آموزش css و html

در دوره جامع آموزش css و html برای طراحی وب چه چیزی یاد می‌گیریم؟

این دوره در دو فصل مقدماتی و پیشرفته برگزار می‌شود. در این دوره به طور کامل و از پایه تا پیشرفته با زبان‌های html و css آشنا می‌شویم و نحوه استفاده از آن‌ها را در عمل می‌آموزیم. برخی از مباحثی که در این دوره آموزش داده می‌شوند عبارتند از: آموزش Selector به صورت کامل، آموزش مفهوم box model به صورت کامل، طراحی رسپانسیو، مدیا کوئری ها در css3، آموزش سیستم grid در طراحی رسپانسیو و… . علاوه بر این آموزش‌ها، یک قالب کامل را به صورت ۰ تا ۱۰۰ در این دوره پیاده سازی می‌کنیم.

دوره جامع آموزش css و html برای طراحی وب مناسب چه کسانی است؟

دوره جامع آموزش css و html برای طراحی وب مناسب کسانی است که:

  • به طراحی وب‌سایت علاقه‌مند هستند
  • قصد دارند وارد بازار کار طراحی سایت شوند
  • فریلنسر هستند و قصد افزایش درآمد خود را دارند
  • می‌خواهند طراحی سایت را به صورت اصولی یاد بگیرند
  • یک وب‌سایت دارند و می‌خواهند طراحی ظاهری آن را مطابق با سلیقه خودشان تغییر دهند

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

  • وقت کافی برای تمرین و تکرار و یادگیری ندارند
  • هیچ علاقه‌ای به کسب درآمد از طریق طراحی وب ندارند
  • از درآمد خود راضی هستند

دوره جامع آموزش css و html برای طراحی وب

آشنایی با زبان html

اگر قصد دارید طراحی وب را یاد بگیرید، در اولین قدم باید به زبان html مسلط شوید. فرقی نمی‌کند طراحی وب را با php انجام دهید یا Asp.net، در هر صورت یادگیری html یک ضرورت است. اما html چیست؟ ابتدا باید یادآور شد که html یک زبان برنامه نویسی نیست. واژه html مخفف عبارت Hyper Text Markup Language است که در زبان فارسی به «زبان نشانه گذاری ابرمتن» ترجمه شده است. بنابراین می‌توان گفت html یک زبان نشانه گذاری است، نه یک زبان برنامه نویسی.

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

Html5 چیست

Html5 چیست و چرا باید آن را به کار برد؟

از سال ۱۹۹۱ که زبان html به وجود آمد تا به امروز تغییرات زیادی در این زبان رخ داده است. این تغییرات در جهت رشد و ارتقای استانداردهای این زبان نشانه گذاری بوده است. در حال حاضر جدیدترین نسخه html که مورد تایید شبکه جهانی وب می‌باشد، html5 است. آخرین تغییراتی که در html5 به وجود آمده مربوط به سال ۲۰۱۴ می‌باشد. تمام کسانی که قصد کدنویسی برای وب را دارند باید با تغییرات و پیشرفت‌های html5 آشنا شوند.

بسیاری از تگ‌هایی که در نسخه‌های قبلی زبان html مانند html4 استفاده می‌شد، امروزه منسوخ شده‌اند. در حال حاضر تمامی مرورگرها، موتورهای جستجو و… خود را با آپدیت‌های html5 به روز رسانی کرده‌اند. به همین دلیل اگر در کدنویسی وب‌سایت خود از ‌‌تگ‌های جدید html5 استفاده نکنید، از هر نظر به مشکل خواهید خورد. به عنوان مثال مرورگرهای موبایل و دسکتاپ ممکن است وب‌سایت شما را به درستی نشان ندهند. یا موتورهای جستجو مانند گوگل، استفاده از تگ‌های منسوخ شده را یک امتیاز منفی در نظر می‌گیرند و به وب‌سایت اجازه افزایش رتبه نمی‌دهند.

در دوره جامع آموزش css و html برای طراحی وب، آموزش html و آموزش html5 به طور کامل قرار داده شده است. در این دوره با تگ‌های مهم و کاربردی html5 کار می‌کنیم و نحوه استفاده از آن‌ها را در عمل می‌آموزیم.

آموزش HTML

آشنایی با زبان css

یکی دیگر از زبان‌های نشانه گذاری که برای طراحی صفحات وب مورد استفاده قرار می‌گیرد، زبان css است. واژه css مخفف عبارت Cascading Style Sheets می‌باشد که معنای تحت الفظی آن در فارسی «برگه‌های آبشاری» است. گفتیم اولین قدم در یادگیری طراحی وب، یادگیری html است. در قدم دوم باید آموزش css و css3 را بگذرانید. در واقع زبان‌های html و css مکمل یکدیگر هستند. شما بدون استفاده از css و تنها با زبان html می‌توانید ساختار صفحات وب را طراحی کنید. اما این ساختار از ظاهر زیبایی برخوردار نیست. برای اینکه بتوانیم تغییرات اساسی در ظاهر صفحات طراحی شده ایجاد کنیم، باید از زبان css استفاده کنیم. بدون استفاده از css ظاهر صفحات به هم ریخته، زشت و نامتجانس خواهد بود.

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

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

Css3 چیست و چرا باید از آن استفاده کرد؟

مانند زبان نشانه گذاری html، با گذر زمان نسخه‌های جدیدتری از زبان css نیز به وجود آمده است. در حال حاضر آخرین نسخه زبان css که مورد تایید شبکه جهانی وب است، css3 نام دارد. استفاده از آخرین نسخه این زبان همانطور که مورد زبان html هم ذکر کردیم، واجب است. استفاده از css3 در کنار html5 باعث می‌شود صفحاتی که طراحی می‌کنیم از سرعت بالایی برخوردار باشند. به عبارت دیگر، هرچه کدنویسی ما به استانداردهای روز نزدیک‌تر باشد، صفحه‌ای که طراحی کرده‌ایم سریع‌تر بارگذاری می‌شود. و این مساله هم برای کاربران و هم برای موتورهای جستجو از اهمیت بسیار بالایی برخوردار است.

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

آموزش css و css3 در این دوره آموزشی به طور کامل و جامع گنجانده شده است. آموزش css پروژه محور بهترین راه برای یادگیری این زبان نشانه گذاری است. از این رو در این دوره همراه با پروژه‌های متنوع نحوه استفاده از css3 را در عمل می‌آموزید.

دوره جامع آموزش css و html برای طراحی وب

سرفصل‌های دوره جامع آموزش css و html برای طراحی وب

دوره جامع آموزش css و html برای طراحی وب در دو فصل مقدماتی و پیشرفته برگزار می‌گردد. سرفصل‌های این دوره به شرح زیر می‌باشد.

سرفصل‌های آموزش css و html مقدماتی

در این بخش تمامی مباحث مقدماتی آموزش css و html معرفی می‌شوند. ابتدا مباحث مقدماتی را آموزش می‌دهیم. سپس html5 به همراه تگ‌ها و المان‌های مهم و ضروری و همچنین Attributeها آموزش داده می‌شوند. در ادامه مباحث css3 شامل مفاهیم selector، box model، کار با پس زمینه‌ها، شبه کلاس‌ها و… به طور جامع آموزش داده می‌شوند. بعد از آن تایپوگرافی در وب و طراحی رسپانسیو با استفاده از css را آموزش می‌دهیم. در انتها نیز طی یک پروژه عملی تمام آموخته‌ها را پیاده سازی می‌کنیم.

مباحث مقدماتی

  • معرفی ابزارهای مورد نیاز برای طراحی وب و مرورگرهای محبوب
  • آموزش استفاده از امکانات مرورگرهای Chrome و Firefox
  • معرفی معروف‌ترین IDEها و Editorها برای کدنویسی
  • آموزش نصب و تنظیمات نرم افزار ویژوال استودیو کد یا Vscode
  • معرفی و نصب اکستنشن‌های کاربردی ویژوال استودیو کد
  • معرفی و نصب پلاگین emmet برای تسریع در کدنویسی
  • آموزش css reset و نحوه فشرده سازی فایل‌های css

آموزش جامع html5

  • آشنایی با زبان html و نحوه کدنویسی آن
  • آشنایی با ساختار اسناد html و نحوه پیاده سازی چارچوب اولیه یک سند
  • آموزش المان های block level و inline level و معرفی تگ‌های قالب‌دهی
  • آموزش کامل تگ‌های جدول و نقل قول
  • آموزش کار با تگ‌های تصویر
  • آموزش تگ‌های مولتی مدیا در html5
  • آموزش تگ‌های input در html5
  • آموزش انواع Attributeها برای inputها در html5
  • آموزش کار با تگ‌های مفهومی یا semantic web elements

آموزش جامع css3

  • آشنایی با زبان css و نحوه کدنویسی آن
  • آموزش قواعد نوشتاری در css
  • آموزش مفهوم selector به صورت کامل
  • آموزش مفهوم box model به صورت کامل
  • آموزش نحوه استایل دهی به متن در css
  • آموزش استفاده از فونت‌ها در طراحی وب با css
  • آموزش کار با پس زمینه یا background در css
  • آموزش نحوه استفاده از فونت آیکون‌ها
  • آموزش list و display در css
  • آموزش استفاده از شبه کلاس‌ها یا pseudo classes و position در css
  • آموزش استفاده از شبه عناصر یا pseudo elements
  • آموزش نحوه استفاده از gradient و border image در css
  • آموزش کار با filter , root و ماژولار نویسی css
  • آموزش شناور سازی عناصر یا float
  • بررسی combinator و attribute سلکتورها
  • بررسی مفاهیم object-fit و vertically element center
  • بررسی مقادیر اولیه و initial-inherit

آموزش تایپوگرافی در وب

آموزش تایپوگرافی در وب

  • آشنایی با مفهوم تایپوگرافی در وب
  • بررسی انواع فونت آیکون‌های مدرن و ضروری
  • بررسی واحدهای اندازه‌گیری نسبی و مطلق
  • بررسی توابع کاربردی

آموزش طراحی رسپانسیو با استفاده از css

  • آشنایی با اصول طراحی رسپانسیو یا واکنش‌گرا
  • آموزش مدیا کوئری‌ها در css
  • آموزش سیستم grid در طراحی رسپانسیو
  • آموزش پیاده سازی grid system اختصاصی در عمل

پروژه عملی طراحی رسپانسیو با استفاده از آموزش‌های html و css

  • تعیین ساختار پروژه
  • طراحی منو رسپانسیو
  • طراحی و کدنویسی برای هدر
  • طراحی و کدنویسی بخش دوره ما
  • طراحی و کدنویسی بخش درباره ما
  • طراحی و کدنویسی بخش مدرسین دوره
  • طراحی و کدنویسی بخش نوشته‌ها و مقالات
  • طراحی و کدنویسی منو آکاردئونی
  • طراحی و کدنویسی فوتر
  • آموزش‌های تکمیلی درباره طراحی رسپانسیو

سرفصل‌های آموزش css و html پیشرفته

در فصل دوم این دوره، مباحث پیشرفته و حرفه‌ای مربوط به css و html را آموزش می‌دهیم. ابتدا با نحوه لایه بندی‌های تک ستونه، دو ستونه و… آشنا می‌شویم. سپس ماژول‌های Flexbox و css grid را معرفی کرده و نحوه کار با آن‌ها را آموزش می‌دهیم. بعد از آن یاد می‌گیریم چگونه فرم‌های حرفه‌ای و پیشرفته طراحی کنیم. در ادامه نحوه ساخت انیمیشن در css3 را آموزش می‌دهیم. بعد تمامی آموخته‌های خود را در قالب پروژه‌ها به کار می‌گیریم. در انتها نیز با کتابخانه‌های کاربردی آشنا می‌شویم و نحوه استفاده از Git را می‌آموزیم.

آموزش انواع لایه بندی در طراحی وب

  • آموزش نحوه پیاده سازی لایه بندی تک ستونه یا one columns layout
  • آموزش پیاده سازی لایه بندی دو ستونه یا two columns layout
  • آموزش نحوه پیاده سازی لایه بندی سه ستونه یا three columns layout
  • آموزش پیاده سازی لایه بندی سایدبار تک ستونه یا sidebar layout
  • آموزش نحوه پیاده سازی لایه بندی سایدبار دو ستونه یا two sidebar layout
  • آموزش پیاده سازی لایه بندی ستون های نابرابر یا unequal column layout
  • آموزش نحوه پیاده سازی لایه بندی کاشی کاری یا tile column layout
  • آموزش پیاده سازی لایه بندی زیگزاگ یا zig zag layout
  • آموزش پیاده سازی لایه بندی ترکیبی یا mix layout

آموزش ماژول Flexbox در css3

  • آشنایی با Flexbox در css
  • آشنایی با ساختار ردیف و ستون
  • آموزش نحوه تراز کردن المان ها نسب به عرض و ارتفاع سند
  • آموزش تنظیم کردن عرض عناصر و تعیین نحوه ترتیب چینش آن‌ها
  • آموزش نحوه تراز کردن المان‌های فرزند در راستای عرض و ارتفاع المان والد
  • پروژه عملی کار با Flexbox در css3

آموزش ماژول css grid در css3

آموزش ماژول css grid در css3

  • آشنایی با css grid و مفاهیم آن
  • آموزش ایجاد سطرها و ستون ها به وسیله css grid
  • آموزش نحوه تراز المان‌ها در css grid
  • آموزش نحوه بخش بندی المان‌ها در css grid
  • آموزش نحوه بخش بندی المان‌ها با استفاده از naming در css grid
  • آموزش استفاده از fraction و توابع در css grid
  • پروژه عملی کار با ماژول css grid

آموزش طراحی فرم‌های حرفه‌ای

  • آشنایی با اصول طراحی فرم
  • آموزش چگونگی اعتبار سنجی فرم‌ها سمت client
  • آموزش طراحی فرم ثبت نام
  • آموزش طراحی فرم ثبت نام همراه با تصویر
  • آموزش طراحی فرم ورود و ثبت نام همراه با انیمیشن
  • آموزش طراحی فرم حرفه‌ای و پیشرفته همراه با انیمیشن

آموزش ساخت انیمیشن در css3

  • آشنایی با اصول انیمیشن سازی در css3
  • آموزش ساخت انیمیشن transform دو بعدی در css3
  • آموزش ساخت انیمیشن transform سه بعدی در css3
  • آموزش ساخت انیمیشن transition در css3
  • آموزش مفهوم keyframeها در انیمیشن‌ها
  • آموزش ساخت انیمیشن loading
  • آموزش ساخت انیمیشن flip card
  • پروژه عملی ساخت انیمیشن در css3

آموزش css پروژه محور

  • آموزش ساخت منو افقی
  • آموزش ساخت منو عمودی
  • آموزش طراحی منو تمام صفحه
  • آموزش طراحی سایدبار منو یا canvas menu
  • آموزش طراحی منو بازشو یا dropdown menu
  • آموزش طراحی اسلایدر تصاویر
  • آموزش طراحی split page with menu
  • آموزش طراحی منو آکاردئونی یا accordion menu
  • آموزش طراحی و ساخت انیمیشن متحرک توسط css3
  • آموزش طراحی page scroller

معرفی کتابخانه‌های کاربردی و استفاده از آن‌ها

  • معرفی کتابخانه css
  • معرفی کتابخانه css
  • معرفی کتابخانه css
  • معرفی کتابخانه ihover
  • معرفی کتابخانه css

سر فصل های آموزش html 

جلسه ۱ آموزش html شروع کد نویسی ساخت اولین سند html

  • معرفی نرم افزار برای کد نویسی html
  • ساخت اولین سند html
  • توضیحات در مورد DOCTYPE در سند html
  • توضیحات در مورد تگ html
  • توضیحات کامل در مورد تگ head
  • توضیحان کامل در مورد تگ body
  • و غیره ….

جلسه ۲ آموزش html کار با عناصر block-level و inline-level در HTML

  • اصلا این block و inline چه هستند؟
  • توضیحات در مورد عناصر Block-level
  • عناصر موجود در دسته block-level همیشه از یک خط جدید شروع می‌شوند.
  • توضیحات در مورد عناصر Inline-level
  • عناصری که در دسته Inline-level هستند، در یک خط جدید شروع نمی‌شوند.
  • توضیحات در مورد صفت عمومی dir در HTML
  • همونطور که میدونید ما فارسی زبان ها جهت متن ها و محتوامون از سمت راست به چپ می باشد که میشه همون RTL و برای محتوای انگلیسی میشه LTR
  • وغیره …

جلسه ۳ آموزش html معرفی تگ و خاصیت ها در html

  • معرفی تگ <p> برای ساخت پاراگراف در پروژه های مختلف طراحی سایت استفاده می شود.
  • بررسی عنصر <p> در HTML 4.01 و HTML5
  • معرفی تگ hr
  • تگ hr که مخفف کلمه ی Horizontal Rule می باشد
  • معرفی تگ br
  • تگ br که از کلمه ( Break ) گرفته شده است
  • معرفی تگ های H1 تا H6 در HTML
  • تگ های h1 تا h6 یا معروف به تگ های تیتر یا تگ های هدینگ ( Heading )
  • وغیره …

جلسه ۴ آموزش html معرفی لیست در html و معرفی Text Formatting

  • معرفی لیست نامرتب یا Unordered list
  • در این نوع لیست ها ترتیب قرار گرفتن آیتم ها مهم نیست، یعنی مهم نیست که کدام مقدار اولش نوشته شود و کدام آخر، پس بطور کلی لیست های نامرتب لیست هایی هستند که ترتیب قرار گرفتن آیتم ها در آنها مهم نیست.
  • معرفی لیست مرتب یا Ordered List
  • لیست های مرتب لیست هایی هستند که آیتم ها یا مقادیر آنها دارای ترتیب می باشند
  • معرفی قالب بندی متن ها یا Text Formatting در HTML
  • Br – برای شکستن سطر و رفتن به سطر جدید
  • Bold Text – یک متن بولد یا برجسته
  • Emphasized Text – یک متن بصورت تاکیدی یا تاکید داشتن بروی یک متن
  • Strong Text – یک متن مهم
  • Italic Text – یک متن شکسته یا ایتالیک
  • Smaller Text – یک متن با اندازه نسبتا کوچک
  • SubScripted Text – یک متن پایین نویس
  • SuperScripted Text – یک متن بالا نویس
  • Inserted Text – یک متن زیر خط دار
  • Deleted Text – یک متن خط خورده
  • Marked Text – یک متن هایلایت شده
  • و غیره …

جلسه ۵ آموزش html کامنت گذاری به همراه آدرسی دهی

  • نهوه کامنت گذاری در کد های html
  • منظور از Comment یا کامنت چیست؟
  • تفسیر (کامنت) تک خطی در HTML در بین تگ <!– … –> و در یک خط قرار می گیرد.
  • نحوه آدرس دهی به دو بخش کلی تقسیم می شود
  • ۱- آدرس دهی نسبی یا Relative ۲-
  • آدرس دهی مطلق یا Absolute
  • صفحات وب (از طریق تگ a)
  • تصاویر (از طریق تگ img یا خصیصه background در CSS)
  • فایل‌های استایل با پسوند css. (از طریق تگ link)
  • فایل‌های اسکریپت با پسوند js. (از طریق تگ script)
  • و غیره …

جلسه ۶ آموزش html تگ های نقل قول و table

  • معرفی تگ <q> برای درج یک نقل قول کوتاه بکار می رود.
  • معرفی  تگ <blockquote> برای درج بخشی که از یک منبع دیگری نقل قول شده است استفاده می شود.
  • معرفی abbr از این تگ برای درج یک اختصار یا مخفف یک کلمه استفاده می شود.
  • معرفی تگ address از این تگ برای درج اطلاعات تماس (نویسنده / مالک) ، درباره ی یک سند یا یک متن علمی،  استفاده می شود.
  • معرفی تگ cite از این تگ نیز برای درج عنوان برای یک کار استفاده می شود. (مرورگر های متنی که در این عنصر قرار بگیرد را بصورت ایتالیک نمایش می دهند).
  • معرفی تگ bdo از تگ <bdo> برای تعریف جهت گیری دو طرفه (directional) در متن استفاده می شود.
  • معرفی تگ table
  • تگ table همونطور که از اسمشم مشخصه تگی است که با استفاده از آن میتوان یک جدول را در یک صفحه وب ایجاد کرد، حال یکسری تگ ها هستن که همگی درون تگ <table> مورد استفاده قرار میگیرند
  • و غیره ..

جلسه ۷ آموزش html پیاده سازی تگ image map  در html

تگ Image Map در html

  • تگ image map  در html
  • ایجاد تصویر با استفاده از تگ img
  • ساخت یک image map
  • عنصر < map > به منظور ساخت یک image map
  • خصوصیت shape
  • Rect – یک شکل مستطیلی شکل را تعریف می کند.
  • Circle – یک شکل دایره ای شکل را تعریف می کند.
  • Poly – یک شکل چند ضلعی را تعریف می کند.
  • Default – کل نقاط را تعریف می کند.
  • پیاده سازی یک مینی پروژه توسط image ma;
  • و غیره …

جلسه ۸ آموزش html پیاده سازی تگ iframe و pre و s

  • تگ iframe تگی است با استفاده از اون میتونیم به راحتی یک سایت یا یک فایل یا یک تصویر و یا بطور کلی میتوان یک صفحه وب را درون یک صفحه ی وب دیگر قرار داد.
  • تگ <pre> متن را به صورت preformatted نمایش می دهد. ( خطوط و فاصله های اضافه در نظر گرفته شده را حفظ می کند ).
  • تگ <samp> یک تگ عبارتی است. و نمونه خروجی از یک برنامه کامپیوتری را مشخص می کند.
  • تگ <code> یک تگ عبارتی است که یک قطعه از کد کامپیوتری را تعریف می کند.
  • از تگ <s> برای متن جایگزین یا حذف شده نباید استفاده کرد، می توانیم به جای آن از تگ del استفاده کنیم.
  • و غیره …

جلسه ۹  آموزش مولتی مدیا در طراحی وب با HTML

  • آموزش تگ video
  • آموزش قرار دادن ویدیو داخل تگ
  • آموزش نمایش انواع فرمت های ویدیو
  • آموزش قرار دادن شرط برای ویدیو
  • آموزش کنترل های ویدیو
  • آموزش تگ sourse
  • آموزش عرض و ارتفاع ویدیو
  • آموزش تگ audio
  • آموزش قرار دادن اتکست
  • و غیره ….

جلسه ۱۰  آموزش فرم و input ها در HTML و HTML5

  • آموزش پیاده سازی form
  • آموزش خاصیت actions در فرم ها
  • آموزش  خاصیت eccthype برای آپلود فایل
  • آموزش خاصیت های فرم به صورت کامل
  • آموزش input ها در فرم
  • آموزش type در input
  • آموزش پیاده سازی انواع input ها به صورت کامل
  • آموزش تمام خاصیت ها یا ویژه گی های input
  • پیاده سازی فرم لاگین
  • و غیره …

جلسه ۱۱  آموزش فرم و input ها در HTML و HTML5 ادامه جلسه ۱۰

  • آموزش اتریبیت های input
  • آموزش accept برای ارسال تصویر
  • آموزش autocomlaet در input
  • آموزش min و max   در input
  • آموزش minlength و maxlength در input
  • آموزش value در input
  • آموزش disabled
  • آموزش pattern در input
  • آموزش  readonly در input
  • و غیره …

جلسه ۱۲ تگ های معنایی یا semantic Tags در HTML5

  • آموزش تگ معنایی <Header> یا تگ <Header>
  • آموزش تگ Nav مشخص کننده مجموعه ای از لینک ها
  • آموزش تگ section معمولا برای دسته بندی محتویاتی به کار می رود
  • آموزش لغت article به معنای مقاله است
  • آموزش تگ aside همانگونه که از نامش مشخص است به معنای اطلاعاتی است
  • آموزش تگ footer یا پاورقی برای مشخص کردن اطلاعات مربوط به صفحه وب است
  • لیست کامل آموزش تگ های معنایی
  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time

فصل مقداماتی آموزش css 

جلسه ۱ آموزش css مقدماتی فراخوانی CSS در HTML

  • در این جلسه آموزشی ابتدا به فراخوانی CSS در HTML می پردازیم
  • استفاده از CSS در HTML با روش inline
  • نحوه نوشتن کد CSS در HTML به شیوه internal
  • نحوه اتصال CSS به HTML با روش External
  • آموزش نهوه قرار فرافرتی
  • آموزش قرار دادن ولیو
  • و غیره …

جلسه ۲ آموزش css مقدماتی سلکتور آی دی (ID) و کلاس (Class) در CSS

  • ساخت فایل css
  • فراخوانی فایل css
  • نحوه اولویت بندی عناصر در CSS
  • استفاده از صفت Style درون تگ (اولویت اول)
  • استفاده از ID (اولویت دوم)
  • کلاس ها و صفت ها و شبه کلاس ها (اولویت سوم)
  • خوده تگ ها و شبه عناصر (اولویت چهارم)
  • نحوه تعریف آی دی (ID) و کلاس (Class) در CSS
  • کجا از آی دی (ID) و کی از کلاس (Class) استفاده کنیم؟
  • و غیره …

جلسه ۳ آموزش css مقدماتی مدل جعبه ای (Box Model) در CSS

  • مدل جعبه‌ای (Box Model) CSS چیست؟
  • باکس محتوا (Content box): ناحیه‌ای که محتوا نمایش می‌یابد که می‌تواند با استفاده از مشخصه‌هایی مانند width و height اندازه‌بندی شود.
  • باکس فاصله‌گذاری (Padding box): بخش فاصله‌گذاری پیرامون محتوا است که به صورت فضای تمیزی قرار می‌گیرد. اندازه آن را می‌توان با استفاده از Padding و مشخصه‌های مرتبط تعیین کرد.
  • باکس لبه (Border box): باکس لبه پیرامون محتوا و فاصله‌گذاری را احاطه می‌کند. اندازه و استایل آن را می‌توان با استفاده از border و مشخصه‌های مرتبط کنترل کرد.
  • باکس حاشیه (Margin box): حاشیه به بیرونی‌ترین لایه مدل جعبه‌ای گفته می‌شود که پیرامون محتوا، فاصله‌گذاری و لبه را به صورت فضای سفیدی احاطه می‌کند و بین این باکس و دیگر عناصر قرار می‌گیرد. اندازه آن را می‌توان با استفاده از مشخصه margin. دیگر مشخصه‌های مرتبط کنترل کرد.
  • توضیحات کامل در مورد Border
  • توضیحات کامل در مورد Padding
  • و غیره …

جلسه ۴ آموزش css مقدماتی آموزش استایل دهی متن جلسه اول

  • مشخصه text-decoration برای اضافه کردن یا حذف کردن تزئینات متن
  • کار با ویژگی Margin در CSS
  • آموزش Text Alignment (تنظیم جایگاه متن) در CSS
  • ویژگی text-indent در CSS
  • ویژگی letter-spacing در CSS
  • آموزش ویژگی word-spacing در CSS
  • آموزش ویژگی line-height در CSS
  • آموزش ویژگی text-shadow در CSS

جلسه ۵ آموزش css مقدماتی آموزش استایل دهی متن جلسه دوم

  • ادامه جلسه استایل نویس متن در  css
  • آموزش ویژگی white-space در CSS
  • آموزش ویژگی overflow در CSS
  • آموزش ویژگی text-overflow در CSS
  • آموزش ویژگی word-wrap در CSS
  • آموزش ویژگی word-break در CSS
  • آموزش ویژگی writing-mode در CSS
  • آموزش ویژگی vertical-align در CSS
  • و غیره …

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

  • آموزش دستور @font-face
  • دستور font-face در CSS
  • مثال از دستور font-face در CSS
  • تعریف وب فونت
  • فرمت های مختلف یک فونت وب
  • نحوه تبدیل فرمت TTF به دیگر فرمت ها
  • استفاده از دستور Font-Face@ برای تعریف فونت ها
  • مثال از نحوه اضافه کردن فونت دلخواه در سایت
  • نحوه تعریف همزمان چندین فونت برای سایت
  • نحوه وزن دادن به فونت ( نازکی و کلفتی فونت )
  • و غیره …

جلسه ۷ آموزش css مقدماتی آموزش استفاده از فونت گوگل

  • معرفی سایت گوگل فونت
  • روش استفاده از گوگل فونت
  • نهوه قرار گیری فونت داخل فایل style
  • نهوه دانلود فونت
  • آموزش انواع font style
  • تعریف فونت و اندازه  فونت و وزن فونت
  • تعریف خلصه نویسی font
  • و غیره …

جلسه ۸ آموزش css مقدماتی آموزش استفاده از پس زمینه ها

  • استایل css پس زمینه ها
  • استفاده از رنگ برای پس زمینه ( background-color)
  • استفاده از تصویر برای پس زمینه ( background-image )
  • تکرار تصویر پس زمینه در محور افقی و عمودی ( Background-repeat )
  • تعیین موقعیت مکانی تصویر در پس‌زمینه ( background-position )
  • ثابت و یا قابل اسکرول بودن تصویر پس‌زمینه ( background-attachment )
  • استفاده از Background Shorthand
  • وغیره …

 

میانگین رتبه 5/5 تعداد رای : 11
برای دسترسی به کلیه پرونده ها ، باید ابتدا در دوره ثبت نام کنید!
دانلود ویدیو دانلود فایل 34.16 مگابایت 12 دقیقه
دانلود ویدیو دانلود فایل 25.77 مگابایت 12 دقیقه
دانلود ویدیو دانلود فایل 35.66 مگابایت 11 دقیقه
دانلود ویدیو دانلود فایل 39.98 مگابایت 14 دقیقه
دانلود ویدیو دانلود فایل 39.34 مگابایت 15 دقیقه
دانلود ویدیو دانلود فایل 39.89 مگابایت 16 دقیقه
دانلود ویدیو دانلود فایل 30.69 مگابایت 10 دقیقه
دانلود ویدیو دانلود فایل 41.87 مگابایت 13 دقیقه
دانلود ویدیو دانلود فایل 70.71 مگابایت 21 دقیقه
دانلود ویدیو دانلود فایل 40.39 مگابایت 12 دقیقه
دانلود ویدیو دانلود فایل 67.17 مگابایت 16 دقیقه
دانلود ویدیو دانلود فایل 42.64 مگابایت 17 دقیقه
دانلود ویدیو دانلود فایل 39.61 مگابایت 16 دقیقه
دانلود ویدیو دانلود فایل 48.88 مگابایت 17 دقیقه
دانلود ویدیو دانلود فایل 41.41 مگابایت 16 دقیقه
دانلود ویدیو دانلود فایل 54.21 مگابایت 18 دقیقه
دانلود ویدیو دانلود فایل 59.09 مگابایت 14 دقیقه
دانلود ویدیو دانلود فایل 75.06 مگابایت 19 دقیقه
دیدگاه خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

1 دیدگاه برای آموزش css html آموزش HTML5 CSS3

  1. محمدمهدی

    سلام سال نو مبارک
    دوره جدید چه زمانی منتشر میشه؟

    • زمان الله ابراهیمی

      پشتیبان

      سلام و درود خدمت شما دوست گرامی دارم روی سرفصل های دوره کارمی کنم تا چند روز آینده برگذار خواهد شد