آموزش طراحی وب آموزش css html آموزش HTML5 CSS3
آیا تا به حال به این فکر افتادهاید که آموزش css و آموزش html چه کمکهای بزرگی میتواند به شما کند؟ برخی از صاحبان کسب و کارها و افراد شاغل در این زمینه این موضوع را دست کم میگیرند. اما واقعیت این است که یادگیری این دو زبان میتواند تسلط ما را بر کاری که انجام میدهیم چندین برابر کند. دوره جامع آموزش css و html برای طراحی وب، یکی از کاملترین دورههای آموزشی در این زمینه است.
معرفی دوره جامع آموزش css و html برای طراحی وب
در دوره جامع آموزش css و html برای طراحی وب، به شما یاد میدهیم چگونه یک وبسایت حرفهای طراحی کنید. یادگیری html و css برای هر کسی که قصد ورود به دنیای طراحی سایت را دارد واجب است. اما حتی اگر نمیخواهید وارد این حوزه شوید هم این دوره میتواند برای شما مناسب باشد. بسیاری از صاحبان کسب و کارها که یک وبسایت وردپرسی دارند هم میتوانند با استفاده از مباحث این دوره تغییرات ظاهری مهمی در وبسایت خود ایجاد کنند. به طور کلی برای افراد شاغل در زمینه دیجیتال مارکتینگ، سئو، طراحی سایت، مدیریت سایت و… یادگیری css و html مفید خواهد بود.
پیش نیازهای این دوره چیست؟
قبل از شرکت در هر دوره آموزشی باید از پیش نیازهای آن مطلع شد. پیش نیازهای دوره آموزش css و html سایت پاسخ وردپرس موارد بسیار سادهای هستند. ابتدا شما باید کار با کامپیوتر را بلد باشید. درک نحوه عملکرد مرورگرها نیز میتواند به شما کمک کند. البته در این دوره به طور کامل با امکانات مرورگرهایی مانند کروم و فایرفاکس آشنا خواهید شد. پیش نیاز یادگیری css، یادگیری html است. اما از آنجا که ما در این دوره آموزشی به طور رایگان آموزش html را هم قرار دادهایم، از این نظر هیچ مشکلی نخواهید داشت.
پس اگر به یادگیری طراحی وب علاقهمند هستید و نحوه کار با کامپیوتر و نصب نرم افزارها را بلدید، میتوانید در این دوره شرکت کنید. در این دوره ابتدا با آموزش html نحوه ساختار بندی صفحات وب را آموزش میدهیم. سپس با آموزش css به صفحاتی که ساختهایم، ظاهری زیبا و کاربر پسند میدهیم.
ویژگیهای دوره جامع آموزش css و html برای طراحی وب
دوره جامع آموزش css و html برای طراحی وب به نحوی تدریس شده که همه علاقهمندان بتوانند در آن شرکت کنند و به طور کامل و جامع با کدنویسی css و html آشنا شوند. فرقی نمیکند سطح دانش شما از این دو زبان چقدر باشد. در هر صورت این دوره میتواند به شما کمک کند تا در کدنویسی html و css پیشرفت کنید. ما در این دوره آموزش css و html را از مقدماتی تا پیشرفته قرار دادهایم. این دوره به صورت ۰ تا ۱۰۰ برگزار میشود. تمامی آموزشها پروژه محور هستند. پشتیبانی حرفهای در طول دوره به شرکت کنندگان ارائه میگردد. همچنین شما به محتوای این دوره به دو صورت ویدیویی و دانلودی دسترسی خواهید داشت.
آموزش css و html ۰ تا ۱۰۰ از پایه تا پیشرفته
از آنجا که زبانهای html و css مقدمات یادگیری طراحی وب هستند، در دوره جامع آموزش css و html برای طراحی وب، کدنویسی این زبانها را از پایه تا پیشرفته به شما آموزش میدهیم. بسیاری از کسانی که قصد شروع یادگیری طراحی وبسایت دارند، از html شروع میکنند و سپس با یادگیری css آموختههای خود را تکمیل مینمایند. بنابراین نمیتوان انتظار داشت که همه دانشجویان این دوره با مباحث کدنویسی html و css آشنا باشند. از این رو ما در این دوره از ابتداییترین نکات آغاز میکنیم و تمامی چیزهایی که برای یادگیری و تسلط به این زبانها نیاز دارید را به شما آموزش میدهیم. البته آموزشهای پیشرفته و حرفهای نیز در این دوره گنجانده شده است.
برای اینکه به یک طراح وب حرفهای تبدیل شوید باید ابتدا بر زبانهای html و css مسلط شوید. اگر هیچ گونه آشنایی قبلی با این زبانها ندارید، در این دوره آنها را از ۰ تا ۱۰۰ به شما آموزش میدهیم. اما اگر هم از قبل با این دو زبان آشنا هستید و حتی نحوه کدنویسی آنها را میدانید، شرکت در این دوره میتواند برای شما مفید باشد. زیرا آموزش css پیشرفته و آموزش html پیشرفته را نیز در این دوره برایتان آماده کردهایم.
آموزش پروژه محور
در آموزش کدنویسی و طراحی وب تنها بیان تئوریها کافی نیست. شما میتوانید تمامی تگهای html را حفظ کنید، اما تا زمانی که دست به کار نشده و آنها را در عمل استفاده نکنید، به تسلط نمیرسید. از این رو در دوره جامع آموزش css و html تمامی آموزشها به صورت پروژه محور برگزار میشوند. آموزش css پروژه محور و آموزش html پروژه محور به شما کمک میکند همزمان هم دانش کار و هم نحوه انجام آن را بیاموزید. این مساله موجب میشود با سرعت بیشتری مباحث را یاد بگیرید.
یکی از مواردی که در یادگیری طراحی وب و به خصوص آموزش css و html اهمیت زیادی دارد، تمرین و تکرار است. شما باید تمامی آموختههای خود را بارها تمرین کنید و با تکرار این عمل به آن مسلط شوید. از آنجا که آموزشهای این دوره به صورت پروژه محور ارائه میشوند، شما از همان ابتدا با نحوه تمرین کردن آشنا میشوید.
پشتیبانی حرفهای
یکی از ویژگیهای دوره جامع آموزش css و html برای طراحی وب، پشتیبانی حرفهای آن است. ما پاسخگوی تمامی سوالاتی که برای شما به وجود میآید هستیم. در طول دوره و پس از آن مشکلاتی که برای دانشجویان دوره به وجود بیاید از طریق پشتیبانی قابل پیگیری خواهد بود.
دسترسی به دوره به صورت ویدیویی و دانلودی
امروزه اکثر وبسایتهای آموزشی دورههای خود را به صورت دانلودی در اختیار شرکت کنندگان قرار میدهند. سایت پاسخ وردپرس، علاوه بر ارائه ویدیوهای دوره برای دانلود، امکان پخش مستقیم ویدیوهای آموزشی را نیز برای دانشجویان فراهم کرده است. پس اگر فضای کافی برای دانلود و نگهداری فایلها ندارید، نگران نباشید. بعد از ثبت نام در این دوره میتوانید به طور دائمی به محتوای دوره دسترسی داشته باشید و هر وقت بخواهید به تماشای ویدیوهای آن بپردازید.
در دوره جامع آموزش css و html برای طراحی وب چه چیزی یاد میگیریم؟
این دوره در دو فصل مقدماتی و پیشرفته برگزار میشود. در این دوره به طور کامل و از پایه تا پیشرفته با زبانهای html و css آشنا میشویم و نحوه استفاده از آنها را در عمل میآموزیم. برخی از مباحثی که در این دوره آموزش داده میشوند عبارتند از: آموزش Selector به صورت کامل، آموزش مفهوم box model به صورت کامل، طراحی رسپانسیو، مدیا کوئری ها در css3، آموزش سیستم grid در طراحی رسپانسیو و… . علاوه بر این آموزشها، یک قالب کامل را به صورت ۰ تا ۱۰۰ در این دوره پیاده سازی میکنیم.
دوره جامع آموزش css و html برای طراحی وب مناسب چه کسانی است؟
دوره جامع آموزش css و html برای طراحی وب مناسب کسانی است که:
- به طراحی وبسایت علاقهمند هستند
- قصد دارند وارد بازار کار طراحی سایت شوند
- فریلنسر هستند و قصد افزایش درآمد خود را دارند
- میخواهند طراحی سایت را به صورت اصولی یاد بگیرند
- یک وبسایت دارند و میخواهند طراحی ظاهری آن را مطابق با سلیقه خودشان تغییر دهند
از طرفی این دوره را برای کسانی که شرایط زیر را دارند توصیه نمیکنیم:
- وقت کافی برای تمرین و تکرار و یادگیری ندارند
- هیچ علاقهای به کسب درآمد از طریق طراحی وب ندارند
- از درآمد خود راضی هستند
آشنایی با زبان html
اگر قصد دارید طراحی وب را یاد بگیرید، در اولین قدم باید به زبان html مسلط شوید. فرقی نمیکند طراحی وب را با php انجام دهید یا Asp.net، در هر صورت یادگیری html یک ضرورت است. اما html چیست؟ ابتدا باید یادآور شد که html یک زبان برنامه نویسی نیست. واژه html مخفف عبارت Hyper Text Markup Language است که در زبان فارسی به «زبان نشانه گذاری ابرمتن» ترجمه شده است. بنابراین میتوان گفت html یک زبان نشانه گذاری است، نه یک زبان برنامه نویسی.
در زبانهای برنامه نویسی از ساختارهای مشخصی مانند شرط و حلقه استفاده میشود. اما در زبانهای نشانه گذاری مانند زبان html خبری از ساختارهای زبانهای برنامه نویسی نیست. در این زبانها باید از نشانهها استفاده کرد. در زبان html از نشانههای از پیش تعیین شده و مشخصی استفاده میکنیم تا ساختار صفحات وب را به وجود بیاوریم. با استفاده از این نشانهها میتوانیم عناصر مختلف صفحه را از هم متمایز کنیم و هر کدام را در جای خود قرار دهیم. زبان html در کنار زبان css از سادهترین زبانهای نشانه گذاری به حساب میآیند.
Html5 چیست و چرا باید آن را به کار برد؟
از سال ۱۹۹۱ که زبان html به وجود آمد تا به امروز تغییرات زیادی در این زبان رخ داده است. این تغییرات در جهت رشد و ارتقای استانداردهای این زبان نشانه گذاری بوده است. در حال حاضر جدیدترین نسخه html که مورد تایید شبکه جهانی وب میباشد، html5 است. آخرین تغییراتی که در html5 به وجود آمده مربوط به سال ۲۰۱۴ میباشد. تمام کسانی که قصد کدنویسی برای وب را دارند باید با تغییرات و پیشرفتهای html5 آشنا شوند.
بسیاری از تگهایی که در نسخههای قبلی زبان html مانند html4 استفاده میشد، امروزه منسوخ شدهاند. در حال حاضر تمامی مرورگرها، موتورهای جستجو و… خود را با آپدیتهای html5 به روز رسانی کردهاند. به همین دلیل اگر در کدنویسی وبسایت خود از تگهای جدید html5 استفاده نکنید، از هر نظر به مشکل خواهید خورد. به عنوان مثال مرورگرهای موبایل و دسکتاپ ممکن است وبسایت شما را به درستی نشان ندهند. یا موتورهای جستجو مانند گوگل، استفاده از تگهای منسوخ شده را یک امتیاز منفی در نظر میگیرند و به وبسایت اجازه افزایش رتبه نمیدهند.
در دوره جامع آموزش css و html برای طراحی وب، آموزش html و آموزش html5 به طور کامل قرار داده شده است. در این دوره با تگهای مهم و کاربردی html5 کار میکنیم و نحوه استفاده از آنها را در عمل میآموزیم.
آشنایی با زبان 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 معرفی میشوند. ابتدا مباحث مقدماتی را آموزش میدهیم. سپس 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 و مفاهیم آن
- آموزش ایجاد سطرها و ستون ها به وسیله 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
- ایجاد تصویر با استفاده از تگ 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
- وغیره …
جلسه ۹ آموزش css مقدماتی قرار دادن فونت آیکون ها
- معرفی فونت آیکونها برای طراحی وب
- نهوه سرچ کردن فونت آیکونها
- استفاده از فونت آیکون گوگل
- نهوه قرار گیری فایل های فونت آیکونها
- استفاده از cdn ها داخل قالب
- نهوه قرار دادن آیکون
- استفاده از فونت آسم
- نمایش آیکونها
- و غیره …
جلسه ۱۰ آموزش css مقدماتی آموزش لیست استایل ها
- برسی لیست ul
- برسی لیست ol
- کنترل فاصل ها لیست ها
- قرار دادن کلاس به لیست ها
- توضیحات فرزند و پدری لیست ها
- برسی استایل list style
- برسی list style type
- برسی list style position
- برسی list style image
- برسی list style Shorthand
- و غیره ….
جلسه ۱۱ آموزش css مقدماتی آموزش display در css
- معرفی تگ های بلاک لول
- برسی display inline
- برسی display block
- تبدیل تگ های block به inline و بلعکس
- برسی display inline-block
- مثال های در مورد display
- و غیره ..
جلسه ۱۲ آموزش css مقدماتی آموزش رنگ های در css
- برسی رنگها در css
- برسی نام رنگ در css
- برسی رنگ RGB در CSS
- برسی رنگ rgba
- برسی رنگ hex
- معرفی سایت برای گرفتن رنگ
- برسی رنگ hsl
- برسی رنگ ها داخل سایت ها
- و غیره …
جلسه ۱۳ آموزش css مقدماتی آموزش border و border-radius
- آموزش border-style و برسی استایل ها
- آموزش border-widthe برسی عرض
- آموزش border-colore قرار دادن رنگ
- آموزش border Shorthand نهوه خلصه نویسی
- برسی border-top-color نهوه قرار دادن رنگ به تمام قسمت ها مثل بالا پاین و غیره
- برسی border داخل سایت w3s
- آموزش border-radius
- تست روی تصویر
- و غیره …
جلسه ۱۴ آموزش css مقدماتی آموزش position
- برسی position relative به صورت کامل
- برسی top , right , left bottom
- برسی position absolute شناور کردن محتوا
- مثال ساخت ساخت یک منوی
- چسبان کردن منو توسط position fixed
- چسبان کردن منو بعد اسکرول توسط position sticky
- و غیره …
جلسه ۱۵ آموزش طراحی وب آموزش float در css
- ویژگی float از آن دسته از ویژگی هایی است که مکان عنصر را مشخص می کند. این ویژگی باعث می شود تا عنصر به سمت چپ یا راست عنصر نگهدارنده اش هول داده شده یا شناور شود.
- مقادیر خاصیت float
- مقدار none
- مقدار right
- مقدار left
- پشتیبانی مرورگر ها از float در CSS به صورت زیره:
- Firefox: تمام نسخه ها
- chrome: تمام نسخه ها
- safari: تمام نسخه ها
- IE: تمام نسخه ها
- opera: تمام نسخه ها
جلسه ۱۶ آموزش طراحی وب آموزش ویژگی های Height و Width در CSS
- ویژگی های Height و Width در CSS
- ویژگی های Height و Width همونطور که مشخصه اولی برای تنظیم اندازه ارتفاع و دومی برای تنظیم اندازه عرض یک تگ بکار برده می شوند.
- ویژگی کاربردی min-width در زبان طراحی css
- مفهوم Max Width
- مفاهیم max-height و min-height
- خاصیت max-height
- خاصیت min-height
- کار کرد واحد های %، VW و VH چیست؟
- VH مخفف viewport height است که همان ارتفاع قابل مشاهده در صفحه می باشد. ۱۰۰VH برابر است با ۱۰۰% از ارتفاع کل نمایشگر، و البته VW مخفف viewport width است که عرض قابل مشاهده در صفحه می باشد.
- وغیره …
جلسه ۱۷ آموزش طراحی وب آموزش کار با ویژگی margin و padding در CSS
- کار با ویژگی padding
- کار با ویژگی margin
- ویژگیهای مشتق شده از ویژگی padding:
- ویژگی padding-top (حاشیه درونی از بالا)
- ویژگی padding-bottom (حاشیه درونی از پایین)
- ویژگی padding-left (حاشیه درونی از چپ)
- ویژگی padding-right (حاشیه درونی از راست)
- ویژگیهای مشتق شده از ویژگی margin:
- ویژگی margin-top (حاشیه بیرونی از بالا)
- ویژگی margin-bottom (حاشیه بیرونی از پایین)
- ویژگی margin-left (حاشیه بیرونی از چپ)
- ویژگی margin-right (حاشیه بیرونی از راست)
جلسه ۱۸ آموزش طراحی وب آموزش استایل Link در CSS
- سبک دهی به لینک ها
- چهار حالت مختلف برای لینک ها
- link – لینکی معمولی که هنوز مورد بازدید قرار نگرفته است .
- avisited – لینکی که کاربر از آن بازدید کرده است .
- ahover – حالتی که در آن مکان نمای موس روی لینک قرار گرفته است .
- aactive – در این حالت کاربر روی لینک مورد نظر کلیک کرده
- افزودن جلوه های بصری به لینک ها ( Text decoration )
- خاصیت background-color رنگ پس زمینه ی لینک ها را تعیین می کند.
- و غیره…
جلسه ۱۹ آموزش طراحی وب آموزش با صفت overflow در CSS
- زمانی که محتوای یک عنصر بزرگتر از فضایی است که آن عنصر در اختیار دارد، میتوان از صفت overflow استفاده کرد.
- صفت overflow دارای چهار مقدار به صورت زیر
- visible – مقدار پیشفرض. محتوای اضافی چیده نمیشود و محتوای اضافی از فضایی که عنصر در اختیار دارد تجاوز میکند و در بیرون از باکس مربوط به آن عنصر نمایش می یابد.
- hidden – محتوای اضافی چیده میشود و این ححتوای اضافی برای کاربر قابل نمایش نخواهد بود.
- scroll – محتوای اضافی چیده میشود، اما نوار پیمایش به عنصر اضافه میشود تا بتوان محتوای اضافی را با پیمایش مشاهده نمود
- auto – محتوای اضافی چیده میشود و نوار پیمایش در صورت نیاز به عنصر اضافه میشود.
- برسی overflow-x و overflow-y
- overflow-x مشخص میکند که با محتوای اضافه در لبه های راست و چپ عنصر چکار باید کرد.
- overflow-y مشخص میکند که با محتوای اضافه در لبه های بالا و پایین عنصر چکار باید کرد.
- و غیره ..
جلسه ۲۰ آموزش طراحی وب آموزش کامل شبه کلاس ها در CSS
- شبه کلاس ها یا به انگلیسی Pseudo Class در CSS در واقع نوع دیگری از انتخابگرها هستن که برای تعریف یک حالت خاص از یک تگ می باشد،
- شبه کلاس ها میتونن موارد زیر باشند
- وقتی ماوس میره روی تگ
- موقع فوکوس کردن بروی یک تگ
- برای انتخاب فرزند خاصی از یک تگ
- برای تعریف استایل برای لینک های درون یک صفحه
- focus: لحظه فوکوس ( کلیک شدن ) روی تگ
- hover: وقتی ماوس میره روی یک تگ
- first-child: انتخاب اولین فرزند از عناصر پدر ( ترتیب قرارگیری عناصر مهم هست )
- first-of-type: انتخاب اولین فرزند از یک نوع خاص ( ترتیب قرارگیری عناصر مهم نیست )
- و کلی مباحث دیگه …
جلسه ۲۱ آموزش طراحی وب ادامه آموزش کامل شبه کلاس ها در CSS
- ادامه جلسات گذاشته شبه کلاس های در css
- برسی :focus
- برسی input[type=”checkbox”]:checked
- برسی input[type=”text”]:disabled
- برسی input[type=”text”]:enabled
- برسی :empty
- برسی :only-child
- برسی :nth-child(odd)
- برسی :nth-child(even)
- و کلی مباحث دیگه ….
جلسه ۲۲ آموزش طراحی وب آموزش شبه عناصر ( pseudo-element ) در CSS
- برسی سیتنکس pseudo-elements
- اعمال یک Style به اولین حرف یا اولین خط یک عنصر مشخص.
- اعمال Style یا درج محتوا به قبل یا بعد از محتوای یک عنصر مشخص.
- شبه عنصر first-line
- شبه عنصر first-letter
- شبه عنصر before
- شبه عنصر after
- و کلی مباحث دیگه ….
جلسه ۲۳ آموزش طراحی وب آموزش کار با Box Shadow در Css
- از ویژگی box-shadow برای اضافه کردن سایه به یک عنصر یا باکس استفاده می شود. تمام عناصر در یک صفحه می توانند سایه بگیرند.
- دستور box-shadow در css
- دستور box-shadow در css برای سایه زدن بکار می رود.
- سایه زدن دارای حالات مختلفی میباشد که همه موارد را بررسی می کنیم.
- در دستور box-shadow ابتدا سایه عمودی و افقی و سپس رنگ سایه را مشخص کرده ایم.
جلسه ۲۴ آموزش طراحی وب آموزش کار با root و calc در Css
- شبه کلاس Root در CSS
- تابع ()calc در CSS
- root: یک pseudo-class می باشد که برای انتخاب عنصر ریشه (root) سند HTML استفاده می شود.
- مثال در مورد شبه کلاس root
- تعریف رنگ داخل root
- عملیات ریاضی توسط تابع calc
- و کلی مباحث دیگه ….
جلسه ۲۵ آموزش طراحی وب آموزش کار با filter در css
- فیلترها در CSS یک روش پردازش رندر کردن عنصر قبل از اینکه در صفحه نمایش داده شود می باشند.
- آموزش ()blur
- آموزش ()brightness
- آموزش ()contrast
- آموزش ()grayscale
- آموزش ()hue-rotate
- آموزش ()invert
- آموزش ()opacity
- آموزش ()saturate
- آموزش ()sepia
- آموزش ()drop-shadow
- وکلی مباحث دیگه …
جلسه ۲۶ آموزش طراحی وب آموزش Combinator ها در CSS
- Combinator نمادی است که رابطه بین سلکتورها را توصیف می کند. Combinator در زبان انگلیسی به معنای ترکیب کننده می باشد
- در CSS چهارنوع combinator وجود دارد
- descendant selector (space) (فاصله)
- child selector (>) (عنصر فرزند)
- adjacent sibling selector (+) (عنصر مجاور)
- general sibling selector (~) (عناصر یک سطح)
- و کلی مباحث دیگه …
جلسه ۲۷آموزش انتخاب کننده های صفات Attribute Selectors در css
- انتخاب کننده های صفات یا Attribute Selectors، دسته ای از انتخاب گرها هستند که برای استایل دادن به صفات HTML به کار برده می شوند.
- انتخاب کننده [صفت] در CSS
- بر اساس مقدار “attribute=”value
- آموزش استفاده از حالت “attribute~=”value
- آموزش استفاده از حالت “attribute|=”value
- آموزش استفاده از حالت “attribute^=”value
- آموزش استفاده از حالت “attribute$=”value
- آموزش استفاده از حالت “attribute*=”value
- و کلی موارد دیگه …
جلسه ۲۸ آموزش طراحی وب شروع پروژه طراحی قالب
- ساخت فایل های مورد نیاز
- فرخوانی فونت ها مورد نیاز
- قرار دادن فونت آیکون ها
- کد نویسی notification سایت
- استایل کامل notification
- پیاده سازی منوی سایت
- و غیره …
محمدمهدی –
سلام سال نو مبارک
دوره جدید چه زمانی منتشر میشه؟
زمان الله ابراهیمی –
سلام و درود خدمت شما دوست گرامی دارم روی سرفصل های دوره کارمی کنم تا چند روز آینده برگذار خواهد شد