آموزش طراحی سایت (HTML CSS Javascript) | آتریا

فیلم آموزش html

تگ sup در HTML

مثال (تگ sup در HTML)
متن بالانویس:
<p>This text contains <sup>superscript</sup> text.</p>

خودتان امتحان کنید »
تعریف و کاربرد تگ sup در HTML
تگ <sup> متن را به صورت بالانویس تعریف می کند. بالا نویس ها معمولا به اندازه ی نصف ارتفاع یک کاراکتر بالاتر از بقیه ی کاراکتر قرار می گیرند و گاهی اوقات در یک فونت کوچکتر ارائه می شوند. بالانویس می تواند برای پانوشت استفاده شود، مانند: WWW^[1].
نکته: از تگ <sub> برای تعریف متن به صورت زیر نویس استفاده می کنیم.
پشتیبانی مرورگرها از تگ sup در HTML

عنصر

<sup> بله بله بله بله بله

تفاوت بین HTML 4.01 و HTML5
تفاوتی وجود ندارد.
ویژگی های عمومی تگ sup در HTML
تگ <sup> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ sup در HTML
تگ <sup> از رویدادهای عمومی در HTML پشتیبانی می کند.
توضیحات در HTML

مثال (توضیحات در HTML)
توضیحات در HTML:


<p>This is a paragraph.</p>

خودتان امتحان کنید »
تعریف و کاربرد
جهت قراردادن توضیحات برای اسکریپت ها در صفحه HTML( اچ تی ام ال) از این دستور استفاده می شود . این توضیحات در صفحه ی مرورگر نمایش داده نمی شود. شما می توانید از توضیحات برای تشریح کدهای خود استفاده کنید. توضیحات به شما کمک می کند کدها را در آینده آسانتر ویرایش کنید. این توضیحات به ویژه زمانی مفید است که تعداد کدهای شما زیاد باشد.
پشتیبانی مرورگرها

عنصر

 بله بله بله بله بله

تفاوت بین HTML4.01 و HTML5
تفاوتی وجود ندارد.
نکته ها وترفندها
نکته: از تگ<--...--!> (توضیحات) می توان برای مخفی و غیر فعال کردن اسکریپت ها در مرورگرهایی که آن را پشتیبانی نمی کنند استفاده کرد.

<script type="text/javascript">
< !--
function displayMsg()
{
alert("Hello World!")
}
//-->
< /script>
نکته:برای کامنت کردن کدهای جاوااسکریپت و به منظور جلوگیری از اجرای آن، در انتهای کامنت، از دو اسلش رو به جلو ( // ) استفاده می کنیم.
Standard خصوصیت ها
تگ <--..--!> (توضیحات) هیچ یک از ویژگی های استانداردها را پشتیبانی نمی کند.
مطالعه بیشتر در مورد: مرجع HTML-خصوصیت های عمومی
رویدادهای عمومی
تگ <--..--!> (توضیحات) هیچ یک از ویژگی های رویداد را پشتیبانی نمی کند.
مطالعه بیشتر در مورد: مرجع HTML-رویدادهای عمومی
جابه جا کردن عناصر در HTML5
کشیدن (Drag) و انداختن (Drop) عناصر، بخشی از استاندارد html5 است.
کشیدن (Drag) و انداختن (Drop)
کشیدن و انداختن عناصر یکی از ویژگی های خیلی معمول HTML5است. منظور از کشیدن و انداختن زمانی است که یکی از اشیاء داخل صفحه را بگیرید و به محلی دیگر بکشید و رها نمایید.
در HTML5 هر عنصری در صفحه می تواند قابل کشیدن (draggable) باشد.
پشتیبانی مرورگرها

مرورگرهای Internet Explorer 9+, Firefox, Opera, Chrome, Safari جابه جا کردن عناصر را پشتیبانی می کنند.
توجه: Safari 5.1.2 و نسخه های قدیمی تر آن، جابه جا کردن عناصر را پشتیبانی نمی کنند.
مثال کشیدن و انداختن عناصر در HTML5
مثال زیر یک مثال ساده از کشیدن و انداختن است:
مثال (جابه جا کردن عناصر در HTML5)
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>

<img id="drag1" src="/img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">

</body>
</html>
خودتان امتحان کنید »
مثال بالا ممکن است کمی پیچیده بنظر برسد، اما اجازه بدهید بعد از مرور تمام بخش های آن در پایین قضاوت نمایید.
عنصر مورد نظر را قابل جا به جا کردن کنید
در مرحله اول باید کاری کنید تا عنصر مورد نظرتان، قابل جا به جا شدن باشد.
برای این منظور باید خاصیت drggable را با مقدار true تنظیم نمایید:
<img draggable="true">
تعیین عنصری که می خواهید جا به جا شود
در مرحله دوم باید عنصری را که می خواهید جا به جا شود و همچنین اتفاقی که پس از کشیدن آن قرار است بیافتد را تعیین نمایید.
در کد بالا، خاصیت ondragstart عنصر <img>، را با رویداد (drag(event تنظیم کرده ایم. این رویداد تعیین می کند چه عنصری می خواهد جابه جا شود. این رویداد زمانی اتفاق می افتد که شما دکمه موس را بر روی عکس کلیک کرده و سعی می کنید آن را بکشید.
متد ()dataTransfer.setData اطلاعات عنصری که قرار است کشیده شود، یعنی id آن را دریافت کرده و در حافظه مرورگر قرار می د هد. این id از نوع "Text" بوده و مقدار آن در این مثال drag1 است.
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
عنصر جابه جا شده را کجا می توان رها نمود
رویداد ondragover مشخص کننده محلی است که داده ی جابه جا شده را می توان رها نمود.
بصورت پیشفرض، عناصر و داده ها را نمی توان جابه جا نمود. بنابراین باید از این کار جلوگیری نمود.
این کار هنگامی که رویداد ondragover اتفاق می افتد، با صدا زدن متد ()ev.preventDefault انجام می شود:
function allowDrop(ev)
{
ev.preventDefault();
}
رها کردن عنصر جابه جا شده
پس از انتخاب عنصر و جابه جا کردن آن، باید مکانی که فرود (drop) می آید را تعیین کرده و سپس آنرا رها نمایید.
در مثال بالا، هنگامی که عکس را در مکان تعیین شده رها می کنید، رویداد ondrop تگ <div> رخ داده و تابع drop را فراخوانی می کند.
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
توضیح کد:
- بصورت پیشفرض، عناصر و داده ها را نمی توان جابه جا نمود. بنابراین با صدا زدن متد ()ev.preventDefault از این کار جلوگیری می کنیم.
- توسط متد ()ev.dataTransfer.getData، شناسه یا همان id عنصر drag شده را دریافت می کنیم. این متد شناسه همان نوع داده ای را که در متد ()setData تنظیم کردید، برمی گرداند.
- این id از نوع "Text" بوده و مقدار آن در این مثال drag1 است.
- متد ()ev.target.appendChild عنصر انتخاب شده را به تگ div مرتبط می سازد.
مثال - خودتان امتحان کنید
جابه جا کرد عکس بین دو محل
در این مثال، نشان داده شده است که چگونه یک عکس را بین دو عنصر <div> جابه جا کنیم.
خصوصیت ها در xHTML
خصوصیت های XHTML همان خصوصیت های HTML است که مانند XML نوشته شده اند.
خصوصیت های XHTML - قوانین نوشتاری
Wiki
- نام خصوصیت ها باید به صورت کوچک نوشته شود.
- مقادیر خصوصیت ها باید درون دابل کوتیشن باشد.
- خلاصه نویسی خصوصیت ها ممنوع است.
نام خصوصیت ها باید با حروف کوچک نوشته شود
Wiki
قطعه کد زیر غلط است:
<table WIDTH="100%">
این درست است:
<table width="100%">
مقدار خصوصیت ها باید درون دابل کوتیشن باشند
Wiki
قطعه کد زیر غلط است:
<table width=100%>
این درست است:
<table width="100%">
خلاصه نویسی خصوصیت ها ممنوع است
Wiki
قطعه کد زیر غلط است:
<input checked>
<input readonly>
<input disabled>
<option selected>
این درست است:
<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
خصوصیت های جدید در HTML5
خصوصیت های جدید در HTML5
چندین خصوصیت جدید در HTML5برای تگ های <form> و <input> اضافه شده است.
خصوصیت های جدید برای تگ <form>
- autocomplete
- novalidate
خصوصیت های جدید برای تگ <input>
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern
- placeholder
- required
- step
خصوصیت autocomplete در <form> / <input>
این خصوصیت مشخص می کند که مقادیر یک فرم یا یک فیلد متنی بصورت اتوماتیک پر شود یا نه.
زمانی که کاربر شروع به تایپ در فیلدهای autocomplete می کند، مرورگر گزینه هایی را که قبلاً کاربر وارد کرده است نمایش می دهد.
نکته: این امکان وجود دارد که خصوصیت autocomplete برای form فعال و برای یک فیلد بخصوص غیرفعال باشد و یا برعکس.
توجه:خصوصیت autocomplete برای تگ <form> و تگ <input>ی که از انواع زیر باشد کار می کند:
text, search, url, tel, email, password, datepickers, range, color

مثال (خصوصیت های جدید در HTML5)
<form action="demo_form.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
خودتان امتحان کنید »
نکته: در بعضی مرورگرها باید خاصیت Autocomplete را فعال کنید تا این مثال کار کند.
خصوصیت novalidate در <form>
خصوصیت novalidate یک خصوصیت boolean است.
این خصوصیت نشان می دهد که این فرم برای ارسال به سرور نیاز به اعتبارسنجی ندارد.
اگر این خصوصیت برای فرم مشخص شده باشد هیچ یک از فیلدهای آن فرم از نظر اعتبارسنجی بررسی نمی شود.

مثال (خصوصیت های جدید در HTML5)
<form action="demo_form.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
خودتان امتحان کنید »
خصوصیت autofocus در <input>
خصوصیت autofocus یک خصوصیت boolean است.
این خصوصیت باعث می شود که بعد از لود شدن صفحه، مکان نما بصورت پیشفرض روی آن فیلد قرار گیرد.
نکته: خصوصیت autofocus برای تمام انواع فیلدهای ورودی کار می کند.

مثال (خصوصیت های جدید در HTML5)
First name:<input type="text" name="fname" autofocus>
خودتان امتحان کنید »
خصوصیت form در <input>
این خصوصیت فرم یا فرم هایی که فیلد مورد نظر به آن ها تعلق دارد را مشخص می کند.
نکته: خصوصیت form برای تمام انواع فیلدهای ورودی کار می کند و برای اتصال یک فیلد به چند فرم باید با space بین id فرم ها فاصله بگذارید.
این خصوصیت باید به id فرم مورد نظرتان اشاره کند.

مثال (خصوصیت های جدید در HTML5)
<form action="demo_form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">
خودتان امتحان کنید »
خصوصیت formaction در <input>
خصوصیت formaction، آدرس فایلی که مقادیر کنترل های ورودی بعد از ارسال در آن پردازش می شوند را مشخص می کند.
خصوصیت formaction، خصوصیت action عنصر <form>را لغو می کند و با مقدار مورد نظر تغییر می دهد.
نکته: خصوصیت formaction با انواع ورودی submit و image استفاده می شود.
نکته: از این صفات می توان برای ساخت دکمه های submit متفاوت که کارهای متفاوتی انجام می دهند استفاده کرد.

مثال (خصوصیت های جدید در HTML5)
یک فرم HTML با دو دکمه submit، و دو action متفاوت:
<form action="demo_form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="demo_admin.php"
value="Submit as admin">
</form>
خودتان امتحان کنید »
خصوصیت formenctype در <input>
خصوصیت formenctype، چگونگی رمز کردن داده های فرم، هنگام ارسال را مشخص می کند. (تنها زمانی که خصوصیت method عنصر <form> با مقدار "post" تنظیم شده باشد)
خصوصیت formenctype، خصوصیت enctype عنصر <form> را لغو می کند و با مقدار مورد نظر تغییر می دهد.
نکته: خصوصیت formenctype با انواع ورودی submit و image استفاده می شود.

مثال (خصوصیت های جدید در HTML5)
در دکمه اول، داده ها براساس enctype پیشفرض فرم ارسال می شوند، و در دکمه دوم داده ها بر اساس "multipart/form-data" رمزگذاری و ارسال می شوند:
<form action="demo_post_enctype.php" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
خودتان امتحان کنید »
خصوصیت formmethod در <input>
خصوصیت formmethod، مشخص می کند که ارسال اطلاعات از فرم HTMLبه سرور به چه شکل باشد، اگر آنرا با مقدار "get" پر کنیم، اطلاعات فرم در آدرس صفحه قرار می گیرد و ارسال می شود، و اگر آنرا با مقدار "post" تنظیم کنیم، اطلاعات به صورت یک آرایه ارسال می شود.(به صورت پیشفرض get در نظر گرفته می شود)
خصوصیت formmethod، خصوصیت method عنصر <form> را لغو می کند و با مقدار مورد نظر تغییر می دهد.
نکته: خصوصیت formmethod با انواع ورودی submit و image استفاده می شود.

مثال (خصوصیت های جدید در HTML5)
<form action="demo_form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post" formaction="demo_post.php"
value="Submit using POST">
</form>
خودتان امتحان کنید »
خصوصیت formnovalidate در <input>
خصوصیت formnovalidate یک خصوصیت boolean است.
این خصوصیت نشان می دهد که فیلدهای ورودی برای ارسال به سرور نیاز به اعتبارسنجی ندارد.
خصوصیت formnovalidate، خصوصیت novalidate عنصر <form> را لغو می کند و با مقدار مورد نظر تغییر می دهد.
نکته: خصوصیت formnovalidate با نوع ورودی submit استفاده می شود.

مثال (خصوصیت های جدید در HTML5)
یک فرم با دو دکمه (با و بدون اعتبار سنجی):
<form action="demo_form.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form>
خودتان امتحان کنید »
خصوصیت formtarget در <input>
خصوصیت formtarget نشان می دهد، پاسخی که از سرور دریافت شده است کجا نمایش داده شود و می تواند شامل: صفحه جاری، صفحه جدید، صفحه پدر، یك فریم خاص و... باشد.
خصوصیت formtarget، خصوصیت target عنصر <form> را لغو می کند و با مقدار مورد نظر تغییر می دهد.
نکته: خصوصیت formtarget با انواع ورودی submit و image استفاده می شود.

مثال (خصوصیت های جدید در HTML5)
یک فرم با دو دکمه submit و targetهای متفاوت:
<form action="demo_form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form>
خودتان امتحان کنید »
خصوصیت های height و width در <input>
خصوصیت های height و width، ارتفاع و عرض برای نوع ورودی image را مشخص می کند.
توجه: همانطور که مشخص است این خصوصیت فقط برای نوع ورودی image کار می کند.
نکته: همیشه خصوصیت عرض و طول یک عکس را مشخص کنید. اگر این خصوصیت ها تنظیم شوند، زمانی که صفحه در حال لود شدن است، مکان مورد نیاز برای عکس در بین دیگر عناصر صفحه رزرو شده است. بنابراین طرح صفحه در حال لود با طرح کاملاً لود شده ی صفحه، تفاوتی نخواهد داشت. اما اگر این خصوصیات را تنظیم نکنید، مرورگر نمی تواند اندازه عکس را تشخیص دهد و اگر تصویری در بین متن باشد. جای آن تا لود کامل تصویر خالی خواهد ماند.

مثال (خصوصیت های جدید در HTML5)
تعریف یک عکس بعنوان submit، با خصوصیت های height و width:
<input type="image" src="/img_submit.gif" alt="Submit" width="48" height="48">
خودتان امتحان کنید »
خصوصیت list در <input>
این خصوصیت یک datalist را به یک فیلد متنی متصل می کند.
زمانی که کاربر داده وارد می کند، یک لیست کشویی ظاهر می شود و می تواند از گزینه های پیشنهاد داده شده یکی را انتخاب نماید.
برای اتصال یک <datalist> به یک فیلد ورودی متنی، باید خاصیت list فیلد متنی را با id عنصر <datalist> تنظیم نمایید.

مثال (خصوصیت های جدید در HTML5)
<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
خودتان امتحان کنید »
خصوصیت های min و max در <input>
خصوصیت های min و max، حداقل و حداکثر مقدار برای یک عنصر <input> را مشخص می کند.
توجه: این خصوصیت ها فقط برای انواع ورودی زیر استفاده می شود:
number, range, date, datetime, datetime-local, month, time ,week

مثال (خصوصیت های جدید در HTML5)
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
خودتان امتحان کنید »
خصوصیت multiple در <input>
خصوصیت multiple یک خصوصیت boolean است.
این خصوصیت نشان میدهد که مقادیر متعددی را می توان برای عنصر <input> تنظیم نمود. مقادیر را با کاما (,) از هم جدا کنید.
توجه: این خصوصیت فقط برای انواع ورودی email و file استفاده می شود.

مثال (خصوصیت های جدید در HTML5)
Select images: <input type="file" name="img" multiple>
خودتان امتحان کنید »
خصوصیت pattern در <input>
این خصوصیت الگویی برای بررسی اعتبار یک فیلد ورودی مشخص می کند. این الگو یک یک عبارت منظم (regular expression) است که می توانید در اینترنت، عبارات منظم و نحوه ایجاد آن ها را بیابید.
توجه: این خصوصیت فقط برای انواع ورودی زیر استفاده می شود:
text, search, url, tel, email, password
نکته: می توان از خصوصیت title برای توضیح درباره الگو، جهت کمک به فهم کاربر استفاده نمود.
اگر مایلید درباره عبارات منظم در JavaScript بیشتر بدانید به مطلب JS Validation مراجعه کنید. همچنین سایت http://html5pattern.com نیز برای بررسی بیشتر بسیار مناسب است.
قطعا با عبارت منظم آشنا هستید، در زیر مفهوم برخی از علائم عبارات منظم آورده شده است:
- ^ : نشانه شروع می باشد. به طور مثال دستور bcd^ به معنی هر عبارتی است که با bcd شروع شود.
- $ : نشانه پایان می باشد. به طور مثال دستور $bcd به معنی هر عبارتی است که در انتها به bcd ختم شود.
- + : نشانه تکرار است و اگر پشت عبارتی قرار بگیرید باید حداقل یکبار تکرار شود.
- * : همانند + می باشد با این تفاوت که آن عبارت می تواند تکراری نداشته باشد.
- ? : اگر پشت عبارتی قرار بگیرد یعنی اینکه آن عبارت باید صفر یا یک بار تکرار شود.
- () : برای قسمت بندی عبارات به زیر عبارات و اولویت بندی نیز می باشد.
- [] : لیستی از کاراکترها که می خواهیم تطبیق دهیم در این دو کروشه قرار می گیرد.
- [ ^] : لیستی از کاراکترهائی که نمی خواهیم تطبیق داده شوند از این عبارت استفاده می کنیم.
- d\ : نشانه ارقام می باشد یعنی وقتی این عبارت بیاید منظور یکی از ارقام است.
- D\ : نشانه هر کاراکتری غیر از رقم می باشد.
- w\ : نشانه حرف یا عدد می باشد و کاراکترهای خاص نیست و معادل [a-zA-Z_0-9] است.
- W\ : نشانه کاراکترهای خاص می باشد و عدد یا حروف یا space نیست.
- s\ : نشانه کاراکتر space می باشد.
- S\ : نشان هر کاراکتری غیر از space می باشد.
- {} : مشخص کننده تعداد تکرارا می باشد و اگر داخل آن یک عدد نوشته شود یعنی اینکه عبارت قبل از آن دقیقا باید به تعداد آن عدد تکرارا شود ولی اگر دو عدد نوشته شود عبارت قبل از آن باید تکراری بین آن دو عدد باشد.
- | : بمعنی یا است. بعنوان مثال a|b یعنی یا a یا b
- - : بمعنی تا است. بعنوان مثال a-z یعنی از a تا z
- . : می تواند هر کاراکتری باشد.
مثال (خصوصیت های جدید در HTML5)
یک فیلد متنی که می تواند فقط شامل 3 حرف باشد و بیشتر از آن را نمی پذیرد. (3 حرف و نه اعداد یا کاراکترهای خاص)
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
خودتان امتحان کنید »
خصوصیت placeholder در <input>
این خصوصیت یک عبارت را به صورت کم رنگ در داخل فیلد ورودی می نویسد که با فوکوس روی آن فیلد از بین می رود و فیلد خالی می شود.
توجه: این خصوصیت فقط برای انواع ورودی زیر استفاده می شود:
text, search, url, tel, email, password

مثال (خصوصیت های جدید در HTML5)
<input type="text" name="fname" placeholder="First name">
خودتان امتحان کنید »
خصوصیت required در <input>
خصوصیت required یک خصوصیت boolean است.
این خصوصیت مشخص می کند که فیلد ورودی قبل از ارسال به سرور باید حتما پر شده باشد.
توجه: این خصوصیت فقط برای انواع ورودی زیر استفاده می شود:
text, search, url, tel, email, password, date pickers, number, checkbox, radio, file

مثال (خصوصیت های جدید در HTML5)
Username: <input type="text" name="usrname" required>
خودتان امتحان کنید »
خصوصیت step در <input>
خصوصیت step، فاصله اعداد مجاز برای یک عنصر <input> را مشخص می کند.
مثال: اگر "3"=step باشد، اعداد مجاز می تواند... 6 ، 3 ، 0 ، 3- ، 6-... باشد.
نکته:خصوصیت step را می توان همراه با خصوصیت های min و max برای مشخص کردن یک محدوده ای از اعداد مجاز استفاده نمود.
توجه: این خصوصیت فقط برای انواع ورودی زیر استفاده می شود:
number, range, date, datetime, datetime-local, month, time ,week

مثال (خصوصیت های جدید در HTML5)
<input type="number" name="points" step="3">
خودتان امتحان کنید »
ذخیره داده ها بر روی کامپیوتر کاربر
ذخیره داده ها بر روی کامپیوتر کاربر (Client)
در گذشته این کار توسط کوکی ها انجام می شد. کوکی ها برای تعداد زیاد داده کارایی ندارد، زیرا کوکی ها با هر بار درخواست از سرور انتقال پیدا می کنند، که این باعث کاهش سرعت و عدم کارایی مناسب می شود.
در HTML5داده ها با هر بار درخواست از سرور ارسال نمی شوند و فقط زمانی که نیاز به آنها داشته باشیم استفاده می شوند. همچنین امکان ذخیره مقدار زیادی اطلاعات بدون تاثیر منفی روی کارایی سایت نیز وجود دارد.
داده های سایت های مختلف بصورت key/value ذخیره می شوند و هر وب سایت فقط به داده هایی که خودش ذخیره کرده می تواند دسترسی پیدا کند.
HTML5 از JavaScriptبرای ذخیره سازی و دسترسی به داده ها استفاده می کند.
پشتیبانی مرورگرها

مرورگرهای Internet Explorer 8+, Firefox, Opera, Chrome, Safari ذخیره داده ها را پشتیبانی می کنند.
توجه: Internet Explorer 7 و نسخه های قدیمی تر آن، web storage را پشتیبانی نمی کنند.
localStorage و sessionStorage
HTML5 دو شیء جدید برای ذخیره سازی داده ها بر روی کلاینت معرفی کرده است:
- localStorage: ذخیره داده ها بدون زمان انقضاء
- sessionStorage: داده های یک جلسه (session) را ذخیره می کند.
قبل از استفاده از اشیاء بالا، باید بررسی کنید که مرورگر، localStorage و sessionStorage را پشتیبانی می کند یا نه.
if(typeof(Storage)!=="undefined")
{
// Yes! localStorage and sessionStorage support!
// Some code.....
}
else
{
// Sorry! No web storage support..
}
شیء localStorage
این شیء داده ها را برای زمان نامحدودی ذخیره می کند. این داده ها زمانی که مرورگر بسته شود حذف نخواهد شد و روز بعد، هفته بعد و حتی سال بعد در دسترس خواهد بود.
چگونگی ایجاد و دسترسی به loaclStorage
مثال (ذخیره داده ها بر روی کامپیوتر کاربر)
localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: "
+ localStorage.lastname;
خودتان امتحان کنید »
توضیح مثال:
- ابتدا یک شیء loaclStorage با نام "lastname" و مقدار "Smith" ایجاد شده است.
- در ادامه مقدار "lastname" را بازیابی می کنیم و سپس محتوای عنصر با شناسه "result" را با آن مقداردهی می کنیم.
توجه: داده ها همیشه بصورت رشته ای ذخیره می شوند. بیاد داشته باشید که در صورت نیاز باید آنرا تبدیل کنید.
در مثال زیر، تعداد دفعات کلیک کاربر روی یک دکمه را نشان می دهد. در این کد برای اینکه بتوان شمارنده را افزایش داد، مقدار رشته ای به عددی تبدیل شده است:
مثال (ذخیره داده ها بر روی کامپیوتر کاربر)
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
خودتان امتحان کنید »
شیء sessionStorage
این شیء اطلاعات یک جلسه را ذخیره می کند. این اطلاعات زمانی که کاربر پنجره مرورگر را می بندد از بین می رود.
در مثال زیر، تعداد دفعات کلیک کاربر روی یک دکمه در جلسه جاری را نشان می دهد:
مثال (ذخیره داده ها بر روی کامپیوتر کاربر)
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
خودتان امتحان کنید »
ذخیره صفحات بر روی کامپیوتر کاربر
در HTML5 به سادگی می توان یک نسخه offline از برنامه وب را با ایجاد یک فایل Manifest ساخت.
Application Cache چیست؟
Html5قابلیت جدیدی را با نام Application Cache به کاربران وب ارائه داده است و امکان ذخیره شدن صفحات مرور شده بر روی کامپیوتر کاربر و مشاهده آنها را در زمان قطع ارتباط با اینترنت (offline) را فراهم می کند.
Application Cache سه مزیت را در اختیار کاربران قرار می دهد:
- مرور offline: کاربران می توانند صفحات مورد نظر را حتی در زمان offline، نیز مشاهده نمایند.
- سرعت بالاتر: صفحات ذخیره شده بر روی کامپیوتر کاربر با سرعت بیشتری لود و فراخوانی می شوند.
- کاهش حجم اطلاعات ارسالی از سرور: باعث کاهش حجم اطلاعات ارسالی از سرور شده و مرورگر فقط صفحاتی که تغییر کرده اند، را مجددا فراخوانی می کند.
پشتیبانی مرورگرها

مرورگرهای Internet Explorer 10+, Firefox, Opera, Chrome, Safari متد Application Cache را پشتیبانی می کنند.
مثالی از یک صفحه HTML با قابلیت Application Cashe
مثال زیر، یک صفحه وب با قابلیت مرور offline صفحات در کامپیوتر کاربر را نشان می دهد. در این صفحه قابلیت Application Cache فعال است. توجه نمایید که این خاصیت در حالت عادی، فعال نیست.
مثال (ذخیره صفحات بر روی کامپیوتر کاربر)
<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
The content of the document......
</body>

</html>
خودتان امتحان کنید »
فعال نمودن قابلیت Application Cache
برای فعال کردن این قابلیت، در تگ <html>، خاصیت manifest را با نام فایل manifest تنظیم نمایید:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
هر صفحه ای که خاصیت manifest برای آن تنظیم شده باشد، با هر بار مشاهده کاربر در حافظه ذخیره می شود (Cached). اگر خاصیت manifest مشخص نشده باشد، صفحه مورد نظر در حافظه ذخیره نمی شود (مگر اینکه بطور مستقیم صفحه مورد نظر را در فایل manifest مشخص نمایید.)
فرمت رایج برای ذخیره فایل های manifest، فرمت "appcache." است.
فایل Manifest
فایل Manifest یک فایل متنی ساده است و به مرورگر می گوید که چه چیزهایی را باید و نباید Cache نماید.
این فایل شامل 3 قسمت اصلی است:
- Cashe ManiFest:فایل های تعیین شده در این قسمت، در هر بار مشاهده کاربر، دانلود و Cache خواهند شد.
- Network:فایل های تعیین شده در این قسمت نیازمند وجود ارتباط اینترنتی به سرور بوده و هیچگاه ذخیره نمی شوند.
- Fallback: فایل یا فایل های ذخیره شده در این قسمت، در صورتی که به هر دلیل صفحه مورد نظر کاربر، قابل دسترسی نباشد، فراخوانی می شوند. (به جای فایل اصلی)
در این قسمت به تشریح خط به خط فایل Manifest می پردازیم:
CACHE MANIFEST
در خط اول، ذکر عبارت CACHE MANIFEST الزامی است:
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
در فایل Manifest بالا، لیست فایل هایی که باید Cache شوند آورده شده است، یک فایل CSS، یک عکس با فرمت gif. و یک فایل JavaScript
زمانی که فایل Manifest اجرا می شود مرورگر 3 فایل تعیین شده را از سرور سایت، دانلود و ذخیره می کند. بنابراین هر زمان که کاربر به اینترنت متصل نباشد، سایر فایل های جانبی صفحه (مثل تم یا اسکریپت ها) نیز قابل دسترس خواهند بود.
NETWORK
در قسمت بعدی، عبارت Network قرار داده می شود. فایل هایی که در زیر عبارت Network تعیین شوند هیچگاه توسط مرورگر Cache نخواهند شد:
NETWORK:
login.asp
از علامت ستاره (*) می توانید برای نشان دادن اینکه تمام فایل ها، نیاز به ارتباط اینترنتی دارند استفاده نمایید:
NETWORK:
*
FALLBACK
در قسمت آخر نیز، عبارت FALLBACK قرار داده می شود. در صورتی که صفحه به هر دلیلی قابل دسترسی و مشاهده نباشد، فایلی که در زیر این عبارت تعیین شود، نشان داده خواهد شد.
در مثال زیر، فایل "offline.html" در صورتی که ارتباط با اینترنت میسر نباشد، بجای تمام فایل هایی که در پوشه /html/ قرار دارند، بکار خواهد رفت:
FALLBACK:
/html/ /offline.html
Update و به روز رسانی فایل های Cache شده
فایلی که بر روی کامپیوتر کاربر ذخیره می شود بدون تغییر باقی می ماند. مگر اینکه یکی از حالات زیر اتفاق بیافتد:
- کاربر اطلاعات Cache شده مرورگر را پاک کند.
- فایل Manifest تغییر کند.
- Application Cache بصورت برنامه ریزی شده تغییر کند.
مثال - فرم نهایی فایل MANIFEST
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html/ /offline.html
توجه:خطوطی که با کاراکتر "#" شروع می شوند، توضیحات اند (comments)، اما علاوه بر این، می توان از آن برای اهداف دیگری نیز استفاده نمود. مرورگر پس از ذخیره صفحه بر روی کامپیوتر کاربر، همواره صفحه ذخیره شده را نمایش داده و اگر فایل اصلی تغییر کند به کاربر اطلاع نمی دهد، مگر اینکه فایل Manifest آنرا Update کنید. یکی از راه های دوباره Cache کردن فایل ها توسط مرورگر، این است که تاریخ و نسخه مشخص شده در خط Comment را تغییر دهید.
نکاتی درباره Application Cache
در استفاده از این قابلیت و اینکه چه فایل هایی را بر روی کامپیوتر کاربران Cache می کنید، دقت نمایید.
مرورگر پس از ذخیره صفحه برروی کامپیوتر کاربر، همواره صفحه ذخیره شده را نمایش داده و اگر فایل اصلی تغییر کند به کاربر اطلاع نمی دهد. مگر اینکه فایل Manifest آنرا Update کنید.
همچنین مرورگرهای مختلف محدودیت مشخصی در حجم فایل های ذخیره شده لحاظ می کنند (معمولا مرورگرها، حداکثر 5 مگابایت برای ذخیره فایل های هر سایت اختصاص می دهند)

عنصر
<sup>	بله	بله	بله	بله	بله

عنصر
<!--...-->	بله	بله	بله	بله	بله

سیستم موقعیت یاب جهانی HTML5

سیستم موقعیت یاب HTML5 برای پیدا کردن موقعیت یک کاربر استفاده می شود.

سیستم موقعیت یاب جهانی HTMl5

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

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

پشتیبانی مرورگرها

مرورگرهای Internet Explorer 9+, Firefox, Opera, Chrome, Safari سیستم موقعیت یاب HTML5 را پشتیبانی می کنند.

توجه: سیستم موقعیت یاب HTML5در دستگاه هایی که دارای GPS هستند (مانند iPhone) دقیق تر کار می کند.

اطلاع از موقعیت کنونی کاربر

از متد ()getCurrentPosition برای اطلاع از موقعیت کنونی کاربر استفاده می شود.

مثال زیر یک کد ساده موقعیت یابی را نشان می دهد که بوسیله آن عرض و طول جغرافیایی مکان کاربر را بر روی صفحه، نمایش می دهد:

مثال (سیستم موقعیت یاب جهانی HTML5)

خودتان امتحان کنید »

توضیح مثال:

در مرحله اول چک شده که آیا مرورگر از سیستم موقعیت یاب در HTML پشتیبانی می کند یا خیر و در صورت لزوم کد های مناسب اجرا می شود.
اگر مرورگر از این سیستم پشتیبانی کند، متد ()getCurrentPosition اجرا شده و در غیر این صورت یک پیام هشدار مبنی بر عدم پشتیبانی مرورگر صادر می شود.
اگر متد ()getCurrentPosition با موفقیت اجرا شود، مختصات نقطه قرارگیری کاربر را بوسیله یک پارامتر به تابع ()ShowPosition برمی گرداند.
تابع ()ShowPosition طول و عرض جغرافیایی کاربر را در خروجی نمایش می دهد.

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

مدیریت خطاها و عدم جوابگویی سیستم

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

این پارامتر یک تابع را تعیین می کند تا در صورت بروز خطا، اجرا شده و پیام لازم را به کاربر نمایش دهد:

مثال (سیستم موقعیت یاب جهانی HTML5)

function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}

خودتان امتحان کنید »

توضیح کد:

PERMISSION_DENIED: در این حالت کاربر اجازه دسترسی به موقعیت یابی را نداده است.
POSITION_UNAVAILABLE: در این حالت یافتن موقعیت صحیح کاربر به علت مشکلات فنی ممکن نیست.
TIMEOUT: در این حالت مدت زمان لازم برای اجرای درخواست تمام شده است.
UNKNOWN_ERROR: خطای ایجاد شده نا مفهوم است.

نمایش موقعیت کاربر بر روی یک نقشه

برای نمایش موقعیت کاربر بر روی یک نقشه، به یک سرویس دهنده مانند Google Maps نیاز دارید:

مثال (سیستم موقعیت یاب جهانی HTML5)

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;

var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";

document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}

خودتان امتحان کنید »

در مثال بالا، از طول و عرض جغرافیایی برای نمایش موقعیت کاربر در Google Maps استفاده شده است. (از یک عکس استاتیک استفاده شده است)

Google Map Script
در این مثال، چگونگی نمایش یک نقشه تعاملی تر با ابزارهای zoom ،drag و marker نشان داده شده است.

داده هایی که متد ()getCurrentPosition برمی گرداند

اگر متد ()getCurrentPosition با موفقیت اجرا شود، یک شیء برمی گرداند. خصوصیت های latitude ,longitude و accuracy همیشه برگردانده می شوند. در جدول زیر دیگر خصوصیت های این شیء آورده شده است:

خصوصیت	توضیحات
coords.latitude	عرض جغرافیایی
coords.longitude	طول جغرافیایی
coords.accuracy	دقت و درستی مکان کاربر
coords.altitude	The altitude in meters above the mean sea level
coords.altitudeAccuracy	The altitude accuracy of position
coords.heading	The heading as degrees clockwise from North
coords.speed	The speed in meters per second
timestamp	The date/time of the response

متدهای دیگر شیء geolocation

متد ()watchPosition: مکان فعلی کاربر را برمی گرداند و در صورت جابه جا شدن کاربر، داده را تازه سازی می کند. (مانند دستگاه GPS در یک خودرو)

متد ()clearWatch: باعث توقف متد ()watchPosition می شود.

در مثال زیر، متد ()watchPosition، نشان داده شده است. برای تست این مثال، به یک دستگاه GPS دقیق نیاز دارید: (مانند iPhone)

مثال (سیستم موقعیت یاب جهانی HTML5)

خودتان امتحان کنید »

شیء Attribute

HTML DOM Nodes

در مدل HTML DOM، هر چیزی یک گره است:

سند خودش به تنهایی یک گره سند، می باشد.
تمام عناصر HTML، گره های عنصر هستند.
تمام خصوصیت های HTML گره های خصوصیت هستند.
متن های درون عناصر HTML گره هستند.
کامنت ها نیز، گره کامنت هستند.

The Attr Object

در HTML DOM، اشیاء Attr، یک خصوصیت HTMLرا مشخص می کنند.

یک خصوصیت HTML همواره به یک عنصر HTML تعلق دارد.

The NamedNodeMap Object

در مدل HTML DOM، شیء NamedNodeMap یک مجموعه ی نامنظم از گره خصوصیت عنصرها را مشخص می کند.

گره های درون NamedNodeMap می توانند به وسیله ی نام یا اندیس، مورد دسترسی قرار بگیرند.

پشتیبانی مرورگرها

Object
Attr	بله	بله	بله	بله	بله
NamedNodeMap	بله	بله	بله	بله	بله

شیء Attr و شیءNamedNodeMap در تمام مرورگرهای بزرگ پشتیبانی می شوند.

خصوصیت ها و متدها

Property / متد	توضیحات
attr.isId	در صورتی که خصوصیت مورد نظر از نوع ID باشد، true را برمی گرداند و در غیر این صورت false برگردانده خواهد شد.
attr.name	نام یک خصوصیت را برمی گرداند.
attr.value	مقدار خصوصیت مورد نظر را ست کرده یا برمی گرداند.
attr.specified	در صورتی که خصوصیت مورد نظر، مشخص شده باشد، true را برمی گرداند و در غیر این صورت false برگردانده خواهد شد.

nodemap.getNamedItem()	یک گره خصوصیت، مشخص شده را از شیء NamedNodeMap برمی گرداند.
nodemap.item()	گره خصوصیت را با یک اندیس مشخص در یک شیء NamedNodeMap برمی گرداند.
nodemap.length	تعداد گره های خصوصیت را در یک شیء NamedNodeMap برمی گرداند.
nodemap.removeNamedItem()	یک گره خصوصیت مشخص شده را حذف می کند.
nodemap.setNamedItem()	گره خصوصیت مشخص شده را ست می کند(به وسیله ی نام).

DOM 4 اخطار !!!

در هسته ی W3C DOM، شیء Attr، تمام خصوصیت ها و متد ها را از شیء Node به ارث می برد.

در DOM4، شیء Attr مانند قبل از Node چیزی را به ارث نمی برد.

برای اینکه کیفیت کدنویسی در آینده بهتر شود، شما باید از استفاده از خصوصیات شیء node و متدهای اشیاء attribute خود داری کنید.

Property / متد	Reason for avoiding
attr.appendChild()	خصوصیت ها گره های فرزند ندارند.
attr.attributes	خصوصیت ها، attribute ندارند.
attr.baseURI	به جای آن از دستور document.baseURI استفاده کنید.
attr.childNodes	خصوصیت ها گره های فرزند ندارند.
attr.cloneNode()	به جای آن می توانید attr.value را گرفته یا ست کنید.
attr.firstChild	خصوصیت ها گره های فرزند ندارند.
attr.hasAttributes()	خصوصیت ها، attribute ندارند.
attr.hasChildNodes	خصوصیت ها، گره های فرزند ندارند.
attr.insertBefore()	خصوصیت ها گره های فرزند ندارند.
attr.isEqualNode()	هیچ مفهومی ندارد.
attr.isSameNode()	هیچ مفهومی ندارد.
attr.isSupported()	همواره true می باشد.
attr.lastChild	خصوصیت ها گره های فرزند ندارند.
attr.nextSibling	خصوصیت ها، ویژگی sibling(عناصر هم نیا) ندارند.
attr.nodeName	به جای آن از attr.name استفاده کنید.
attr.nodeType	این همواره 2 می باشد(ATTRIBUTE_NODE).
attr.nodeValue	به جای آن از attr.value استفاده کنید.
attr.normalize()	خصوصیت ها نمی توانند normalized شوند.
attr.ownerDocument	این همواره سند HTML شما می باشد.
attr.ownerElement	این، عنصر html ی است که شما از آن برای دسترسی به خصوصیت استفاده کرده اید.
attr.parentNode	این، عنصر html ی است که شما از آن برای دسترسی به خصوصیت استفاده کرده اید.
attr.previousSibling	خصوصیت ها، ویژگی sibling(عناصر هم نیا) ندارند.
attr.removeChild	خصوصیت ها، گره های فرزند ندارند.
attr.replaceChild	خصوصیت ها گره های فرزند ندارند.
attr.textContent	به جای آن از attr.value استفاده کنید.

شیء Document

HTML DOM Nodes

در مدل HTML DOM هر چیزی یک گره(Node) است:

سند خودش به تنهایی یک گره است.
تمام عناصر HTML گره هستند.
تمام خصوصیت های اچ تی ام ال، گره هستند.
متن های درون عناصر اچ تی ام ال، گره متنی هستند.
کامنت ها نیز گره comment هستند.

کلیه ی توابع و خصوصیت های شیء Document در جاوا اسکریپت

هنگامی که یک سند HTMLدر یک مرورگر وب بارگذاری می شود، تبدیل به یک شیء سند(document object) می شود.

شیء سند(document node) در واقع گره ریشه ی سند HTML و تمام گره های دیگر است:

گره های عنصر، گره های متن، گره های صفت، و گره های کامنت.

شیء سند، خصوصیات و متد ها را برای دسترسی به تمام اشیاء گره، از داخل جاوااسکریپت، ارائه می دهد.

نکته: سند(document) یک قسمت از شیء window است و می تواند توسط دستور window.document مورد دسترسی قرار بگیرد.

پشتیبانی مرورگرها

Object
Document	بله	بله	بله	بله	بله

از جاوااسکریپت در تمام مرورگرهای بزرگ، پشتیبانی می شود.

کلیه توابع و خصوصیت های شیء Document در JavaScript Properties and Methods

خصوصیت ها و متدهای پیش رو می توانند بر روی اسناد HTML استفاده شوند:

Property / متد	توضیحات
document.addEventListener()	این متد، یک شنونده ی رویداد را به document اضافه می کند.
document.adoptNode()	گرفتن یک node از یک document دیگر.
document.anchors	این خصوصیت، یک مجموعه از عناصر <a> را در صفحه برمی گرداند. این عناصر دارای خصوصیت name هستند.
document.applets	این خصوصیت، یک مجموعه از تمام عناصر <applet> را که در صفحه قرار دارند، برمی گرداند.
document.baseURI	این خصوصیت، URI پایه و مطلق یک صفحه را برمی گرداند.
document.body	این خصوصیت، عنصر <body> از صفحه را ست کرده یا برمی گرداند.
document.close()	این متد، جریان خروجی که قبلا توسط document.open باز شده است را می بندد.
document.cookie	این خصوصیت، تمام نام و مقدار کوکی ها را در سند برمی گرداند.
document.createAttribute()	این متد، یک گره attribute را ایجاد می کند.
document.createComment()	این متد، یک گره comment را با یک متن مشخص، ایجاد می کند.
document.createDocumentFragment()	این متد، یک گره خالی DocumentFragment را ایجاد می کند.
document.createElement()	این متد، یک گره Element را ایجاد می کند.
document.createTextNode()	این متد، یک گره Text را ایجاد می کند.
document.doctype	این خصوصیت، تعریف نوع سند ، که با سند(document) همراه شده است را برمی گرداند.
document.documentElement	این خصوصیت، عنصر Document را از سند برمی گرداند(همان عنصر <html>).
document.documentMode	این خصوصیت، حالتی که توسط مرورگر برای ارائه دادن سند استفاده شده است را برمی گرداند.
document.documentURI	این خصوصیت، مکان سند را ست کرده یا برمی گرداند.
document.domain	این خصوصیت، نام دامنه ای از سرور،که سند را بارگذاری کرده است، برمی گرداند.
document.domConfig	منسوخ شده. پیکربندی DOM سند را برمی گرداند.
document.embeds	این خصوصیت، یک مجموعه از تمام عناصر <embed> از سند را برمی گرداند.
document.forms	این خصوصیت، یک مجموعه از تمام عناصر <form> را در سند برمی گرداند.
document.getElementById()	این متد، یک عنصر را با یک خصوصیت ID ، با یک مقدار مشخص، را برمی گرداند.
document.getElementsByClassName()	این متد، یک لیست از تمام عنصر ها، با یک نام کلاس مشخص را برمی گرداند.
document.getElementsByName()	این متد، یک لیست که در بر دارنده ی تمام عناصر با یک نام مشخص است را برمی گرداند.
document.getElementsByTagName()	این متد، یک لیست از تمام عنصر ها که دارای یک نام تگ مشخص هستند را برمی گرداند.
document.head	این خصوصیت، عنصر <head> از سند را برمی گرداند.
document.images	این خصوصیت، یک مجموعه از تمام عناصر <img> در سند را برمی گرداند.
document.implementation	این خصوصیت، شیء DOMImplementation که این سند را بکار می برد، برمی گرداند.
document.importNode()	این متد، یک گره را از یک سند دیگر وارد می کند.
document.inputEncoding	این خصوصیت، کاراکتر رمزگذاری شده برای سند را برمی گرداند.
document.lastModified	این خصوصیت، تاریخ و زمان آخرین دفعه ای که سند تغییر کرده (اصلاح شده) است را برمی گرداند.
document.links	یک مجموعه از تمام عناصر <a> و <area> در سند، که دارای یک خصوصیت href می باشند را برمی گرداند.
document.normalize()	این متد، گره های خالی را حذف کرده و گره های مجاور هم را با یکدیگر الحاق می کند.
document.normalizeDocument()	این متد، گره های متنی خالی را حذف کرده و گره های مجاور را به یکدیگر الحاق می کند.
document.open()	این متد، یک جریان خروجی را برای به دست آوردن خروجی از document.write ، باز می کند.
document.querySelector()	این متد، اولین عنصری که با یک سلکتور css مشخص در سند تطابق یابد را برمی گرداند.
document.querySelectorAll()	این متد، یک NodeList ایستا را که شامل تمام عناصری است که با یک سلکتور css مشخص در سند تطابق دارند را برمی گرداند.
document.readyState	این خصوصیت، وضعیت(لود شدن) سند را برمی گرداند.
document.referrer	این خصوصیت url سندی که سند جاری را بارگذاری کرده است،برمی گرداند.
document.removeEventListener()	یک شنونده ی رویداد را از سند حذف می کند(که توسط متد addEventListener ایجاد شده است).
document.renameNode()	این متد یک گره مشخص شده را تغییر نام می دهد.
document.scripts	یک مجموعه از عناصر <script> در سند را برمی گرداند.
document.strictErrorChecking	این خصوصیت، مشخص می کند که آیا error-checking اجرا شده است یا نه.
document.title	این خصوصیت، عنوان سند را ست کرده یا برمی گرداند.
document.URL	این خصوصیت، url کامل سند HTML را برمی گرداند.
document.write()	این متد، عبارت های HTML یا کدهای جاوااسکریپت را در سند چاپ می کند.
document.writeln()	این متد، شبیه متد ()write می باشد اما یک کاراکتر newline را بعد از هر عبارت، اضافه می کند.

اخطار!!!

در هسته ی W3C DOM شیء Document تمام خصوصیت ها و متدها را از شیء گره به ارث می برد.

بسیاری از این خصوصیت ها و متدهای به کار رفته در سندها، هیچ معنی ندارند.

از استفاده از این خصوصیت های شیء گره و متدها در اشیاء سند HTML اجتناب کنید.

Property / متد	Reason for avoiding
document.attributes	سند ها خصوصیت attribute را ندارند.
document.hasAttributes()	سندها خصوصیت attribute را ندارند.
document.nextSibling	سندها خصوصیت sibling ندارند.
document.nodeName	این همواره document# است.
document.nodeType	این همواره 9(DOCUMENT_NODE)است.
document.nodeValue	سند ها node value ندارند.
document.ownerDocument	سند ها owner document ندارند.
document.ownerElement	سند ها owner element ندارند.
document.parentNode	سند ها، parent Node ندارند.
document.previousSibling	سند ها sibling ندارند.
document.textContent	سند ها text content ندارند.

شیء Element

HTML DOM Nodes

در مدل HTML DOM، هر چیزی یک گره است:

سند خودش به تنهایی یک گره است.
تمام عناصر HTML گره هستند.
تمام خصوصیت های HTML، گره های خصوصیت هستند.
متن های درون عناصر HTML گره متنی هستند.
کامنت ها گره کامنت هستند.

کلیه توابع و خصوصیت های شیء Element در JavaScript

در HTML DOM، شیء Element، یک عنصر HTML را مشخص می کند.

اشیاء Element(عناصر) می توانند گره های فرزند، از نوع گره های عنصر، یا گره های متنی، یا گره های کامنت، را داشته باشند.

یک شیء NodeList، لیستی از گره ها را مشخص می کند، مانند یک مجموعه عناصر HTML از گره های فرزند.

عناصر می توانند دارای خصوصیت ها باشند. خصوصیت هادر واقع گره های خصوصیت هستند.

پشتیبانی مرورگرها

Object
Element	بله	بله	بله	بله	بله
NodeList	بله	بله	بله	بله	بله

شیء Element و شیء Nodelist در تمام مرورگرهای بزرگ پشتیبانی می شوند.

Properties and Methods

خصوصیت ها و متد های پیش رو می توانند بر روی تمام عناصر اچ تی ام ال، استفاده شوند.

Property / متد	توضیحات
element.accessKey	این ویژگی، خصوصیت accesskey از عنصر را ست کرده یا برمی گرداند.
element.addEventListener()	این متد، یک شنونده ی رویداد را به یک عنصر مشخص شده متصل می کند.
element.appendChild()	یک گره فرزند جدید را بعنوان آخرین فرزند گره، به یک عنصر اضافه می کند.
element.attributes	از خصوصیت های یک عنصر، NamedNodeMap را برمی گرداند.
element.blur()	این متد، فوکس را از یک عنصر حذف می کند.
element.childElementCount	این خصوصیت، تعداد عناصر فرزند یک عنصر را برمی گرداند.
element.childNodes	یک مجموعه از گره های فرزند یک عنصر را برمی گرداند(شامل گره های متن و کامنت نیز می شود).
element.children	یک مجموعه از عنصر های فرزند یک عنصر را برمی گرداند(شامل گره های متن و کامنت نیز می شود).
element.classList	برگرداندن نام کلاس(های) یک عنصر.
element.className	مقدار خصوصیت class از یک عنصر را ست کرده یا برمی گرداند.
element.click()	این متد، کلیک شدن موس را بر روی یک عنصر شبیه سازی می کند.
element.clientHeight	این خصوصیت، ارتفاع یک عنصر را که شامل padding نیز می باشد، برمی گرداند.
element.clientLeft	این خصوصیت، عرض border سمت چپ از یک عنصر را برمی گرداند.
element.clientTop	این خصوصیت، عرض border بالایی از یک عنصر را برمی گرداند.
element.clientWidth	این خصوصیت، عرض یک عنصر را که شامل padding نیز می باشد، برمی گرداند.
element.cloneNode()	شبیه سازی کردن یک عنصر.
element.compareDocumentPosition()	این متد،مکان دو عنصر را در سند مورد مقایسه قرار می دهد.
element.contains()	در صورتی که یک گره از نسل یک گره دیگر باشد، true را برمی گرداند و در غیر این صورت false برگردانده خواهد شد.
element.contentEditable	ست کرده یا برمی گرداند که محتوای یک عنصر قابل ویرایش هست یا نه.
element.dir	این خصوصیت، مقدار خصوصیت dir از یک عنصر را ست کرده یا برمی گرداند.
element.firstChild	این خصوصیت، اولین گره فرزند یک عنصر را برمی گرداند.
element.firstElementChild	این خصوصیت، اولین عنصر فرزند یک عنصر را برمی گرداند.
element.focus()	این متد، فوکس را به یک عنصر می دهد.
element.getAttribute()	مقدار خصوصیت مشخص شده را از یک گره عنصر برمی گرداند.
element.getAttributeNode()	این متد، گره خصوصیت مشخص شده را برمی گرداند.
element.getElementsByClassName()	یک مجموعه از تمام عناصر فرزند با یک نام کلاس مشخص را برمی گرداند.
element.getElementsByTagName()	یک مجموعه از تمام عناصر فرزند با یک تگ مشخص را برمی گرداند.
element.getFeature()	یک شیء را برمی گرداند که API های یک ویژگی مشخص شده را اجرا می کند.
element.hasAttribute()	در صورتی که یک عنصر یک خصوصیت مشخص را دارا باشد، true را برمی گرداند و در غیر این صورت false برگردانده خواهد شد.
element.hasAttributes()	درصورتی که یک عنصر هر کدام از خصوصیات را دارا باشد، true را برمی گرداند و در غیر این صورت false برگردانده خواهد شد.
element.hasChildNodes()	در صورتی که یک عنصر، هرکدام از گره های فرزند را دارا باشد،true را برمی گرداندو در غیر این صورت false برگردانده خواهد شد.
element.id	این خصوصیت، مقدار خصوصیت id از یک عنصر را ست کرده یا برمی گرداند.
element.innerHTML	این خصوصیت، محتوای یک عنصر را ست کرده یا برمی گرداند.
element.insertBefore()	اضافه کردن یک گره فرزند، قبل از یک گره فرزند مشخص و موجود.
element.isContentEditable	برگرداندن true در صورتی که محتوای یک عنصر قابل ویراِش باشد، و در غیر این صورت false را برمی گرداند.
element.isDefaultNamespace()	برگرداندن true در صورتی که یک namespaceURI به صورت پیش فرض باشد، در غیر این صورت false برگردانده می شود.
element.isEqualNode()	این متد، بررسی می کند که آیا دو عنصر برابر هستند یا نه.
element.isSameNode()	بررسی اینکه آیا در حقیقت دو گره یکسان هستند یا نه.
element.isSupported()	در صورتی که یک عنصر، یک ویژگی مشخص شده را پشتیبانی کند، true را برمی گرداند.
element.lang	مقدار خصوصیت lang از یک عنصر را ست کرده یا برمی گرداند.
element.lastChild	این خصوصیت، آخرین گره فرزند یک عنصر را برمی گرداند.
element.lastElementChild	این خصوصیت، آخرین عنصر فرزند از یک عنصر را برمی گرداند.
element.namespaceURI	این خصوصیت، فضای نام URI یک عنصر را برمی گرداند.
element.nextSibling	عنصر بعدی که در مرحله ی مشابه درخت گره، قرار دارد را برمی گرداند.
element.nextElementSibling	عنصر بعدی که در مرحله ی مشابه درخت گره، قرار دارد را برمی گرداند.
element.nodeName	این خصوصیت، نام یک گره را برمی گرداند.
element.nodeType	این خصوصیت، نوع گره یک گره، را برمی گرداند.
element.nodeValue	این خصوصیت، مقدار یک گره را ست کرده یا برمی گرداند.
element.normalize()	این متد در یک عنصر، گره های متنی مجاور را با یکدیگر الحاق کرده و گره های خالی متنی را حذف می کند.
element.offsetHeight	این خصوصیت، ارتفاع یک عنصر را، که شامل padding و border و scrollbar می شود را برمی گرداند.
element.offsetWidth	این خصوصیت، عرض یک عنصر را که شامل padding و border و scrollbar نیز می شود، را برمی گرداند.
element.offsetLeft	Returns the horizontal offset position of an element
element.offsetParent	Returns the offset container of an element
element.offsetTop	Returns the vertical offset position of an element
element.ownerDocument	عنصر ریشه را(شیء سند)برای یک عنصر برمی گرداند.
element.parentNode	این خصوصیت، گره والد یک عنصر را برمی گرداند.
element.parentElement	این خصوصیت، گره عنصر والد از یک عنصر را برمی گرداند.
element.previousSibling	گره قبلی را در مرحله ی درخت گره مشابه برمی گرداند.
element.previousElementSibling	عنصر قبلی را در مرحله ی درخت گره مشابه برمی گرداند.
element.querySelector()	اولین عنصر فرزندی که با یک سلکتور(های) css مشخص از یک عنصر، تطابق دارد را برمی گرداند.
element.querySelectorAll()	تمام عناصر فرزند که با یک سلکتور(های) css مشخص از یک عنصر، تطابق دارند را برمی گرداند.
element.removeAttribute()	یک خصوصیت مشخص شده را از یک عنصر، حذف می کند.
element.removeAttributeNode()	یک گره خصوصیت مشخص شده را حذف کرده و گره حذف شده را برمی گرداند.
element.removeChild()	این متد، یک گره فرزند از یک عنصر را حذف می کند.
element.replaceChild()	این متد، یک گره فرزند را در یک عنصر جایگزین می کند.
element.removeEventListener()	این متد، یک شنونده ی رویداد را که به وسیله ی متد ()addEventListener ایجاد شده است، حذف می کند.
element.scrollHeight	ارتفاع سراسری یک عنصر را که شامل padding نیز می باشد، برمی گرداند.
element.scrollLeft	این خصوصیت، تعداد پیکسل هایی که محتوای یک عنصر، به صورت افقی، اسکرول شده است را، ست کرده یا برمی گرداند.
element.scrollTop	این خصوصیت، تعداد پیکسل هایی که محتوای یک عنصر، به صورت عمودی، اسکرول شده است را، ست کرده یا برمی گرداند.
element.scrollWidth	عرض کلی یک عنصر را، که شامل padding نیز می باشد، برمی گرداند.
element.setAttribute()	این متد، خصوصیت مشخص شده را به یک مقدار مشخص ست کرده یا تغییر می دهد.
element.setAttributeNode()	این متد، گره خصوصیت مشخص شده را ست کرده یا تغییر می دهد.
element.style	این خصوصیت، مقدار خصوصیت استایل یک عنصر را ست کرده یا برمی گرداند.
element.tabIndex	این خصوصیت، مقدار خصوصیت tabindex از یک عنصر را ست کرده یا برمی گرداند.
element.tagName	این خصوصیت، نام تگ یک عنصر را برمی گرداند.
element.textContent	این خصوصیت، محتوای متنی یک گره و فرزندان آن را ست کرده یا برمی گرداند.
element.title	این خصوصیت، مقدار خصوصیت عنوان یک عنصر را ست کرده یا برمی گرداند.
element.toString()	این متد، یک عنصر را تبدیل به یک رشته می کند.
nodelist.item()	این متد، به وسیله ی یک اندیس مشخص، گره مورد نظر را از یک NodeList برمی گرداند.
nodelist.length	این خصوصیت، تعداد گره های یک NodeList را برمی گرداند.

صدا و تصویر در HTML

مولتی مدیا در وب شامل صدا، موزیک، ویدئو و انیمیشن هاست.

مرورگرهای جدید، فرمت های زیادی از مولتی مدیا را پشتیبانی می کنند.

مولتی مدیا چیست؟

Wiki

مولتی مدیا فرمت های زیادی را شامل می شود و تقریبا هر چیزی که می شنوید یا می بینید مانند متن، عکس، موزیک، صدا، ویدئوها، موارد ضبط شده، فیلم ها، انیمیشن ها و... را شامل می شود.

در اینترنت غالبا می توانید عناصر مولتی مدیا که در صفحات وب وجود دارد را ببیند. مرورگرهای جدید از تعداد زیادی فرمت های مولتی مدیا پشتیبانی می کنند.

در این خودآموز در مورد فرمت های مختلف مولتی مدیا و چگونگی کار با آن ها در صفحات وب چیزهایی خواهید آموخت.

پشتیبانی مرورگرها از مولتی مدیا

Wiki

مرورگرهای اولیه، تنها از متن پشتیبانی می کردند و حتی این پشتیبانی به یک فونت با یک رنگ محدود می شد. سپس مرورگرهایی آمدند که از فونت ها و رنگ های مختلف و سبک دهی ها به متون پشتیبانی می کردند و پشتیبانی از تصاویر نیز به آنها اضافه شد.

صدا، انیمیشن و ویدئو به روش های مختلف، توسط مرورگرهای متفاوت پشتیبانی می شوند. بعضی عناصر به صورت درون برنامه ای (inline) و بعضی نیاز به نرم افزارهای کمکی (plug-ins) بیشتری دارند. (نرم افزارهایی که باید روی سیستم عامل نصب شوند)

در مورد نرم افزارهای جانبی (plug-ins) در فصل های بعد، بیشتر خواهید آموخت.

فرمت های مولتی مدیا

Wiki

عناصر مولتی مدیا (مثل ویدئو و صدا) در فایل های مدیا ذخیره می شوند.

راه معمول برای اینکه نوع مدیا را تشخیص دهیم نگاه کردن به پسوند آن فایل است. هنگامی که یک مرورگر با پسوند های htm. یا html. برخورد می کند فرض می کند که یک صفحه HTML است. پسوند xml. دلالت بر فایل XML دارد و پسوند css. دلالت بر یک style sheet دارد. عکس ها نیز با پسوند jpg. و png. و یا gif. شناخته می شوند.

عناصر مولتی مدیا نیز فرمت های مربوط به خود با پسوند های مختلفی مثل swf، .wmv، .mp3. و mp4. دارند.

فرمت های ویدئویی

Wiki

فرمت MP4 فرمت جدیدی برای ویدئوهای اینترنتی است. این فرمت توسط YouTube، Flash players و HTML5 پشتیبانی می شود.

فرمت	پسوند	توضیحات
AVI	.avi	فرمت AVI یا (Audio Video Interleave) توسط ماکروسافت ارائه شده و روی تمام کامپیوترهایی که دارای سیستم عامل ویندوز باشد، توسط مرورگر اجرا می شود. AVI یک فرمت رایج در اینترنت است اما در کامپیوترهایی که ویندوز روی آن ها نصب نیست همیشه اجرا نمی شود.
WMV	.wmv	فرمت WMV یا (Windows Media) توسط ماکروسافت ارائه شده و در اینترنت رایج است اما در کامپیوترهایی که ویندوز روی آن ها نیست بدون نصب یک کامپوننت اضافی(رایگان) نمایش داده نمی شوند. بعضی از فیلم های WMV قدیمی نمی توانند به هیچ عنوان در کامپیوترهای غیر ویندوزی نمایش داده شوند زیرا هیچ نمایش دهنده ای برای آن وجود ندارد.
MPEG	.mpg .mpeg	فرمت MPEG یا (Moving Pictures Expert Group) فرمت رایجی در اینترنت می باشد. این فرمت cross-platform می باشد و توسط تمامی مرورگرهای وب پشتیبانی می شود.
QuickTime	.mov	فرمت QuickTime توسط Apple ارائه شد. QuickTime فرمت رایجی در اینترنت است اما فیلم های QuickTime نمی توانند بدون نصب یک کامپوننت اضافی(رایگان) در کامپیوترهای ویندوزی نمایش داده شوند.
RealVideo	.rm .ram	فرمت RealVideo توسط شرکت Real Media در اینترنت ارائه شد. به خاطر اولویت در پهنای باند کم، کیفیت این نوع فایل ها، اغلب کاهش داده می شود.
Flash	.swf .flv	فرمت Flash یا (Shockwave) توسط Macromedia ارائه شد. فرمت Shockwave نیاز به یک کامپوننت اضافه، برای نمایش دارد. اما این کامپوننت به صورت از قبل نصب شده با مرورگرهایی مثل Firefox و Internet Explorer وجود دارد.
Mpeg-4	.mp4	Mpeg-4 فرمت جدیدی در اینترنت است (with H.264 video compression). در حقیقت، YouTube استفاده از MP4 را توصیه می کند. YouTube چندین فرمت را می پذیرد و آن ها را برای انتشار تبدیل به flv. یا mp4. می کند. بیشتر نشر دهنده های online ویدئو در حال حرکت به سمت MP4 به عنوان فرمت به اشتراک گذاری در اینترنت هم در Flash player و هم در HTML5 هستند.

فرمت های صوتی

Wiki

فرمت	پسوند	توضیحات
MIDI	.mid .midi	MIDI که مخفف (Musical Instrument Digital Interface) است فرمتی برای وسایل الکترونیکی موزیک مثل کارت های صوتی کامپیوتری و synthesizerها (ترکیب کننده ها) می باشد. فایل های MIDI شامل صدا نیست و فقط شامل دستورالعمل اجرای نوت ها می باشد. برای اجرای یک فایل MIDI، کلیک کنید. به دلیل اینکه فرمت MIDI تنها شامل نوت ها می باشد بنابراین بسیار کم حجم هستند. مثال بالا تنها 23 کیلو بایت حجم دارد اما حدود 5 دقیقه می باشد. MIDI توسط سیستم های نرم افزاری زیادی پشتیبانی می شود. MIDI توسط تمام مرورگرهای اینترنت پشتیبانی می شود.
RealAudio	.rm .ram	فرمت RealAudio توسط شرکت Real Media در اینترنت گسترش یافت. این فرمت همچنین ویدئو را نیز پشتیبانی می کند. این فرمت اجازه می دهد که فایل های صوتی با پهنای باند کم منتقل شود. به خاطر اولویت در پهنای باند کم، کیفیت این نوع فایل ها، اغلب کاهش داده می شود
Wave	.wav	فرمت WMA یا (waveform) توسط IBM و Microsoft ارائه شد و روی تمام کامپیوترهایی که دارای سیستم عامل ویندوز باشد، توسط مرورگر اجرا می شود. (بیشتر مرورگرهای معروف بجز Google Chrome آنها را اجرا می کنند)
WMA	.wma	فرمت WMA یا (Windows Media Audio) در کیفیت با MP3 مقایسه می شود، و با بیشتر پخش کننده ها غیر از iPod سازگار است. فایل های WMA برای رادیو اینترنتی و یا موزیک Online مناسب است.
MP3	.mp3 .mpga	فایل های MP3 درحقیقت بخش شنیداری فایل های MPEG هستند. فرمت MPEG در اصل برای ویدئو ارائه شده است. فرمت MP3 یکی از رایج ترین فرمت های صوتی است که در عین فشرده سازی، کیفیت بالایی دارد.

از چه فرمتی استفاده کنیم؟

Wiki

فرمت صوتی WAVE فایل های uncompressed(بدون فشرده سازی) متداولی در اینترنت هستند و توسط همه مرورگرها پشتیبانی می شوند. اگر می خواهید فایل های صوتی uncompressed(مثل: موزیک یا سخنرانی) برای بازدیدکنندگان تان به راحتی قابل دسترس باشد، باید از فرمت WAVE استفاده کنید.

فرمت MP3 یکی از جدیدترین فرمت های صوتی compressedشده است. MP3 مترادف با "موسیقی دیجیتال" است. اگر سایت تان شامل فایل های صوتی است، فرمت MP3 می تواند یک انتخاب باشد.

عناصر جدید برای فرم ها در HTML5
عناصر جدید برای فرم ها در HTML5
HTML5 چندین تگ و خصوصیت جدید برای فرم ها در نظر گرفته است.
- datalist
- keygen
- output
توجه:درست است که بعضی از مرورگرها از این انواع ورودی جدید پشتیبانی نمی کنند، ولی در صورت عدم پشتیبانی، با آن ها مثل ورودی های متنی ساده برخورد می کنند و مشکلی پیش نمی آید.
عنصر <datalist>
این عنصر لیستی از گزینه های از پیش تعریف شده را برای یک فیلد ورودی مهیا می کند.
زمانی که کاربر داده وارد می کند، یک لیست کشویی ظاهر می شود و می تواند از گزینه های پیشنهاد داده شده یکی را انتخاب نماید.
برای اتصال یک <datalist> به یک فیلد ورودی متنی، باید خاصیت list فیلد متنی را با id عنصر <datalist> تنظیم نمایید.

مثال (عناصر جدید برای فرم ها در HTML5)
<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
خودتان امتحان کنید »
عنصر <keygen>
هدف این عنصر مهیا کردن راهی مطمئن برای شناسایی کاربران است.
این عنصر یک تولید کننده جفت کلید است (key-pair generator).
وقتی یک فرم ارسال می شود، 2 کلید تولید می شود، یک کلید عمومی (public) و یک کلید خصوصی (private).
کلید خصوصی در کلاینت ذخیره می شود و کلید عمومی به سرور ارسال می شود. کلید عمومی می تواند برای ایجاد یک گواهی کلاینت برای شناسایی کاربر در آینده به کار رود.

مثال (عناصر جدید برای فرم ها در HTML5)
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
خودتان امتحان کنید »
عنصر <output>
این عنصر برای انواع مختلف خروجی مثل نتیجه یک محاسبه ریاضی کاربرد دارد (شبیه زمانی که محاسبه بوسیله یک اسکریبت اجرا می شود عمل می کند).

مثال (عناصر جدید برای فرم ها در HTML5)
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
خودتان امتحان کنید »

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

از زمانی که HTML 4.01 در سال 1999 به عنوان یک استاندارد معرفی شد خیلی چیزها در اینترنت و حتی در مورد کاربران و نیازهای آنها تغییر کرده است.

امروزه بسیاری از قابلیت های HTML 4.01 منسوخ شده یا مورد استفاده قرار نمی گیرند. بیشتر ویژگی های بی استفاده از HTML5حذف شده اند یا در مورد بعضی از آنها بازنگری هایی صورت گرفته است.

برای اینکه HTML5 قادر به پشتیبانی نیازهای امروزی باشد قابلیت های جدیدی مانند ترسیم، فیلم، صدا و... به آن افزوده شده است. در ادامه به صورت خیلی خلاصه این قابلیت های جدید را بررسی می کنیم.

عنصر <canvas>

تگ	توضیحات
<canvas>	از این تگ برای ترسیم گرافیک های دو بعدی از طریق کدنویسی (معمولا جاوا اسکریپت) استفاده می شود

تگ های مربوط به رسانه

تگ	توضیحات
<audio>	تعریف محتوای صوتی
<video>	تعریف محتوای تصویری مانند فیلم و کلیپ
<source>	تعریف منابع مختلف برای صدا و تصویر
<embed>	تعریف یک ظرف برای برنامه های خارجی یا یک محتوای تعاملی مانند پلاگین ها
<track>	تعریف متن برای <audio> و <video>

المان های فرم

تگ	توضیحات
<datalist>	یک فهرست از حالت های پیش فرض برای کنترل های ورودی
<keygen>	تعریف یک تولید کننده جفت کلید برای شناسایی کاربران
<output>	تعریف نتیجه یک خروجی

المان های معنایی و ساختاری

HTML5 المان هایی جدیدی را برای ساختار دادن به متون وب به شرح زیر در بر گرفته است:

تگ	توضیحات
<article>	تعریف یک مقاله
<aside>	تعریف یک محتوای در کنار متن اصلی
<bdi>	جهت تعریف متن در جهتی غیر از جهت اصلی که خارج از آن در نظر گرفته شده
<command>	تعریف یک دکمه دستوری که کاربر می تواند آن را فعال نماید
<details>	تعریف جزییات بیشتر
<dialog>	تعریف یک پنجره dialog
<summary>	تعریف بخش قابل مشاهده از یک تگ <details>
<figure>	تعریف یک محتوای مجزا مانند عکس، نمودار و...
<figcaption>	تعریف یک عنوان برای تگ <figure>
<footer>	تعریف یک بخش پایینی برای یک صفحه یا بخش
<header>	تعریف یک بخش بالایی برای یک صفحه یا بخش
<mark>	جهت برجسته کردن متن
<meter>	تعریف یک واحد اندازه گیری
<nav>	تعریف لینک های پیمایش صفحات
<progress>	نمایش پیشرفت یک وظیفه
<section>	تعریف یک بخش از متن
<time>	تعریف تاریخ و زمان
<wbr>	تعریف یک خط جدید

المان های حذف شده از HTML5

عناصر زیر از HTML5 حذف شده اند:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

عناصر در xHTML
عناصر در XHTML همان عناصر HTML هستند که مانند XML نوشته شده اند.
عناصر XHTML - قوانین نوشتاری
Wiki
- عناصر XHTML باید به طور صحیح به صورت تودرتو نوشته شوند.
- عناصر XHTML باید همیشه بسته شوند.
- عناصر XHTML باید با حروف کوچک نوشته شوند.
- یک سند XHTML باید یک عنصر ریشه ای داشته باشند. (کل عناصر موجود در سند، در یک عنصر ریشه ای قرار داده شوند)
عناصر XHTML باید به طور صحیح به صورت تودرتو نوشته شوند
Wiki
در HTML، بعضی عناصر می توانند به طور نادرست با یکدیگر تودرتو شوند، مثل مورد زیر:
<b><i>This text is bold and italic</b></i>
در XHTML، تمامی عناصر باید به طور صحیح با یکدیگر تو در تو نوشته شوند، مثل مورد زیر:
<b><i>This text is bold and italic</i></b>
عناصر XHTML باید همیشه بسته شوند
Wiki
قطعه کد زیر غلط است:
<p>This is a paragraph
<p>This is another paragraph
این درست است:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
عناصر تهی نیز باید بسته شوند
Wiki
قطعه کد زیر غلط است:
A break: <br>
A horizontal rule: <hr>
An image: <img src="/happy.gif" alt="Happy face">
این درست است:
A break: <br />
A horizontal rule: <hr />
An image: <img src="/happy.gif" alt="Happy face" />
عناصر XHTML باید با حروف کوچک نوشته شوند
Wiki
قطعه کد زیر غلط است:
<BODY>
<P>This is a paragraph</P>
</BODY>
این درست است:
<body>
<p>This is a paragraph</p>
</body>
عناصر معنایی در HTML5
semantic = معنایی
عناصر semantic = عناصر معنایی
عناصر معنایی (semantic) چه هستند؟
عناصر معنایی (semantic)، عناصری هستند که از نام آنها می توان به وضوح به محتوای آنها پی برد.
عناصر non-semantic مانند: <div> و <span> - از نام آنها نمی توان به محتوای آنها پی برد.
عناصر semanticمانند: <form>, <table>, <img> - به وضوح، محتوای خود را توصیف می کنند.
پشتیبانی مرورگرها

مرورگرهای Internet Explorer 9+, Firefox, Opera, Chrome, Safari عناصر semantic را پشتیبانی می کنند.
توجه: Internet Explorer 8 و نسخه های قدیمی تر آن، عناصر semantic را پشتیبانی نمی کنند. (در پایان این مطلب راه حلی برای این موضوع مطرح شده است)
عناصر Semantic جدید در HTML5
امروزه بیشتر وب سایت ها، برای طراحی ظاهر صفحات خود از کدهایی شبیه زیر استفاده می کنند:
<div id="nav">, <div class="header">, <div id="footer">
HTML5 برای تعریف بخش های مختلف یک صفحه وب، عناصر Semantic را ارائه داده است:
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <figcaption>
- <figure>
- <footer>
عنصر <section> در HTML5
از عنصر <section> برای تعیین یک بخش یا قسمت مجزا در یک سند وب استفاده می شود.
بر طبق مستندات کنسرسیوم جهانی وب (W3C) درباره HTML5: "عنصر <section> یک بخش از محتویات مربوط بهم است که بطور نمونه می تواند شامل یک عنوان باشد".
مثال (عناصر معنایی در HTML5)
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
خودتان امتحان کنید »
عنصر <article> در HTML5
از عنصر <article> برای تعریف یک مقاله مجزا از سایر محتویات صفحه استفاده می شود.
موارد مختلف استفاده از تگ <article>:
- متن پست ها در فروم ها
- متن مطالب جدید در وبلاگ ها
- متن خبری در سایت های خبری
- توضیحات
مثال (عناصر معنایی در HTML5)
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
خودتان امتحان کنید »
عنصر <nav> در HTML5
این عنصر برای دسته بندی و کنار هم قرار دادن گروهی از لینک ها استفاده می شود.
لینک هایی که درون این تگ تعیین شوند، به ترتیب در کنار هم قرار می گیرند.
تمام لینک های یک صفحه را نباید در این عنصر تعریف نمود. فقط لینک های اصلی و پایه ای صفحه در این بخش تعریف می شوند.
مثال (عناصر معنایی در HTML5)
<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> باید با مطالب اطراف آن همخوانی داشته باشد.
مثال (عناصر معنایی در HTML5)
<p>My family and I visited The Epcot center this summer.</p>

<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
خودتان امتحان کنید »
عنصر <header> در HTML5
از عنصر <header> برای تعیین یک سرصفحه برای یک سند HTMLیا یک عنوان برای یک بخش (Section) استفاده می شود.
عنصر <header> می تواند شامل مقدمه ای از محتویات صفحه باشد.
می توان چندین عنصر <header> را در یک صفحه استفاده نمود.
در مثال زیر، یک عنوان برای مقاله تعریف شده است:
مثال (عناصر معنایی در HTML5)
<article>
<header>
    <h1>Internet Explorer 9</h1>
    <p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
خودتان امتحان کنید »
عنصر <footer> در HTML5
از عنصر <footer> برای تعیین یک پاورقی برای یک سند HTML یا یک بخش (Section) استفاده می شود.
می توان چندین عنصر <footer> را در یک صفحه استفاده نمود.
یک پاورقی (footer)، بطور نمونه می تواند شامل نام نویسنده، حق چاپ (copyright)، اطلاعات تماس و... باشد.
مثال (عناصر معنایی در HTML5)
<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
خودتان امتحان کنید »
عناصر <figure> و  <figcaption> در HTML5
از عنصر <figure>، برای تعیین یک محتوی مجزا مثل عکس، دیاگرام ها، لیست ها و... بروی صفحه استفاده می شود.
کاربردی که این تگ می تواند داشته باشد، این است که نحوه و محل قرار گیری عنصر و محتویات درون آن را به صورت مستقل و مجزا از سایر محتویات صفحه تعیین می کند. بنابراین اگر عنصر حذف شود، در جریان و چیدمان کلی صفحه، تغییر یا مشکل خاصی به وجود نخواهد آمد.
از تگ <figcaption> ، برای تعیین یک عنوان یا توضیح برای تگ <fiqure> استفاده می شود.
این عنوان هم می تواند در ابتدا و هم در انتهای عنصر مادر قرار داده شود.
در مثال زیر، نحوه استفاده از تگ <fiqure> و تعیین یک عنوان توسط تگ <figcaption>، برای آن در عمل نمایش داده شده است:
مثال (عناصر معنایی در HTML5)
<figure>
<img src="/img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>
خودتان امتحان کنید »
آیا می توان شروع به استفاده از عناصر معنایی کرد؟
تمام عناصر توضیح داده شده در بالا، بجز عنصر <figcaption> از عناصر block هستند.
توجه:یک عنصر Block عنصری است که تمام طول یک سطر را اشغال می کند و قبل و بعد از آن یک سطر وجود دارد.
برای اینکه عناصر معنایی در تمام مرورگرهای اصلی به طور صحیح کار کنند، باید خصوصیت display آنها را با مقدار block تنظیم کنید (در این صورت مرورگرهای قدیمی نیز این عناصر را به طور صحیح نمایش می دهند)
header, section, footer, aside, nav, article, figure
{
display: block;
}
مشکل با Internet Explorer 8 و نسخه های قدیمی تر آن
IE8 و نسخه های قدیمی تر، نمی توانند CSSرا روی عناصری که تشخیص نداده اند، اعمال کنند. در واقع نمی توانید عناصر معنایی و دیگر عناصر جدید HTML5را سبک دهی کنید.
برای سبک دهی عناصر HTML5 در نسخه های قبل از IE9، خوشبختانه Sjoerd Visscher روشی را با نام HTML5 Shivدر JavaScript ارائه داده است.
برای دانلود و مطالعه بیشتر درباره HTML5 Shiv به لینک روبرو مراجعه نمایید: http://code.google.com/p/html5shiv
برای فعال کردن HTML5 Shiv، کد زیر را در قسمت <head> صفحه قرار دهید:

کد comment شده بالا تنها در نسخه های قبل از IE9 خوانده می شود. آنرا باید در عنصر <head> صفحه قرار دهید تا عناصر معنایی شناسایی شده و قابل سبک دهی شوند.
عنصر canvas در HTML5
عنصر <canvas>
عنصر <canvas> در HTML5 از طریق اسکریپت نویسی (معمولاً JavaScript) برای رسم اشکال در یک صفحه وب استفاده می کند.
عنصر Canvas متدهای زیادی برای رسم مستطیل، دایره، خطوط، حروف و همچنین افزودن تصاویر دارد.
پشتیبانی مرورگرها

مرورگرهای Internet Explorer 9+, Firefox, Opera, Chrome, Safari عنصر <canvas> را پشتیبانی می کنند.
توجه: Internet Explorer 8 و نسخه های قدیمی تر آن، عنصر <canvas> را پشتیبانی نمی کنند.
ایجاد عنصر <canvas>
عنصر <canvas> یک ناحیه مستطیل شکل برای نقاشی کشیدن در صفحه HTMLایجاد می کند.
توجه: بصورت پیشفرض، در عنصر <canvas> لبه و محتوایی تنظیم نشده است.
نحوه استفاده:
<canvas id="myCanvas" width="200" height="100"></canvas>
توجه: همیشه در عنصر <canvas>، خصوصیت های id (برای مراجعه به آن در یک اسکریبت)، width و height را تنظیم نمایید.
نکته: می توانید چندین عنصر <canvas> را در یک صفحه HTML ایجاد نمایید.
برای اضافه کردن لبه به عنصر <canvas>، از خصوصیت style استفاده نمایید:
مثال (عنصر canvas در HTML5)
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
خودتان امتحان کنید »
رسم کردن داخل <canvas> با JavaScript
تمام کارها در عنصر <canvas> توسط JavaScriptانجام می شود:
مثال (عنصر canvas در HTML5)
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
خودتان امتحان کنید »
توضیح مثال:
ابتدا عنصر <canvas> را پیدا می کنیم:
var c=document.getElementById("myCanvas");
سپس، متد ()getContext را صدا می زنیم (باید آنرا با پارامتر رشته ای "2d" تنظیم نمایید):
var ctx=c.getContext("2d");
شیء ()getContext یکی از اشیاء توکار HTML5 است، که دارای خصوصیات و متدهای برای رسم مسیرها، جعبه، دایره، متن، عکس و... است.
دو خط بعدی، یک مستطیل قرمز رنگ رسم می کند:
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
خصوصیت fillStyle را می توان با یک رنگ، یک طیف (gradient) و یا یک الگو مقدار دهی نمود. مقدار پیشفرض fillStyle، رنگ سیاه یعنی "000000#" است.
متد ()fillRect یک مستطیل رسم می کند و آنرا با مقداری که برای خصوصیت fillStyle تنظیم کرده اید، پر می کند.
مختصات در <canvas>
<canvas> یک شبکه دوبعدی است.
مختصات گوشه ی سمت چپ-بالا (0,0) است.
چهار پارامتر متد (0,0,150,75)fillRect که در مثال بالا استفاده شد به صورت زیر خواهد بود:
- پارامتر اول(x): فاصله از چپ نسبت به محور x
- پارامتر دوم(y): فاصله از بالا نسبت به محور y
- پارامتر سوم(width): عرض مستطیل، یا فاصله از موقعیت x
- پارامتر چهارم(height): ارتفاع مستطیل، یا فاصله از موقعیت y
بنابراین با شروع از گوشه سمت چپ-بالا (0,0) یک مستطیل 150x75 رسم می شود.
مثال: در این مثال، با قرار دادن موس روی مستطیل، مختصات x و y نمایش داده می شود:
مثال (عنصر canvas در HTML5)
function cnvs_getCoordinates(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}
function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}
خودتان امتحان کنید »
رسم خط در <canvas>
برای رسم خطوط مستقیم در <canvas>، نیاز به دو متد زیر است:
moveTo(x,y) -
نقطه شروع خط را تعریف می کند.
lineTo(x,y) -
نقطه پایان خط را تعریف می کند.
عملاً برای رسم خط، یکی از متدهای "مرکب زدن" مانند ()stroke نیز باید استفاده شود.
مثال (عنصر canvas در HTML5)
در این مثال، نقطه شروع (0,0) و نقطه پایان (200,100) تعریف شده است. سپس برای رسم خط از متد ()stroke استفاده می کنیم.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
خودتان امتحان کنید »
برای رسم دایره یا یک منحنی در <canvas>، از متد زیر استفاده می کنیم:
arc(x,y,r,start,stop) -
پارامترهای متد ()arc:
- x, y: رنگ سبزه در شکل بالا
- r: شعاع دایره
- start: رنگ قرمز در شکل بالا
- stop: رنگ بنفش در شکل بالا
عملاً برای رسم دایره، یکی از متدهای "مرکب زدن" مانند ()stroke یا ()fill نیز باید استفاده شود.
مثال (عنصر canvas در HTML5)
ایجاد دایره با استفاده از متد ()arc:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
خودتان امتحان کنید »
متن در <canvas>
مهمترین خصوصیت ها و متدها برای نوشتن متن در <canvas>:
font -
خصوصیت font را برای متن تعریف می کند.
fillText(text,x,y) -
یک متن "تو پر" تعریف می کند.
strokeText(text,x,y) -
یک متن "تو خالی" تعریف می کند.
مثال (عنصر canvas در HTML5)
استفاده از متد ()fillText
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
خودتان امتحان کنید »
مثال
استفاده از متد ()strokeText
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
خودتان امتحان کنید »
طیف رنگ در <canvas>
طیف رنگ را می توان برای رنگ آمیزی مستطیل، دایره، خط، متن و... استفاده نمود. اشکال در <canvas> به رنگ های ثابت و یکنواخت محدود نمی شوند.
دو نوع مختلف طیف رنگ وجود دارد:
createLinearGradient(x,y,x1,y1) -
یک طیف رنگی خطی ایجاد می کند.
createRadialGradient(x,y,r,x1,y1,r1) -
یک طیف رنگی دایره ای ایجاد می کند.
زمانی که از شیء طیف رنگ (gradient) استفاده می کنید، باید حداقل دو رنگ تعریف نمایید.
متد ()addColorStop برای مشخص کردن رنگ ها استفاده می شود. موقعیت رنگ ها می تواند در هرجایی بین 0 و 1 در طول طیف رنگ باشد. پارامتر اول در این متد، موقعیت رنگ (عددی بین 0 و 1) و پارامتر دوم، مقدار رنگ است.
در ادامه باید طیف رنگ تعریف شده را برای خصوصیت fillStyle یا strokeStyle تنظیم نمایید و سپس شکلی مانند مستطیل، دایره، خط یا متن را رسم نمایید.
مثال (عنصر canvas در HTML5)
استفاده از متد ()createLinearGradient
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
خودتان امتحان کنید »
مثال (عنصر canvas در HTML5)
استفاده از ()createRadialGradient
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
خودتان امتحان کنید »
عکس در <canvas>
برای رسم عکس در <canvas>، از متد زیر استفاده می کنیم:
drawImage(image,x,y) -
مثال (عنصر canvas در HTML5)
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
خودتان امتحان کنید »

کلیه رویدادهای JavaScript

کلیه رویدادهای مدل DOM در HTML

تصور کنید بخواهیم به ازای کلیک کردن کاربر روی یک عنصر، کار مشخصی انجام شود، به عملیات کلیک کردن "رویداد" گفته می شود. در HTMLبراحتی می توانیم، رویدادها را بعنوان یک ویژگی یا attribute به عناصر HTML اضافه کنیم. بطور معمول، رویدادها با یک تابع JavaScript تنظیم می شوند و زمانی که رویداد اتفاق افتاد، تابع JavaScriptاجرا می شود.

نکته: کنسرسیوم W3C، استاندارد سازی مدل رویداد، را در DOM سطح 2 انجام داد.

رویدادهای مدل DOM در HTML

ستون DOM نشان می دهد که رویداد مورد نظر در کدام Level مدل DOM، معرفی شده است.

کلیه رویدادهای مربوط به موس

رویداد	توضیحات	DOM
onclick	این رویداد، زمانی که کاربر روی عنصر کلیک می کند، اتفاق می افتد.	2
oncontextmenu	این رویداد، زمانی روی می دهد که، کاربر برای باز کردن منوی زمینه، روی یک عنصر راست کلیک می کند.	3
ondblclick	این رویداد، زمانی روی می دهد که، کاربر روی یک عنصر دبل-کلیک کند .	2
onmousedown	این رویداد، زمانی روی می دهد که، کاربر دکمه ی موس را روی یک عنصر فشار دهد.	2
onmouseenter	این رویداد، زمانی روی می دهد که، کاربر نشانگر ماوس را به روی یک عنصر وارد کند.	2
onmouseleave	این رویداد، زمانی روی می دهد که، نشانگر موس از روی یک عنصر خارج شود.	2
onmousemove	این رویداد،زمانی روی می دهد که، اشاره گر موس بر روی یک عنصر، حرکت کند.	2
onmouseover	این رویداد، زمانی روی می دهد که،کاربر اشاره گر ماوس را بر روی یک عنصر یا فرزندان آن عنصر وارد کند.	2
onmouseout	این رویداد، زمانی روی می دهد که، کاربر اشاره گر ماوس را از روی یک عنصر یا فرزندان آن عنصر بیرون ببرد.	2
onmouseup	این رویداد، زمانی روی می دهد که کاربر،دکمه ی ماوس را بر روی یک عنصر رها کند.	2

