آموزش جامع اچ تی ام ال و سی اس اس (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 برای بانک توسعه صادرات و چندین شرکت به زبان‌های دلفی، سی پلاس پلاس و پایتون اشاره نمود.

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

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

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

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

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

پس از سپری شدن زمان دوره، به محتوای دوره دسترسی خواهم داشت؟
بله؛ پس از سپری شدن مدت زمان دوره شما به محتوای دوره دسترسی خواهید داشت و می توانید از ویدئوها، تمارین، پروژه و دیگر محتوای دوره در صورت وجود استفاده کنید ولی امکان تصحیح تمارین توسط پشتیبان و دریافت گواهی نامه برای شما وجود نخواهد داشت.

آموزش اچ تی ام ال و سی اس اس

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

اچ تی ام ال چیست؟

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

سی اس اس چیست؟

سی اس اس (css) مخفف عبارت Cascading Style Sheets به معنای صفحات استایل آبشاری است. سی اس اس به شما اجازه می‌دهد تا صفحات وبی که به کمک زبان اچ تی ام ال ساخته‌اید را زیبا کنید. رنگ‌ها، حاشیه‌ها، فونت، قلم نوشته و دیگر ویژگی‌های عناصر صفحه‌ی وب، با کمک css تعیین می‌شود.

چرا باید در دوره‌ی آموزش طراحی سایت اچ تی ام ال و سی اس اس شرکت کنیم؟

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

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

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

در آموزش اچ تی ام ال و سی اس اس چه چیزهایی را یاد می‌گیریم؟

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

پیش‌نیازهای آموزش با اچ تی ام ال و سی اس اس چیست؟

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

معرفی منابع آموزش html و css از مبتدی تا پیشرفته

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

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

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

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

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

•      معرفی دوره‌ی آموزشی و اهداف

•      آشنایی با html

•      تگ‌های هدینگ در اچ تی ام ال (h1 تا h6)

•      تگ پاراگراف (p)

•      تگ نقل قول (q)

•      تگ‌های استایل‌دهی متن (b و i و s)

•      تگ‌های ins و del

•      تگ‌های var-kbd-pre-code-samp

•      تگ‌های sup و sub

•      تگ‌های bbr و dfn

•      تگ‌های bdo و bdi

•      تگ address

•      کاراکترهای ویژه

•      آموزش سی اس اس

•      معرفی ویژگی font در css

•      قراردادن background

•      ویژگی boxshadow

•      متغیرها

•      تابع attr

•      ایجاد لینک در اچ تی ام ال با تگ a

•      استایل‌دهی به تگ a در سی اس اس

•      تگ img

•      تگ map

•      تگ picture

•      قراردادن favicon در سایت

•      تگ svg

•      ویژگی transform در سی اس اس

•      ویژگی filter در سی اس اس

•      ایجاد لیست در اچ تی ام ال با تگ‌های ul، ol و dl

•      استایل‌دهی به لیست‌ها در سی اس اس

•      کار با لیست

•      لیست‌های تودرتو

•      ایجاد جدول با تگ table

•      تگ‌های thead و tfoot و tbody

•      صفت rowspan

•      صفت colspan

•      تگ‌های صدا audio

•      تگ ویدیو video

•      تگ object

•      تگ embed

•      تگ iframe

•      کار با تگ‌های ورودی فرم

•      صفت pattern

•      ساخت دکمه در فرم با تگ button

•      انواع ورودی‌های فرم (radio- checkbox- selector و غیره)

•      تگ‌های ورودی از نوع فایل، رنگ و تصویر

•      تگ‌های ورودی از نوع range

•      بخش بندی صفحه با تگ div

•      ویژگی boxsizing در سی اس اس

•      واحدهای rem و em

•      تابع clac در css

•      تگ span

•      معرفی و کار با ویژگی‌های کاربردی در سی اس اس

•      مثال‌های عملی

•      انتخابگر در سی اس اس

•      عناصر معنایی

•      مقدمه‌ای بر جاوا اسکریپت

•      مرور و جمع‌بندی مطالب آموزش داده شده

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

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

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

 

 

 

 

 

 

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