HTML5 الدرس الاول فى

New Elements in HTML5

ظهرت عناصر جديدة فى لغة (HTML5) لتسهيل وتوفير الوقت على مصممى المواقع فى كتابة وتنظيم الكود فمن المعروف ان مصممى المواقع عند قيامهم بتصميم موقع فانهم يقسمون اكواد الموقع الى عدة اجزاء هى كالتالى:

<“div id=”nav”>,<div id=”content”>,<div id=”header”>, <div id=”footer>

لكن مع اصدار (HTML5) ظهرت عناصر افضل لتنظيم كود الموقع وهذة العناصر هى:

(1)Header:

وداخل هذا التاج توضع الاكواد الخاصة براس الموقع كالتالى:

<header>
The code of header put here………..
</header>

(2)Navigation Bar:

وداخل هذا التاج توضع الاكواد الخاصة بالشريط الموجود اسفل راس الموقع كالتالى:

<nav>

<a href=”/h/”>HTML</a> |

<a href=”/c/”>CSS</a> |

<a href=”/js/”>JavaScript</a> |

<a href=”/p/”>PHP</a>

</nav>

وتظهر بصفحة الويب كالتالى:

HTML | CSS | JavaScript | jQuery

(3)Footer:

وداخل هذا التاج توضع الاكواد الخاصة بذيل الموقع كالتالى:

<footer>
The code of footer put here………..
</footer>

(4)Section:

عن طريق هذا التاج يمكن ان نقسم محتوى الموقع الى مجموعة من الاقسام كالتالى:

<section>

<h1>HTML</h1>

<p>HTML or HyperText Markup Language is the main markup language for creating web pages and other information that can be displayed in a web browser..</p>

</section>

<section>

<h1>JavaScript</h1>

<p>JavaScript (JS) is a dynamic computer programming language.[5] It is most commonly used as part of web browsers.</p>

</section>

<section>

<h1>CSS</h1>

<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.</p>

</section>

(5)Article:

يستخدم هذا التاج فى العديد من المهام من اهمها عمل التعليقات فى الموقع او لوضع اعلانات داخل الموقع كالتالى:

<article>

<h1>Put your comment</h1>

<p>Comments at least 10 letter</p>

</article>

(6)Aside:

يستخدم هذا التاج لوضع محتوى بجانب الصفحة ولابد ان يكون ذو صلة بالمحتوى المحيط بة كالتالى:

<aside>

<h4>PHP</h4>

<p> PHP is a server-side scripting language designed for web development.</p>

</aside>

ويمكن ان نلخص التاجات السابقة فى الصورة التالية:

elements

ملاحظة:

متصفحات الويب التى تدعم الاكواد السابقة هى:

(Internet Explorer 9+, Firefox, Chrome, Safari, Opera) فقط.

Advertisements

ضع تعليقك هنا

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: