دليل أساسي HTML5

API HTML5

وسائط HTML5

صور HTML5

المخزن على الجهاز في HTML5 خصائص النموذج في HTML5

عناصر المعنى في HTML5

العنصر اللغوي هو العنصر الذي يمكنك معرفة معناه من اسمه. على سبيل المثال، بالنسبة لمقال <article>، هناك معلومات مثل العنوان <header>، الفهرس <catalog>، المحتوى <content>، والقدم <footer>.

ما هو العنصر اللغوي?

يمكن للعنصر اللغوي توضيح معناه بشكل واضح للمتصفح والمطور.

مثال على العناصر غير اللغوية: <div> و <span> - لا تحتاج إلى النظر في المحتوى.

مثال على العناصر اللغوية: <form>, <table>, و <img> - تعريف واضح لمحتواه.

دعم المتصفحات

يدعم متصفحات Internet Explorer 9+، Firefox، Chrome، Safari و Opera العناصر اللغوية.

ملاحظة: لا يدعم متصفح Internet Explorer 8 وأقل منه العنصر. ولكن يقدم الحلول المتوافقة في نهاية المقال.

عناصر اللغة الجديدة في HTML5

تحتوي العديد من المواقع الحالية على كود HTML التالي:

<div id="nav">, <div>, أو <div id="footer">,</div> لتحديد الروابط التوجيهية، الرؤوس، والأقدام.

يقدم HTML5 عناصر لغوية جديدة لتوضيح أجزاء مختلفة من صفحة الويب:

<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

عنصر HTML5 <section>

<section> تعريف العنصر يحدد الفقرة (القسم، المقطع) في الوثيقة. مثل الفصول، الرؤوس، الأقدام أو أجزاء أخرى من الوثيقة.

حسب مستندات W3C HTML5: يحتوي العنصر section على مجموعة من المحتويات وتعريف العنوان.

مثال

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>موقع تعليمي أساسي(oldtoolbag.com)</title>　
</head>
<body>
<section>
　　<h1>HTML5</h1>
　　<p>إنه إصدار جديد من لغة HTML يحتوي على عناصر جديدة، خصائص وأساليب، ويحتوي أيضًا على مجموعة من التقنيات التي يمكن استخدامها لجعل مواقع الويب والتطبيقات أكثر تنوعًا، وأكثر قوة. هذه التقنيات تُدعى عادةً HTML5 وأصدقائها، ويُشير إليها غالبًا بـ HTML5.</p>
</section>
<section>
　　<h1>CSS3</h1>
　　<p>تغيير رئيسي في تطور CSS هو قرار W3C بتصنيف CSS3 كسلسلة من الوحدات. ي创新的 شركات المتصفحات بسرعة تتناسب مع رقمنة CSS، لذا من خلال استخدام طريقة الوحدات، يمكن للعناصر في معيار CSS3 أن تتطور بسرعات مختلفة، لأن شركات المتصفحات تدعم فقط خصائص معينة. ولكن تدعم المتصفحات المختلفة خصائص مختلفة في أوقات مختلفة، مما يجعل تطوير المتصفحات متشابكًا.</p>
</section>
</body>
</html>

لتجربة ‹/›

عنصر <article> في HTML5

يحدد العنصر <article> محتوى مستقل.

مثال على استخدام العنصر <article>

مقال في المنتدى
مقال في المدونة
خبر
تعليق

مثال

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>موقع تعليمي أساسي(oldtoolbag.com)</title>　
</head>
<body>
<article>
　　<h1>CSS3 </h1>
　　<p>SS3 هو إصدار تحديث لتقنية CSS (قوائم النصوص المتداخلة) بدأ في إعداده في عام 1999، وتم الانتهاء من مشروع CSS3 في 23 مايو 2001 من قبل W3C،
ويشمل بشكل رئيسي نماذج الصندوق، ووحدات القائمة، وسبل الربط، ووحدات اللغة، والخلفيات والهوامش، وآثار النص، والتنسيق المتعدد الأعمدة، وما إلى ذلك </p>
</article>
</body>
</html>

لتجربة ‹/›

عنصر <nav> في HTML5

يحدد العنصر <nav> جزء الروابط التوجيهية.

يستخدم عنصر <nav> لتحديد منطقة الروابط التوجيهية للصفحة، ولكن ليس جميع الروابط يجب أن تحتوي على عنصر <nav>!