کلیه رویدادهای مربوط به کیبورد (keyboard)

رویداد	توضیحات	DOM
onkeydown	این رویداد زمانی روی می دهد که، کاربر در حال فشار دادن یک دکمه است.	2
onkeypress	این رویداد زمانی روی می دهد که، کاربر یک دکمه را فشار دهد.	2
onkeyup	این رویداد زمانی روی می دهد که، کاربر یک دکمه را رها کند.	2

Frame/Object Events

رویداد	توضیحات	DOM
onabort	این رویداد زمانی روی می دهد که، لود شدن یک منبع بی نتیجه باشد.	2
onbeforeunload	این رویداد زمانی روی می دهد که، صفحه(document)می خواهد از بارگذاری خارج شود(بسته یا رفرش شود).	2
onerror	این رویداد زمانی روی می دهد که، یک error به هنگام لود شدن یک فایل اکسترنال، به وجود بیاید.	2
onhashchange	این رویداد زمانی روی می دهد که، تغییری در قسمت لنگری(anchor part) یک URL به وجود بیاید.	3
onload	این رویداد زمانی روی می دهد که، یک شیء لود شود. (بارگزاری شود).	2
onpageshow	این رویداد زمانی روی می دهد که، کاربر به یک صفحه وب هدایت شود(بعبارت دیگر: وارد شود).	3
onpagehide	این رویداد زمانی روی می دهد که، کاربر از یک صفحه وب بیرون برود.	3
onresize	این رویداد زمانی روی می دهد که، اندازه ی صفحه وب تغییر کند.	2
onscroll	این رویداد زمانی روی می دهد که، اسکرول بار، حرکت داده شود(اسکرول شود).	2
onunload	این رویداد زمانی روی می دهد که، کاربر بخواهد صفحه وب را از بارگذاری خارج کند.(صفحه را ببندد یا اینکه refresh کند).	2

