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

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

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

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

مطلب بعدی که در این قسمت بررسی می‌شود، تبدیل یک سند HTML4 به HTML5 است که کاری بسیار راحت است. بعد از تبدیل، در ساختار و نحوه نمایش اجزاء هیچ تغییری به وجود نمی‌آید.

اجزاء معنایی در HTML5

در جلسات گذشته به‌طور مختصر اجزاء معنایی ( semantic ) را معرفی کردیم. در واقع بخشی از قدرت طراحی سایت به استفاده درست و بجا از اجزاء معنایی بر می‌گردد. اجزاء معنایی برای معرفی بخش‌های مختلف صفحه به موتورهای جستجو و مرورگرها و توسعه‌دهندگان وب است. به‌عنوان مثال article که در زبان فارسی یعنی مقاله، برای مشخص کردن محتوای اصلی و مقالات برای موتورهای جستجو و توسعه‌دهندگان هستند. پس اجزاء معنایی، اجزائی بامعنی هستند برای مشخص کردن هر بخش از یک صفحه.

توضیح بیشتر برای فهم کاربرد تگ‌های معنایی اینکه تگ <div> و تگ <span> هیچ‌چیز در مورد محتوای درون آن بیان نمی‌کنند و می‌توانند هر چیزی را شامل شوند؛ اما تگ‌هایی مثل <form> و <table> بیانگر  این است که محتوایی که درون این تگ‌ها قرار می‌گیرند عبارت‌اند از یک فرم که توسط کاربر قرار است پر شود و یا اینکه یک جدول که اطلاعاتی درون سلول‌های آن نوشته‌شده است.

با اتریبیوت‌های class و id هم آشنا شدیم و گفتیم که یکی از کاربردهای این دو اتریبیوت برای انتخاب هر جزء از صفحه برای اعمال CSS است. نکته‌ای که باید به آن توجه کنید این است که کلاس یا id که برای اجزا در نظر می‌گیرید هم باید معنایی باشند. مثلا یک div با آی دی nav بیانگر منویی برای هدایت کاربر به بخش‌های مختلف یک سایت و یا یک div با کلاس header بیانگر قسمت header سایت است. پس class . id را با توجه به نوع اجزاء انتخاب کنید.

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

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>
[us_single_image image=”10658″ align=”center”]

تگ <section>

تگ <section> برای تعریف بخشی خاص از یک سند متنی است. بر اساس استانداردهای W3C تگ section یعنی برای تعیین بخش‌هایی از سند است که ارتباط ریشه‌ای با هم دارند و در عنوان با هم مشترک‌اند. مثل همین قسمت‌های آموزش. هر قسمت از بخش‌های مختلفی تشکیل‌شده است که همه ارتباط ریشه‌ای دارند و عنوان یکسانی دارند.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8"> 
		<title> عنوان صفحه </title>
	</head>
	<body>
	<p> مقاله زیر شامل دو قسمت است </p>
		<section>
			<h1> heading1 </h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, corporis, iste! Impedit eligendi aspernatur, doloribus sequi ab esse ipsum vel et aliquid quidem quae deleniti. Voluptatum dolorem voluptatibus inventore necessitatibus.</p>
		</section>

		<section>
			<h1> heading2 </h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur magnam, illo qui, laudantium eius eos itaque voluptatum quam, perferendis earum libero beatae nobis error dicta! Eum dignissimos itaque, praesentium. Earum.</p>
		</section>
	</body>
</html>

 

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

[us_single_image image=”10659″ align=”center”]

تگ <article>

