کاربر:Admin/صفحه تمرین/پشتیبان

از ویکی‌کد
پرش به ناوبری پرش به جستجو

بسم الله الرحمن الرحیم



//////////////////////////////////////////////////////////////////////////

https://www.w3schools.com/html/html5_intro.asp

HTML5 Introduction

مقدمه ای بر HTML5

❮ PreviousNext ❯

What is New in HTML5?

چه چیزی در HTML5 جدید است؟

The DOCTYPE declaration for HTML5 is very simple:

اعلان DOCTYPE در HTML5 بسیار ساده است:

1 html5

The character encoding (charset) declaration is also very simple: اعلان کدگذاری کاراکتر (مجموعه کاراکتر) نیز بسیار ساده است:

1 html5

HTML5 مثال

1 html5

The default character encoding in HTML5 is UTF-8.

کدگذاری پیش فرض کاراکتر در HTML5، UTF-8 است.

New HTML5 Elements

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

The most interesting new HTML5 elements are:

جالب‌ترین عنصرهای HTML5 عبارتند از:

New semantic elements like <header>, <footer>, <article>, and <section>.

عنصرهای معنایی جدید مانند <header>، <footer>، <article>، و <section>.

New attributes of form elements like number, date, time, calendar, and range.

ویژگی‌های جدید عنصرهای فرم مانند عدد، تاریخ، زمان، تقویم و محدوده.

New graphic elements: <svg> and <canvas>.

عنصرهای گرافیکی جدید: <svg> و <canvas>.

New multimedia elements: <audio> and <video>.

عنصرهای چندرسانه ای جدید: <audio> و <video>.

In the next chapter, HTML5 Support, you will learn how to "teach" older browsers to handle "unknown" (new) HTML elements.

در بخش بعدی، پشتیبانی HTML5، در مورد نحوه «آموزش» مرورگرهای قدیمی برای مدیریت عنصرهای «ناشناخته» (جدید)HTML خواهید آموخت.

New HTML5 APIs (Application Programming Interfaces)

APIهای جدید HTML5 (Application Programming Interfaces)

The most interesting new APIs in HTML5 are:

جالب‌ترین APIهای (رابط‌های برنامه‌نویسی برنامه کاربردی) جدید در HTML5 عبارتند از:

HTML Geolocation

HTML Drag and Drop

HTML Local Storage

HTML Application Cache

HTML Web Workers

HTML SSE

Tip: HTML Local storage is a powerful replacement for cookies.

نکته: انبار محلی HTML یک جایگزین قدرتمند برای cookie هاست.

Removed Elements in HTML5

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

The following HTML4 elements have been removed in HTML5:

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

Removed Element

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

Use Instead

عنصرهای جایگزین

<acronym> <abbr>
<applet> <object>
<basefont> CSS
<big> CSS
<center> CSS
<dir> <ul>
<font> CSS
<frame>
<frameset>
<noframes>
<s> CSS, <s>, or <del>
<tt> CSS

In the chapter HTML5 Migration, you will learn how to easily migrate from HTML4 to HTML5.

در بخش مهاجرت در HTML5، در مورد مهاجرت آسان از HTML4 به HTML5 خواهید آموخت.

HTML History

تاریخچه HTML

Since the early days of the World Wide Web, there have been many versions of HTML:

از همان روزهای آغازی وب جهانی (World Wide Web) نسخه‌های زیادی از HTML وجود داشته‌است:

Year

سال

Version

نسخه

۱۹۸۹ Tim Berners-Lee invented www
۱۹۹۱ Tim Berners-Lee invented HTML
۱۹۹۳ Dave Raggett drafted HTML+
۱۹۹۵ HTML Working Group defined HTML 2.0
۱۹۹۷ W3C Recommendation: HTML 3.2
۱۹۹۹ W3C Recommendation: HTML 4.01
۲۰۰۰ W3C Recommendation: XHTML 1.0
۲۰۰۸ WHATWG HTML5 First Public Draft
۲۰۱۲ WHATWG HTML5 Living Standard
۲۰۱۴ W3C Recommendation: HTML5
۲۰۱۶ W3C Candidate Recommendation: HTML 5.1
۲۰۱۷ W3C Recommendation: HTML5.1 2nd Edition
۲۰۱۷ W3C Recommendation: HTML5.2

From 1991 to 1999, HTML developed from version 1 to version 4.

از ۱۹۹۱ تا 1999 HTML از نسخه ۱ تا نسخه ۴ توسعه یافت.

In year 2000, the World Wide Web Consortium (W3C) recommended XHTML 1.0. The XHTML syntax was strict, and the developers were forced to write valid and "well-formed" code.

در سال ۲۰۰۰، کنسرسیوم وب جهانی (W3C) XHTML1.0 را معرفی کرد. نحو XHTML سخت بود و توسعه دهندگان ناچار به نوشتن کدهای معتبر و خوب (well-formed) بودند.

In 2004, W3C's decided to close down the development of HTML, in favor of XHTML.

در ۲۰۰۴، W3C به نفع XHTML، تصمیم به توقف توسعه HTML گرفت.

In 2004, WHATWG (Web Hypertext Application Technology Working Group) was formed. The WHATWG wanted to develop HTML, consistent with how the web was used, while being backward compatible with older versions of HTML.

در ۲۰۰۴، WHATWG (Web Hypertext Application Technology Working Group) شکل گرفت. WHATWG به دنبال توسعه HTML یکپارچه با نحوهٔ استفاده از وب بود، در حالیکه با نسخه‌های قدیمی تر HTML سازگار باشد.

In 2004 - 2006, the WHATWG gained support by the major browser vendors.

در 2006-2004 WHATWG پشتیبانی فروشنده‌های مرورگرهای اصلی را به دست آورد.

In 2006, W3C announced that they would support WHATWG.

در ۲۰۰۶، W3C اعلام کرد که آنها از WHATWG پشتیبانی می‌کنند.

In 2008, the first HTML5 public draft was released.

در ۲۰۰۸، اولین پیش نویس عمومی HTML5 معرفی شد.

In 2012, WHATWG and W3C decided on a separation:

در ۲۰۱۲، WHATWG و W3C تصمیم به جدایی گرفتند:

WHATWG wanted to develop HTML as a "Living Standard". A living standard is always updated and improved. New features can be added, but old functionality cannot be removed.

WHATWG می‌خواست HTML بعنوان یک «استاندارد زنده» توسعه یابد. یک استاندارد زنده همیشه به روز و بهبود یافته‌است. ویژگی‌های جدیدی را می‌توان اضافه کرد اما عملکردهای قدیمی تر را نمی‌توان حذف کرد.

The WHATWG HTML5 Living Standard was published in 2012, and is continuously updated.

استاندارد زنده HTML5 WHATWG در ۲۰۱۲ منتشر و بطور پیوسته به روزرسانی شد.

W3C wanted to develop a definitive HTML5 and XHTML standard.

W3C می‌خواست یک استاندارد قطعی برای XHTML و HTML5 تولید کند.

The W3C HTML5 Recommendation was released 28 October 2014.

پیشنهاد W3C HTML5 در اکتبر ۲۰۱۴ منتشر شد.

The W3C HTML5.1 2nd Edition Recommendation was released 3 October 2017.

پیشنهاد ویرایش دوم W3C HTML5.1 در ۳ اکتبر ۲۰۱۷ منتشر شد.

The W3C HTML5.2 Recommendation was released 14 December 2017.

پیشنهاد W3C HTML5.2 در ۱۴ دسامبر ۲۰۱۷ منتشر شد.

//////////////////////////////////////////////////////////////////////////

https://www.w3schools.com/html/html5_browsers.asp

HTML5 Browser Support

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

❮ PreviousNext ❯ You can teach older browsers to handle HTML5 correctly.

می‌توانید به مرورگرهای قدیمی تر کار با HTML5 را بیاموزید.

HTML5 Browser Support

پشتیبانی مرورگر در HTML5

HTML5 is supported in all modern browsers.

HTML5 در همهٔ مرورگرهای مدرن پشتیبانی می‌شود.

