آموزش جامع اچ تی ام ال و سی اس اس (HTML, CSS)

poster
پیش‌نمایش دوره

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

برگزارکننده:  مکتب‌خونه  مکتب‌خونه
مدرس دوره:
5 (1 رای)
سطح: مقدماتی
 پلاس
  
زمان مورد نیاز برای گذراندن دوره:  12 ساعت
مجموع محتوای آموزشی:  12 ساعت ویدئو
 (قابل دانلود می‌باشد)

آنچه در این دوره می‌آموزیم:

 درک اساسی از مبانی HTML

 بررسی کامل قابلیت‌های HTML و CSS

 ویژگی‌های CSS

 ویژگی‌های HTML 5

پیش‌نیاز‌ها

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

سرفصل‌های دوره آموزش جامع اچ تی ام ال و سی اس اس (HTML, CSS)

تگ‌های پایه
  مقدمه‌ای کوتاه
مشاهده
"04:23  
  تگ‌های h1 تا h6
"04:25  
  ایجاد پاراگراف با تگ p
"03:26  
  نقل قول با تگ q و bloclqute
"03:17  
  تگ‌های b-strong-i-em-mark-small
"05:14  
  تگ‌های ins,del
"03:17  
  تگ‌های var-kbd-pre-code-samp
"08:26  
  تگ‌های sup,sub
"03:15  
  تک‌های bbr,dfn
"08:45  
  تگ‌های bdo,bdi
"03:02  
  تگ address
"01:30  
  کاراکترهای ویژه
"05:35  
مقدمه CSS
  شروع کار با css
مشاهده
"12:31  
  معرفی ویژگی font
"05:06  
  قرار دادن background
"04:01  
  ویژگی boxshadow
"06:03  
  متغیرها
"02:50  
  تابع attr
"02:14  
لینک
  ایجاد لینک با تگ a
"06:55  
  استایل دهی به تگ a(سی اس اس)
"04:58  
تصویر
  تگ img
مشاهده
"08:03  
  تگ map
"08:59  
  تگ picture
"02:09  
  قرار دادن favicon در سایت
"03:56  
  تگ svg
"10:15  
  ویژگی transform (سی اس اس)
"05:44  
  ویژگی filter (سی اس اس)
"04:26  
لیست
  ایجاد لیست با تگ‌های ul,ol,dl
"07:28  
  استایل دهی به لیست (سی اس اس)
"14:41  
  مثال برای کار با لیست
"08:10  
  لیست‌های تودرتو
"08:11  
جدول
  تگ table
مشاهده
"11:03  
  تگ tbody, tfoot, thead
"04:11  
  صفت rowspan
"04:21  
  صفت colspan
"06:30  
صدا و ویدیو
  تگ audio
مشاهده
"05:30  
  تگ video
"05:59  
  تگ object
"03:02  
  تگ embed
"01:48  
  تگ iframe
"02:50  
انواع ورودی - فرم
  تگ input با نوع‌های text, number, email, password, tel, search, url
"21:58  
  صفت pattern
"11:37  
  ساخت دکمه (Button)
"08:04  
  تگ input با نوع date , time
"06:56  
  نگ ورودی با نوع checkbox, radio و تگ selector
"06:57  
  تگ input با نوع‌ range - تگ‌های progress , meter
"09:03  
  تگ input با نوع‌های color, file, image
"03:26  
  فرم
"12:47  
تگ div و span
  بخش‌بندی با تگ div
"12:52  
  مثال برای div
"07:44  
  ویژگی boxsizing (سی اس اس)
"01:47  
  واحدهای em , rem
"03:00  
  تابع clac در css
"03:42  
  تگ span
"05:08  
ویژگی‌های کاربردی CSS
  ویژگی display
"05:12  
  ویژگی display با مقدار flex
"15:00  
  استفاده از order درflex
"07:16  
  ویژگی display با مقدار grid
"10:28  
  مثال
"04:12  
  مثال
"04:30  
  ویژگی position
"03:44  
  ویژگی position با مقدار absolute
"04:32  
  ویژگی inset
"06:01  
  مثال
"02:17  
  مثال
"03:01  
  ویژگی position با مقدار flex
"04:32  
  مثال
"03:10  
  ویژگی position با مقدار sticky
"02:35  
  مثال
"03:48  
  ویژگی zindex
"04:22  
  مثال zindex
"02:29  
سی اس اس (انتخاب‌گرها)
  انتخابگرهای اولیه
"02:56  
  انتخابگرهای and,or,not
"04:00  
  ترکیب کننده‌ها (combinators)
"06:12  
  مثال combinators
"04:18  
  مثال انتخابگر
"08:57  
  انتخابگر child
"03:57  
  انتخابگر nthchild
"04:46  
  سلکتورهای ویژگی (* ^ $ ~)
"09:49  
  مثال
"03:52  
  مثال
"04:19  
  شبه کلاس empty
"09:04  
  شبه عناصر before و after
"03:18  
  مثال
"02:13  
  مثال
"08:07  
  شبه عناصر firstline , firstletter, selection
"06:16  
  شبه عناصر (marker, placeholder)
