0

سبد خرید شما خالی است.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی سایت حرفه ای اصفهان, بهینه سازی سایت , بازاریابی و دیجیتال مارکتینگ 09133886881 احمدپور

آموزش HTML5 – قسمت سوم

نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 579
تاریخ بروزرسانی 28 جولای 2019

آموزش HTML5 – تگ های معنایی در HTML5 آموزش طراحی سایت

در این مقاله در راستای آموزش HTML5 با ادامه ی آموزش تگ های معنایی در خدمت شما عزیزان هستیم و به آموزش تگ های figure و figcaption ، article و time می پردازیم. در ادامه با تیم طراحی سایت اصفهان وب یار همراه باشید تا با این تگ های معنایی آشنا شوید.

عنصر figure و figcaption در html5

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

Firefox opera Internet explorer safari chrome
4.0 11.1 9.0 5.0 6.0

تگ figure از تگ های جدید و تگ های معنایی در HTML5 است. این عنصر از ویژگی های عمومی و رویدادهای عمومی در html پشتیبانی می کند.
تگ figcaption توضیحی برای تگ figure ارائه می دهد. از این تگ هم در ابتدای عنصر figure و هم در انتهای آن می توان استفاده کرد.
در مثال زیر می توانید نحوه ی استفاده از این دو تگ را مشاهده کنید.

<figure>
 <img src="image/fkcm9pWjvCT1VStySqeA2Tl72eJkfbmt4t8yenImKBVvK0kTmF0xjctABnaLJIm9.jpg" width="140px" height="170px" >
 <figcaption> image for html5 </figcaption >
</figure>

خروجی کد بالا:

تگ معنایی figure

عنصر article در HTML5

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

Firefox opera Internet explorer safari chrome
4.0 11.1 9.0 5.0 6.0

در کد زیر از تگ article استفاده شده است.

<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.< / p >
</article>

خروجی کد بالا:

تگ article

آموزش عنصر time در HTML5

تگ time از تگ های معنایی و جدید در HTML5 است. از این عنصر برای تعریف تاریخ و زمان استفاده می شود. این تگ یک روش است که زمان و تاریخ را به صورت رمز در می آورد تا برای ماشین قابل فهم باشد. در صورت استفاده از این تگ، موتورهای جستجو می توانند جستجوی دقیق تر و هوشمندانه تری را ارائه دهند. عنصر time از ویژگی ها و رویدادهای عمومی در HTML پشتیبانی می کند.
ویژگی datetime در تگ time یک تاریخ و زمان قابل خواندن برای ماشین ارائه می دهد.
اولین نسخه ی مرورگرهایی که از این عنصر پشتیبانی می کنند، در جدول نوشته شده است.

Firefox

 

opera Internet explorer safari chrome
4.0 11.1 9.0 5.0 6.0

به کد زیر دقت کنید.

<h1>Learn HTML5</h1>
<p>
 Article published on:
 <time>10:22</time><br>
 <time datetime="2017-09-05 10:21" >5th September 2017</time>
</p>

خروجی کد بالا:

آموزش HTML5-تگ معنایی time

در مقاله ی بعدی  آموزش HTML5 را ادامه می دهیم و مبحث تگ های معنایی را به اتمام می رسانیم. برای آشنایی بیشتر با تگ های معنایی می توانید آموزش تگ های header و footer،  و تگ های nav ، aside و section را مطالعه کنید. با عضو شدن در کانال وب یار webyar_net@ از جدیدترین آموزش های تیم وب یار با خبر شوید.

 

مطالب مرتبط
HTML YouTube Video
مطالعه :

