HTML5 ( الدرس الأول ) : الأساسيات - الوسوم الجديدة

[محمد جبلي]

المشاركة الأصلية كتبت بواسطة ألحـان الصبـا قرأت الدروس هل سيتم التعرض للتاقات فيما بعد بعض التاقات مافهمت فائدتها جاري التجربه

نعم بإذن الله سنمر عليها واحداً واحداً

[محمد جبلي]

المشاركة الأصلية كتبت بواسطة ألحـان الصبـا http://www.abo-ali.com/mp3/Yahmoom_alqlb.mp3 ^^ يعني هذي عملوها بِـ html5

مو القصد إن المتصفح يعمل ملف صوتي , لا لا لا

قبل مالمتصفحات تدعم HTML5 كان يجب تنزيل إضافات للمتصفح
حتى يتمكن المستخدم من تشغيل الملفات الصوتيه و الفيديوهات داخل الصفحة
وكانت بعض المتصفحات تنزل فيها بعض هذه الإضافات مباشرةً كميزة
وحتى مثلا موقع اليوتيوب إن أرد المستخدم تشغيل الفيديو يجب أن يكون
لديه مشغل الفلاش , وإلا لن يشتغل

فهم قالوا ليش لازم ينزل المستخدم إضافات و ليش لازم يتسخدم الفلاش
ليه ما يكون المتصفح هو على طول يشغل هذي الملفات الصوتيه و الفيديوهات
بدون أي إضافة

فخترعوا هذه العناصر الجديدة و أصبحت المتصفحات الجديدة تشغل بعض الأنواع
من الملفات الصوتية و المرئية دون الحاجة لأي إضافة أو للفلاش

مثال على فيديو يعمل بدون أي إضافة , وشوفي الإمكانيات اللي في الفيديو
http://craftymind.com/factory/html5v...nvasVideo.html
( سيعمل إن كان متصفحك يدعمه )
إذا أشتغل الفيديو أضغطي عليه و شوفي إيش يصير له

وصلت المعلومة ؟

[محمد جبلي]

المشاركة الأصلية كتبت بواسطة عطاء~ بسم الله ,, سأبدأ بكتابة ما استطعت فهمه من مصدر الدرس ..إذا صادفتوا ( *** ) معناها ما فهمت فاشرحوا لي لأن إنجليزيتي متوسطة .. اعذروني ترا مرة انصدمت لما عرفت إن السالفة انجلش بس هذي مجرد محاولة و الا انا فكرت انسحب أول ما شفت الموضوع بالانجلش و لما شفت ترجمة الأعضاء قلت فرصة كمان اطور انجليزيتي ..

ماشاء الله , ممتاز
وترجمة الأخوات في الردود السابقة ممتازة جداً و تكمل لك مالم تفهميه

أول ما بدأ الفريق كانت معنا ( برعمة ) الله يذكرها بالخير لا أفتكر إسمها الأن
كانت ومع صغر عمرها تترجم و تشرح و تضع واجبات للدروس

الإنسحاب لن يفيد الشخص في أي شيء
بدل أن ينسحب يحاول أن يجرب , فقط تجربة جادة
قد يتعب في أول درس أو درسين أو ثلاثه في بعض الكلمات
ولكن بعد ذلك ستصبح الدروس المتبقيه جداً سهله عليه

بإذن الله ستجدين أن الأمر ممتع في الدروس القادمة
بالذات لمن يبدأ العملي

بالتوفيق

[/COLOR]

[محمد جبلي]

*عاليه*
سِحر الأرجـوان
P A I N
نونٌ وميم!
عطاء~

أبدعتن و الله العظيم
أشكركم
وأسأل الله أن لا يضيع تعبكم
ويكتب شرحكم في ميزان أعمالكم

[قَطْر الندى ؛]

شكراً أستاذ على رفع المعنويات ~

ننتظر الدرس العملي بحماس..!!

وفقكم الله ~

[ميمونَة]

-




آمين ..

بالفعل ننتظر الدروس العملية بحماس ~

[عاليا]

بارك الله فيكم اخى محمد

شرح اكثر من رائع من الجميع حفظكم المولى

ونتتظر الدروس العملية ان شاء الله

[محمد جبلي]