مثال

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>موقع تعليمي أساسي(oldtoolbag.com)</title>　
</head>
<body>
<nav>
　　　　<a href="/html/">HTML</a> |
　　　　<a href="/css/">CSS</a> |
　　　　<a href="/js/">JavaScript</a> |
　　　　<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>

لتجربة ‹/›

عنصر <aside> في HTML5

تعريف العنصر <aside> يحدد محتوى خارج المنطقة الرئيسية للصفحة (مثل الشريط الجانبي).

يجب أن تكون محتويات العنصر <aside> مرتبطة بمحتوى المنطقة الرئيسية

مثال

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>مثال HTML5 بواسطة ar.oldtoolbag.com</title>
</head>
<body>
<article>
　　<h1>عنوان المقال</h1>
　　<p>نص يظهر تحت المقالة</p>
</article>
<aside>
　　<p> النص الذي يظهر تحت <aside></p>
</aside>
</body>
</html>

لتجربة ‹/›

عنصر <header> في HTML5

يصف العنصر <header> منطقة الرأس للوثيقة

يستخدم العنصر <header> بشكل رئيسي لتحديد منطقة العرض التدريحي للمحتوى

يمكنك استخدام عدة عناصر <header> في الصفحة.

تعريف العنصر <header> للرأس في هذا المثال:

مثال

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>مثال HTML5 بواسطة ar.oldtoolbag.com</title>
</head>
<body>
<header>
　　<img src="/static/images/logo-n.png" alt="Logo">
</header>
<article>
　　<h1>عنوان المقال</h1>
　　<p>نص يظهر تحت المقالة</p>
</article>
</body>
</html>

لتجربة ‹/›

عنصر <footer> في HTML5

يصف العنصر <footer> منطقة القاعدة للوثيقة

يجب أن يحتوي العنصر <footer> على العنصر الذي يحتويه

عادةً يحتوي العنصر <footer> على معلومات الكاتب، حقوق النشر، شروط الاستخدام للروابط، معلومات الاتصال، وما إلى ذلك

يمكنك استخدام عدة عناصر <footer> في الوثيقة.

مثال

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>مثال HTML5 بواسطة ar.oldtoolbag.com</title>
</head>
<body>
<article>
　　<h1>عنوان المقال</h1>
　　<p>نص يظهر تحت المقالة</p>
</article>
<footer>
　　<p>حقوق الطبع والنشر ©2013</p>
</footer>
</body>
</html>

لتجربة ‹/›

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

علامة "<figure>" تُحدد محتوى مستقل (صور،رسوم بيانية،صور،كود،وغيرها).

المحتوى لعنصر "<figure>" يجب أن يكون مرتبطًا بالمحتوى الرئيسي، ولكن لا يجب أن يؤثر على تدفق الوثيقة إذا تم حذفه.

<figcaption> تعريف علامة "<figcaption>" تعبر عن العنوان للعنصر "<figure>".

<figcaption>يجب وضع العنصر "figure" في الموضع الأول أو الأخير بين أبناء العنصر "figure".

مثال

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>موقع تعليمي أساسي(oldtoolbag.com)</title>　
</head>
<body>
<figure>
　　<img src="venglobe.gif" alt="venglobe" width="304" height="228">
　　<figcaption>venglobe　venglobe　venglobe.</figcaption>
</figure>
</body>
</html>

لتجربة ‹/›

　مثال تحرير عنصر معاني HTML5 عبر الإنترنت

مثال

