متخصصHTML, CSS (آنلاین) (پروژه محور)

متخصصHTML, CSS (آنلاین) (پروژه محور)

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

توضیحات

محتوای آموزشی :

– کلیات و تگ های عمومی HTML

●       مقدمه و معرفی HTML

●       معرفی مفهوم عنصر (Element)

o       تگ HTML

o       تگ Head

o       تگ Body

o       تگ Title

o       معرفی برخی از تگ های Meta

o       رعایت اصول SEO به هنگاخم استفاده ار تگ Title

●       معرفی مفهوم خصوصیت (Attribute)

●       معرفی تگ های Heading

o       معرفی تگ های H1 تا H6

o       رعایت اصول SEO در استفاده از تگ های Heading

●       معرفی پاراگراف‌ها

●       معرفی مفهوم سبک (Style)

●       معرفی مفهوم CSS

●       معرقی مقهوم Id

●       معرفی مفهوم class

●       رنگ ها در وب

o       رنگ های دارای نام

o       سیستم رنگی RGB

o       سیستم رنگی HEX

o       سیستم رنگی HSL

●       توضیحات در HTML (Comments)

●       معرفی تگ های مربوط به قالب بندی

o       تگ b

o       تگ strong

o       تگ i

o       تگ em

o       تگ mark

o       تگ small

o       تگ del

o       تگ ins

o       تگ sub

o       تگ sup

o       معرفی اصول SEO در هنگام استفاده از تگ های قالب بندی

●       معرفی تگ های مربوط به نقل قول

o       تگ blockquote

o       تگ q

o       تگ abbr

o       تگ address

o       تگ cite

o       تگ bdo

●       لینک ها (تگ a)

o       پیوند دادن به یک صفحه وب

o       نحوه آدرس دهی و LinkBuilding

o       نحوه ایجاد Bookmark

o       معرفی اصول SEO در LinkBuilding

●       قراردادن تصاوير در صفحه وب (تگ img)

o       قابل کليک کردن نقاط مختلف عکس (Image Map)

o       عنصر Picture

●       نحوه تنظيم Favicon

●       جدول در HTML (تگ Table)

o       تگ tr

o       تگ td

o       تگ th

o       تگ thead

o       تگ tbody

o       تگ tfoot

o       مرز در جدول و سلول ها (Border)

o       اندازه ها در جدول

o       هدر جدول

o       فاصله ها و حاشيه ها (Padding و Spacing)

o       عريض کردن سلولها (colspan و rowspan)

o       سبکدهي به جدول

o       مفهوم colgroup

●       ليست ها

o       ليست هاي مرتب

o       ليست هاي نامرتب

o       ساير ليست ها

●       مفهوم نمايش Block  و Inline

●       معرفی IFrame و معایب آن در SEO

●       مفهوم Layout

o       تگ header

o       تگ section

o       تگ article

o       تگ aside

o       تگ footer

o       تگ details

o       معرفی تکنیک های Layout

▪         فریمورک css

▪         خصوصیت float

▪         مفهوم flexbox

▪         استفاده از تکنیک grid بندی

●       مفهوم طراحی واکنش گرا (Responsive)

●       نمایش computercode

o       تگ code

o       تگ kbd

o       تگ samp

o       تگ var

o       تگ pre

●       تگ های معنایی (Semantic web)

o       معرفی وب معنایی و چرایی آن

o       معرفی تگ های semantic

●       نوشتن خوب و بد ! (HTML Style Guide)

●       موجودیت های HTML (مفهوم Entity و درج علایم ویژه)

●       ایموجی ها در HTML (شکلکها یا Emojis)

●       تفاوت بین HTML و XHTML

2- فرم ها در HTML (تگ Form و سایر متعلقات)

●        معرفی مفهوم فرم ها در HTML

●        خصوصیت های تگ form

○        خصوصیت Action

○        خصوصیت method

○        خصوصیت target

○        خصوصیت autocomplete

○        خصوصیت enctype

○        خصوصیت novalidate

●        المان های فرم

○        تگinput

■        دکمه (button)

■        چک باکس (checkbox)

■        انتخاب رنگ (color)

■        تاریخ (date)

■        تاریخ و زمان (datetime-local)

■        پست الکترونیک (email)

■        انتخاب فایل (file)

■        المان مخفی (hidden)

■        تصویر (image)

■        ماه (month)

■        ورودی عدد (Number)

■        ورودی کلمه عبور (password)

■        انتخاب بازه (range)

■        بازنشانی فرم (reset)

■        جستجو (search)

■        ارسال (submit)

■        ورودی شماره تلفن (tel)

■        ورودی متن ساده (text)

■        زمان (time)

■        ورودی آدرس (url)

■        ورودی هفته (week)

○        تگ label

○        تگ select

○        تگ textarea

○        تگ button

○        تگ fieldset

○        تگ legend

○        تگ datalist

○        تگ output

