متخصص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 در طراحی واکنش گرا

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

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