این تگ برای تعریف بخش‌های مجزا هستند که اطلاعاتی که در این جزء قرار می‌گردند به قسمت‌های دیگر وابسته نیست. این یعنی متنی که درون تگ <article> قرار می‌گیرد، تمام اطلاعات مربوط به خود را بیان می‌کند و برای فهم آن نیازی به بخش‌های دیگر یک سایت نیست. بهترین مثال برای درک کاربرد تگ <article> صفحات روزنامه هستند. اگر صفحات میانی یک روزنامه را نگاه کنید می‌بینید که مقاله‌هایی قرار دارند که تمام اطلاعات مربوط به یک عنوان را شامل می‌شوند و برای فهم موضوع آن نیازی به مطالعه بخش‌های دیگر روزنامه نیست. این تگ برای بخش‌های Forum post ، Blog post و مقالات به کار می‌رود.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8"> 
		<title> عنوان صفحه </title>
	</head>
	<body>
	 <article>
		 <h1> heding </h1>
		 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, alias, praesentium. Dolor nemo maxime, debitis commodi error nam! Perferendis rerum numquam aliquid consequuntur. Provident, excepturi dolorum reprehenderit, beatae dolorem et?</p>
		 </article>
	</body>
</html>
[us_single_image image=”10660″ align=”center”]

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

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

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

مثلا در یک روزنامه ممکن است بخش ورزشی چند مقاله ورزشی را در بر بگیرد و یا اینکه بخش‌های تخصصی را در یک مقاله بیابید.

 

عنصر <header>

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

<!DOCTYPE html>
<html lang="en">	
	<head>
		<meta charset="UTF-8"> 
		<title> page title </title>
	</head>
	<body>
	<article>
	 	<header>
			<h1> The heading of article </h1>
			<p> som text as a paragraph about article </p>
		</header>
			<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure eveniet reiciendis harum, nihil maxime vel laudantium, possimus modi, ad porro, dolorum tenetur ratione recusandae blanditiis esse quia. Recusandae, voluptas corrupti. </p>
	</article>

	</body>
</html>
[us_single_image image=”10661″ align=”center”]

عنصر <footer>

تگ <footer> از دیگر تگ‌های معنایی در HTML است که شامل اطلاعاتی درباره انتشاردهنده محتوا، اطلاعات کپی‌رایت، لینک‌های متعدد، اطلاعات تماس و … باشد. اگر در یک سایت به انتهای یک صفحه رجوع کنید، محتویات <footer> را در قسمتی که از بقیه محتویات صفحه جداشده است را خواهید دید. برای هر مقاله می‌توان یک footer ایجاد کرد اما برای سایت باید یک footer ایجاد شود.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8"> 
		<title> page title </title>
	</head>
	<body>
	<article>
	 	<header>
			<h1> The heading of article </h1>
			<p> som text as a paragraph about article </p>
		</header>
			<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure eveniet reiciendis harum, nihil maxime vel laudantium, possimus modi, ad porro, dolorum tenetur ratione recusandae blanditiis esse quia. Recusandae, voluptas corrupti. </p>
	</article>
	<footer>
		<p> some information about your site such as: contact information ( email, tel, address ), some links and so on </p>
	</footer>
	</body>
</html>
[us_single_image image=”10662″ align=”center”]

 عنصر <nav>

همان‌طور که میدانید nav سه حرف ابتدای لغت navigation است که به معنی راهنمایی است. بدین معنی که محتوایی که درون این تگ قرار می‌گیرند عبارت‌اند از لینک‌های متعددی برای هدایت کاربران به صفحات مختلف سایتمان.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8"> 
		<title> page title </title>
	</head>
	<body>
		<nav>
		  <a href="#"> Link 1 </a> |
		  <a href="#"> Link 2 </a> |
		  <a href="#"> Link 3 </a> |
		  <a href="#"> Link 4 </a>
		</nav>
	</body>
</html>
[us_single_image image=”10663″ align=”center”]

عنصر <aside>