○        تگ option

○        تگ optgroup

●        خصوصیت های هر یک از المان ها

○        خصوصیت value

○        خصوصیت readonly

○        خصوصیت disabled

○        خصوصیت size

○        خصوصیت maxlength

○        خصوصیت min و max

○        خصوصیت multiple

○        خصوصیت pattern

○        خصوصیت placeholder

○        خصوصیت required

○        خصوصیت step

○        خصوصیت autofocus

○        خصوصیت height و width

○        خصوصیت list

○        خصوصیت autocomplete

 

3- گرافیک در HTML

●        استفاده از تگ canvas و موارد مرتبط با آن

●        معرفی svg و نحوه استفاده از آن

4- چند رسانه ای در HTML

●        معرفی مفهوم مدیا و انواع آن

●        نمایش ویدیو در صفحه وب

●        پخش کردن فایل صوتی (موزیک و …) در صفحه وب

●        پلاگین ها در HTML جهت اجراي :

○        applet های جاوا

○        Microsoft ActiveX Controls

○        فيلم هاي Flash

○        …

●        استفاده از ویدیوهای YouTube در صفحه وب

* مفاهيم پيشرفته تر مانند نمايش موقعيت جغرافيايي، Drag & Drop، Web Storage و … نياز به دانش جاوا اسکريپت دارد و در اين دوره تدريس نخواهد شد و به دوره جاوا اسکريپت موکول ميگردد.

سرفصل آموزش CSS

1- دستورات و خصوصیت عمومی CSS 3.0

●        معرفي و مقدمات CSS

●        مفهوم انتخابگر و مرور برخي انتخابگرها (Selector)

●        توضيحات در CSS

●        رنگها در CSS

●        تنظيم پس زمينه (Background)

●        مرزها (Borders)

●        حاشيه ها (Margins)

●        فاصله ها (Paddings)

●        تنظيم اندازه

●        بررسي Box Model (مفاهيم outline، margin، border و padding)

●        تنظیمات مربوط به متن

○        رنک متن

○        چینش متن

○        دکوراسیون متن

○        خصوصیت Transform

○        فاصله های متنی

■        خصوصیت text-indent

■        خصوصیت letter-spacing

■        خصوصیت line-height

■        خصوصیت word-spacing

■        خصوصیت white-space

○        سایه متن

●        نحوه تنظیم فونت در CSS

○        خصوصیت font-family

○        مفهوم Web Safe Fonts

○        مفهوم Fallbacks

○        استایل فونت

○        اندازه فونت

○        فونت های گوگل (فونت ها و effect های گوگل)

●        آیکن ها در CSS

○        Font Awesome Icons

○        Bootstrap Icons

○        Google Icons

●        استایل دهی به لینک ها

●        استایل دهی به لیست ها

●        استایل دهی جداول

●        خصوصیت Display

●        خصوصیت max-width

●        مفهوم position

●        خصوصیت z-index

●        خصوصیت overflow

●        خصوصیت float و کاربرد آن

●        combinator ها

●        شبه کلاس ها (pseudo-class)

●        شیه عنصرها (pseudo-element)

●        خصوصیت opacity

●        طراحی چند نمونه Navigation Bar

●        طراحی لیست کشویی (dropdowns)

●        طراحی گالری تصویر (Image Gallery)

●        تکنیک Image Sprites

●        انتخابگر خصوصیت (Attribute Selector)

●        چند نمونه استایل دهی به فرمها و المان های آن

●        توابع ریاضی در css

●        گرد نمودن گوشه های عناصر

●        گرادیان ها در css

●        جلوه های دو بعدی

○        خصوصیت transform و توابع matrix , scale , translate

●        جلوه های سه بعدی

○        خصوصیت های rotateX و rotateY

●        خصوصیت transition

●        انیمیشن در css

●        ایجاد tooltip

●        انعکاس عکس

●        تکنیک های object fit

●        تکنیک های object position

●        ایجاد Mask با استفاده از css

●        استایل دهی به دکمه ها

●        استایل صفحه بندی

●        استفاده از متغیرها در css

●        Media Query

●        مفهوم Flexbox و کار با آن

2- طراحی واکنش گرا در CSS

●        مفهوم Viewport

●        مفهوم Grid View

●        استفاده از Media Query در طراحی واکنش گرا

●        عکس و ویدئو در طراحی واکنش گرا

●        آشنایی با فریمورک های طراحی واکنش گرا

 

 

 

توضیحات تکمیلی

کد دوره

مدت زمان دوره

40 ساعت

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

الگوریتم برنامه نویسی

مخاطبان دوره

دیدگاهها

هیچ دیدگاهی برای این محصول نوشته نشده است.


اولین نفری باشید که دیدگاهی را ارسال می کنید برای “متخصصHTML, CSS (آنلاین) (پروژه محور)”

به سبد خرید اضافه شد.:
ثبت نام