In addition, all browsers, old and new, automatically handle unrecognized elements as inline elements.

بعلاوه همهٔ مرورگرها، قدیمی و جدید، بطور خودکار عنصرهای ناشناخته را بعنوان عنصرهای درون خطی (Inline) در نظر می‌گیرند.

Because of this, you can "teach" older browsers to handle "unknown" HTML elements.

بهمین دلیل می‌توانید به مرورگرهای قدیمی کار با عنصرهای «ناشناخته» HTML را «بیاموزید».

You can even teach IE6 (Windows XP 2001) how to handle unknown HTML elements.

حتی می‌توانید به IE6 (Windows XP 2001) نحوه کار با عنصرهای ناشناخته HTML را بیاموزید.

Define Semantic Elements as Block Elements

تعریف عنصرهای معنای بعنوان بعنصرهای بلوک

HTML5 defines eight new semantic elements. All these are block-level elements.

HTML5 هشت عنصر معنایی جدید تعریف می‌کند. همه اینها عنصرهای سطح بلوک هستند.

To secure correct behavior in older browsers, you can set the CSS display property for these HTML elements to block:

برای حفظ کردن رفتار صحیح در مرورگرهای قدیمی، می‌توانید خصوصیت display در CSS را برای این عنصرهای HTML برابر با block تنظیم کنید:

1 html5

Add New Elements to HTML

اضافه کردن عنصرهای جدید به HTML

You can also add new elements to an HTML page with a browser trick.

می‌توانید با یک حقه مرورگر عنصرهای جدید به یک صفحه HTML اضافه کنید.

This example adds a new element called <myHero> to an HTML page, and defines a style for it:

این مثال یک عنصر جدید به نام <myHero> به یک صفحه HTML اضافه می‌کند و برای آن استایل تعریف می‌کند:

مثال

1 html5

The JavaScript statement document.createElement("myHero") is needed to create a new element in IE 9, and earlier.

حالت document.createElement("myHero") جاوا اسکریپت برای ایجاد عنصر جدید در IE9 قبلتر مورد نیاز است.

Problem With Internet Explorer 8

مشکل با Internet Explorer 8

You could use the solution described above for all new HTML5 elements.

می‌توانید از راه حل توصیف شده در بالا برای همه عنصرهای جدید HTML5 استفاده کنید.

However, IE8 (and earlier) does not allow styling of unknown elements!

با این حال، IE8 (و قبلتر) اجازه استایل دهی به عناصر ناشناخته را نمی‌دهد.

Thankfully, Sjoerd Visscher created the HTML5Shiv! The HTML5Shiv is a JavaScript workaround to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9.

خوشبختانه، اسجورد ویشر HTML5Shiv را را ایجاد کرد! HTML5Shiv یک راه حل جاوا اسکریپتی است برای ایجاد امکان استایل دهی به عنصرهای HTML5 در نسخه‌های پیش از 9 Internet Explorer.

You will require the HTML5Shiv to provide compatibility for IE Browsers older than IE 9.

به HTML5Shiv برای ایجاد سازگاری با مرورگرهای IE قدیمی تر از ۹ نیاز دارید.

Syntax For HTML5Shiv

نحو برای HTML5Shiv

The HTML5Shiv is placed within the <head> tag.

HTML5Shiv داخل تگ <head> قرار می‌گیرد.

The HTML5Shiv is a javascript file that is referenced in a <script> tag.

HTML5Shiv یک فایل جاوا اسکریپت است که در یک تگ <script> ارجاع داده می‌شود.

You should use the HTML5Shiv when you are using the new HTML5 elements such as: <article>, <section>, <aside>, <nav>, <footer>.

شما باید زمانی از HTML5Shiv استفاده کنید که از عنصرهای جدید HTML5 استفاده می‌کنید مانند: <article>، <section>، <aside>، <nav>، <footer>

You can download the latest version of HTML5shiv from github or reference the CDN version at https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

شما می‌توانید آخرین نسخه HTML5shiv را از github دانلود کنید یا به نسخه CDN در https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js ارجاع بزنید.

Syntax

نحو

1 html5