گاهی اوقات نیاز است که در مورد بخشی از مقاله‌ی منتشرشده در صفحه، و یا یک لغت یا عبارت، یک توضیحاتی ارائه دهیم. این توضیحات را می‌توان در یک ساید بار ارائه داد. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8"> 
		<title> page title </title>
		<style>
		div.main { padding: 10px; 
			width: 85%; 
			margin: 50px; }

		div.article { border: solid 2px ; 
			float: left; 
			background-color: #ffff99; 
			width: 80%; 
			position: relative; 
			height: 250px; 
			padding: 5px;
			text-align: right;}

		div.aside { border: solid 2px; 
			float: left; 
			background-color: #ccff99; 
			width: 15%; position: relative; 
			height: 250px; 
			padding: 5px;
			text-align: right;}
		</style>
	</head>
	<body>
	<div class="main">
		<div class="article">
			<article>
				<header>
				<h1> عنوان مقاله </h1>
				<p> پاراگرافی در مورد این مقاله </p>
				</header>
				<p> مقاله اصلی در این قسمت قرار می‌گیرد. اگر بخواهیم در مورد یک عبارت از این مقاله توضیحاتی را به کاربر بدهیم، توضیحات را در کادر روبه‌رو می‌نویسیم. </p>
			</article>
		</div>
		<div class="aside">
		   <p> این‌یک ساید بار است </p>
			<aside>
				<h1> یک عبارت از مقاله </h1>
				<p> توضیحاتی در مورد مقاله و یا یک عبارت از آن </p>
			</aside>
		</div>
	</div>
	</body>
</html>
[us_single_image image=”10664″ align=”center”]

عناصر <figure> و <figcaption>

توضیحاتی را که می‌خواهیم در مورد یک عکس بنویسیم را درون تگ <figcaption> می‌نویسیم. تگ <figcaption> و عکس را درون تگ <figure> قرار می‌دهیم. Caption یعنی عنوان و figure یعنی شکل. عبارت figcaption یعنی عنوان و توضیحی برای عکس. ( دلیل معنایی بودن این دو تگ به این خاطر است. )

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8"> 
		<title> عنوان صفحه </title>
	</head>
	<body>
		<p> فرض کنید می‌خواهید در مورد تابلو عصر عاشورا توضیحاتی را بنویسید. بعد از نوشتن توضیحات عکس را در صفحه قرار می‌دهید و عنوانی را برای آن می‌نویسید. </p>

		<figur>
			<img src="images/image01.jpg" alt="عصر عاشورا" width="300px" height="250px">
			<figcaption> تابلو عصر عاشورا اثر استاد محمود فرشچیان </figcaption>
		</figur>
	</body>
</html>
[us_single_image image=”10665″ align=”center”]

در ابتدای این قسمت گفتیم که مقادیر اتریبیوت‌های id و class را متناسب با نام جزء مربوط به آن انتخاب کنید. درگذشته توسعه‌دهندگان وب هر مقداری را که می‌خواستند به این اتریبیوت ها می‌دادند و این سبب غیرممکن شدن تمییز دادن هر بخش نسبت به بخش دیگر شد.

کاری که درگذشته صورت می‌گرفت بدین شکل بود که به‌عنوان‌ مثال برای ایجاد یک مقاله، یک div را در صفحه قرار می‌دادیم و یک class با مقدار article به آن می‌دادیم. این کار علاوه بر سختی کار دیگر توسعه‌دهندگان که کدهای نفر قبلی را بررسی می‌کردند، باعث سردر گمی موتورهای جستجو می‌شد و موتورها نمی‌توانستند بخش‌های مهم هر صفحه را تشخیص دهند و در نتیجه نمی‌توانستند صفحات متناسب با عبارت مورد نظر کاربر را نمایش دهند. با ظهور عناصر معنایی در HTML5 این مشکل بر طرف شد چرا که هم موتورهای جستجو و هم توسعه‌دهندگان می‌دانند که اگر به عنصری مثل <article> برخوردند، این عنصر همان مقاله اصلی است و به این ترتیب به‌راحتی بدون بررسی class و یا id می‌توان بخش‌های اصلی را تشخیص داد.

نحوه تبدیل یک سند ایجادشده با HTML4 به HTML5

ادامه این بخش را با روش تبدیل HTML4 به HTML5 تکمیل می‌کنیم. روشی که با هم می‌آموزیم به‌گونه‌ای است که هیچ تغییری را در ساختار سند HTML4 ایجاد نمی‌کند. یعنی یک سند همان‌گونه که در 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 باید مراحل زیر را انجام دهیم:

