آموزش HTML پیشرفته (بیش از 30 ویدیو) html advanced

به دوره آموزش HTML پیشرفته از یوکسیم خوش اومدی :)

حتما دوره های مقدماتی و متوسط HTML رو گذروندی و حالا وقتشه که اطلاعات و دانسته های خودت از HTML رو تکمیل کنی.

من احسان موسوی هستم مدرس این دوره و میخوایم با هم مباحث پیشرفته HTML رو کار کنیم.

دوره های آموزش HTML یوکسیم

دوره های آموزش HTML یوکسیم به 3 سطح تقسیم شده.

سطح مقدماتی : صفحه دوره مقدماتی HTML

سطح متوسط : صفحه دوره متوسط HTML

فصل 1 : آموزش تگ های meta ،link ،style و script در HTML

در این فصل با تگ های meta ،link ،style و script در html (تگ هایی که ما اونها رو در تگ head می نویسیم) که اهمیتی بسیار زیادی در طراحی وب دارن آشنا میشی.

تگ meta (متا) رو بهت معرفی می کنم که در هر سایتی نقش کلیدی و مهم داره. با استفاده از این تگ می تونی اطلاعات مهمی رو به مرورگر و موتور های جستجو ارائه بدی.

اطلاعاتی مثل شیوه رمزگذاری کاراکتر های صفحه (Encoding)، توضیح صفحه (Description)، تعیین کلید واژه های صفحه (Keywords)، تعیین قسمت قابل مشاهده صفحه برای کاربر (Viewport) که اهمیت زیادی برای واکنشگرا کردن (Responsive) صفحه داره، تعیین اینکه آیا موتور های جستجو میتونن صفحه ما رو دنبال (Follow) و ایندکس (Index) کنند یا نه، تعیین اطلاعات نویسنده و کپی رایت و بسیاری موارد دیگه.

با تگ link (لینک) که برای اتصال صفحه به یک منبع یا فایل خارجی/بیرونی (External Resource) استفاده میشه آشنا میشی.

تگ link هم مثل تگ meta اهمیت زیادی داره و از اون می تونیم برای اتصال فایل های استایل CSS به صفحه HTML، تعیین FavIcon (عکس کوچکی که برای تب صفحه در مرورگر نمایش داده میشه) و... استفاده کنیم.

با تگ style آشنا میشی که کاربرد مشابه تگ link رو داره، با این تفاوت که ما بر خلاف تگ link که استایل های CSS رو با استفاده از یک فایل خارجی CSS وارد صفحه HTML خودمون می کردیم، با تگ style، این کار رو به صورت Inline یا خطی و در داخل کد های HTML انجام میدیم.

تگ script رو بهت معرفی می کنم که برای وارد/اضافه کردن جاوا اسکریپت (JavaScript) به صفحه HTML استفاه میشه. این کار به دو روش، یکی با استفاده از یک فایل خارجی/بیرونی (External Resource) و دیگری به صورت Inline یا خطی در داخل کد های HTML انجام میشه که هر دو روش رو توضیح میدم.

فصل 2 : آموزش تگ iframe در HTML

تو این فصل میخوایم با تگ iframe در HTML آشنا بشیم؛ تگی که ما با استفاده از اون می تونیم صفحه وبی رو در صفحه وب دیگری نمایش بدیم!

این صفحه وب میتونه یک صفحه لوکال (Local) یا محلی باشه (یعنی در مسیر فولدر های صفحه یا سایت فعلی قرار داشته باشه) یا اینکه صفحه وب سایت دیگری باشه.

ابتدا میایم با نحوه نوشتن این تگ و Attribute های اون آشنا میشیم؛ بعد میایم iframe رو با استفاده از صفحه وب لوکال و غیر لوکال نمایش میدیم.

همینطور یک مثال جالب از تگ iframe و a رو با هم بهت نشون میدم؛ مثالی که ما یک منوی لینک ایجاد می کنیم و با کلیک کردن روی لینک های این منو، صفحات مختلف رو در قالب iframe میبینیم.

در نهایت با چیز هایی که در این فصل یاد گرفتیم یک تمرین رو انجام میدیم.

فصل 3 : آموزش تگ های چند رسانه ای در HTML

در این فصل با تگ های چند رسانه ای در HTML آشنا میشی که نسبتا پرکاربرد هستن و در سایت های اشتراک گذاری ویدیو، صدا و ... بسیار استفاده میشن.

ابتدا با تگ video آشنا میشی که مهم ترین و پرکاربرد ترین تگ این فصل هست؛ یاد میگیری که چطور ویدیو های لوکال و آنلاین رو در صفحه خودت نمایش بدی، فرمت ها یا پسوند های مجاز فایل های ویدیو در HTML5 رو میشناسی، اینکه چطور چندین فرمت از یک ویدیو رو برای نمایش یک ویدیو در صفحه استفاده کنی، همینطور با Attribute ها یا صفت های این تگ که بسیار مهم هستن و نکات زیادی دارن آشنایی پیدا میکنی، اینکه چطور متن جایگزین برای پخش کننده ویدیو بنویسی و... .

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

همینطور میایم با نحوه اشتراک گذاری ویدیو های سایت های اشتراک گذاری ویدیو در صفحه مون آشنا میشیم. اینکه چطور ویدیو های سایتی مثل یوتیوب رو در صفحه مون به اشتراک بزاریم.