HTML5Shiv مثال

مثال HTML5Shiv

If you do not want to download and store the HTML5Shiv on your site, you could reference the version found on the CDN site.

اگر نمی‌خواهید HTML5Shiv را دانلود و آن را در سایت خود ذخیره کنید، می‌توانید به نسخه موجود برروی سایت CDN ارجاع بزنید.

The HTML5Shiv script must be placed in the <head> element, after any stylesheets:

اسکریپت HTML5Shiv باید در عنصر <head> بعد از همهٔ برگه‌های استایل قرار گیرد:

مثال

1 html5

//////////////////////////////////////////////////////////////////////////

https://www.w3schools.com/html/html5_new_elements.asp

HTML5 New Elements

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

❮ PreviousNext ❯

New Elements in HTML5

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

Below is a list of the new HTML5 elements, and a description of what they are used for.

در ادامه لیستی از عنصرهای جدید HTML5 و توصیفی از موارد استفاده آنها آمده‌است.

New Semantic/Structural Elements

عنصرهای ساختاری/ معنایی جدید

HTML5 offers new elements for better document structure:

HTML5 عنصرهای جدیدی برای ساختار بهتر سند ارائه کرده‌است:

Tag

تگ

Description

تعریف

<article> Defines an article in a document

فصلی را در یک سند تعریف می‌کند

<aside> Defines content aside from the page content

محتوایی را در کنار (Aside) محتوای صفحه تعریف می‌کند

<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it

بخشی از متن را که ممکن است قالب بندی آن در جهت متفاوتی با متن بیرون باشد مجزا می‌کند

<details> Defines additional details that the user can view or hide

جزئیات اضافی را تعریف می‌کند که کاربر می‌تواند ببیند یا پنهان کند

<dialog> Defines a dialog box or window

یک پنجره با کادر محاوره ای تعریف می‌کند

<figcaption> Defines a caption for a <figure> element

یک زیرنویس برای عنصر <figure> تعریف می‌کند

<figure> Defines self-contained content

محتوای جامع (self-contained) را تعریف می‌کند

<footer> Defines a footer for a document or section

یک پاورقی برای یک سند یا بخش تعریف می‌کند

<header> Defines a header for a document or section

یک عنوان برای یک سند یا بخش تعریف می‌کند

<main> Defines the main content of a document

محتوای اصلی یک سند را مشخص می‌کند

<mark> Defines marked/highlighted text

متن نشانه دار / برجسته را مشخص می‌کند

<meter> Defines a scalar measurement within a known range (a gauge)

یک معیار عددی داخل بک دامنه مشخص را تعریف می‌کند (مقیاس)

<nav> Defines navigation links

یک لینک راهبری (navigation) تعریف می‌کند

<progress> Represents the progress of a task

میزان پیشرفت یک وظیفه را نشان می‌دهد

<rp> Defines what to show in browsers that do not support ruby annotations

مشخص می‌کند در مرورگرهایی که از حاشیه نویسی ruby پشتیبانی نمی‌کنند چه چیزی نمایش داده شود

<rt> Defines an explanation/pronunciation of characters (for East Asian typography)

یک توضیح / تلفظ برای کاراکترها را تعریف می‌کند (برای تایپوگرافی آسیای شرقی)

<ruby> Defines a ruby annotation (for East Asian typography)

یک حاشیه نویسی(annotation) ruby تعریف می‌کند (برای تایپوگرافی آسیای شرقی)

<section> Defines a section in a document

بخشی از سند را مشخص می‌کند

<summary> Defines a visible heading for a <details> element

یک عنوان قابل رویت برای عنصر <detail> مشخص می‌کند

<time> Defines a date/time

یک زمان / تاریخ مشخص می‌کند

<wbr> Defines a possible line-break

یک خط جدید ممکن را تعریف می‌کند

Read more about HTML5 Semantics.

در مورد HTML5 Semantics بیشتر بخوانید.

New Form Elements

عنصرهای جدید فرم

Tag

تگ

Description

تعریف

<datalist> Specifies a list of pre-defined options for input controls