"05:20  
عناصر معنایی (Semantic Elements) در HTML5
  معرفی عناصر معنایی
"07:45  
  مثال
"07:30  
  تگ article
"03:35  
  مثال
"05:16  
  عنصر معنایی details
"05:01  
  مثال
"03:52  
  تگ figure
"06:50  
مثال‌های کاربردی
  فرم رزرو اتاق در هتل
"04:42  
  فرم ثبت سفارش غذا
"07:17  
  صفحه قدردانی از استیوجابز
"05:50  
  صفحه قدردانی از دکتر حسابی
"02:50  
  صفحه فروش محتوای آموزشی
"14:29  
  صفحه معرفی کتاب
"08:47  
  چهار دکمه
"10:42  
  دکمه‌های پلیر
"07:13  
  ایجاد دکمه شبیه ماه
"07:15  
  چک باکس مدرن
"12:58  
تمرین همراه با جواب
  تمرین اول: ایجاد داکیومنت برای html
"03:57  
  کد HTML - تمرین اول
"07:13  
  کد CSS - تمرین اول
"08:42  
  تمرین دوم: صفحه معرفی نمونه کار
"03:04  
  کد HTML - تمرین دوم
"10:42  
  کد CSS - تمرین دوم
"18:30  
  تمرین سوم: اسکایپ
"12:47  
مقدمه‌ای بر جاوا اسکریپت - تگ canvas
  برنامه محاسبه جمع دو عدد دریافتی از ورودی
"06:50  
  برنامه چک زوج یا فرد بودن عدد دریافتی
"04:40  
  برنامه ایجاد دکمه برای تغییر عرض تگ video
"03:05  
  برنامه ایجاد دکمه برای کنترل تگ progress
"04:04  
  تگ canvas
"09:49  
جمع‌بندی
  مروری بر تگ‌های HTML
"04:03  
  پایان
"02:35  

درباره دوره

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

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

اچ‌‌تی‌‌ام‌ال (Hyper Text Markup Language) یا همان زبان نشانه‌‌گذاری فوق متن، زبان طراحی اسکلت اصلی وب‌سایت است. این زبان از تگ‌ها برای نشان‌دادن محتوا و ساختار صفحات استفاده می‌کند، این تگ‌ها به مرورگر اعلام می‌‌کنند که هر بخش از صفحه چه نوع عنصری است و باید به چه صورت‌نمایش داده شود.

به کمک HTML ، اجزای صفحه را ایجاد می‌کنیم و برای ایجاد رابط کاربری از  CSS(Cascading Style Sheets)   استفاده می‌شود. به عبارتی زبان برنامه‌نویسی سی اس اس برای طراحی وب‌سایت‌ استفاده می‌شود.  از CSS برای تنظیم ویژگی‌های ظاهری محتوا از جمله رنگ‌ها، فونت‌ها، حاشیه‌ها، پس‌زمینه‌ها، سایزها و… می‌توان استفاده کرد. با استفاده از CSS می‌توان به المان‌های موجود در صفحه وب که توسط HTML ایجاد شده‌اند، شکل داد. با استفاده از CSS، می‌توان بدون تغییر در ساختار یک صفحه، استایل‌های مختلفی را برای آن صفحه تعریف کرد. 

در این آموزش چه چیزی یاد می‌گیریم؟ 

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

درباره استاد

maktabkhooneh-teacher فرشید شیرافکن

فرشید شیرافکن دانش‌آموخته دکتری بیوانفورماتیک (دانشگاه تهران) است. ایشان تجربه تدریس در دانشگاه‌ها و تألیف کتاب‌های رشته کامپیوتر و همچنین برنامه‌نویسی را در کارنامه خود دارند. از سوابق آموزشی ایشان می‌توان به تدریس در موسسه‌های کنکور و دانشگاه‌ها و تألیف بیش از 10 کتاب و تهیه بیش از 100 فیلم آموزشی در رشته کامپیوتر اشاره نمود. از سوابق برنامه نویسی هم می توان به برنامه نویسی از سال 1377 برای بانک توسعه صادرات و چندین شرکت به زبان‌های دلفی، سی پلاس پلاس و پایتون اشاره نمود.

مشاهده پروفایل و دوره‌‌های استاد

نظرات کاربران

تا کنون نظری برای این دوره ثبت نشده است. برای ثبت نظر باید ابتدا در دوره ثبت نام کرده و دانشجوی دوره باشید.

دوره‌های پیشنهادی

سوالات پرتکرار

پس از سپری شدن زمان دوره، به محتوای دوره دسترسی خواهم داشت؟
بله؛ پس از سپری شدن مدت زمان دوره شما به محتوای دوره دسترسی خواهید داشت و می توانید از ویدئوها، تمارین، پروژه و دیگر محتوای دوره در صورت وجود استفاده کنید ولی امکان تصحیح تمارین توسط پشتیبان و دریافت گواهی نامه برای شما وجود نخواهد داشت.
poster
پیش‌نمایش دوره
  
برگزار کننده:  مکتب‌خونه
  
زمان مورد نیاز برای گذراندن دوره:  12 ساعت
مجموع محتوای آموزشی:  12 ساعت ویدئو
 (قابل دانلود می‌باشد)