آموزش html5: تگ های جدید HTML5 (قسمت پنجم)

آموزش HTML5 قسمت پنجم

درود و عرض ادب، با قسمت پنجم آموزش html5 با موضوع تگ های جدید HTML5 در خدمت شما هستیم. این مطلب از سری آموزش های برنامه نویسی تحت وب (مقدماتی) است.

در این آموزش که هم به صورت ویدئویی و هم متنی و تصویری است، قصد داریم چند تگ جدید که در html5 اضافه شده است، را معرفی نماییم. برخی از این کدها، شاید مستقیماً تأثیری در ظاهر صفحه وب ما نداشته باشد اما مرورگر ها و در آینده نزدیک موتورهای جستجو با دیدن این کدها، به ما اعتماد بیشتری خواهند داشت. ضمناً اگر با مفاهیم اولیه زبان html آشنا نیستید، توصیه می کنیم ویدئوهای قبلی را مشاهده بفرمایید. هر چند ما در این سری آموزش ها قصد داریم، به طرز شگفت آوری مطالب را ساده سازی نماییم. این آموزش ها برای افرادی طراحی شده که تقریباً از صفر می خواهند برنامه نویسی تحت وب را آغاز کنند.

خب بیش از این زمان را از دست ندهیم و اگر موافق باشید،

هر چه زودتر با فیلم آموزشی تگ های جدید  HTML5 که در زیر مشاهده می کنید، یادگیری را آغاز نماییم:

 

 

متن و تصویر آموزش تگ های جدید HTML5:

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

قرار دادن عکس با تگ <img> در html

همانطور که در قسمت های قبل با هم بررسی کردیم، با به کار بردن تگ img به راحتی می توان، عکسی را در صفحه وب خود منتشر نمود. اما چگونه می توان اندازه تصویر را به شکل دلخواه تنظیم کرد؟

با استفاده از خاصیت (صفت)مهم Width می توان، عرض عکس را با مقدار px تنطیم کرد و با بهره گیری از ویژگی height نیز قادر خواهید بود، ارتفاع تصویر را به صورت دلخواه تغییر دهید.

همانطور که در عکس زیر مشاهده می فرمایید، عرض عکس را 300px و ارتفاع تصویر را 400px گذاشتیم و اگر دقت بفرمایید، عکس به شکل عجیبی به هم ریخته شده است. برای رفع این مشکل، لطفاً به تیتر بعد مراجعه نمایید 🙂

تغییر انداز عکس با ویژگی Width در html

در این تصویر کاملاً واضح است که تصویر مورد نظر، اصطلاحاً دفورمه شده. جهت حل این مسئله، صرفاً کافیست خاصیت height را حذف کرده و width را برابر 500px قرار دهیم. همین کار ساده باعث می شود، عکس مورد نظر به شکل زیر در آید.

خاصیت Alt در تگ <img> در زبان html

از بحث اندازه تصاویر که بگذریم، در قواعد نحوی (Syntax)زبان HTML خاصیتی وجود دارد تحت عنوان alt که مخفف واژه Alternative است (به معنی متن جایگزین عکس). زمان هایی پیش می آید که به هر دلیلی برخی تصاویر سایت ما برای کاربران قابل رویت نمی باشد. در این صورت کاربران اینگونه با خود می پندارند که شاید، در این سایت، چیزی جز متن های خشک و بی روح وجود ندارد. در صورتی که با استفاده از خاصیت alt می توانیم به آن ها بفهمانیم که، بسیار برای شما ارزش قائل هستیم و عکس های زیبا و باکیفیتی را در صفحه وب سایت خود برای ارائه هر چه بهتر مطلب منتشر کرده ایم.

اما این تصاویر برای شما نمایش داده نشده است. در حقیقت در خاصیت alternative مشخص می کنیم، تصویر مورد نظر در رابطه با چه چیزی است.