در این مقاله قصد داریم به آموزش HTML YouTube Video  بپردازیم. پس با ما همراه باشید. شاید شما نیز هنگام آپلود کردن ویدیو در سایت‌ تان به مشکلاتی از قبیل افت سرعت سایت، نخواندن فرمت و…برخورده اید. از عمده دلایلی که افراد به سراغ آپلود فیلم در سایت خود نمی روند، می توان به درگیری با فرمت ویدئو اشاره کرد، چرا که ممکن است همه مرورگرها فرمت فیلم‌تان را نتوانند باز کنند و شما مجبور به تغییر فرمت متناسب با مرورگرتان شوید، که این خود شاید کاری سخت و یا وقت‌گیر باشد. در این بخش راهی ساده با استفاده از سوشیال مدیای یوتیوب در اختیار شما قرار می دهیم. آپلود ویدئو به کمک YouTube یوتیوب سال هاست که با خدمات ارزشمند خود به یاری کاربران و انواع نیازهای آنان پرداخته است. شما برای استفاده از امکانات پخش فیلم یوتیوب در سایت خود کافیست در آن عضو شده و ویدئوی خود را آپلود کنید. شناسه و یا IDیی رایگان (به طور مثال : tgbNymZ7vqY) یوتیوب به شما می دهد. نحوه استفاده از این شناسه را در بخش بعد به شما آموزش می دهیم. پخش ویدئوی YouTube در HTML با استفاده از تگ <iframe>  و تعیین src attribute می توان به راحتی فیلم یوتیوب را در کد HTML خود اجرا کنید. iframe width=”420″  height=”315> src=”https://www.youtube.com/embed/tgbNymZ7vqY”> </iframe>   توجه شود که درون تگ […]

9 ویژگی مهم CSS در طراحی وب
مطالعه :

در این مقاله قصد داریم  تا با 9 ویژگی مهم CSS در طراحی وب آشنا شویم. 9 ویژگی مهم CSS در طراحی وب در طی یادگیری css به طور کامل با تمامی ویژگی های Css آشنا شدیم و یادگرفتیم که هر کدام از این ویژگی ها چه کاربردی دارند و چگونه باید از انها استفاده کنیم،در این مقاله نیز میخواهیم به صورت کاملا خلاصه با 9 ویژگی کاربردی css آشنا شویم .     1) font-face     یکی از ویژگی های  CSS3 که درسال های اخیر باعث تحولاتی در بخش طراحی وب شده  font-faceاست. این ویژگی به ما  این امکان را میدهد  که هر فونتی که می خواهیم ، به راحتی با فرمت های مختلف و تنظیمات دلخواه در هر بخش از کدCSS  استفاده کنیم. از این ویژگی برای انتخاب ازبین چندین هزار فونت رایگان ، برای صفحه وب خود استفاده کنید. @font-face { font-family: Blackout; src: url(“assests/blackout.ttf”) format(“truetype”); } 2)  media از کوئری های media برای ساخت صفحات واکنش گرا یا طراحی وبسایت بر اساس شرایط دستگاه مورد استفاده قرار میگیرند. با استفاده از کوئری media  و ویژگی min-width  ما می توانیم عناصر صفحه ی وب را به شکل بهتری و با توجه به شرایط موجود به نمایش کاربر در بیاورید. @media screen and (max-width: 960px) { } 3)   clearfix استفاده از clearfix   برای مواقعی که overflow: hidden کار نمیکند, جایگزین […]

Google analytics
مطالعه :

Google analytics در این مطلب میخواهیم در مورد google analytics با شما صحبت کنیم. ابتدا تاریخچه google analytics سپس در مورد چگونگی ثبت نام در آن و مکانیزم کارکرد آن را بررسی می کنیم.     تاریخچه: در  مارس 2005 گوگل شرکت urchin را تحت مالکیت خود در آورد. کاربران اینترنت برای اولین بار در 11 نوامبر 2005  این سرویس گوگل را شناختند،سرویسی که تا قبل از آن که توسط گوگل خریداری شود به نام urchin  و با قیمت 500 دلار در بازار عرضه می شد. اما گوگل هنگام رو نمایی از این سرویس اعلام کرد که این سرویس به صورت رایگان عرضه خواهد شد که این گفته باعث ایجاد مشکلات بسیاری در سرور های گوگل شد چرا که ارائه ی رایگان این سرویس خدمت بزرگی برای صاحبان وبسایت و کسب و کار ها بود . استقبال از این سرویس گوگل تا حدی زیاد بود که گوگل مجبور شد به مدت 10 ماه ثبت نام های این سرویس را ببندد. در زمان بسته شدن ثبت نام گوگل ماشین جدیدی به این سرویس اضافه کرد تا عملکرد google analytics  بهبود پیدا کند.همان ط.ر که پیشبینی می شد باز شدن این سرویس پس از 10 ماه باعث حجوم کاربران بسیاری شد و این سرویس در عرض چند ماه همه گیر و محبوب شد. ثبت نام در google analytics : عکس زیر تمامی […]