کلیه رویدادهای مربوط به فرم (form)

رویداد	توضیحات	DOM
onblur	این رویداد زمانی روی می دهد که، یک عنصر focus(فوکس) را از دست می دهد.	2
onchange	این رویداد زمانی روی می دهد که، مقدار یک عنصر تغییر کند. این عنصر می تواند <input> یا <keygen> یا <textarea> باشد.	2
onfocus	این رویداد زمانی روی می دهد که، یک عنصر focus(فوکس) را به دست آورد.	2
onfocusin	این رویداد زمانی روی می دهد که، یک عنصر در آستانه ی گرفتن focus(فوکس)می باشد.	2
onfocusout	این رویداد زمانی روی می دهد که، یک عنصر در آستانه ی از دست دادن focus(فوکس)می باشد.	2
oninput	این رویداد زمانی روی می دهد که، یک عنصر ورودی را از کاربر دریافت می کند	3
oninvalid	این رویداد زمانی روی می دهد که، یک عنصر نامعتبر است.	3
onreset	این رویداد زمانی روی می دهد که، یک فرم reset شود.	2
onsearch	این رویداد زمانی روی می دهد که، یک کاربر در فیلد search چیزی را بنویسد.	3
onselect	این رویداد زمانی روی می دهد که، کاربر مقداری از یک متن را انتخاب کند(select کند).	2
onsubmit	این رویداد زمانی روی می دهد که، یک فرم submit شود.	2