همانطور که در تصویر زیر، قابل مشاهده است، متن مربوط به تصویر را در صفت alt قرار داده ایم و در مرورگر هم به درستی نمایش داده شده است.

این ویژگی در سئو سایت ما نیز موثر است و حتماً توصیه می شود حدالامکان از این خاصیت، برای تمامی تصاویر موجود در سایت خود استفاده نمایید.

خاصیت Title در تگ <img> در زبان html

در زبان html صفت دیگری تحت عنوان title وجود دارد که در واقع توضیح مختصری در رابطه با تصاویر ما ارائه می دهد. نحوه نمایش آن به این صورت است که اگر کاربر نشانگر موس را روی تصویر ببرد، متن مورد نظر ما را خواهد دید. همانطور که در تصویر زیر کاملاً واضح است:

تگ <Figure> از سری تگ های جدید HTML5

از این پس درباره دستوراتی صحبت می کنیم که شاید جلوه بصری خاصی در سایت ما پدید نیاورد اما به استاندارد سازی کدنویسی ما کمک بسزایی خواهد کرد. طبق آموزش های جلسه قبل که در قالب Doctype خدمت شما ارائه شد، به این نتیجه رسیدیم که باید ابتدا مشخص کنیم چه نسخه ای از زبان HTML را برگزیده ایم. اگر نسخه HTML5 را انتخاب کرده ایم، بنابراین بهتر است از تگ های جدید HTML5 در پروژه خود به کار ببریم.

اما اگر مایل باشید به سراغ اولین تگ جدید اضافه شده در HTML5 برویم.

تگ Figure یکی از همین دستورات است که در ظاهر هیچ نمودی ندارد و کاربر عادی متوجه حضور آن نمی شود اما به قاعده مند شدن کدهای ما کمک می کند. این تگ می گوید: تگ های مربوط به شکل ها (مثل تصاویر)را درون من قرار دهید. همانطور که در عکس زیر مشاهده می کنید، تگ img را در تگ figure قرار داده ایم.

تگ <Figcaption> برای عکس از تگ های جدید HTML5

دستور بعدی Figcaption است که از سری تگ های جدید HTML5 است. این تگ برای قرار دادن توضیح درباره تصاویر ایجاد شده است. اگر مایل بودیم درباره تصاویر خود توضیحاتی را به کاربران ارائه کنیم، در نسخه جدید HTML بهتر است از این دستور بهره ببریم. ضمناً توضیحات این قسمت می تواند روی سئو سایت ما تأثیر مثبتی داشته باشد. بنابراین خوب است، در این فضا چند کلمه ای هم از عبارات کلیدی مقاله خود قرار دهیم.

فرق تگ <Article> در HTML5 با تگ <Div>

اما در این بخش یکی از مهم ترین تگ های جدید را به شما معرفی می کنیم.

{ تگ Article وظیفه ی بخش بندی محتواها را بر عهده دارد. دقیقاً مانند تگ div }

حال سوال پیش می آید که ما برای تقسیم بندی عناصر صفحه، از div استفاده کنیم یا از Article؟

همانطور که از اسم Article نیز پیداست، برای نوشته های سایت طراحی شده است. البته این نوشته ممکن است نظرات سایت، متون موجود در صفحه درباره ما، توضیحات محصول و یا هر محتوای مهم و کلیدی دیگری باشد که قصد داریم به صورت مستقل در سایت نمایش داده شود.

نحوه پیاده سازی این تگ به شگل زیر است که در تصویر کاملاً واضح و مشخص است:

معنای دقیق تگ <Section> در HTML5 چیست؟

خب به تعریف تگ جدید Section در html5 بپردازیم. این تگ نیز وظیفه ی تقسیم بندی محتواهای سایت را بر عهده دارد.

اما یکی از سوالات متداولی که پرسیده می شود این است که تگ Section چه فرقی با تگ Article دارد؟

پاسخ: تگ Section فضای کلی تری را در بر می گیرد.