3 لیست مهم در HTML5
مطالعه :

در این مقاله میخواهیم 3 لیست مهم در HTML5 را به شما بگوییم. 3 لیست مهم در HTML5 لیست ها کاربردهای فراوانی در متون مختلف داشته و حتما تا به حال نمونه هایی از آن ها را در کتاب ها ، مجلات ، روزنامه ها و.. دیده اید. اما کاربرد لیست ها محدود به مطالب چاپی نمی شود و امروزه در انواع صفحات وب ، شبکه های اجتماعی و یا پیام رسان ها نیز دیده می شوند. با کمک لیست ها می توانید موضوعات مرتبط به هم را در یک دسته قرار داده و آن ها را گروه بندی کنید. HTML نیز به منظور ایجاد انواع لیست ها در صفحات وب تگ هایی مشخص کرده است. در HTML5  سه نوع لیست با کاربردهای متفاوت وجود دارد که شامل موارد زیر است : Unordered Lists Ordered Lists Description Lists در ادامه به کاربرد و نحوه ی نوشتن هر لیست می پردازیم :     Unordered Lists در این لیست ها ترتیب آیتم ها اهمیت نداشته و تنها عناصر مرتبط به هم در یک لیست قرار می گیرند. به عنوان مثال به لیست زیر توجه کنید : انواع نوشیدنی های گرم قهوه چای نسکافه همان طور که مشاهده می کنید در این لیست ترتیب اهمیت نداشته و فرقی نمی کند چه آیتمی اول و یا اخر باشد. برای نوشتن چنین لیست هایی […]

فروشگاه اینترنتی حرفه ای
مطالعه :

طراحی سایت فروشگاهی اینترنتی امروزه در دنیای تجارت همه ی افراد برای گسترش کسب و کار خود در فکر طراحی سایت فروشگاهی هستند. افراد با استفاده از یک سایت فروشگاهی بازدیدکنندگان را قادر می­ سازند تا در تمام ساعات شبانه روز محصولات و خدمات مورد نیاز خود را سفارش دهند. در یک فروشگاه اینترنتی علاوه بر فروش کالاهای فیزیکی، خدمات و کالاهای غیر فیزیکی نیز به فروش می­ رود و خریداران تنها با یک کلیک می­ توانند محصولات و خدمات مورد نیازشان را بررسی کنند و سپس اقدام به خرید نمایند. در ادامه همراه طراحی سایت وب یار باشید تا با مزایا، امکانات و  مراحل طراحی سایت فروشگاهی و طراحی فروشگاه اینترنتی آشنا شوید.   مزایای طراحی سایت فروشگاهی عدم نیاز به حضور در فروشگاه: فروشگاه­ هایی که به­ صورت آنلاین فعالیت می­ کنند محدودیت زمان فعالیت ندارند. در واقع مزیت فروشگاه­ اینترنتی در این است که این فروشگاه­ ها به­ صورت شبانه ­روزی فعالیت می­ کنند و افراد در هر ساعت از شبانه­ روز که بخواهند می­ توانند از این فروشگاه ها محصول مورد نظر خود را خریداری نمایند. کاهش هزینه­ ها: به­ طور کلی راه ­اندازی فروشگاه اینترنتی ارزان­ تر از راه ­اندازی یک فروشگاه فیزیکی می­ باشد. اگرچه طراحی سایت فروشگاهی مستلزم دانش، تخصص فنی و سرمایه­ گذاری مستمر است. افزایش فروش: شما ممکن است برخی از […]

پشتیبانی سایت و بروزرسانی سایت
مطالعه :

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

دیدگاه ها

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

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