با تگ صدا یعنی audio و attribute های اون کار می کنیم که تا حد زیادی مشابه تگ video هستن. برای این تگ کار چندانی نداریم چون همون چیز هایی که برای تگ video یاد گرفتیم برای این تگ هم مشترک هست.

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

در نهایت میایم با چیز هایی که در این فصل یاد گرفتیم، تمرین هایی رو برای تگ های video و map انجام میدیم.

فصل 4 : آموزش Entity ها در HTML

در این فصل میخوایم با Entity ها یا موجودیت ها در HTML که خیلی مهم و پرکاربرد هستن آشنا بشیم.

کاراکتر های زیادی در HTML وجود دارن که رزرو شده هستن یا دکمه فیزیکی اونها روی کیبورد وجود نداره و در نتیجه ما نمی تونیم اونها رو بطور مستقیم و با استفاده از کلید های کیبورد در صفحه HTML خودمون وارد/اضافه کنیم. برای اضافه کردن این کاراکتر ها میایم از Entity ها که کد های خاصی در HTML هستن استفاده می کنیم.

البته ما می تونیم بعضی از این کاراکتر ها رو با استفاده از کلید های کیبورد هم وارد کنیم؛ یعنی کلید های این کاراکتر ها روی کیبورد وجود دارن ولی مشکل اینه که مرورگر ممکنه این کاراکتر ها رو با کاراکتر های دیگری اشتباه بگیره و همین باعث بروز مشکل بشه. مثل کاراکتر > که ممکنه مرورگر اون رو با علامت شروع یک تگ اشتباه بگیره!

این کد ها به دو شکلی اسمی و عددی وارد میشن. Entity های اسمی که با یک کاراکتر & شروع و با یک کاراکتر ; تموم میشن. همینطور Entity های عددی که با دو کاراکتر #& شروع و با یک کاراکتر ; تموم میشن.

Entity های اسمی مزیتشون اینه که خیلی راحت به یاد میمونن ولی بدیشون اینه که در همه مرورگر ها پشتیبانی نمیشن. در عوض پشتیبانی Entity های عددی خیلی خوبه ولی خب به یاد سپردنشون سخته.

البته تو نیازی نیست که همیشه این کد ها رو حفظ کنی؛ من برای راحتی کار اومدم PDF های مهم ترین Entity ها رو در فایل zip فایل های استفاده شده در دوره قرار دادم که میتونی هر وقت نیازی به Entity خاصی داشتی، به این PDF ها مراجعه کنی.

ما میایم در این فصل، نحوه نوشتن Entity ها و مثال های اون رو بررسی می کنیم. Entity های کاراکتر ها، علائم و نماد ها و حتی ایموجی ها! بله درسته؛ ما با استفاده از Entity ها می تونیم حتی ایموجی ها یا شکلک ها رو هم به صفحه HTML خودمون اضافه کنیم! ایموجی هایی مثل ایموجی های اینستاگرام و خیلی ایموجی های دیگه. این ایموجی ها هم مثل سایر حروف، اعداد، نماد ها و... کاراکتر هستن و ما امکان این رو داریم که استایل دلخواه خودمون رو بهشون بدیم و مثلا اندازه شون رو در صفحه مون بزرگ کنیم.

فصل 5 : آموزش SVG در HTML

در این فصل با گرافیک در HTML و SVG آشنا میشیم؛ تصاویری که در دنیای طراحی وب مدرن جایگاه ویژه ای دارن و به عنوان آیکون، پس زمینه و... بسیار استفاده میشن.

SVG مخفف Scalable Vector Graphics به معنی تصاویر برداری (وکتور) مقیاس پذیر هست؛ یعنی تصاویری که ما می تونیم اونها رو بدون افت کیفیت و وضوع تغییر اندازه بدیم.

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

ما در HTML و در قالب زبانی به اسم XML که زبانی شبیه به HTML هست میتونیم تصاویر SVG رو ایجاد کنیم.

تصاویر SVG مزایای دیگری هم دارن؛ از جمله اینکه ما می تونیم اونها رو با هر نرم افزار ویرایشگر متنی ایجاد کنیم و اینکه حجم اونها چون متن هستن بسیار پایینه.

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

فصل 6 : سایر مباحث HTML

در این فصل به سایر مباحث باقی مانده HTML که در فصل های قبل یا در دوره های مقدماتی و متوسط HTML به اونها پرداخته نشده بود می پردازیم.

مباحثی مثل Global Attributes یا Attribute های (صفات) عمومی که این Attribute ها محدود به استفاده در تگ خاصی نمیشن و ما می تونیم از اونها در هر تگی استفاده کنیم.

همینطور یک سری تگ های باقی مونده که تا به حال معرفی نشده بودن رو معرفی و کار می کنیم؛ تگ های col/colgroup/progress/meter/code/kbd/samp/var. تگ هایی که منسوخ نشدن ولی امروزه استفاده چندانی هم از اونها نمیشه.

در نهایت میایم قوانین و قواعد استفاده از تگ ها بصورت تودرتو رو بررسی می کنیم؛ اینکه ما نمی تونیم هر تگی رو بصورت تودرتو داخل تگ دیگری بنویسیم.