کلیه رویدادهای مربوط به کشیدن عناصر (drag)

رویداد	توضیحات	DOM
ondrag	این رویداد زمانی روی می دهد که، یک عنصر در حال درگ شدن(کشیده شدن) است.	3
ondragend	این رویداد زمانی روی می دهد که، کاربر درگ کردن(کشیده شدن) عنصر را پایان دهد.	3
ondragenter	این رویداد زمانی روی می دهد که، عنصر درگ شده(کشیده شده) وارد منطقه رها شدن(drop)شود.	3
ondragleave	این رویداد زمانی روی می دهد که، عنصر درگ شده(کشیده شده)، منطقه رها شدن(drop)را ترک می کند.	3
ondragover	این رویداد زمانی روی می دهد که، عنصر درگ شده(کشیده شده)، بر روی منطقه رها شدن(drop) قرا بگیرد.	3
ondragstart	این رویداد زمانی روی می دهد که، کاربر شروع به درگ کردن(کشیدن) یک عنصر می کند.	3
ondrop	این رویداد زمانی روی می دهد که، عنصر درگ شده(کشیده شده)، بر روی منطقه رها شدن(drop)، رها می شود.	3

کلیه رویدادهای مربوط به حافظه کلیپ بورد (Clipboard)

رویداد	توضیحات	DOM
oncopy	این رویداد زمانی روی می دهد که، کاربر محتوای یک عنصر را کپی می کند.
oncut	این رویداد زمانی روی می دهد که، کاربر محتوای یک عنصر را cut می کند.
onpaste	این رویداد زمانی روی می دهد که، یک کاربر محتوایی را در یک عنصر paste(الصاق) می کند.