به عبارتی دیگر این دستور، برای تگ Article، یک تگ مادر محسوب می شود. ضمناً بهتر است از تگ Section به عنوان یک تگ عمومی (که همه چیز را در بر می گیرد)استفاده نکنیم، گزینه ی مطلوب تر برای این کار، تگ Div است. نحوه استفاده از دستور Section در زیر قابل مشاهده است:

تگ <Main> یک تگ مادر، معرفی شده در HTML5

تگ دیگری که هیچ تأثیری در ظاهر سایت ندارد، Main است. این دستور در نسخه های قبل HTML به صورت Div با آیدی Main استفاده می شد. اما با به دنیا آمدن HTML5 از این پس از تگ Main استفاده می گردد.

این دستور، یک تگ عمومی است که تمامی عناصر مهم یک صفحه وب را پوشش می دهد. مانند تصویر زیر می توانیم از این دستور استفاده نماییم:

تگ <Header> از تگ های استاندارد ایجاد شده در HTML5

تگ Header نیز از سری تگ های جدید HTML5 است که مدت ها قبل به صورت یک div به همراه آیدی header به کار برده می شد.

در تگ Header معمولاً کلیه عناصر مربوط به بالای صفحه سایت اعم از: منوها، لوگو، تولبار و غیره قرار می گیرد.

تگ منسوخ شده <hgroup> در نسخه جدید HTML

در بین این همه تگ جدید و فوق العاده که تا اینجا یاد گرفتیم، شاید بد نباشد محض تنوع 🙂 یک تگ منسوخ شده و بی خاصیت را با هم بررسی کنیم.

( البته نه برای تمسخر، من باب افزایش دانش عمومی 🙂 🙁 )

تگ hgroup استانداردی بود که عمرش بسیار کوتاه بود و با معرفی نسخه HTML5 عملاً منسوخ اعلام شد و همانطور که در تصویر مشاهده می نمایید، ویرایشگر PhpStorm روی آن خط کشیده، به این معنی که استفاده از این دستور در حال حاضر صحیح نیست.

درواقع این تگ لطفی هم به جامعه برنامه نویسان نداشت و عملاً کاری را از پیش نمی برد و صرفاً ابتدا و انتهای تگ های heading (از 1 تا 6)قرار می گرفت و می خواست به برنامه نویسان نشان دهد که تگ های heading را مثلاً دسته بندی کرده است. که به دلیل نداشتن شایستگی های لازم، به شکل بی رحمانه از از صحنه ی کدهای برنامه نویسان حذف گردید.

معرفی تگ <Footer> از تگ های جدید HTML5

تگ Footer نیز همانند دستورات پیشین که مورد بحث و بررسی قرار دادیم، مربوط به بخش footer وب سایت است و تمامی عناصر مرتبط با حق انتشار سایت و یا موضوعات دیگر، بهتر است در این بخش قرار گیرد.

تگ مهم <Aside> جهت ساخت سایدبار

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

در واقع در تگ Aside تمامی عناصر مربوط به Sidebar سایت، نمایش داده می شود که اغلب، ربات های گوگل محتواهایی که در بخش Article قرار می گیرد را جدی تر می گیرند. البته هنوز گوگل در الگوریتم های خود صراحتاً اعلام نکرده است اما شاید بد نباشد از همین الان در کار خود به صورت فوق استاندارد ظاهر شویم.

 

جمع بندی مطلب آموزش تگ های جدید HTML5

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

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

در آخر لازم به ذکر است که ما در این آموزش ها از استاندارد های مجموعه W3C استفاده می کنیم. برای کسب اطلاعات بیشتر در رابطه با استاندارد های این مجمع عظیم الجثه می توانید به آدرس w3.org مراجعه نمایید.

 

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

 

روز و روزگارتان خوش و در پناه ایزد یکتا…

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

رونمایی از محصول قدم صفر کسب و کار + گارانتی بی قید و شرط
همین الان توضیحات محصول را می خوانم