لیستی از گزینه‌های از پیش تعیین شده برای کنترل‌های ورودی تعریف می‌کند

<output> Defines the result of a calculation

نتیجه یک محاسبه را مشخص می‌کند

Read all about old and new form elements in HTML Form Elements.

همه چیز را در مورد عنصرهای قدیمی و جدید فرم در عنصرهای فرم HTML بخوانید.

New Input Types

انواع ورودی جدید

New Input Types

انواع ورودی جدید

New Input Attributes

ویژگی‌های ورودی جدید

color

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

week

autocomplete

autofocus

form

formaction

formenctype

formmethod

formnovalidate

formtarget

height and width

list

min and max

multiple

pattern (regexp)

placeholder

required

step

Learn all about old and new input types in HTML Input Types.

همه چیز را در مورد انواع ورودی جدید و قدیمی در انواع ورودی HTML بیاموزید.

Learn all about input attributes in HTML Input Attributes.

همه چیز را در مورد ویژگی‌های ورودی در ویژگی‌های ورودی HTML بیاموزید.

HTML5 - New Attribute Syntax

HTML5- نحو ویژگی جدید

HTML5 allows four different syntaxes for attributes.

HTML5 چهار نحو مختلف برای ویژگی‌ها را فراهم می‌کند.

This example demonstrates the different syntaxes used in an <input> tag:

این مثال تفاوت بین نحوهای متفاوت استفاده شده در تگ <input> را نشان می‌دهد:

Type

نوع

مثال

مثال

Empty

خالی

<input type="text" value="John" &lt;nowiki&gt;<nowiki>'''disabled'''</nowiki>&lt;/nowiki&gt;>
Unquoted

بدون نقل قول

<input type="text" &lt;nowiki&gt;<nowiki>'''value=John'''</nowiki>&lt;/nowiki&gt;>
Double-quoted

با نقل قول (داخل " ")

<input type="text" &lt;nowiki&gt;<nowiki>'''value="John Doe"'''</nowiki>&lt;/nowiki&gt;>
Single-quoted

با نقل قول تکی (داخل ‘’)

<input type="text" &lt;nowiki&gt;<nowiki>'''value='John Doe'&lt;nowiki/&gt;'''</nowiki>&lt;/nowiki&gt;>

In HTML5, all four syntaxes may be used, depending on what is needed for the attribute.

در HTML5 بسته به اینکه چه چیزی برای ویژگی مورد نیاز است، همهٔ چهار نحو را می‌توان استفاده کرد.

HTML5 Graphics

گرافیک در HTML5

Tag

تگ

Description

تعریف

<canvas> Draw graphics, on the fly, via scripting (usually JavaScript)

بصورت همزمان از طریق اسکریپت‌ها (معمولاً جاوا اسکریپت) اشکال گرافیکی رسم می‌کند

<svg> Draw scalable vector graphics

گرافیک‌های برداری مقیاس پذیر رسم می‌کند

Read more about HTML5 Canvas.

در مورد HTML5 Canvas بیشتر بخوانید.

Read more about HTML5 SVG.

در مورد HTML5 SVG بیشتر بخوانید

New Media Elements

عنصرهای رسانه ای (Media) جدید

Tag

تگ

Description

تعریف

<audio> Defines sound content

یک محتوای صوتی تعریف می‌کند

<embed> Defines a container for an external (non-HTML) application

یک ظرف (Container) برای یک برنامه کاربردی خارجی (غیر HTML) تعریف می‌کند

<source> Defines multiple media resources for media elements (<video> and <audio>)

چند منبع رسانه ای برای عنصرهای رسانه ای تعریف می‌کند (<video> و <audio>)

<track> Defines text tracks for media elements (<video> and <audio>)

Trackهای متنی برای عنصرهای رسانه ای تعریف می‌کند (<video> و <audio>)

<video> Defines video or movie

یک فیلم یا ویدیو را مشخص می‌کند

Read more about HTML5 Video.

در مورد HTML5 Video بیشتر بخوانید.

Read more about HTML5 Audio.

در مورد HTML5 Audio بیشتر بخوانید.

❮ PreviousNext ❯

//////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////