کلیه رویدادهای مربوط به پرینت (Print )

رویداد	توضیحات	DOM
onafterprint	این رویداد زمانی روی می دهد که، یک صفحه شروع به print می کند یا اینکه پنجره مربوط به print بسته می شود.	3
onbeforeprint	این رویداد زمانی روی می دهد که، یک صفحه در آستانه ی پرینت شدن است.	3

کلیه رویدادهای مربوط به مدیا (Media )

رویداد	توضیحات	DOM
onabort	این رویداد زمانی روی می دهد که لود شدن یک مدیا بی نتیجه باشد.	3
oncanplay	این رویداد زمانی روی می دهد که، مرورگر بتواند نمایش مدیا را شروع کند.	3
oncanplaythrough	این رویداد زمانی روی می دهد که، مرورگر بتواند بدون توقف برای لود کردن، مدیا را نمایش دهد.	3
ondurationchange	این رویداد زمانی روی می دهد که، مدت یک مدیا تغییر کند.	3
onemptied	این رویداد زمانی روی می دهد که به علت یک اتفاق بد، فایل مدیا ناگهان از دسترس خارج می شود.	3
onended	این رویداد زمانی روی می دهد که، مدیا به پایان می رسد (قابل استفاده برای پیام اتمام مدیا).	3
onerror	این رویداد زمانی روی می دهد که، یک error در طول لود شدن فایل مدیا رخ دهد.	3
onloadeddata	این رویداد زمانی روی می دهد که، داده های مدیا، لود شده اند.	3
onloadedmetadata	این رویداد زمانی روی می دهد که، داده های متا، لود شوند.	3
onloadstart	این رویداد زمانی روی می دهد که، مرورگر شروع به جستجوی مدیای مورد نظر می کند.	3
onpause	این رویداد زمانی روی می دهد که، مدیا متوقف شود، خواه توسط کاربر یا بصورت برنامه نویسی.	3
onplay	این رویداد زمانی روی می دهد که، پخش مدیا شروع شود or is no longer paused	3
onplaying	این رویداد زمانی روی می دهد که، مدیا بعد از متوقف شدن(pause) یا توقف برای دانلود ادامه(buffering)، شروع به پخش کند.	3
onprogress	این رویداد زمانی روی می دهد که، مرورگر در پروسه ی گرفتن داده های مدیا می باشد(دانلود کردن مدیا).	3
onratechange	این رویداد زمانی روی می دهد که، سرعت پخش مدیا تغییر کند.	3
onseeked	این رویداد زمانی روی می دهد که، کاربر حرکت/پرش به یک مکان پخش جدید در مدیا را به پایان ببرد.	3
onseeking	این رویداد زمانی روی می دهد که، کاربر حرکت/پرش به یک مکان پخش جدید در مدیا را شروع می کند.	3
onstalled	این رویداد زمانی روی می دهد که، مرورگر در حال تلاش برای دریافت داده های مدیا می باشد اما این داده ها غیر قابل دسترس می باشند.	3
onsuspend	این رویداد زمانی روی می دهد که، مرورگر به طور عمدی داده های مدیا را دریافت نمی کند.	3
ontimeupdate	این رویداد زمانی روی می دهد که، مکان پخش تغییر کند(درست مانند زمانی که کاربر به سرعت مدیا را از نقطه ای به نقطه ی دیگر می برد)	3
onvolumechange	این رویداد زمانی روی می دهد که، میزان صدای مدیا تغییر کند(همچنین هنگامی که صدا در حالت mute قرار دارد)	3
onwaiting	این رویداد زمانی روی می دهد که، مدیا برای دانلود فریم بعدی متوقف شده است و در حالت(resume)قرار دارد.	3

کلیه رویدادهای مربوط به متحرک سازی (Animation)

رویداد	توضیحات	DOM
animationend	این رویداد زمانی روی می دهد که، یک انیمیشن سی اس اس کامل شود.	3
animationiteration	این رویداد زمانی روی می دهد که، یک انیمیشن سی اس اس تکرار شود.	3
animationstart	این رویداد زمانی روی می دهد که، یک انیمیشن سی اس اس شروع شود.	3

کلیه رویدادهای مربوط به انتقال (Transition)

رویداد	توضیحات	DOM
transitionend	این رویداد زمانی روی می دهد که یک transition در سی اس اس کامل شود.	3

کلیه رویدادهای مربوط به سمت سرور (Server-Sent)

رویداد	توضیحات	DOM
onerror	این رویداد زمانی روی می دهد که یک error در منبع رویداد(event source) ایجاد شود.
onmessage	این رویداد زمانی روی می دهدکه، یک پیام از منبع رویداد(event source)دریافت شود.
onopen	این رویداد زمانی روی می دهد که، یک اتصال با منبع رویداد(event source) باز شود.

Misc Events

رویداد	توضیحات	DOM
onmessage	این رویداد زمانی روی می دهد که، یک پیام از منبع رویداد(event source) دریافت شود.	3
onmousewheel	غیر قابل استفاده. به جای آن از رویداد onwheel استفاده کنید.
ononline	این رویداد زمانی روی می دهد که، مرورگر شروع به کار در حالت آنلاین می کند.	3
onoffline	این رویداد زمانی روی می دهد که، مرورگر شروع به کار در حالت آفلاین می کند.	3
onpopstate	این رویداد زمانی روی می دهد که، تاریخچه ی(history) پنجره تغییر می کند.	3
onshow	این رویداد زمانی روی می دهد که، یک عنصر <menu> بصورت منوی محتوا(context menu)، نشان داده شود.	3
onstorage	این رویداد زمانی روی می دهد که، یک منطقه ی ذخیره سازی وب بروز رسانی شود.	3
ontoggle	این رویداد زمانی روی می دهد که، یک کاربر عنصر <details> را باز کند یا ببندد.	3
onwheel	این رویداد زمانی روی می دهد که، دکمه ی چرخان ماوس، بر روی یک عنصر به سمت بالا یا پایین بچرخد.	3

Touch Events

رویداد	توضیحات	DOM
ontouchcancel	این رویداد زمانی روی می دهد که، لمس کردن صفحه قطع شود.
ontouchend	این رویداد زمانی روی می دهد که، انگشت فرد از روی صفحه لمسی برداشته شود.
ontouchmove	این رویداد زمانی روی می دهد که، انگشت فرد بر روی صفحه نمایش حرکت کند.
ontouchstart	این رویداد زمانی روی می دهد که، انگشت فرد بر روی صفحه نمایش قرار بگیرد.

مرجع کلیه رویدادهای JavaScript

Constants

Constant	توضیحات	DOM
CAPTURING_PHASE	رویداد کنونی در فاز capture قرار دارد(1).	1
AT_TARGET	رویداد کنونی در فاز target قرار دارد(2).	2
BUBBLING_PHASE	رویداد کنونی در فاز bubbling قرار دارد(3).	3

Properties

متد	توضیحات	DOM
bubbles	این خصوصیت، مشخص می کند که آیا یک رویداد خاص، ویژگی bubbling را دارد یا نه.	2
cancelable	این خصوصیت، مشخص می کند که آیا می توان از اقدام پیش فرض یک رویداد جلوگیری کرد یا نه.	2
currentTarget	عنصری را برمی گرداند که شنونده رویداد در آن تعریف شده است.	2
defaultPrevented	این خصوصیت، مشخص می کند که آیا متد ()preventDefault برای رویداد صدا شده است یا نه.	3
eventPhase	این خصوصیت، مشخص می کند که، چه فازی از رویداد در حال حاضر در حال ارزیابی است.	2
isTrusted	این خصوصیت، مشخص می کند که آیا یک رویداد معتبر است یا نه.	3
target	این خصوصیت، عنصری که رویداد را به وجود آورده است، برمی گرداند.	2
timeStamp	از این خصوصیت، برای برگرداندن زمانی که در آن، رویداد، ایجاد شده است(به میلی ثانیه)، استفاده می شود..	2
type	این خصوصیت، نام رویداد را برمی گرداند.	2
view	این خصوصیت، یک ارجاع به شیء window را در جایی که رویداد اتفاق افتاده است، برمی گرداند.	2

Methods

متد	توضیحات	DOM
initEvent()	نوع رویداد را مشخص می کند، خواه رویداد ویژگی bubble را داشته باشد یا نه و خواه رویداد قابل cancel شدن باشد یا نه.	2
preventDefault()	رویداد را در صورتی که قابلیت cancel شدن داشته باشد، cancel می کند. این بدین معنی است که، اقدام پیش فرض متعلق به رویداد رخ نخواهد داد.	2
stopImmediatePropagation()	از صدا شدن دیگر شنوندگان رویداد کنونی جلوگیری می کند.	3
stopPropagation()	از انتشار بیشتر یک رویداد در طی اجرای رویداد(event flow)، جلوگیری می کند.	2

Mouseمرجع کلیه رویدادهای JavaScript

متد	توضیحات	DOM
altKey	این خصوصیت، یک مقدار بولی را برمی گرداند که مشخص می کند که، آیا در هنگام کلیک کردن موس، کلید ALT فشار داده شده است یا نه.	2
button	این خصوصیت، مشخص می کند که، هنگام اجرای یک رویداد موس، کدام دکمه ی موس فشار داده شده است.	2
buttons	این خصوصیت، مشخص می کند که، هنگام اجرای یک رویداد موس، کدام دکمه های موس فشار داده شده اند.	3
clientX	این خصوصیت، نسبت به پنجره ی کنونی، هنگامی که یک رویداد موس اجرا می شود، مختصات افقی(x) موس را برمی گرداند.	2
clientY	این خصوصیت، نسبت به پنجره کنونی، هنگامی که یک رویداد موس اجرا می شود، مختصات عمودی(y) موس را برمی گرداند.	2
ctrlKey	این خصوصیت یک مقدار بولی را برمی گرداند که مشخص می کند که، آیا در هنگام کلیک کردن موس، کلید CTRL فشار داده شده است یا نه.	2
detail	این خصوصیت، یک عدد را برمی گرداند که مشخص می کند، که چند بار موس کلیک شده است.	2
metaKey	این خصوصیت، مشخص می کند که آیا در هنگام اتفاق افتادن یک رویداد، کلید META فشار داده شده است یا نه.	2
relatedTarget	Returns the element related to the element that triggered the mouse event	2
screenX	این خصوصیت، مختصات افقی(x) موس را هنگامی که یک رویداد اتفاق بیافتد، برمی گرداند.	2
screenY	این خصوصیت، مختصات عمودی(y) موس را هنگامی که یک رویداد اتفاق بیافتد، برمی گرداند.	2
shiftKey	این خصوصیت یک مقدار بولی را بری گرداند، که مشخص می کند که، آیا در هنگام کلیک کردن موس، کلید SHIFT فشار داده شده است یا نه.	2
which	این خصوصیت، مشخص می کند که هنگام اتفاق افتادن رویداد، کدام دکمه ی موس فشار داده شده است.	2

Keyboardمرجع کلیه رویدادهای JavaScript

متد	توضیحات	DOM
altKey	این خصوصیت، مشخص می کند که، آیا در هنگام اتفاق افتادن رویداد، کلید ALT فشار داده شده است یا نه.	2
ctrlKey	این خصوصیت، مشخص می کند که آیا در هنگام اتفاق افتادن رویداد، کلید CTRL فشار داده شده است یا نه.	2
charCode	این خصوصیت، کد کاراکتر یونیکد دکمه ای که به وسیله ی رویداد onkeypress ایجاد شده است را برمی گرداند.	2
key	این خصوصیت، هنگامی که در رویداد های دکمه، کلیدی(دکمه ای) فشار داده می شود، نام آن کلید را برمی گرداند.	3
keyCode	این خصوصیت، کد کاراکتر یونیکدی که در رویداد onkeypress ایجاد شده است را برمی گرداند. یا اینکه، کد کاراکتر یونیکدی که در رویداد های onkeydown یا onkeyup ایجاد شده است را برمی گرداند.	2
location	این خصوصیت، مکان قرارگیری کلید را برروی صفحه کلید مشخص می کند.	3
metaKey	این خصوصیت، مشخص می کند که آیا در هنگام اتفاق افتادن رویداد کلید، کلید meta فشرده شده است یا نه.	2
shiftKey	این خصوصیت مشخص می کند که آیا در هنگام اتفاق افتادن رویداد کلید، کلید SHIFT فشار داده شده است یا نه.	2
which	از این خصوصیت، برای فهمیدن اینکه هنگام روی دادن یک رویداد موس، کدام کلید موس فشار داده شده است، استفاده می شود.	2