يالله , كل ما أكتب شرحي على الدروس يعلق المتصفح ولا تصير له مشكلة
ويتمسح الكلام

كنت باقول بإختصار أنه تعريب New Markup Elements
هو : العناصر الوصفية الجديدة


من يتبرع و يجمع أفضل مافي الشروح
ويضعها في شرح واحد ؟

[قَطْر الندى ؛]

كيف لنا أن نعرف الأفضل و الأصوب ؟

[حلم الصبا]

تمت قراءة الــدرس ..

وبالتطبيق سوف يتضح أكــثـر بإذن الله ,,

[حلم الصبا]

( وقل ربي زدنـي علما )

هذا مجموع الشروح .. أتمنى ان أكون وفقت لإختيار الأفضل ..

الدرس الأول

1- http://www.w3schools.com/html5/default.asp

HTML5 هي الجيل الجديد والقادم بقوة من لغة HTML .


الدرس الثاني

2- http://www.w3schools.com/html5/html5_intro.asp


ما هي لغة HTML5 ؟

HTML5 سيكون المعيار الجديد للغة HTML ، XHTML ، و HTML DOM .
الإصدار الأخير من لغة HTML صدر عام 1999 و منذ ذلك الوقت تغير الويب تغييرات كثيرة وجذرية لذا توجب إنشاء إصدار جديد من اللغة ليواكب هذا التغييرات.
HTML5 لم تصدر بشكل نهائي بعد فهي في نطاق التطوير وأغلب المتصفحات الحديثة تدعم بعض

من مميزات HTML5 .

كيف بدأت لغة HTML5 ؟

HTML5 هي ناتج تعاون بين كل من الجمعية العالمية للويب (W3) ومجموعة عمل تقنيات برامج الويب التشعبي (WHATWG) .
عملت مجموعة Whatwg في مجال تطبيقات الويب ، أما الجمعية العالمية للويب (W3) فعملت في
تطوير لغة XHTML 2.0، وفي سنة 2006 قررت الشركتان التعاون لإنتاج إصدار جديد من لغة
HTML .

بعض قواعد لغـة الـ HTML5 عندما تم إنشائُها:

- إن المميزات الجديدة في اللغة يجب أن تكون مبنية على كل من لغة HTML, CSS, DOM, و JavaScript .
- تقليل الاحتياج إلى الإضافات الخارجية مثل (الفلاش) .
- تحسين معالجة الأخطاء .
- وسوم أكثر لتحل محل السكربتات .
- لابد أن تكون لغة HTML5 أداة مستقلة .
- لابد أن تكون عملية التطوير مرئية للمستخدمين .

المميزات الجديدة في لغة HTML5 :

- العنصر canvas للرسم داخل صفحات HTML
- العنصر video لعرض الفيديو مباشرة
- العنصر audio لتشغيل ملفات الصوت مباشرة .
- دعم أفضل لتخزين البيانات على جهاز الزائر (local offline storage) .
- إضافة عناصر جديدة لعرض المحتوي مثل article, footer, header, nav, section .
- إضافة عناصر إدخال جديدة مثل calendar, date, time, email, url, search .

دعم المتصفحات لـ HTML 5 :

* أحدث الإصدارات من المتصفحات Safari, Chrome, Firefox, و Opera تدعم بعض مميزات HTML 5 .
* سوف يدعم Explorer 9 بعض مميزات HTML 5 .

الدرس الثالث

3- http://www.w3schools.com/html5/html5_new_elements.asp

عناصر جديده في الـ HTML5 :

لقد حدثت تغييرات كثيرة في الإنترنت منذ أن أصبحت HTML 4.01 هي اللغة القياسية المعتمدة في سنة 1999.
اليوم ، نستطيع أن نقول أن هناك بعض العناصر في HTML 4.01 عفا عليها الزمن ، إما إنها لم
تستخدم قط ، أو لم تستخدم بالطريقة التي تم التخطيط لها . هذه العناصر تم حذفها أو تم إعادة
كتابتها في HTML5 .
لتحسين التعامل مع استخدامات الإنترنت اليوم ، فقد اشتملت لغة HTML5 أيضا على عناصر
جديدة لتحسين الهيكل ، الرسم ، المحتوى والملتيمديا ، وتحسين معالجة الأخطاء .


