031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

صفحه نخست » بلاگ » html » آموزش طراحی سایت HTML5 – قسمت دوم

آموزش طراحی سایت HTML5 – قسمت دوم

۲۶ام مرداد ۱۳۹۶
مرضیه خیرخواه
93

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

در مقاله ی قبلی آموزش طراحی سایت HTML5 را شروع کردیم و درباره ی تگ های معنایی صحبت کردیم. در این مقاله به ادامه ی آموزش تگ های معنایی می پردازیم. همانطور که قبلاً هم اشاره کردیم استفاده از این تگ ها در طراحی سایت باعث می شود تا هم برنامه نویسان و هم موتورهای جستجو ساختار سایت را به آسانی تشخیص دهند و در سئوی سایت تاثیر مثبت دارد. پس خواندن این مقاله را از دست ندهید. در این آموزش درباره ی تگ های section ، aside و nav صحبت می کنیم.

 

عنصر section در HTML5

تگ section که یک تگ جدید و از تگ های معنایی HTML5 است، یک بخش مجزا در سند تعریف می کند. در واقع از این تگ برای محتواهایی استفاده می شود که با هم ارتباط معنایی دارند و معمولاً برای این محتواها می توانیم یک heading تعریف کنیم.
تگ section از ویژگی های عمومی و رویدادهای عمومی در HTML پشتیبانی می کند. در جدول زیر اولین نسخه ای از مرورگرها که از این تگ پشتیبانی می کنند، نشان داده شده است.

Firefox

opera Internet explorer safari chrome
4.0 11.1 9.0 5.0 6.0

 

در کد زیر می توانید نحوه ی استفاده از عنصر section را مشاهده کنید.

< ! DOCTYPE html >
< html >
   < head >
   < / head >
   < body >
     < section >
       < h1 >What is HTML?< / h1 >
       < p >
       HTML is the standard markup language for creating Web pages.< br >
       HTML stands for Hyper Text Markup Language< br >
       HTML describes the structure of Web pages using markup< br >
       HTML elements are the building blocks of HTML pages< br >
       < / p >
     < / section >
   < / body >
< / html >

 

خروجی کد بالا را می توانید در تصویر زیر مشاهده کنید.

آموزش تگ های معنایی در HTML5

عنصر aside در HTML5

تگ aside حاشیه ای در کنار متن اصلی ایجاد می کند و برای نمایش ستون های چپ و راست در صفحه استفاده می شود. همچنین از این تگ می توان در تگ های دیگر استفاده کرد. برای مثال می توانید در تگ article از عنصر aside استفاده کنید اما دقت داشته باشید که محتوایی که برای aside در نظر می گیرید باید با محتوای تگ article ارتباط معنایی داشته باشد.
تگ aside از تگ های جدید و از تگ های معنایی در HTML5 است. این تگ از ویژگی های عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
در جدول زیر اعداد نشان دهنده ی اولین نسخه ای از مرورگرها است که از عنصر aside پشتیبانی می کنند.

Firefox

opera Internet explorer safari chrome
4.0 11.1 9.0 5.0 6.0

 

در کد زیر از دستور aside استفاده شده است.

< ! DOCTYPE html >
< html >
   < head >
   < / head >
   < body >
     < aside >
       < h4 >Learn HTML5 < / h4 >
       < p >
           Tabs< br >
           Dropdowns< br >
           Accordions< br >
           Convert Weights< br >
           Animated Buttons< br >
           Side Navigation< br >
           Top Navigation
       < / p >
     < / aside >
   < / body >
< / html >

 

خروجی کد بالا به صورت زیر است.

آموزش تگ aside

عنصر nav در HTML5

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

Firefox

opera Internet explorer safari chrome
4.0 11.1 9.0 5.0 6.0

در کد زیر می توانید نحوه ی استفاده از این تگ را مشاهده کنید.

< ! DOCTYPE html >
< html >
   < head >
   < / head >
   < body >
     < nav >
       < a href="#" >HTML< / a > |
       < a href="#" >CSS< / a > |
       < a href="#" >JavaScript< / a > |
       < a href="#" >jQuery< / a > |
     < / nav >
   < / body >
< / html >

 

در شکل زیر خروجی کد بالا نمایش داده شده است.

آموزش تگ معنایی nav

 

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

آموزش طراحی سایت HTML5 – قسمت دوم
5 (100%) 1 vote[s]
درباره نویسنده :
مرضیه خیرخواه

مطالب مرتبط

طراحی فروشگاه اینترنتی تجارت پویا

سایت فروشگاهی تجارت پویا

طراحی سایت فروشگاهی تجارت پویا طراحی سایت اختصاصی تجارت پویا عرضه کننده قیمت لپ تاپ , قیمت کامپیوتر , قیمت گوشی , قیمت تبلت , قیمت کنسول بازی از نمونه کارهای حرفه ای طراحی سایت تیم وب یار می باشد.طراحی سایت فروشگاه تجارت پویا برای مشتریان عزیزی که کسب و کارشان در حوزه های مختلف […]

طراحی فروشگاه اینترنتی جین ایران

فروشگاه اینترنتی جین ایران

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

طراحی سایت فرهنگی سایت کودک

طراحی سایت فرهنگی کودک خلاق

طراحی سایت فرهنگی کودک خلاق طراحی سایت اختصاصی کودک خلاق با رعایت اصول سئو در کدنویسی از نمونه کارهای حرفه ای طراحی سایت وب یار می باشد. طراحی سایت اختصاصی کودک خلاق برای مشتریان عزیزی که کسب و کارشان در حوزه های فرهنگ و خدماتی است بسیار مناسب می باشد. آدرس سایت جهت مشاهده تمامی […]

طراحی سایت بازرگانی ایراکو

طراحی سایت اختصاصی بازرگانی ایراکو طراحی قالب سایت اختصاصی بازرگانی ایراکو با رعایت اصول سئو در کدنویسی از نمونه کارهای حرفه ای طراحی سایت و سئو سایت وب یار است. این سایت در زمینه ی بازرگانی و تجارت با عراق فعالیت دارد. طراحی سایت بازرگانی ایراکو برای مشتریان عزیزی که کسب و کارشان در حوزه های […]

ارسال دیدگاه

*    

*