HashChangeمرجع کلیه رویدادهای JavaScript

متد	توضیحات	DOM
newURL	از این خصوصیت، برای برگرداندن URL سند، هنگامی که قسمت هش(hash) تغییر می کند، استفاده می شود.
oldURL	از این خصوصیت برای برگرداندن url سند، قبل از اینکه قسمت هش(hash) تغییر کند، استفاده می شود.

PageTransitionمرجع کلیه رویدادهای JavaScript

متد	توضیحات	DOM
persisted	این خصوصیت، مشخص می کند که آیا یک صفحه وب توسط مرورگر ذخیره(cached) شده است یا نه.

Focusمرجع کلیه رویدادهای JavaScript

متد	توضیحات	DOM
relatedTarget	Returns the element related to the element that triggered the event	3

Animationمرجع کلیه رویدادهای JavaScript

متد	توضیحات	DOM
animationName	نام انیمیشن را برمی گرداند.
elapsedTime	این خصوصیت، تعداد ثانیه هایی که یک انیمیشن پخش شده است را برمی گرداند.

Transitionمرجع کلیه رویدادهای JavaScript

متد	توضیحات	DOM
propertyName	خصوصیت css که با transition همراه شده است را برمی گرداند.
elapsedTime	این خصوصیت، تعداد ثانیه هایی که یک انتقال(transition) در حال کار کردن است را برمی گرداند.

Wheelمرجع کلیه رویدادهای JavaScript

متد	توضیحات	DOM
deltaX	مقدار اسکرول افقی دکمه چرخان موس را برمی گرداند(محور x).	3
deltaY	مقدار اسکرول عمودی دکمه ی چرخان موس را برمی گرداند(محور y).	3
deltaZ	مقدار اسکرول دکمه ی چرخان موس برای محور z را برمی گرداند.	3
deltaMode	یک عدد را برمی گرداند که این عدد مشخص کننده ی واحد اندازه گیری برای مقادیر delta می باشد(پیکسل یا خط یا صفحه).	3

مثال های HTML

HTML Basic
یک مثال خیلی ساده از HTML
عنوان ها در HTML
پاراگراف ها در HTML
لینک ها در HTML
تصاویر در HTML
توضیح مثال ها
HTML Headings
عنوان ها در HTML
درج یک توضیح (Comment) در کد HTML
درج یک خط افقی
توضیح مثال ها
HTML Paragraphs
پاراگراف ها در HTML
چند پاراگراف در یک صفحه
رفتن به خط جدید
مشکل خطوط و فاصله های اضافه در کد HTML (حذف می شوند)
توضیح مثال ها
HTML Text Formatting
فرمت بندی متن
حفظ کردن خطوط و فاصله های اضافه درون یک متن (Preformatted)
تگ های مختلف computer-output (استفاده در برنامه نویسی کامپیوتری)
درج کردن اطلاعات تماس
این کلمه مخفف یا مختصر چیست؟
معکوس کردن یک متن (از آخر به اول)
اضافه کردن نقل قول
نحوه علامت گذاری متن های زیر خط دار یا حذف شده(روی آن خط کشیده شده)
توضیح مثال ها
HTML Styles
تغییر شیوه نمایش عناصر HTML
تغییر رنگ پس زمینه
تغییر فونت، رنگ و اندازه متن
ترازبندی متن
تنظیم فونت یک متن
تنظیم اندازه یک متن
تنظیم رنگ یک متن
تنظیم فونت، رنگ و اندازه یک متن
استفاده از CSS در head صفحه
لینکی که خط زیر ندارد
لینک به یک فایل CSS خارجی
توضیح مثال ها
HTML Links
چگونه یک لینک ایجاد کنیم
استفاده از یک عکس به عنوان لینک
چگونه یک لینک را در صفحه جدید باز کنیم
پرش به بالا یا پایین یک صفحه
چگونه از یک فریم بیرون بیاییم. (اگر سایت شما در یک فریم محصور است)
چگونه با یک لینک، متنی را ایمیل کنیم. (تنها زمانی کار می کند که نرم افزار مدیریت ایمیل مثل outlook نصب شده باشد)
مثالی دیگر از ارسال متن توسط لینگ
توضیح مثال ها
HTML Images
درج یک تصویر
درج کردن تصویری که در فولدر یا سروری دیگر قرار دارد
تراز بندی تصویر
قرار دادن یک تصویر در سمت راست یا چپ یک پاراگراف
چگونه از یک تصویر به عنوان لینک استفاده کنیم
چگونه یک image map با ناحیه بندی متفاوت ایجاد کنیم که با کلیک روی هر ناحیه یک لینک اجرا شود
توضیح مثال ها
HTML Tables
یک جدول ساده
لبه های مختلف یک جدول (Border)
چگونه جدولی بدون خطوط حاشیه (Border) ایجاد کنیم
نحوه ایجاد سرتیترهای جدول
نحوه اضافه کردن عنوان به یک جدول
چگونگی تعریف سلول های جدول که بیش از یک سطر یا بیش از یک ستون را شامل می شوند
نمایش عناصر دیگر درون یک جدول
چگونه از cellpadding برای ایجاد فاصله بیشتر بین محتوای سلول با حاشیه سلول استفاده کنیم
چگونه از cellspacing برای افزایش فاصله بین سلول ها استفاده کنیم
چگونه از خصوصیت "frame" برای کنترل بوردر های دور جدول استفاده کنیم
توضیح مثال ها
HTML Lists
یک لیست غیرترتیبی
یک لیست ترتیبی
نمایش انواع دیگر لیست های ترتیبی
نمایش انواع دیگر لیست های غیر ترتیبی
نمایش لیست های تو در تو
نمایش لیست های تو در توی پیچیده تر
نمایش لیست تعریفی
توضیح مثال ها
HTML Forms and Input
چگونه یک فیلد متنی ایجاد کنیم. کاربر می تواند داخل فیلد متنی یک متن دلخواه تایپ کند
چگونه یک فیلد برای ورود کلمه عبور ایجاد کنیم
چگونه یک checkbox ایجاد کنیم
چگونه یک radio button ایجاد کنیم
چگونه یک لیست کشویی یا drop-down ساده ایجاد کنیم
چگونه یک لیست کشویی با مقدار انتخاب شده از قبل ایجاد کنیم
چگونه یک کنترل ورودی متن چند خطه ایجاد کنیم
چگونه یک دکمه برای کلیک کردن ایجاد کنیم
چگونه یک لبه یا border، اطراف عناصر داخل یک فرم ایجاد کنیم
چگونه یک فرم با دو فیلد متنی و یک دکمه submit ایجاد کنیم
چگونه یک فرم با دو checkbox و یک دکمه submit ایجاد کنیم
چگونه یک فرم با دو radio button و یک دکمه submit ایجاد کنیم
ارسال ایمیل از طریق form
توضیح مثال ها
HTML IFrame
قرار دادن یک frame داخل صفحه HTML دیگر
توضیح مثال
HTML head Elements
مشخص کردن عنوان یک سند
نحوه استفاده از تگ برای اینکه معین کنیم تمام لینک های یک صفحه در یک پنجره جدید باز شوند
از عنصر برای توصیف سند استفاده کنید
از عنصر برای تعریف کلمات کلیدی سند استفاده کنید
چگونه یک کاربر را به آدرس وب جدیدی redirect کنیم (تغییر مسیر دهیم)
توضیح مثال ها
HTML Scripts
نحوه وارد کردن یک script در یک سند HTML
چاپ یک پیام مناسب برای مرورگرهایی که scripting را پشتیبانی نمی کنند یا scripting غیر فعال دارند
توضیح مثال ها
مقدمه آموزش HTML5
آموزش HTML5 (اچ تی ام ال 5) - معرفی
HTML5 (اچ تی ام ال 5) یک استاندارد جدید برای HTMLاست.
نسخه قبلی HTML یعنی HTML 4.01 در سال 1999 آمده است و از آن سال تا کنون، وب تغییرات زیادی کرده است.
HTML5(اچ تی ام ال 5) هنوز در حال پیشرفت است. با این حال مرورگرهای اصلی، بیشتر عناصر و APIهای جدید در HTML5 (اچ تی ام ال 5) را پشتیبانی می کنند.
آموزش HTML5 (اچ تی ام ال 5) با استفاده از مثال ها در هر فصل
در این خودآموز، برای آموزش HTML از صدها مثال استفاده شده است.
به کمک ویرایشگری که در اختیارتان است، می توانید سند HTML را ویرایش کنید و با کلیک روی یک دکمه، نتیجه را مشاهده کنید.
مثال (مقدمه آموزش HTML5)
<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls>
<source src="/movie.mp4" type="video/mp4">
<source src="/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

</body>
</html>
خودتان امتحان کنید »
برای مشاهده نتیجه کد بالا روی دکمه "خودتان امتحان کنید" کلیک کنید.
HTML5 (اچ تی ام ال 5) چگونه شروع شد؟
HTML5 (اچ تی ام ال 5) یک همکاری بین W3C و WHATWG است و در سال 2006 تصمیم گرفتند که یک نسخه جدید از HTML را ایجاد کنند.
- W3C مخفف World Wide Web Consortium است و روی XHTML 2.0 مشغول کار بوده است.
- WHATWG مخفف Web Hypertext Application Technology Working Group است و روی وب فرم ها و Applicationها مشغول کار بوده است.
بعضی از قوانین که در HTML5 (اچ تی ام ال 5) بنا نهاده شد:
- ویژگی های جدید باید براساس DOM, CSS, HTML و JavaScript باشد.
- کاهش نیاز به Pluginهای خارجی (مانند Flash)
- بهبود مدیریت خطا
- افزایش نشانه گذاری(markup) برای کاهش اسکریپت نویسی در صفحات وب
- HTML5 (اچ تی ام ال 5) باید مستقل از دستگاه باشد.
- پروسه های پیشرفت باید برای عموم قابل رویت باشد.
اعلان <DOCTYPE!>
<DOCTYPE!> یک تگ HTML نیست بلکه یک اعلان است و به مرورگر می گوید چه نسخه HTMLی در صفحه استفاده شده است.
در HTML5 (اچ تی ام ال 5) تنها یک اعلان <DOCTYPE!> وجود دارد و بسیار ساده است:
<!DOCTYPE html>
آموزش یک مثال ساده
در مثال زیر، یک صفحه HTML5 (اچ تی ام ال 5) با حداقل تگ های مورد نیاز آورده شده است:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>
آموزش ویژگیهای جدید در HTML5 (اچ تی ام ال 5)
بعضی از ویژگیهای خیلی جالب که در HTML5 (اچ تی ام ال 5) آموزش خواهید دید:
- آموزش عنصر <canvas> برای نقاشی دو بعدی
- آموزش عنصر <video> و <audio> برای پخش صدا و تصویر
- آموزش ذخیره سازی محلی (Local)
- آموزش عناصر <article>, <footer>, <header>, <nav>, <section> برای مشخص کردن محتوی
- آموزش ابزارهای جدید برای ساخت فرم، مانند: تقویم، تاریخ، زمان، ایمیل، آدرس وب و جستجو
پشتیبانی از HTML5 (اچ تی ام ال 5) در مرورگرها
HTML5 (اچ تی ام ال 5) هنوز یک استاندارد رسمی نیست، و مرورگرها بصورت کامل آنرا پشتیبانی نمی کنند.
اما مرورگرهای اصلی (Safari, Chrome, Firefox, Opera, Internet Explorer) ویژگی های جدید HTML5 (اچ تی ام ال 5) را در نسخه های جدیدشان اضافه کرده اند.

صفحه6 از7

تبلیغات

آموزش ASP.NET Core

خرید فوری تتر

آموزش برنامه نویسی

سرور اختصاص ایران سرور

دسته‌بندی‌ها

بیاموز SAP ERP

بیاموز طراحی وب

بیاموز برنامه‌نویسی

نرم‌افزارهای کاربردی

شبکه و سیستم‌عامل

دروس دانش‌آموزی

بیاموزهای متفرقه

فیلم آموزش html

مثال (تگ sup در HTML)

تعریف و کاربرد تگ sup در HTML

پشتیبانی مرورگرها از تگ sup در HTML

تفاوت بین HTML 4.01 و HTML5

ویژگی های عمومی تگ sup در HTML

رویدادهای عمومی تگ sup در HTML

مثال (توضیحات در HTML)

تعریف و کاربرد

پشتیبانی مرورگرها

تفاوت بین HTML4.01 و HTML5

نکته ها وترفندها

Standard خصوصیت ها

رویدادهای عمومی

کشیدن (Drag) و انداختن (Drop)

پشتیبانی مرورگرها

مثال کشیدن و انداختن عناصر در HTML5

مثال (جابه جا کردن عناصر در HTML5)

عنصر مورد نظر را قابل جا به جا کردن کنید

تعیین عنصری که می خواهید جا به جا شود

عنصر جابه جا شده را کجا می توان رها نمود

رها کردن عنصر جابه جا شده

مثال - خودتان امتحان کنید

خصوصیت های XHTML - قوانین نوشتاری

نام خصوصیت ها باید با حروف کوچک نوشته شود

مقدار خصوصیت ها باید درون دابل کوتیشن باشند

خلاصه نویسی خصوصیت ها ممنوع است

خصوصیت های جدید در HTML5

خصوصیت autocomplete در <form> / <input>

مثال (خصوصیت های جدید در HTML5)

خصوصیت novalidate در <form>

مثال (خصوصیت های جدید در HTML5)

خصوصیت autofocus در <input>

مثال (خصوصیت های جدید در HTML5)

خصوصیت form در <input>

مثال (خصوصیت های جدید در HTML5)

خصوصیت formaction در <input>

مثال (خصوصیت های جدید در HTML5)

خصوصیت formenctype در <input>

مثال (خصوصیت های جدید در HTML5)

خصوصیت formmethod در <input>

مثال (خصوصیت های جدید در HTML5)

خصوصیت formnovalidate در <input>

مثال (خصوصیت های جدید در HTML5)

خصوصیت formtarget در <input>

مثال (خصوصیت های جدید در HTML5)

خصوصیت های height و width در <input>

مثال (خصوصیت های جدید در HTML5)

خصوصیت list در <input>

مثال (خصوصیت های جدید در HTML5)

خصوصیت های min و max در <input>

مثال (خصوصیت های جدید در HTML5)

خصوصیت multiple در <input>

مثال (خصوصیت های جدید در HTML5)

خصوصیت pattern در <input>

مثال (خصوصیت های جدید در HTML5)

خصوصیت placeholder در <input>

مثال (خصوصیت های جدید در HTML5)

خصوصیت required در <input>

مثال (خصوصیت های جدید در HTML5)

خصوصیت step در <input>

مثال (خصوصیت های جدید در HTML5)

ذخیره داده ها بر روی کامپیوتر کاربر (Client)

پشتیبانی مرورگرها

localStorage و sessionStorage

شیء localStorage

مثال (ذخیره داده ها بر روی کامپیوتر کاربر)

مثال (ذخیره داده ها بر روی کامپیوتر کاربر)

شیء sessionStorage

مثال (ذخیره داده ها بر روی کامپیوتر کاربر)

Application Cache چیست؟

پشتیبانی مرورگرها