۱) تبدیل Doctype سند قدیمی به HTML5 Doctype

۲) تغییر رمزگذاری فایل قدیمی به رمزگذاری HTML5

۳) افزون HTML5Shiv به سند

۴) تغییر div و کلاس‌های آن‌ها به تگ‌های معنایی در HTML5 ( مطابق جدول بالا ) که متناسب با آن باید class و id و کدهای CSS را تغییر دهید.

این ۴ مرحله را با یک مثال بررسی می‌کنیم.

۵) سند زیر با HTML4.01 ایجادشده است:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title> HTML4 </title>
		<style>
				body {
				    font-family: Verdana,sans-serif;
				    font-size: 0.9em;
				}

				div#header, div#footer {
				    padding: 10px;
				    color: white;
				    background-color: black;
				}

				div#content {
				    margin: 5px;
				    padding: 10px;
				    background-color: lightgrey;
				}

				div.article {
				    margin: 5px;
				    padding: 10px;
				    background-color: white;
				}

				div#menu ul {
				    padding: 0;
				}

				div#menu ul li {
				    display: inline;
				    margin: 5px;
				}
		</style>
	</head>
	<body>
		<div id="header">
			<h1> this is header </h1>
		</div>

		<div id="menu">
			<ul>
			  <li> item 1 </li>
			  <li> item 2 </li>
			  <li> item 3 </li>
			</ul>
		</div>

		<div id="content">
			<h2> heading of Section </h2>
			<div class="article">
				<h2> heading of Article </h2>
				  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
				  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
			</div>
			<div class="article">
				<h2> heading of Article </h2>
				  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
				  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
			</div>
		</div>

		<div id="footer">
			<p>&copy; 2016 Sitesazan. All rights reserved.</p>
		</div>

	</body>
</html>
[us_single_image image=”10666″ align=”center”]

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

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

<!DOCTYPE html>

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

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

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

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

<meta charset="utf-8">

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

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

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

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

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

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

body {
    font-family: Verdana,sans-serif;
    font-size: 0.9em;
}

div#header, div#footer {
    padding: 10px;
    color: white;
    background-color: black;
}

div#content {
    margin: 5px;
    padding: 10px;
    background-color: lightgrey;
}

div.article {
    margin: 5px;
    padding: 10px;
    background-color: white;
}

div#menu ul {
    padding: 0;
}

div#menu ul li {
    display: inline;
    margin: 5px;
}

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

body {
    font-family: Verdana,sans-serif;
    font-size: 0.9em;
}

header, footer {
    padding: 10px;
    color: white;
    background-color: black;
}

section {
    margin: 5px;
    padding: 10px;
    background-color: lightgrey;
}

article {
    margin: 5px;
    padding: 10px;
    background-color: white;
}

nav ul {
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 5px;
}

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> HTML5 </title>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
</script>
<![endif]-->
<style>
body {
    font-family: Verdana,sans-serif;
    font-size: 0.9em;
}

header, footer {
    padding: 10px;
    color: white;
    background-color: black;
}

section {
    margin: 5px;
    padding: 10px;
    background-color: lightgrey;
}

article {
    margin: 5px;
    padding: 10px;
    background-color: white;
}

nav ul {
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 5px;
}
</style>
</head>
<body>

<header>
<h1> this is header </h1>
</header>

<nav>
<ul>
  <li> item 1 </li>
  <li> item 2 </li>
  <li> item 3 </li>
</ul>
</nav>

<section>
<h2> Heading of Section </h2>
<article>
<h2> Heading of Article </h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
<article>
<h2> Heading of Article </h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
</section>

<footer>
<p>&copy; 2016 Saitesazan. All rights reserved. </p>
</footer>

</body>
</html>
[us_single_image image=”10667″ align=”center”]

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

دیدگاه ‏خود را بنویسید