العناصر الوصفية الجديدة :

عناصر جديدة لهيكلة أفضل.

<article> : المحتوى الخارجي ، مثل نص من مادة إخبارية ، بلوج ، منتدى ، أو أي محتوى آخر من مصدر خارجي .
<aside> : التعليقات الجانبية المتعلقة بالمحتوى الداخلي .
<command> : زر أو زر راديو ، أو زر صندوق اختيار .
<details> : لوصف تفاصيل حول المستند ، أو أجزاء منها .
<summary> : تعليق ، أو ملخص ، داخل تفاصيل العنصر .
<figure> : تجميع جزء لمحتوى مستقلِ، على سبيل المثال فيديو .
<figcaption> : تعليق على جزء .
<footer> : لعمل تذييل للمستند أو لقسم , يمكن أن يحتوي على اسم الكاتب ، وتاريخ المستند ، ومعلومات الاتصال ، أو معلومات حقوق النشر .
<header> : للحصول على مقدمة للمستند أو الموقع .
<hgroup> : العناوين الرئيسية ، وذلك باستخدام <h1> إلى <h6>، حيث الأكبر حجما هو العنوان الرئيسي لهذا القسم ، وغيره يكون العناوين الفرعية .
<mark> : للنص الذي ينبغي تسليط الضوء عليه .
<meter> : للحصول على قياس ، لا تستخدم الا اذا كان الحد الأقصى والحد الأدنى من القيم معروف .
<nav> : للتنقل بين أجزاء الصفحة أو الصفحات .
<progress> : حالة التقدم في العمل .
<ruby> : العلامات الصينية أو الرموز .
<rt> : لشرح العلامات الصينية أو الرموز .
<rp> : لاظهار المتصفحات التي لا تدعم عنصر ruby .
<section> : جزء من المستند ، مثل الفصول ، الرؤوس والتذييلات او أي أقسام أخرى في المستند .
<time> : لتحديد الوقت أو التاريخ ، أو الاثنين معا .
<wbr> : خط فاصل .

العناصر الجديدة للوسائط المتعددة :

<audio> : لمحتوى الوسائط المتعددة والأصوات والموسيقى أو غيرها (صوتيات)
<video> : لمحتوى الفيديو ، مثل فيلم أو مقطع الفيديو وغيرها (مرئيات)
<source> : مصادر الوسائط المتعددة .
<embed> : لتضمين محتوى .[/]COLOR]

العناصر الجديدة للرسم :

<canvas> : الرسم عن طريق الجافا سكربت .

العناصر الجديدة للنماذج :

تقدم لغة HTML5 عناصر جديدة والمزيد من الوظائف .

<datalist> : قائمة من الخيارات لقيم الإدخال .
<keygen> : تشكيل مفاتيح للتحقق من المستخدمين .
<output> : لأنواع مختلفة من المخرجات .

القيم الجديدة للمدخلات :
أصبح للمدخلات في هذه اللغة قيم جديدة وذلك لسيطرة أفضل عليها قبل ارسالها .

Tel : قيمة الإدخال هي رقم الهاتف .
Search : قيمة الإدخال هو حقل البحث .
url : قيمة الإدخال هي العنوان (الرابط) .
Email : قيمة الإدخال هو واحد أو أكثر من عناوين البريد الالكتروني .
Datetime : قيمة الإدخال هي التاريخ أو الوقت .
Date : قيمة الإدخال هي التاريخ .
Month : قيمة الإدخال هي الشهر .
Week : قيمة الإدخال هو الأسبوع .
Time : قيمة الإدخال هي الوقت .
datetime-local : قيمة الإدخال هي التاريخ/الوقت المحلي .
number : قيمة الإدخال هي رقم .
Range : قيمة الإدخال هي رقم في نطاق معين .
Color : قيمة الإدخال هي رقم في نطاق معين , مثل #FF8800 .

والله الموفق ,

[نُورة يحيَى]

فهمت الدرس بواسطة ترجمة الأعضاء وقوقل ,
شكرا جزيلا !

[ألحـان الصبـا]

المشاركة الأصلية كتبت بواسطة محمد جبلي وصلت المعلومة ؟

نعم وصلت ،، جزاكم الله خير