<!doctype html>
<html>
<head>
　　　　<meta charset="UTF-8">
　　　　<title>عنصر معاني</title>
</head>
<body>
　　　　<!--عناصر بنية-->
　　　　<header>الرأس</header>
　　　　<section>يعبر عن فقرة: يستخدم لتعريف الفصول في المنطقة</section>
　　　　<footer>جزء القدم للمنطقة</footer>
　　　　<nav>قائمة　توجيه</nav>
　　　　<article>يعبر عن محتوى المقالة</article>
　　　　<!--عنصر مسطح用于区域的划分-->
　　　　<aside></aside>
　　　　<figure>
　　　　　　　　<figcaption></figcaption>
　　　　</figure>
　　　　<code>يعبر عن جزء من الكود</code>
　　　　<dialog>يعبر عن محادثة</dialog>
　　　　　　　　<dt>متحدث</dt><dd>المحتوى</dd>
　　　　</dialog>
　　　　<!--عنصر معاني-->
　　　　<mtter>عدد محدد النطاق</mtter>
　　　　<time></time>
　　　　<progress>شريط التقدم</progress>
　　　　<video>فيديو</video>
　　　　<audio>صوت</audio>
　　　　<!--عناصر تفاعلية-->
　　　　<details>نص محدد يظهر من خلال طريقة معينة</details>
　　　　<datagrid>يستخدم لتحكم بعرض البيانات على الجهاز العملاء</datagrid>
　　　　<menu>قائمة تفاعلية</menu>
　　　　<command>الاسم</command>
　　　　<!--عرض مثال على المقال-->
　　　　<article>
　　　　　　　　<header>
　　　　　　　　　　　　<h1>تسميات جزء head من HTML</h1>
　　　　　　　　　　　　<time>12 ديسمبر 2015</time>
　　　　　　　　</header>
　　　　　　　　<p>توجد العديد من العناصر والتسميات في جزء head من HTML، وتتعلق بمسائل عرض المتصفح للصفحة، SEO، وما إلى ذلك، ويتمتع كل نواة متصفح وبشركة تصنيع متصفحات محلية بعض العناصر والتسميات الخاصة بها، مما يؤدي إلى وجود اختلافات كبيرة. في عصر الإنترنت المتنقل، يصبح بنية head في الصفحة، وإлементات meta في الهاتف المحمول، أكثر أهمية. الهدف من هذا المقال هو فهم معنى كل تسمية، وكتابة تسميات head تلبية احتياجاتك الخاصة. يتم تقديم هذا المقال على أساس مقال من قلم "يي سان"، وإجراء توسيع وتلخيص لشرح معنى وتطبيقات التسميات والإлементات الشائعة في head.</p>
　　　　　　　　<footer>
　　　　　　　　　　　　<p>http://www.baidu.com</p>
　　　　　　　　</footer>
　　　　</article>
　　　　<!--تعليقات-->
　　　　<section>
　　　　<h2>تعليقات</h2>
　　　　　　　　<article>
　　　　　　　　　　　　<header>
　　　　　　　　　　　　　　　　<h3>ليسي</h3>
　　　　　　　　　　　　　　　　<p><time pubdata datatime="2013-09-23 10:00 - 11:00">منذ ساعة</time></p>
　　　　　　　　　　　　</header>
　　　　　　　　　　　　<p>محتوى التعليقات</p>
　　　　　　　　</article>
　　　　　　　　<article>
　　　　　　　　　　　　<header>
　　　　　　　　　　　　　　　　<h3>ليسي</h3>
　　　　　　　　　　　　　　　　<p><time pubdata datatime="2013-09-23 10:00 - 11:00">منذ ساعة</time></p>
　　　　　　　　　　　　</header>
　　　　　　　　　　　　<p>محتوى التعليقات</p>
　　　　　　　　</article>
　　　　</section>
</body>
</html>

لتجربة ‹/›

هل يمكننا البدء في استخدام هذه الإлементات المفاهيمية؟

كل هذه الإлементات هي كتل (معد <figcaption>).

لجعل هذه الأنواع من الكتل والإлементات تعمل في جميع إصدارات المتصفحات، يجب عليك تعيين بعض الخصائص في ملف النمط (هذه كودات النمط يمكن أن تدعم إصدارات المتصفحات القديمة لدعم الإлементات الرباعية):

header, section, footer, aside, nav, article, figure
{
　　　　display: block;
}

مشكلة Internet Explorer 8 و إصداراتها الأقدم

IE8 و إصداراتها الأقدم لا يمكنها عرض تأثيرات CSS في هذه العناصر، مما يعني أنك لا يمكنك استخدام <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, أو العناصر المختلفة في HTML5.

الحل: يمكنك استخدام مكتبة JavaScript HTML5 Shiv لحل مشاكل التطابق مع IE.

رابط تحميل HTML5 Shiv:http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js

بعد التحميل، أضف التالي إلى صفحتك:

<![if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

هذا الكود سيتم تحميل ملف html5shiv.js إذا كان متصفح المستخدم أقل من إصدار IE9. يجب أن تضعه في علامة <head> لأن متصفح Internet Explorer يحتاج إلى تحميلها في العنوانية قبل الرسم هذه العناصر الجديدة في HTML5

المخزن على الجهاز في HTML5 خصائص النموذج في HTML5