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

ویدیوهای پیش نمایش : پیش نمایش

آموزش HTML پیشرفته

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

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

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

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

آموزش تگ های head در 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

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

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

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

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

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

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

آموزش تگ های چند رسانه ای در HTML

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

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

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

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

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

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

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

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

آموزش Entity ها در HTML

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

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

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

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

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

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

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

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

آموزش SVG در HTML

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

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

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

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

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

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

 

بخش توضیحات و فایل های دوره، همزمان با انتشار ویدیو های جدید، بروزرسانی می شوند.

 
در این دوره یاد می گیرید :
  • آشنایی با تگ های head
  • آشنایی با تگ meta و مهمرین تگ های meta
  • آشنایی با تگ link و مهمرین تگ های link
  • نحوه اتصال فایل استایل CSS به صفحه HTML
  • نحوه اتصال عکس FavIcon به صفحه HTML
  • آشنایی با تگ و صفت style
  • نحوه تعریف استایل CSS در داخل کد های صفحه HTML
  • آشنایی با تگ script و شکل های استفاده از آن
  • نحوه اتصال فایل جاوا اسکریپت به صفحه HTML
  • نحوه تعریف جاوا اسکریپت در داخل کد های صفحه HTML
  • آشنایی با تگ iframe
  • معرفی تگ iframe
  • آشنایی با Attribute های تگ iframe
  • نحوه نمایش صفحات HTML در یکدیگر
  • آموزش نمایش یک سایت در سایت دیگر
  • مثال و تمرین تگ iframe
  • آشنایی با تگ video و Attribute های آن
  • نحوه نمایش ویدیو توسط تگ video
  • آشنایی با فرمت های مجاز ویدیو در HTML5
  • نحوه نمایش متن جایگزین برای ویدیو
  • آشنایی با تگ های embed و object
  • نمایش ویدیو توسط تگ embed
  • نمایش ویدیو توسط تگ object
  • نحوه اشتراک گذاری ویدیو های آنلاین
  • اشتراک گذاری ویدیو های یوتیوب
  • آشنایی با تگ audio و Attribute های آن
  • آشنایی با تگ map
  • نحوه ایجاد نقشه تصویری
  • نحوه لینک دار کردن قسمت های مختلف تصویر
  • آشنایی با Entity ها
  • آشنایی با کاراکتر های رزرو شده در HTML
  • نحوه اضافه کردن کاراکتر های خاص به صفحه
  • نحوه اضافه کردن ایموجی ها به صفحه
  • آشنایی با انواع Entity ها
  • استفاده از ایموجی های اینستاگرام در HTML
  • آشنایی با گرافیک در HTML
  • نحوه ایجاد تصاویر SVG
  • ایجاد تصاویر SVG با انواع شکل ها
  • آشنایی با زبان XML
  • ایجاد Path (مسیر) در SVG
  • افزودن متن به تصویر SVG
  • گروه بندی اشکال در SVG
  • ریسپانسیو سازی (واکنش گرا کردن) SVG
  • استفاده از تصاویر/آیکون های SVG در HTML
پیش نیازها :

    جهت مشاهده ویدیوها روی عنوان درس ها کلیک کنید

    باز کردن / بستن تمام فصل ها 5 فصل
  • تگ های head

    1399/05/26 00:22:54
    • 1. تگ meta 10:37 (پیش نمایش)
    • 2. تگ link 04:00 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 3. تگ و صفت style 03:41 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 4. تگ script 04:36 برای تماشای این ویدیو در دوره ثبت نام کنید
  • Iframe

    1399/06/02 00:09:27
    • 5. تگ iframe 03:50 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 6. مثال iframe 04:01 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 7. تمرین iframe 01:36 برای تماشای این ویدیو در دوره ثبت نام کنید
  • چند رسانه ای

    1399/06/27 00:33:19
    • 8. تگ video 08:05 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 9. تگ های embed و object 03:00 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 10. اشتراک گذاری ویدیو ها 03:17 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 11. تگ audio 03:52 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 12. تگ map 08:26 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 13. تمرین تگ video 03:30 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 14. تمرین تگ map 03:09 برای تماشای این ویدیو در دوره ثبت نام کنید
  • Entity

    1399/06/27 00:08:32
    • 15. Entity ها 03:41 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 16. علائم و نماد ها 02:48 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 17. ایموجی ها 02:03 برای تماشای این ویدیو در دوره ثبت نام کنید
  • SVG

    1399/09/10 00:40:23
    • 18. SVG چیست 01:16 (پیش نمایش)
    • 19. SVG با شکل مربع مستطیل 05:32 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 20. SVG با شکل چند ضلعی 01:48 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 21. SVG با شکل دایره 03:27 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 22. SVG با شکل بیضی 03:55 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 23. SVG با شکل خط 02:21 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 24. مسیر در SVG 11:42 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 25. متن در SVG 03:04 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 26. گروه بندی اشکال در SVG 01:33 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 27. SVG ریسپانسیو (واکنش گرا) 02:50 برای تماشای این ویدیو در دوره ثبت نام کنید
    • 28. آیکون های SVG 02:55 برای تماشای این ویدیو در دوره ثبت نام کنید

این بخش بطور موقت غیرفعال است.
بزودی بخش پرسش و پاسخ با امکانات بیشتر راه اندازی خواهد شد.