توسعه صفحات وب یکی از پرطرفدارترین حوزه های برنامه نویسی میباشد. این حوزه به چندین بخش تقسیم می شود. اگر به دنیای جذاب طراحی وب علاقهمند هستید، اولین و مهمترین اقدام شما باید یادگیری HTML و CSS باشد. دوره آموزش HTML و CSS یک دوره کاربردی، رایگان و بسیار کارآمد است. این دوره به شما کمک میکند به راحتی بر هر دو زبان تسلط پیدا کرده و هر آنچه یاد گرفته اید را در پروژهای خود استفاده کنید.
HTML چیست؟
HTML مخفف HyperText Markup Language است و زبان نشانهگذاری متن نام دارد. HyperText در واقع یک متن در متن است و زبان نشانهگذاری زبانی است که توسط کامپیوترها قابل درک است. HTML اساساً برای توصیف صفحات وب طراحی شده است و متنی را که استفاده میکنید تعاملیتر میکند. به عبارتی ساده، اچ تی ام ال یکی از پایهایترین المان های طراحی سایت است و یادگیری آن از اهمیت بسیار بالایی برخوردار است. این زبان ابتدا در سال 1989 بهعنوان زبان انتشارات وب اختراع شد و به زبان ساده، اولین بلوک سازنده در ایجاد یک صفحه وب است. هنگامیکه برای اولین بار با دنیای HTML آشنا شدید، احتمالاً با مجموعهای از اصطلاحات و عبارات روبرو خواهید شد که تا حدودی گیجکننده نیز هستند. سه مورد اصلی عبارتاند از عناصر، برچسبها و ویژگیها. HTML5 آخرین نسخه HTML است و دانش در این زمینه روند رو به رشدی در بازار کار دارد. این ورژن بهطورکلی، عملکردی مشابه HTML استاندارد دارد، اما بسیار پویاتر است و از کدهای بسیار کمتری برای ساختن نتیجهای خارقالعاده استفاده میکند. در دوره آموزش html و css شما بهخوبی با HTML آشنا خواهید شد. HTML پایه و اساس طراحی وبسایت است و برای دورههای آموزش طراحی سایت شما به این مهارت مهم نیازمند خواهید بود.
سرفصل کلی دوره HTML
- معرفی DOCTYPE
- آموزش روش آماده سازی بستر طراحی وب و نرم افزارهای مربوطه
- معرفی Project Structure در طراحی وب
- بررسی تگ های p و div
- بررسی تگ های span , h , head
- بررسی تگ های header , br و لیستها
- بررسی تگ a
- آشنایی تگ img
- تگ map
- تگ picture
- تگ table
- بررسی تگ tbody
- تگ form
- تگ input
- تگ Select
- تگ textarea
- تگ video
- معرفی مفهوم Attribute
- معرفی مفهوم Comment و دلائل استفاده از آن
- معرفی و ارائه مثال از تگهای مربوط به هر طبقه بندی
- بررسی استانداردهای نامگذاری المان ها
- بررسی مفهوم Validation در اسناد Html
- معرفی مفهوم Hyper Link و نکات مربوط به Navigation
- آشنایی با مفهوم Anchor و Hash
- ایجاد Shortcut برای لینکها
- بررسی Site Map و روش ایجاد آن
- بررسی روش ایجاد منو و انواع آن
- بررسی روشهای مختلف آدرس دهی لینکها مثلا Internal و External
- بررسی نکات جدید HTML5 در مورد لینکها مانند Download
- معرفی تگهای مفهومی HTML5 مانند مفاهیم موارد زیر
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
CSS چیست؟
CSS مخفف Cascade Styling Sheets است. بهطور خلاصه، این یک زبان سبُک برای استایلدهی به صفحات وب است. در واقع نوعی زبان است که میتوانید از آن برای توصیف و ارائه یکزبان نشانهگذاری استفاده کنید. یا به زبان ساده، برای توصیف و زیبایی بخشیدن به حرکات HTML به کار میرود. این زبان بهطور مؤثر تعیین میکند که چگونه بلوکهای صفحه، همانطور که توسط HTML گذاشتهشده است، تزئین شده و به کاربر ارائه میشود. CSS برای اولین بار در حدود سال 1996 ایجاد شد تا مفهوم HTML را دگرگون کند و صفحات وب را زیبا جلوه دهد. دانستن CSS یکی از مهمترین مهارتهای یک طراح سایت است. دوره آموزش html و css کاملاً پروژه محور بوده و به شما نحوه استفاده از CSS را در طراحی یک صفحه میآموزد.
- آشنایی با مفاهیم و اصطلاحات رایج در طراحی وب
- مفهوم صفحات ایستا و پویا
- کدهای سمت سرور و سمت کاربر(تفاوت بین کلاینت و سرور)
- آشنایی با ساختار صفحات وب
- HTML چیست؟
- تگ HTML چیست؟
- معرفی نسخه های HTML
- ویژگی های جدید html5 چیست؟
- معرفی تگ ها و خصوصیات منسوخ شده در html5
- استفاده از tags ها با حروف کوچک
- آشنایی با نرم افزار PhpStorm
- دانلود، نصب و تنظیمات ادیتور PHPStorm
- افزونه های مورد نیاز برنامه PHP STORM
- مرورگرها و نحوه استفاده از آنها
- موتورهای رندرینگ
- ابزار بازرسی عناصر مرورگرها
- پوشه بندی مورد نیاز پروژها
- قواعد نوشتاری تگ ها در html
- تشریح یک صفحه html
- آشنایی با تگ head و بررسی زیر تگ های آن
- کاربرد Favicon و روش ساخت آن
- کاربرد تگ Title در HTML
- کاربرد متا تگ ها Meta Tags در HTML
- معرفی تگ body و اولین خروجی از کدها
- واحدهای اندازه گیری در طراحی وب
- روش استفاده از رنگ ها در طراحی وب
- نحوه آدرس دهی فایل ها در وب سایت
- صفت ها در HTML
- تگ های block level و inline level بلاک و اینلاین
- کامنت ها در HTML
- بکارگیری چهار روش تزریق CSS به HTML
- معرفی کلیه تگ های متنی و فرمت دهی
- تگ آیفریم iframe و نحوه استفاده از آن
- ثبت آدرس در گوگل
- استفاده از نقشه در گوگل
- تگ لینک دهی
- تک لیست ها در HTML
- تگ اسکریپت script و نحوه لود صحیح
- کار با فرم ها در html
- کار با تصاویر در html
- روش های فراخوانی تگ map
- کار با Audio Video در html
- استفاده از آپارات برای انتشار فیلم ها و نمایش آنها در وبسایت
- استفاده از هاست های دانلود برای فیلم های حجیم و ساخت CDN
- کار با جداول در html
- کار با تگ های طراحی
- تگ های معنایی و نحوه استفاده از آنها برای سئو داخلی کدها
- اجرای پروژه عملی طراحی وبسایت با HTML5
سرفصل کلی دوره CSS
- شناخت CSS و کاربرد آن در طراحی صفحات وب
- مفهوم سلکتور در css و نحوه استفاده از انواع سلکتورها
- ایجاد کامنت در css
- خصوصیات css داخل مرورگرهای مختلف
- آشنایی با کیوردهای استفاده شده در css
- خصوصیات color رنگ ها در css
- خصوصیات opacity
- خصوصیات و ویژگی های پس زمینه و نحوه استفاده
- ساخت gradient های مختلف و ترکیب رنگ ها
- استفاده از background image و معرفی سایت های معروف برای دریافت عکس
- background repeat و استفاده از pattern
- تنظیمات موقعیت عکس عناصر در صفحه و روش استفاده از یک عکس در مکان های مختلف صفحه
- background attachment و روش های اسکرول
- خصوصیت background و ترتیب نوشتن
- استفاده از border
- ساخت خط افقی با border
- خصوصیت border radius ساخت دایره ها
- ایجاد سایه در باکس ها
- ایجاد سایه در متن ها
- خصوصت padding و مشکلات استفاده از این خصوصیت و رفع آن و استفاده از حالت های آن
- ایجاد فاصله بین باکس ها و تنظیم باکس در وسط صفحه با خصوصیت margin
- ترازبندی متن ها و جهت آنها با css
- فارسی سازی صفحات وب سایت
- خواص مربوط به سرریزی Overflow عناصر در CSS
- استفاده از سایز و فونت های مختلف
- نحوه تهیه فونت مورد نیاز درون پروژه
- نحوه استفاده از فونت های fontawesome
- استفاده از Shapes در css
- تعیین موقعیت اجزا در صفحه وب
- روش های قرارگیری باکس ها در css با خصوصیت float
- تبدیل ساختار تگ های اینلاینی و بلاکی به یک دیگر
- مخفی سازی المان ها در یک صفحه وب و دلیل استفاده
- مخفی سازی یک المان در دستگاهای مختلف
- خاصیت z index ترتیب و اولویت قرارگیری یک المان در صفحه وب
- خصوصیات مربوط به جداول در css
- خصوصیات مربوط به لیست ها در css
- خصوصیت Transition انتقال زمانی در css (تاخیر زمانی)
- چرخاندن و بزرگ نمایی المان ها با css
- استفاده از انیمیشن در css
- نحوه استفاده از reset css
- ساخت و کدزنی قالب html و css
- ارسال قالب در هاست و خروجی گرفتن از کدها
- ساخت صفحه وب کامل با html و css
- اجرای پروژه عملی طراحی وبسایت با CSS3