همانطور که قبلا نیز توضیح داده شد زبان html یک زبان برنامه نویسی پایه در طراحی سایت است. نوع پیشرفته html، زبان برنامه نویسی html5 است. در این بخش به آموزش html5 می پردازیم. Html5 به مراتب از html آسان تر است و نسبت به آن دارای قابلیت های بیشتری است.
در این زبان برنامه نویسی ، تعدادی از عناصر موجود در html حذف شده اند و در عوض عناصری در html5 ظاهر شده اند که در نوع مقدماتی این زبان وجود نداشت. کاربرد این زبان در طراحی سایت بسیار ساده تر شده است.
امروزه استفاده از html5 در طراحی سایت نسبتا بیشتر از زبان html است. زبان html از زمان آغاز کاربرد خود در طراحی سایت به مرور زمان دچار تغییراتی شده است و نسخه های مختلفی از این زبان برنامه نویسی برای طراحی سایت ارائه شده است.
اولین ورژن زبان html5 در سال 2008 به بازار ارائه شد و تا به امروز دچار تغییراتی شده است. در مقاله "Html5 چیست؟" بیشتر در مورد خصوصیات این زبان توضیح داده شده است. برای آموزش html5 به طور جامع و کامل، در این بخش با ما همراه باشید.
نمونه ای از نحوه کد نویسی زبان html5 در طراحی سایت
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
Html5 چیست؟
زبان برنامه نویسی Html5، نوع توسعه یافته Html است که برای کد نویسی در طراحی سایت به کار می رود. کاربرد این زبان در طراحی سایت به مراتب آسان تر از نوع مقدماتی آن است. در اینجا اطلاعات مختصری راجع به زبان نشانه گذاری Html5 برای شما کاربران عزیز ارائه می کنیم.
جالب ترین عناصر جدید در html5 عبارتند از:
• عناصر جدید معنایی مانند <header>, <footer>, <article> و <section>. این عناصر برای ایجاد تیتر ها، شکل دهی بالا و پایین صفحه، بخش ها و مقالات به کار می رود.
• ویژگی های جدید کنترل فرم مانند تعداد، تاریخ، زمان، تقویم، و محدوده.
• عناصر گرافیکی جدید: <SVG > و <canvas>.
• عناصر جدید چند رسانه ای: <audio> و <video>. از این تگ ها برای ایجاد فایل های صوتی و ویدئویی استفاده می شود.
علاوه بر این عناصر در زبان html5، اعلام نوع اسناد (DOCTYPE) و همچنین بیان کاراکترهای کدنویسی (charset) بسیار ساده است. برای درک بهتر به مثال های زیر
مراجعه کنید.
نحوه اعلام نوع سند <!DOCTYPE html>
نحوه بیان کاراکترهای کد نویسی <meta charset="UTF-8">
نکته: پیش فرض کاراکترهای کدنویسی برای html5، utf-8 است.
API های جدید در HTML5 ( رابط های کاربردی برنامه نویسی) عبارتند از:
• HTML Geolocation (موقعیت جغرافیایی HTML)
• HTML Drag and Drop (کشیدن و رها کردن HTML)
• HTML Local Storage (ذخیره سازی محلی HTML)
• HTML Application Cache (حافظه پنهان برنامه کاربردی HTML)
• HTML Web Workers (کارکنان وب HTML)
• HTML SSE
نکته: حافظه داخلی جایگزینی قدرتمند برای کوکی ها است.
عناصری که در HTML4 مورد استفاده قرار می گرفتند اما در طراحی سایت با HTML5 حذف شده اند در جدول زیر ارائه شده است:
|
عناصر
|
جایگزین
|
|
<acronym>
|
<abbr>
|
|
<applet>
|
<object>
|
|
<basefont>
|
CSS
|
|
<big>
|
CSS
|
|
<center>
|
CSS
|
|
<dir>
|
<ul>
|
|
<font>
|
CSS
|
|
<frame>
|
|
|
<frameset>
|
|
|
<noframes>
|
|
|
<strike>
|
CSS
|
|
<tt>
|
CSS
|
عناصر جدید در html5
در زیر لیستی از تگ ها و عناصر جدید در html5 که برای طراحی سایت از آنها استفاده می شود را برای شما کاربران عزیز ارائه کرده ایم. همانطور که می دانید طراحی سایت با استفاده از مجموعه ای از زبان های برنامه نویسی امکان پذیر است. بدین منظور در این بخش به منظور سهولت طراحی سایت برای شما دوستان گرامی سعی به آموزش html5 داریم.
|
ردیف
|
تگ
|
توضیحات
|
|
1
|
<article>
|
معرف یک مقاله در سند html5
|
|
2
|
<aside>
|
تعیین کننده محتوایی که در حاشیه محتوای صفحه اصلی در طراحی سایت قرار می گیرد
|
|
3
|
<bdi>
|
معرف بخشی از متن است که در مقایسه با قسمت هایس دیگر متن دارای فرمت متفاوتی است.
|
|
4
|
<details>
|
معرف جزئیات بیشتری است که کاربر می تواند آن را نمایان و یا مخفی کند
|
|
5
|
<dialog>
|
تعریف یک کادر و یا باکس به منظور گفتگو
|
|
6
|
<figcaption>
|
معرف عنوان برای تگ <figure> است.
|
|
7
|
<figure>
|
معرف محتوای جامع، مانند تصاویر، نمودارها، عکس ها، لیست کد، و غیره در طراحی سایت است.
|
|
8
|
<footer>
|
تعیین کننده پانویس یک سند و یا یک بخش است
|
|
9
|
<header>
|
معرف تیتر (هدر) یک سند و یا یک بخش است.
|
|
10
|
<main>
|
معرف محتوای اصلی صفحه است
|
|
11
|
<mark>
|
تعیین کننده متن نشانه گذاری شده و یا هایلایت است
|
|
12
|
<menuitem>
|
معرف یک آیتم دستور / منو است که کاربر می تواند از یک منوی popup آن را استناد کند.
|
|
13
|
<meter>
|
معرف اندازه گیری عددی در یک محدوده شناخته شده (یک سنجش) است.
|
|
14
|
<nav>
|
معرف هدایت و دسته بندی لینک ها در سند html5 است.
|
|
15
|
<progress>
|
معرف پیشرفت کار است.
|
|
16
|
<rp>
|
تعیین کننده چیزی است که در صورت پشتیبانی نکردن مرورگر از حاشیه نویسی ruby در مرورگر نشان داده میشود.
|
|
17
|
<rt>
|
معرف توضیح/ تلفظ حروف (برای تایپوگرافی شرق آسیا) است.
|
|
18
|
<ruby>
|
معرف حاشیه نویسی ruby (برای تایپوگرافی شرق آسیا) است.
|
|
19
|
<section>
|
تعریف یک بخش در سند است.
|
|
20
|
<summary>
|
معرف یک عنوان مشخص برای تگ <details> است.
|
|
21
|
<time>
|
تعریف یک زمان/تاریخ
|
|
22
|
<wbr>
|
به منظور پیشگیری از شکستن کلمه استفاده می شود.
|
پشتیبانی مرورگر ها از HTML5
تمام مرورگرهای مدرن از HTML5 پشتیبانی می کنند. علاوه بر این، همه مرورگرها، قدیمی و جدید، به طور خودکار عناصر ناشناخته را به عنوان عناصر درون خطی دسته بندی می کنند.در این قسمت از مقالات طراحی سایت به پشتیبانی مرورگر ها از HTML5 می پردازیم.
تعریف عناصر HTML5 به عنوان عناصر بلوک
HTML5 هشت عناصر معنایی جدید HTML تعریف می کند. همه این عناصر در سطح بلوک می باشند. برای تضمین رفتار درست در مرورگرهای قدیمی تر، شما می توانید ویژگی "display" در CSS را بر روی block تنظیم کنید. مانند زیر:
header, section, footer, aside, nav, main, article, figure{
display: block;
{
شما همچنین می توانید هر عنصر جدیدی را با یک ترفند مرورگر به HTML nv طراحی سایت اضافه کنید. در مثال زیر یک عنصر جدید به نام <myHero> به HTML اضافه شده، و یک سبک نمایش (display style) برای آن تعریف شده است:
<!DOCTYPE html>
<html>
<head>
<title>Creating an HTML Element</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>
</body>
</html>
از راه حل های ارائه شده می توانید برای تمام عناصر HTML5 استفاده کنید، اما توجه داشته باشید که اینترنت اکسپلورر 8 و قبل از آن، به عناصر ناشناخته اجازه نمایش نمی دهند. خوشبختانه Sjoerd Visscher، "جاوا اسکریپت فعال کردن HTML5"، را ایجاد کرد. "the shiv" :
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
کد بالا یک نظر است، اما نسخه های قبل از IE9 قادر به خواندن آن هستند ( و می توانند آن را درک کنند).
مهاجرت از HTML4 به HTML5
در این فصل به طور مفصل در مورد چگونگی مهاجرت از HTML4 به HTML5 صحبت می کنیم.
در این مقاله بیان می کنیم که چگونه یک صفحه HTML4 را بدون از بین بردن محتوای اصلی و یا ساختار به HTML5 تبدیل کنید. شما در هنگام طراحی سایت می توانید HTML4 و یا XHTML را با استفاده از دستورهای زیر به HTML5 تبدیل کنید.
|
نمونه HTML4
|
نمونه HTML5
|
|
<div id="header">
|
<header>
|
|
<div id="menu">
|
<nav>
|
|
<div id="content">
|
<section>
|
|
<div id="post">
|
<article>
|
|
<div id="footer">
|
<footer>
|
تفاوت بین تگ های <article>، <section> و <div>
یک تفاوت گیج کننده در استاندارد HTML5 بین <article>،> <section و <div> وجود دارد.
• در HTML5، عنصر <section>، به عنوان یک بلوک از عناصر مرتبط تعریف شده است.
• تگ <article> تعریفی از یک بلوک (block) جامع و کامل از عناصر مرتبط است.
• و عنصر <div> بیانگر یک بلوک حاوی عناصر کودک است.
در اینجا برای درک بهتر این تفاوت ها چند مثال ارائه کرده ایم.
مثال 1: <article> در <article>
<article>
<h2>Famous Cities</h2>
<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>
</article>
مثال 2: <div> در <article>
<article>
<h2>Famous Cities</h2>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</article>
مثال 3: <div> در <section> در <article>
<article>
<section>
<h2>Famous Cities</h2>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>
<section>
<h2>Famous Countries</h2>
<div class="country">
<h2>England</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="country">
<h2>France</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="country">
<h2>Japan</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>
</article>
عناصر معنایی در HTML5
معناشناسی، مطالعه بر روی معانی کلمات و عبارات در زبان است. عناصر معنایی عناصر با معنا هستند.
عناصر معنایی چیست؟
یک عنصر معنایی، به وضوح معنی خود را برای مرورگر و توسعه دهنده تشریح می کند.عناصر غیر معنایی مانند <div> و <span> هیچ توضیحی در مورد محتوای خود ندارند. در مقابل عناصر معنادار همچون <form>، و <table> و <img> به وضوح محتوای خود را تعریف می کنند.
عناصر معنایی جدید در HTML5
بسیاری در طراحی سایت از کدهای html مانند: <div id="nav"> و یا <div class="header"> و همچنین <div id="footer"> برای بیان و نشان دادن ناوبری (هدایت)، هدر و فوتر استفاده می کنند. HTML5 عناصر معنایی جدید را برای تعریف بخش های مختلف یک صفحه وب ارائه می دهد.
• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>
چرا عناصر معنایی در HTML5؟
در HTML4، توسعه دهندگان از نام صفت مورد علاقه خود برای عناصر صفحه استفاده می کردند مانند:هدر، بالا، پایین، فوتر، منو، ناوبری، اصلی، دربردارنده، محتوا و غیره. استفاده از این عبارت، شناسایی محتوا صحیح صفحه وب را برای موتورهای جستجو غیر ممکن می کرد. اما در html5 عناصری مانند <header> و <footer> و <nav> و <section> و همچنین <article> شناسایی محتوای صحیح صفحه را برا موتورهای جستجو ساده تر کرده اند. به عبارت دیگر معناسازی وب و استفاده از عناصر معنایی در طراحی سایت این امکان را به وجود می آورد که داده ها به اشتراک گذاشته شوند و در جوامع، برنامه های کاربری و شرکت ها مجددا مورد استفاده قرار گیرند.
ترکیب کدها در html5
توسعه دهندگان وب معمولا در مورد سبک برنامه نویسی و نحوه استفاده در HTML، نا مطمئن هستند. بین سال های 2000 تا 2010 بسیاری از طراحی سایت ها از html به xhtml مبدل شدند. در xhtml افراد در طراحی سایت مجبور هستند از کدهای "well-formed" (به خوبی شکل گرفته) استفاده کنند.
html5 در اعتبار سنجی کدها کمی نامرتب تر است. در html5 شما باید خودتان بهترین تمرین، راهنمای سبک و نوشتن کدها را ایجاد کنید.
هوشمند و آینده نگر باشید
یکی از نتایج ناشی از استفاده سبک (style)، این است که استفاده از سند html شما را برای دیگران آسان می کند. در آینده، برنامه هایی مانند خوانندگان xml ممکن بخواهند html شما را بخوانند. استفاده از یک ترکیب صحیح نزدیک به xhtml، هوشمندانه است. توجه داشته باشید که همیشه استایل طراحی سایت و برنامه نویسی خود را هوشمند، مرتب، تمیز و با ترکیبی صحیح نگه دارید. در اینجا به برخی از نکاتی که در طراحی سایت و برنامه نویسی با html5 همچنین ترکیب کدها در html5 باید رعایت کنید اشاره می کنیم.
1. از اسناد صحیح استفاده کنید.
همیشه نوع سند را در خط اول مشخص کنید. برای نوشتن نوع سند می توانید از حروف کوچک و یا حروف بزرگ استفاده کنید.
<!DOCTYPE html>
یا
<!doctype html>
2. برای نوشتن نام عنصر (تگ) از حروف کوچک استفاده کنید.
html5 به شما این اجازه را می دهد تا برای نوشتن عناصر از حروف کوچک و یا بزرگ استفاده کنید. اما توصیه می شود از حروف کوچک برای نوشتن تگ ها استفاده کنید. به نکات زیر توجه کنید.
• ترکیب حروف کوچک و بزرگ برای نوشتن نام عنصر ظاهر زیبایی ندارد.
• حروف کوچک مرتب تر نشان داده می شوند و نوشتن آنها آسان تر است بنابراین معمولا طراحان سایت از این حروف استفاده می کنند.
مثال های نا مناسب:
<SECTION>
<p>این یک پاراگراف است.</p>
</SECTION>
یا
<Section>
<p>این یک پاراگراف است.</p>
</SECTION>
مثال مرتب:
<section>
<p>این یک پاراگراف است.</p>
</section>
3. بستن تگ ها
در html5 بستن و یا نبستن عناصر تهی انتخابی است و هر دو امکان پذیر است. اما (/) در xml و xhtml لازم است. بنابراین اگر می خواهید صفحه شما توسط این ها شناخته شود باید عناصر را ببندید.
<meta charset="utf-8">
یا
<meta charset="utf-8" />
و بسیاری از موارد دیگر بنابراین در هنگام طراحی سایت باید به مرتب نویسی اسناد خود نیز دقت داشته باشید.
عناصر section و article در HTML5
همانطور که قبلا گفته شد عناصر معنایی در HTML5 متفاوت هستند و چندین عنصر معنایی در HTML5 وجود دارد در این بخش به معرفی دو نمونه از این تگ ها که در هنگام طراحی سایت با HTML5 مورد استفاده قرار می گیرند را برای شما کاربران عزیز شرح می دهیم.
عنصر <section> در HTML5
این عنصر در طراحی سایت با HTML5 ، معرف یک بخش در سند HTML است. در واقع "بخش"، یک دسته بندی موضوعی محتوا است که معمولا دارای یک عنوان است. در هنگام طراحی سایت ، صفحه اصلی سایت می تواند به بخش های معرفی ، محتوا و اطلاعات تماس تقسیم شود.
مثال:
<section>
<h1>شرکت طراحی سایت مبنا</h1>
<p> شرکت طراحی سایت مبنا، شرکتی فعال در زمینه طراحی سایت ...</p>
</section>
عنصر <article> در HTML5
استفاده از این عنصر در طراحی سایت مشخص کننده محتوای مستقل و جامع است. یک مقاله باید به خودی خود دارای مفهوم باشد و امکان خواندن آن مستقل از بقیه سایت وجود داشته باشد. مثال هایی از محل های مناسب برای استفاده از عنصر <article> عبارتند از:
• پست های انجمن
• پست وبلاگ
• مقالات روزنامه
مثال:
<article>
<h1> طراحی سایت چیست؟</h1>
<p>طراحی سایت عبارت است از قرار دادن کدهای مختلف در سند های برنامه نویسی به منظور ایجاد یک صفحه وب سایت.</p>
</article>
عنصر header و footer در HTML5
عناصر معنایی در HTML5 متفاوت هستند در این بخش دو نمونه از عناصر معنایی را که در هنگام طراحی سایت با HTML5 مورد استفاده قرار می گیرند را برای شما کاربران عزیز شرح می دهیم.
عنصر <header> در HTML5
این عنصر در طراحی سایت تعیین کننده هدر برای یک سند و یا بخش است. عنصر <header>باید به عنوان یک ظرف برای محتوای مقدماتی استفاده شود. شما می توانید در هنگام طراحی سایت برای یک سند چندین عنصر <header> داشته باشید. مثال زیر معرف یک هدر برای مقاله است:
<article>
<header>
<h1>طراحی سایت چه کاری انجام می دهد؟</h1>
<p>هدف از طراحی سایت:</p>
</header>
<p>هدف از طراحی سایت ایجاد یک بستر کسب و کار مناسب در فضای اینترنتی است.</p>
</article>
عنصر <footer> در HTML5
عنصر <footer> معین قسمت پایین یک سند و یا بخش است. این عنصر باید در بردارنده اطلاعات مربوط به عناصری که در آن قرار دارند باشد. به طور معمول یک فوتر شامل اطلاعات مربوط به شرکت طراحی سایت ، کپی رایت، لینک شرایط استفاده ، اطلاعات تماس و غیره است. شما در طراحی سایت قادر به تنظیم چند عنصر <footer> برای یک سند هستید.
<footer>
<p>طراحی شده توسط شرکت طراحی سایت مبنا </p>
<p>اطلاعات تماس: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>
عنصر nav و aside در HTML5
از جمله عناصر پرکاربرد در طراحی سایت با ، عنصر <nav> و <aside> در HTML5 هستند. در این بخش در مورد خواص و نقش این تگ ها در طراحی سایت بیشتر توضیح می دهیم.
عنصر<nav> در HTML5
این عنصر معرف مجموعه ای از لینک های ناوبری است. عنصر <nav> برای بلوک های بزرگ لینک های ناوبری تعیین شده است. با این حال الزاما تمام لینک ها در سند نباید در داخل این عنصر قرار بگیرند. به مثال زیر توجه کنید:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
عنصر <aside> در HTML5
تگ <aside> تعیین می کند که بخشی از مطالب از محتوایی که در آن قرار گرفته است، جدا شود ( مانند نوار کناری). محتوای کناری باید با محتوای محیط همگام و مرتبط باشد.
مثال:
<p>شرکت طراحی سایت مبنا در زمینه طراحی سایت شرکتی فعال است. </p>
<aside>
<h4>طراحی سایت شرکتی</h4>
<p>طراحی سایت شرکتی نوعی طراحی سایت است که با هدف معرفی محصول و خدمات شرکت پیاده سازی و اجرا می شود.</p>
</aside>
عناصر figure و figcaption و mark در HTML5
عنصر <figure> و <figcaption> در HTML5
در کتاب ها و روزنامه ها داشتن عناوین (caption) همراه تصاویر رایج است. هدف caption ها، افزودن یک توضیح بصری به یک تصویر است. در طراحی سایت با HTML5، تصاویر و عناوین می توانند با یکدیگر در عناصر <figure> گروه بندی شود.
مثال:
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>توصیف عکس</figcaption>
</figure>
عنصر <img> معرف تصویر است ، عنصر <figcaption> تعیین کننده عنوان است.
عنصر <mark> در html5
این عنصر در طراحی سایت معرف قسمت هایی از متن است که نشان دار و هایلایت شده است. در حقیقت در طراحی سایت اگر شما قصد مشخص کردن قسمتی از متن ر دارید، می توانید از عنصر <mark> استفاده کنید. باید توجه داشته باشید که کاربرد این عنصر در طراحی سایت با عنصر <strong> متفاوت است و تنها برای مشخص کردن بخشی از متن استفاده می شود.