طراحی سایت تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
02188471521   ۰۲۱۴۰۸۸۱۰۳۸

آموزش HTML – بخش هفدهم

آموزش HTML | آموزش HTML5

در جلسه هفدهم آموزش HTML مباحث زیر را بررسی خواهیم کرد:

  • عناصر معنایی در HTML5
  • نحوه تبدیل یک سند طراحی شده با HTML4 به HTML5

عناصر معنایی در HTML5

در جلسات گذشته به طور مختصر با المان های معنایی آشنا شدیم. المان های معنایی، المان هایی هستند که به وضوح معنای خود را برای توسعه دهندگان و موتورهای جستجو بیان می کنند. به عنوان مثال <article>  که یکی از این المان هاست بیان کننده بخش مقالات یک وب سایت می باشد. اما المانی مثل دیو هیچ اطلاعاتی در مورد محتوای خود نمی دهد.

در گذشته برای تعیین بخش های سایت از شناسه استفاده می کردیم مثلا برای تعریف منوی سایت، یک دیو با شناسه nav ایجاد می کردیم. اما در HTML5 این کار را با المان <nav>  انجام می دهیم.

دیگر تگ های معنایی عبارتند از:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

آموزش html

المان <section>

با استفاده از این المان محتوای با موضوع مشترک را دسته بندی می کنیم. معمولا صفحه اصلی سایت را به چند بخش تقسیم می کنند و محتوایی که موضوع مشترک دارند ( مثلا محتوای آموزشی ) را در این بخش ها قرار می دهند.

آموزش html

المان <article>

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

آموزش html

حال سوال این است که چه موقع از تگ <section>  و چه موقع از تگ <article>  استفاده کنیم؟

به این سوال پاسخ مشخصی نمی توان داد. درواقع استفاده از این دو تگ به محتوایی که می خواهید منتشر کنید بستگی دارد. اگر کدهای سایت های مختلف را بررسی کنید، خواهید دید که <article>  هایی هستند که شامل <section>  های متعددی هستند و یا بر عکس؛ <section>  هایی شامل چند <article>  وجود دارند.

در برخی سایت ها هم می توانید <section>  هایی را بیابید که شامل چند <section>  اند و یا <article>  هایی که <article>  های دیگری را شامل می شوند.

بهترین مثال برای درک این موضوع روزنامه ها هستند. هر روزنامه شامل چند بخش ( section ) اخبار ورزشی، حوادث، خانواده و … است که هر بخش مقالات ( article ) مختلفی را شامل می شود.

المان <header>

از دیگر عناصر ( المان ها ) در HTML5 المان header است که سر صفحه یک وب سایت و یا یک بخش از صفحه را بیان می کند. این بخش محتویاتی مانند یک عنوان یا پاراگراف برای معرفی کلی در مورد متن و محتوای آن سند را شامل می شود یعنی اطلاعات کلی  در مورد مقاله، را دربر می گیرد. محدودیتی در ایجاد <header>  در یک سند وجود ندارد و یک سند متنی می تواند شامل چندین header باشد.

هر وب سایت نیز یک هدر اختصاصی دارد که در آن اطلاعات تماس، لوگو و … را در بر می گیرد.

آموزش html

المان <footer>

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

آموزش html

المان <nav>

در این المان لینک هایی برای هدایت و راهنمایی ( navigation ) کاربر به بخش های مختلف سایت قرار می گیرد.

آموزش html

المان <aside>

در این المان اطلاعاتی در مورد یک عبارت یا بخشی از مقاله قرار می گیرد. به مثال زیر توجه کنید

آموزش html

المان های <figure> و <figcaption>

برای هر عکس می توان عنوان ویا توضیحاتی را در تگ <figcaption>  نوشت و عکس و توضیحاتش را در تگ <figure>  قرار داد:

آموزش html

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

تبدیل HTML4 به HTML5

این بخش را با روش تبدیل HTML4 به HTML5 تکمیل می کنیم. یک سند همانگونه که در HTML4 نمایش داده شده می شود، بعد از تغییر به HTML5 بدون هیچ تغییری باید نمایش داده شود. این روش برای تبدیل یک سند ایجاد شده با XHTML به HTML5 نیز کاربرد دارد.

در HTML4 انجام می شد در HTML5 انجام می شود
<div id=”header”> <header>
<div id=”menu”> <nav>
<div id=”content”> <section>
<div class=”article”> <article>
<div id=”footer”> <footer>

برای تبدیل از HTML4 به HTML5 باید مراحل زیر را انجام دهیم:

  1. تبدیل Doctype سند قدیمی به HTML5 Doctype
  2. تغییر رمز گذاری قدیمی به رمز گذاری HTML5
  3. افزون HTML5Shiv به سند
  4. تغییر div و کلاس های آنها به تگ های معنایی در HTML5 ( مطابق جدول بالا ) که متناسب با آن باید کلاس ها و شناسه ها و دستورات CSS را تغییر داد.

یک مثال ساده را با هم بررسی می کنیم. سند زیر با HTML4.01 ایجاد شده است:

آموزش html

برای تبدیل به HTML5 مراحل گفته شده طی می کنیم:

مرحله اول: تصحیح Doctype

در HTML4.01 عبارت Doctype به صورت زیر است:

عبارت بالا در HTML5 به صورت زیر ساده سازی شده است:

مرحله دوم: تصحیح رمزنگاری

اطلاعات رمز نگاری در HTML4.01 به صورت زیر است:

که رمز نگاری در HTML5 همانطور که می دانید ساده سازی شده است و به صورت زیر است:

مرحله سوم: افزودن HTML5Shiv

در جلسه قبل با HTML5Shiv و نحوه افزودن آن به سند آشنا شدیم و گفتیم که در IE8 و قدیمی تر سبک های داده شده به المان های جدید که ایجاد شده اند، پشتیبانی نمی شوند و برای حل این مساله، HTML5Shiv راه کار بود. کدهای زیر را باید در کدهایمان و در تگ <head>  قرار دهیم. توجه کنید که این کدها را باید قبل از تگ <style>  و <link>  باید قرار بگیرند.

مرحله چهارم: تغییر div ها و class های آنها به تگ های معنایی

در بالا اشاره کردیم div ها و خصیصه های آنها را مطابق جدول به تگ های معنایی تغییر می دهیم. مثلا یک div با کلاس header را به <header>  تغییر می دهیم و یا div با کلاس footer را به <footer>  تغییر می دهیم. اکنون باید دستورات CSS را مطابق با این تگ ها تغییر دهیم. یعنی در فایل قدیمی که div#header, div#footer را برای انتخاب قسمت footer و header داشتیم را به header و footer تغییر دهیم تا این اجزا انتخاب شوند.

CSS های سند قدیمی به صورت زیر هستند:

که باید به صورت زیر تغییر یابند:

کدهای نهایی به صورت زیر خواهند بود:

آموزش html

همانطور که می بینید، سند جدید و قدیمی در نحوه نمایش با هم تفاوتی ندارند.

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

نوشته های مرتبط