تعلم الـ HTML

تعلم الـ HTML

بتعلم لغة الـ html يمكنك صناعة موقع الكتروني، و سيكون ذلك سهلا و ممتعا باذن الله.

اليك هذا المثال

المثال

<!DOCTYPE html> 

<html>

<head>

<meta charset="UTF-8">

<style type="text/css">

body{direction:rtl;}

</style>

</head>

<body>

<h1>هذا عنوان</h1>

<p>و هذا نص.</p>

</body>

</html> كيفية ظهوره في المتصفح

شرح المثال

• التصريح doctype يعرف نوع وثيقة، او نقول يعرف اصدار الـ HTML المستعمل في كتابة الوثيقة .

• النص المكتوب بين <html> و </html>يصف صفحة الويب.

• النص المكتوب بين <body> و </body>هو المحتوى المرئي للصفحة والذي سيراه المستعمل او نقول الزائر.

• النص الذي بين <h1> و </h1> سيعرض كعنوان.

• النص الذي بين <p> و </p> سيعرض كفقرة او نقول نص.

ملاحضات

o التصريح <DOCTYPE html> هو التصريح المستعمل في الوثائق المكتوبة بالـ HTML5.

o <head> و</head> و كل ما هو موجود بينهما ستفهمه لاحقا، قمت باضافته لجعل المتصفح يعرض اللغة العربية بطريقة صحيحة ) التشفير الصحيح( و من اليمين الى اليسار فقط، و ان كنت تريد ان تجرب كتابة وثيقة html باللغة العربية قم بنسخ محتوى عنصر الـ <head> في وثيقتك أي كل ما بين <head> و </head> .

o انصحك بكتابة الاكواد )شفرات( الـ HTML بنفسك، فقد لا تعمل الامثلة ان قمت بنسخها و لصقها في محرر النصوص )لاسباب لا اريد شرحها(، كما ان كتابة الاكواد بنفسك سيساعدك على تذكر الوسوم والتعلم بسرعة.

ما هي الـ HTML

الـ html هي اللغة التي ترسم بها صفحات الويب، و هي اختصار لـ Hyper Text Markup Language و التي يمكن ترجمتها الى لغة تاشير او وضع علامات على النصوص المتشعبة، ولغة التاشيريقصد بها وضع العلامات، وذلك باستعمال مجموعة من الوسوم tags و التي يتم بها وصف او رسم محتوى الوثيقة، فوثائق الـ HTML تحتوي وسوم الـ HTML ونصوص صرفة، و هي ما يطلق عليه صفحات الويب.

ما هي وسوم الـ HTML

العلامات التي توضع كاشارات لتحديد ماهية المحتوى في الـ HTML هي ما يطلق عليه وسوم الـ HTML، و هي كلمات مفتاحية )اسماء علامات( محاطة باقواس زوايا )الرمزين < و(> مثل الوسم <html>، تستعمل عادة كازواج مثل <p> و </p>، الاول يعتبر وسم البداية و الثاني يشبه الاول و يتميز بوجود قطع امامي )الرمز(/ قبل الكلمة المفتاحية ويسمى وسم الانهاء، وسوم البداية و الانهاء تسمى كذلك وسوم الافتتاح والاغلاق.

>الوسم</ المحتوى >الوسم<

عناصر الـ HTML

عنصر الـ HTML هو وسم الافتتاح و الانهاء و كل ما يتواجد بينهما، و هذا عنصر ماخوذ من المثال السابق :

</p>)هذا نص.(<p > كل ما هو مكتوب بين القوسين عبارة عن عنصر HTML

متصفحات الويب

الغرض من متصفحات الويب مثل Google Chrome, Internet Explorer, Firefox, Safari هو قراءة وثائق الـ HTML وعرضها كصفحات ويب.

المتصفحات لا تعرض وسوم الـ HTML، فهي تستعمل الوسوم لتحديد كيفية تقديم او عرض محتويات صفحة الـ HTML للمستعمل كما هو ملاحظ في المثال السابق. هناك العديد من المتصفحات، والرائدة منها )أي الاكثر استعمالا على النت( و التي سنعتبرها مقياس لدعم الوسوم والخواص هي الواردة ادناه :

/Internet Explorer / Firefox /Opera /Google Chrome .Safari

الطابع التركيبي لصفحات الـ HTML

اليك تصوربسيط لتركيب صفحة HTML

<html>

<body>

<h1>هذا عنوان</h1>

<p>هذا نص.</p>

<p>هذا نص اخر.</p>

</body>

</html>

اصدارات الـ HTML

السنة الاصدار

1991 HTML

1993 HTML+

1995 HTML 2.0

1997 HTML 3.2

1999 HTML 4.01

2000 XHTML 1.0

2012 HTML5

2013 XHTML5

تصريحات الـ :< !DOCTYPE >

تصريحات الـ < !DOCTYPE> تساعد المتصفحات لعرض صفحة الويب بشكل صحيح.

تختلف انواع وثائق الـ HTML المتواجدة في الشبكة، والمتصفحات لا تستطيع عرض صفحة HTML بشكل صحيح 100 %الا في حالة معرفتها لنوع الوثيقة و اصدار الـ HTML المكتوبة بها واللذان يعرفان بالتصريح < !DOCTYPE> .

التصريحات الشائع استخدامها

وهذا التصريح هو ما سنستخدمه في امثلة هذا الكتاب.: HTML5في

<!DOCTYPE html>

HTML 4.01في

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0في

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

انت في غنا عن معرفة كافة التصريحات بانواع وثائق الـ HTML، وان اردت معرفتها فمن السهل ايجادها على شبكة الانترنت.

انتهت المقدمة

محررات الـ HTML

كتابة الـ HTML باستعمال Notepad او أي محرر نصوص اخر

يمكن تحرير الـ HTML باستعمال محررات احترافية مثل

• Adobe Dreamweaver

• Microsoft Expression Web

• CoffeeCup HTML Editor

افضل طريقة لتعلم الـ HTML هي استعمال محرر نصوص بسيط مثل Notepad (pc) والذي يكون مرفق مع نظام التشغيل ويندوز او (Mac) TextEdit الذي ياتي مرفق مع نظام التشغيل ماكنتوش.

باتباع الخطوات التالية ستنشئ اول صفحة ويب باستعمال Nootepad.

شغل برنامج Notepad واكتب فيه كود الـ HTML التالي :

احفظ الملف باي اسم تريده وباحد الامتدادين : .htm او .html فلا يوجد فرق بينهما، و من الافظل حفظ الملف في مجلد يسهل تذكره، ثم افتحه بالمتصفح الذي تريد استعماله او انقر عليه مرتين ليفتح بالمتصفح الافتراضي لنضام تشغيلك، و يفترض ان تكون النتيجة كما يلي :

انتهى محررات الـ HTML

اساسيات الـ HTML

لا تقلق ان وجدت في الامثلة وسوم لم تتعلمها بعد، ستتضح لك في الدروس القادمة.

 العناوين في الـ HTML تعرف بالوسم <hn> حيث n هو رقم يتراوح بين 1 و 6 حسب اهمية العنوان، اليك المثال التالي :

المثال

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style type="text/css">

body{direction:rtl;}

</style>

</head>

<body>

<h1>هذا عنوان</h1>

<h2>هذا عنوان</h2>

<h3>هذا عنوان</h3>

</body>

</html> كيفية ظهوره في المتصفح

 النصوص في الـ HTML تعرف بالوسم <p>

المثال

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style type="text/css">

body{direction:rtl;}

</style>

</head>

<body>

<p>هذا نص.</p>

<p>هذا نص اخر.</p>

</body>

</html> كيفية ظهوره في المتصفح

لا بد انك لاحضت من المثالين السابقين ان الشيء الوحيد الذي تغير هو محتوى العنصر <body>، أي ما بين <body> و </body>، و لذلك من الان وصاعدا سنركزعلى محتويات العنصر <body> و كيفية ظهورها في المتصفح.

 الوصلات في الـ HTML تعرف بالوسم <a>، وعنوان الوصلة يحدد في الخاصية href، لا تقلق فستتعلم خواص الـ HTML في الدروس الاحقة.

<a href="http://www.w3schools.com">هذه وصلة</a>

النقر بالفارة على الوصلة سينقلك الى موقع

www.w3schools.com

 الصور في الـ HTML تعرف بالوسم <img>، ويحدد مصدر الصورة بالخاصية src، والابعاد التي ستظهر بها في المتصفح بالخاصيتين width للعرض و hight للارتفاع، لكي تجرب هذا المثال بنفسك قم بوضع صورة في نفس المجلد الذي يحتوي وثيقة الـ HTML وسمها image.jpg .jpg)هو امتداد الصورة( وحدد ابعادها بالبكسل )الشاشة في الحقيقة مقسمة الى مربعات صغيرة كالفسيفساء يسمى الواحد منها بالبكسل، من اجل صورة تاخذ 340 بكسل من عرض الشاشة نكتب width= "340" ونفس الشيء بالنسبة للارتفاع(او النسبة المئوية )الارتفاع الكلي للشاشة هو 100% ، من اجل صورة تاخذ 20% من ارتفاع الشاشة نكتب height="20%" ونفس الشيء بالنسبة للعرض (.

<img src=" image.jpg" width="340" height="20%">

اساسيات الـ HTML انتهت

عناصر الـ HTML

وثائق الـ HTML تعرف بعناصر الـ HTML، وعنصر الـ HTML هو كل ما هو مكتوب من وسم البداية الى وسم الانهاء :

وسم البداية او وسم الافتتاح محتوى العنصر وسم الانهاء او وسم الاغلاق

<p> هذا نص </p>

<a href="image.jpg"> هذه وصلة لصورة </a>

<br> هذا وسم فارغ )ستفهم ما هو لاحقا(

تركيبة عنصر الـ HTML

• يبدا عنصر الـ HTML بوسم البداية او وسم الافتتاح.

• ينتهي عنصر الـ HTML بوسم الانهاء او وسم الاغلاق.

• عنصر الـ HTML هو كل ما هو مكتوب من وسم البداية الى وسم الانهاء.

• بعض عناصر الـ HTML ذات محتوى فارغ )ليس لها وسم اغلاق ولا محتوى(، فوسم البداية فيه هو نفسه وسم الانهاء.

• معظم عناصر الـ HTML تستطيع ان تمتلك مجموعة من الخصائص )ستفهم خصائص الـ HTML لاحقا(

عناصر الـ HTML المعششة

معظم عناصر الـ HTML يمكن تعشيشها )يمكن ان تحتوي عناصرHTML اخرى(، فوثائق الـ HTML تتظمن )مركبة من( عناصر HTML معششة في بعضها البعض.

مثال لوثيقة HTML

<!DOCTYPE html>

<html>

<body>

</p>هذا اول نص اكتبه<p>

</body>

</html>

شرح المثال

عنصرالـ :<p>

</p>هذ اول نص اكتبه<p>

عنصرالـ <p> يعرف النص في وثيقة الـ HTML، هذا العنصر يبدا بالوسم <p> وينتهي </p>، محتوى هذا العنصر هو : هذ اول نص اكتبه

عنصر الـ :<body>

<body>

<p>هذا اول نص اكتبه</p>

</body>

عنصر الـ <body> يعرف جسد او جسم وثيقة الـ HTML )و هو الجزء المرئي او مايراه الزائر او المستعمل عند زيارته لموقعك(،هذا العنصر يبدا بوسم الافتتاح <body> و ينتهي بوسم الاغلاق </body>، و محتوى هذا العنصر هو العنصر <P>، و نقول العنصر <p> معشش في العنصر <body>.

عنصر الـ :<html>

<html>

<body>

<p>هذا اول نص اكتبه</p>

</body>

</html>

عنصر الـ <html> يعرف وثيقة الـ HTML ككل، هذا العنصر يبدا بالوسم <html> و ينتهي بالوسم </html> ، و هذا العنصر يحتوي عنصر HTML اخر هو عنصرالـ .<body>

ملاحظة مهمة :

انت تلاحظ ان عنصر الـ <body> معشش في عنصر الـ <html> و عنصر الـ <p> معشش في عنصر الـ <body>، في الـ HTML يتم التعامل مع العناصر المعششة في بعضها و كانها عائلة، فنقول ان العنصر <p> ابن للعنصر <body> و العنصر <html> اب للعنصر <body> وجد العنصر <p> وهكذا، اعتقد ان المعنى واضح.

لا تنسى وسم الاغلاق

قد تعرض المتصفحات بعض عناصر الـ HTML بطريقة صحيحة اذا نسيت وسم الانهاء مثل :

هذا نص </p>

المثال اعلاه يعرض بطريقة صحيحة في معظم المتصفحات لان كتابة وسم الانهاء او الاغلاق يعتبر اختياريا، ولكن لا تعتمد على هذا الامر، فالكثير من عناصر الـ HTML ينتج عنها نتائج غير متوقعة و\او اخطاء اذا نسيت كتابة وسم الانهاء.

عناصر الـ HTML الفارغة

عناصر الـ HTML التي من دون محتوى و وسم اغلاق تسمى عناصر فارغة، فمثلا العنصر <br> عنصر فارغ و يكتب من دون وسم اغلاق، و للتوضيح فقط : الوسم <br> يعرف كسر السطر، فهو يخبر المتصفح بان ينتقل الى السطر التالي لعرض عناصر الـ HTML التي تاتي بعد هذا العنصر.

نصائح :

في الـ XHTML و XML يجب اغلاق جميع العناصر بوسم الاغلاق، اما في حالة العناصر الفارغة التي لا تملك وسم اغلاق فاضافة قطع (/)داخل وسم الافتتاح هو الطريقة المناسبة لاغلاق العناصر الفارغة، فمثلا وسم <br> يكتب بهذه الطريقة <br/>.

عندما تكتب الوسوم في وثائق الـ HTML يفضل استعمال الاحرف الصغيرة، فمثلا وسم تعريف الصور يكتب <img> و ليس <IMG>، ورغم ان الوسوم غير حساسة لحالة الاحرف، و الكتابة بالاحرف الصغيرة او الكبيرة لا يؤثر على كيفية عرضها، الا ان منظمة World Wide Web Consortium (W3C) تنصح باستعمال الاحرف الصغيرة في الـ HTML4 وتوصي باستعمال الاحرف الصغيرة في XHTML.

World Wide Web Consortium (W3C) : او الاتحاد العالمي الشامل لشبكة الويب، و هي المنظمة التي تقوم بتحديد معايير الـويب و تطويرها.

انتهى من عناصر الـ HTML

خصائص الـ HTML

لعناصر الـ HTML خصائص تزودها بمعلومات اضافية، هذه الخصائص تحدد دوما في وسم البداية، و تاتي في ازواج )اسم/قيمة( بهذا السياق :

"القيمة"=اسم الخاصية

مثال :

<a href="http://www.google.com">النقر على هذه الوصلة سياخذك الى google</a>

عليك دائما ان تضمن او تضع قيم الخصائص بين علامتي الاقتباس) "الخاصية(" ، الاكثر شيوعا هو استعمال علامات الاقتباس المزدوجة (")، الا انه يمكنك استعمال علامة القتباس المفردة (')، في بعض الحالات الشاذة، عند احتواء القيمة على علامات اقتباس، يجب تضمينها داخل علامات اقتباس مفردة، مثل :

Name='Behri"Godslave"Abdessalam'

نصيحة : رغم ان اسم الخاصية و قيمتها غير حساستان لحالة الاحرف )كبيرة او صغيرة( ، الا ان منظمة World Wide Web Consortium (W3C)توصي باستعمال الحروف الصغيرة، و الاصدار الاحديث للـ (X)HTML ستوصي استعمال الاحرف الصغيرة، للعلم فقط ان الـ XHTML1.0 هو احدث اصدارات الـ HTML.

ملاحظة مهمة : سنقول عن بعض الوسوم و الخواص انها مستنكرة او نقول مكروهة، و المقصود بذلك انها اصبحت قديمة الطراز قد يبطل استعمالها في المستقبل، الا ان المتصفحات ستستمر في دعمها )أي انه يمكنك استعمالها( لانه لا تزال في الشبكة الكثير من وثائق الـ HTML المصممة بالاصدارات القديمة للـ HTML، الا انه لا يمكنك الاعتماد على ذلك لان الكثير من الوسوم والخواص المكروهة لم تعد معرفة في مواصفات W3C.

الخواص العامة للـ :HTML

خصائص الـ HTML هي ما يعطي المعنى و السياق لعناصر الـHTML ، و لكل عنصر HTML خصائص خاصة به ستتعلمها لاحقا، و الخصائص الواردة ادناه هي خصائص عامة يمكن استعمالها مع أي عنصر HTML.

ملاحظلت :

: * هذا الرمز يعني ان الخاصية جديدة في الـ HTML5.

*المتصفح اللذي يظهرمشطوب مثل ) ( يعني انه لا يدعم الخاصية، وهذا الامر ساري المفعول بسنة 2013 و قد يتغير هذا في الاصدارات الاحدث من المتصفح.

*عندما تم اصدار الـ HTML4 تم تقديم الـ CSS او ما يسمى بنشرات التصميم المتعاقبة (Cascading Style Sheets)لاول مرة، و هي مجموعة من الخواص تحدد ستايل )كيفية ظهور( عناصر الـ HTML، و يتم ذلك بكتابة الخواص بلغة خاصة اما داخل كل عنصر على حدة او في عنصر الـ <head> او في وثيقة منفصلة محفوظة بامتداد (.css)، و يجب ان تعلم انه عليك تعلم الـ CSS بعد تعلم الـ HTML لانها الطريقة الوحيدة لاعطاء مظهر مناسب لموقعك، فالاصدارات الجديدة من الـ HTML لا تدعم او تنصح بتجنب الطرق القديمة في تحديد مظاهر العناصر، فكثير من الخواص اصبحت غير مدعومة او مكروهة ينصح باجتنابها، سيتم شرح الـ CSS بعمق اكبر في دروس لاحقة.

*يجب ان تعلم انك كمبتدئ سيستحيل عليك فهم الكثير من الخصائص الواردة ادناه، فلا تصب بالاحباط، ما عليك الا محاولة فهم اكبر قدر ممكن من الخواص للوقت الحالي، و العودة الى هذا الجدول بعد تعلم المزيد عن الـ HTML.

*تحتاج لتعلم الـ CSS و JavaScript لاستغلال بعض الخصائص العامة للـ HTML، و لكن سيكون من المفيد اخذ نظرة اولية من الجدول على الارتباط الموجود بين الـ CSS و الـ JavaScript و الـ HTML.

كيفية ظهوره في المتصفح مثال القيمة شرحها الخاصية

توضيح : بالضغط على مفتاح ALT+ رمز مفتاح الاختصار (g)يصبح عنصر الـ HTML نشطا و يقوم المتصفح بالانتقال الى الصفحة الرئيسية لموقع google، وذلك يشبه النقر على الوصلة بالفارة. <a href="http://www.google.com" accesskey="g">GOOGLE</a>

احد رموز لوحة المفاتيح

تستخدم هذه الخاصية لتحديد رمز من لوحة المفاتيح ليكون مفتاح اختصاريقوم بتنشيط العنصر او التركيز عليه بدل استعمال الفارة، ويكون ذلك اما بالظغط على : Alt+مفتاح الاختصار، او Alt Shift++ مفتاح الاختصار.

الاختلاف بين HTML5 و الـ :HTML4.01

يمكن استعماله مع جميع العناصر في HTML5، اما في html4.01 فيمكن استعماله مع العناصر : .<a>, <area>, <button>, <input>, <label>, <legend>,<textarea>

التركيب:

"> رمزمفتاح الاختصار" accesskey=العنصر <

accesskey

توضيح :

<meta charset="UTF-8">

هذا العنصر يعرف ترميز الحروف للمتصفح، في غياب هذا العنصر قد تظهر النصوص المكتوبة بالعربية على شكل رموز غير مفهومة.

<style type="text/css">…</style>

هذا العنصر يستعمل لاضافة خواص باستعمال الـ CSS

body{direction:rtl;}

هذه الخاصية تجعل المتصفح يعرض عناصر الـ HTMT من اليمين الى اليسار.

h1. عنوان-رئيسي{color:blue;}

هنا تم اخبار المتصفح ان العنصر h1 الذي يعطى اسم الصنف عنوان-رئيسي سيعرض باللون الازرق.

p. نص-مهم{color:green;}

هنا تم اخبار المتصفح ان العنصر p الذي يعطى اسم الصنف نص-مهم سيعرض باللون الاخضر.

p. خلفية-صفراء{background-color:yellow;}

هنا تم اخبار المتصفح ان العنصر p الذي يعطى اسم الصنف خلفية-صفراء سيعرض بخلفية صفراء.

<h1 class=" عنوان-رئيسي">…</h1>

العنصرh1 اعطي اسم الصنف عنوان-رئيسي، ولذلك سيظهر في المتصفح باللون الازرق.

<p class=" نص-مهم">…</p>

العنصر p اعطي اسم الصنف نص-مهم ، ولذلك سيظهر في المتصفح باللون الاخضر.

<p class="نص-مهم خلفية-صفراء">... </p>

العنصر p اعطي اسمي الصنف نص-مهم و خلفية-صفراء، ولذلك سيظهر النص في المتصفح باللون الاخضر و خلفية صفراء. <!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style type="text/css">

body{direction:rtl;}

h1.عنوان-رئيسي{color :blue ;}

p.نص-مهم{color :green ;}

p. خلفية-صفراء{background-color:yellow;}

</style>

</head>

<body>

<h1 class=" عنوان-رئيسي">هذا العنوان سيتاثر بخاصية الصنف عنوان-رئيسي </h1>

<p class=" نص-مهم">هذا النص سيتاثر بخاصية الصنف نص-مهم</p>

<p class="نص-مهم خلفية-صفراء">هذا النص سيتاثر بالخاصيتين نص-مهم و خلفية-صفراء </p>

</body>

</html>

اسم الصنف يستعمل لتصنيف احد العناصر باعطائه اسم صنف خاص به او اكثر، لتحديد اكثر من صنف واحد ودمجها مع بعضها لتخص عنصر واحد افصل بين اسماء الصنف بفراغ (Space)، مثلا :

<span class= “الصنف-الاول الصنف-الثاني “>

تستعمل هذه الخاصية غالبا للاشارة الى صنف معين )او اصناف( في نشرة الستايل، او في مخطوطات الـ Java (JavaScript) عن طريق الـ HTML DOM لاحداث تغييرات معينة لعناصر الـ HTML بتعيين اصناف محددة لها )ستفهم هذا عندما تتمكن من الـ HTML (.

قواعد في اعطاء اسم الصنف :

يجب ان يبدا بحرف من A الى Z او a الى z.

يمكن ان يكون متبوع بـ : حروف (a-Za-z)، ارقام (0-9)، شرطات (-)، او شرطات سفلية ( _ ).

في الـ HTML جميع القيم غير حساسة لحالة الاحرف )كبيرة او صغيرة(.

<العنصر class="اسم الصنف">: التركيب

الاختلاف بين HTML5 و الـ :HTML4.01

يمكن استعماله على أي عنصر في الـ HTML5، في الـ HTML4.01 لا يمكن استعماله مع العناصر : <base>,<head>,<html>,<meta>,<param>,<script>,<style>,<title>.

class

توضيح :

بالنقر على النص بزر الفارة الايسر يمكنك ان تكتب )او تعدل( ما تريد مكان النص الظاهر في المتصفح.

<p contenteditable="true">

هذا النص قابل للتعديل، اي تستطيع ان تكتب ما تريد مكانه.

</p> صح، قابل للتعديل.:True

خطا، غير قابل للتعديل.:False

بالوراثة، يعني حسب :inhirit

العنصر الاب. فان كان العنصر الاب قابل للتعديل فالعنصر الابن يرث عنه هذه الخاصية. هذه الخاصية تحدد ان كان محتوى العنصر قابل للتعديل او لا.

هذه الخاصية جديدة في الـ HTML5.

التركيب :

<العنصر contenteditable="true|false|inhirit"> contenteditableNew

المتصفحات الرائدة لا تدعم هذه الخاصية، لذلك سيظهر المثال و كانه نص عادي في هذه المتصفحات. <p contextmenu="الاسم التريفي للقائمة">هذا النص مرتبط بالقائمة الحاملة للاسم التعريفي :الاسم التعريفي للقائمة</p>

<menu id="الاسم التعريفي للقائمة">

<command label=" قيمة نصية تختارها انت ستكون اسم امر معين سيظهر للمستعمل" onclick=" سكريبت يفعله المستعمل()">

<command label=" قيمة نصية اخرى تختارها انت ستكون اسم امر معين سيظهر للمستعمل " onclick=" سكريبت يفعله المستعمل()">

</menu> الاسم التعريفي للقائمة المعرفة بالوسم <menu>. تستخدم هذه الخاصية لجعل قائمة من الخيارات تظهر للمستعمل عند نقره على العنصر بالزر الايمن للفارة.

عند استخدام هذه الخاصية مع عنص ما فالقيمة التي نعطيها لهذه الخاصية هي نفسها القيمة المعطات كاسم تعريفي للعنصر <menu> بالخاصية id، يعني انه يمكن القول ان هذه الخاصية تربط العنصر المضافة اليه بعنصر القائمة المعرفة بالوسم <menu>، هذه القائمة ستحتوي مجموعة من اسماء الاوامر)اسم الامر هو عبارة عن نص يمثل خيارا معينا بالنسبة للمستعمل، يتم اضافة هذا النص باستعمال الخاصية lable مع العنصر او الوسم <commant> (

بعد تحديد اسم تعريفي للعنصر<menu>، نقوم باضافة مجموعة من الاوامر التي يستطيع المستعمل استدعاءها بتعشيش عناصرالـ <command> في عنصرالـ.<menu>

العنصر <command>يتطلب وجود الخاصية lable و التي تاخذ قيمة نصية تختارها انت ستكون اسم امر معين سيظهر للمستعمل.

و بهذا فان المستعمل يستطيع ان يرى قائمة من اسماء الاوامر المحددة في الخاصية lable في عناصرالـ <command>المعششة في عنصر الـ <menu> بالنقر بالزر الايمن للفارة على العنصر الذي اضفنا له الخاصية contextmenu.

في عنصر الـ <command> يتم اضافة خواص حدثية معينة )الخواص الحدثية للـ HTML ستشرح لاحقا( مثل الخاصية onclick لتنفيذ سكريبتات معينة او شيء من هذا القبيل عند قيام المستعمل بالنقر على احد اسماء الاوامر .

اعرف بان هذا مربك للمبتدئ، و لكن باستمرارك في قراءة هذا الكتاب ستتضح الامور انشاء الله.

هذه الخاصية جديدة في الـ HTML5.

التركيب :

<العنصر contextmenu="الاسم التعريفي للقائمة"> contextmenuNew

<p dir="rtl">هذا النص سيظهر في المتصفح مكتوب من اليمين الى اليسار</p> Ltr : اتجاه النصوص من اليسار الى اليمين، و هي القيمة الافتراضية لهذه الخاصية.

Rtl : اتجاه النصوص من اليمين الى اليسار.

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

الاختلاف بين HTML4.01 و HTML5 :

في الـ HTML5 يمكن استعمال هذه الخاصية على أي عنصرHTML، اما في الـ HTML4.01 فلا يمكن استعماله مع الوسوم : <base>, <br>, <frame>, <frameset>, <hr> <iframe>, <param>, <script>.

التركيب :

<العنصر dir="ltr|rtl|auto"> dir

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

شرح سطحي للمثال :

النص الذي تراه بالون الازرق تمت اضافته لتحديد الستايل للمربع و اتجاه عرض العناصر )من اليمين الى اليسار(.

النص الذي تراه باللون البني هو نص Java.

<!DOCTYPE HTML>

<html>

<head>

<style type="text/css">

#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}

body{direction:rtl;}

</style>

<script>

function allowDrop(ev)

{

ev.preventDefault();

}

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

function drop(ev)

{

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

ev.preventDefault();

}

</script>

</head>

<body>

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

<br>

<p id="drag1" draggable="true" ondragstart="drag(event)">هذا نص قابل للسحب و الاسقاط داخل المربع اعلاه.</p>

</body>

</html>

True : تحدد ان العنصر قابل للسحب.

False : تحدد ان العنصر غير قابل للسحب.

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

هذه الخاصية جديدة في الـ HTML5.

التركيب :

<العنصر draggable="true|false|auto">

draggableNew

Internet explorer8 و الاصدارات التي قبله لا تدعم هذه الخاصية.

يمكنك اضافة هذه الخاصية الى المثال السابق في السطر :

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

ولكنك لن ترى تاثيره في متصفحك، فهو غير مدعوم حاليا في المتصفحات الرائدة. <div dropzone="copy"></div> Copy نسخ البيانات المسحوبة في منطقة الاسقاط.

Move نقل البيانات المسحوبة الى منطقة جديدة هي منطقة الاسقاط.

Link البيانات المسقطة ستكون وصلة او رابط للبيانات الاصلية.

هذه الخاصية تحدد ان كانت البيانات القابلة للسحب )تاخذ القيمة true في الخاصية draggable المشروحة سابقا( سيحدث لها عملية : نسخ، او نقل، او وصل)ربط( عند اسقاطها على عنصر ما.

تاثير هذه الخاصية في المثال السابق سيكون كما يلي :

في حالة القيمة copy، يتم اسقاط نسخة من النص داخل المربع مع بقاء النص الاصلي في مكانه.

في حالة القيمة move، يتم نقل النص من مكانه الى المربع مع اختفاء النص من مكانه الاصلي.

في حالة القيمة link، سينتج عن النص المسقط في المربع وصلة او رابط للنص الاصلي، أي ان نقر المستعمل على النص المسقط في المربع سينقله للنص الاصلي.

هذا الوسم جديد في الـ HTML5.

التركيب :

<العنصر dropzone="copy|move|link"> dropzoneNew

كما يمكنك ان ترى في المثال، فان العنصر :

<p hidden>هذا النص لن يظهر في المتصفح</p>

لا يظهر في المتصفح لانه تمت اضافة الخاصية hidden له. <p >هذا النص سيظهر في المتصفحح</p>

<p hidden>هذا النص لن يظهر في المتصفح</p> لا توجد قيم في الـ HTML

و تعطى القيمة hidden في الـ XHTML. هذه الخاصية تعتبر خاصية منطقية، والمتصفحات لا تعرض العناصر التي تحدد لها هذه الخاصية، فهذه الخاصية تستعمل لاخفاء عنصر معين و اظهاره عند تتوفر شروط معينة )كالتاشير على مربع خيار في استمارة مثلا)ستدرس الاستمارات لاحقا (، وعندها يستطيع نص الـ Java حذف هذه الخاصية و جعل العنصر ظاهر، و العكس بالعكس، فيمكن ان يضيف نص الـ Java هذه الخاصية لعنصر ما لاخفاءه عند توفر شروط معينة.

هذه الخاصية جديدة في الـ HTML.

الفرق بين الـ HTML و الـ XHTML :

في الـ XHTML يمنع كتابة الخصائص من دون قيمة، وهذه الخاصية تعرف في الـ XHTML كما يلي : hidden="hidden"> العنصر <

التركيب :

<العنصر hidden> hiddenNew

قبل النقر على

بعد النقر على

في عنصر الستايل الذي يظهر باللون الازرق تم تحديد اللون الاحمر للعناصر ذات الاسم التعريفي العنوان في خاصية الـ id.

و نص الـ Java الذي يظهر باللون البني يقوم بتغيير النص ذو الاسم التعريفي العنوان في خاصية الـ id الى : استمتع بتعلم الـ HTML <html>

<head>

<style>

# العنوان

{

color:red;

}

</style>

<script>

function displayResult()

{

document.getElementById("العنوان").innerHTML="استمتع بتعلم الـ HTML";

}

</script>

</head>

<body dir="rtl">

<h1 id="العنوان">مرحبا</h1>

<button onclick="displayResult()">غير النص</button>

</body>

</html> اسم تعريفي : يجب ان يكون فريدا للعنصر، و التسمية تخضع للقواعد التالية :

يجب ان يتكون من رمز واحد على الاقل.

لا يجب ان يحتوي فراغات بين الاحرف.

في الـ HTML، جميع القيم حساسة لحالة الاحرف.

هذه الخاصية تحدد اسم تعريفي فريد و مميز لعنصرالـ HTML )يجب ان يكون الاسم التعريفي المعطى كقيمة لهذه الخاصية فريدا في وثيقة الـ HTML فاستعماله مع عدة عناصر يسبب اخطاء في عرض هذه العناصر(، هذه الخاصية تستعمل غالبا للاشارة الى ستايل في نشرة الستايل، وباستعمال نصوص الـJava )عبر الـ HTML DOM ( يتم التاثير على العنصر الحامل للاسم التعريفي المحدد في الخاصية id.

الاختلاف بين الـ HTML4.01 و الـ HTML5 :

في الـ HTML5 يمكن استعمال هذه الخاصية على أي عنصر، اما في الـ HTML4.01 فلا يمكن استعماله مع العناصر: <base>, <head>, <html>, <meta>, <param>, <script> <style>و. <title>

كما ان الـ HTML4.01 اكثر تقييدا لمحتوى قيم الخاصية id، فعلى سبيل المثال لا يمكن ان تبدا القيمة برقم.

التركيب :

<العنصر id="الاسم التعريفي"> id

<p lang="fr">ceci est un paragraphe.</p> شفرة اللغة لمحتوى العنصر، اليك بعض الشفرات :

Ar : العربية.

Fr : الفرنسية.

En : الانجليزية.

يمكنك ان تجد المزيد من الشفرات في الانترنت. هذه الخاصية تحدد لغة محتوى العنصر.

الاختلاف بين الـ HTML4.01 و الـ HTML5 :

في الـ HTML5 يمكن استعمال هذه الخاصية على أي عنصر، اما في الـ HTML4.01 فلا يمكن استعماله مع العناصر : <base>, <br>, <frame>, <frameset>, <hr>, <iframe> <param>, <script>.

التركيب :

<العنصر lang="شفرة اللغة">

lang

ما يحدث عند كتابة نص خاطئ مكان هذا النص :

ملاحظة : قد لا تعمل هذه الخاصية على اللغة العربية في بعض المتصفحات.

<p contenteditable="true" spellcheck="true">هذا النص سيتم التدقيق في تهجيته.</p> True : الفحص و التدقيق في تهجية و قواعد لغة العنصر.

False : عدم فحص العنصر.

هذه الخاصية تحدد ان كانت تهجية و قواعد اللغة للعنصر سيتم فحصها و التدقيق فيها للتاكد منها او لا، فاذا كان هناك خطا في تهجية العنصر سيظهر تحتها خط احمر، وما يلى يمكن فحصه و التدقيق في تهجيته :

• قيم النصوص في عناصر الـ <input> باستثناء كلمات السر)عناصر <input> هي احد عناصر الاستمارات، ستتعلمها في دروس لاحقة(.

• النص في عنصر <textarea>، )و هو احد عناصر الاستمارات(.

• النصوص القابلة للتعديل )مثل النصوص المحتوات في العناصر التى تعطى لها القيمة true في الخاصية)contenteditable ( (contenteditable="true".

هذه الخاصية جديدة في الـ HTML5

التركيب :

<العنصر spellcheck="true|false"> spellcheckNew

هذه الخاصية غير مدعومة في Internet Explorer 9 و ما قبلها من الاصدارات.

<html>

<head>

</head>

<body dir="rtl">

<h1 style="color:blue;text-align:center">هذا عنوان</h1>

<p style="color:green">هذا نص.</p>

</body>

</html> تعريفات الستايل : و هي عبارة عن خصائص و قيم CSS )تصريحات (CSS، يمكن استعمال تصريح واحد، و اذا تعددت التصريحات فيجب الفصل بينها بفاصلة منقوطة (;)، مثل :

<العنصر style="color :red ;text-align :center">

للعلم فقط :

)الخاصية+القيمة( تسمى تصريح في الـ CSS، مثل التصريح :

text-align :center يجب ان تعلم ان هناك ثلاث طرق لادراج خواص الـ CSS في وثيقة الـ HTML، و الطريقة الثالثة هي المعنية بالخاصية style، و هذه الطرق هي :

باستعمال نشرات الستايل الخارجية : وهي الطريقة المثالية لتطبيق خصائص الستايل على عدة صفحات او موقع ويب باكمله، و ذلك بربط نشرات الستايل بكل صفحة من الموقع باستعمال الوسم <link> المعشش في عنصر الـ <head>.

باستعمال نشرات الستايل الداخلية : و هي تستعمل عند انفراد احدى الوثائق بستايل خاص بها، وفي هذه الطريقة يتم تعريف الستايل الداخلي في قسم الـ head من صفحة الـ HTML بتشيش عنصر الـ <style> في في عنصر الـ <html>.

باستعمال خصائص الستايل على الوسم المعني مباشرة، ويكون ذلك بكتابة خصائص الستايل داخل وسم البداية للعنصر، وذلك باضافة الخاصية style التي تكون قيمها عبارة عن خصائص CSS، و هذه الطريقة لها اولوية في التنفيذ، فهي التي ستظهر في المتصفح حتى و ان تم ربط الصفحة التي تحتوي الوسم المعني بنشرات ستايل خارجية او داخلية تتضمن قيم خصائص تختلف عن قيم الخصائص المدرجة في الوسم المعني.

الاختلاف بين HTML4.01 و HTML5 :

في الـ HTML5 يمكن استعمال هذه الخاصية على أي عنصر، اما في الـ HTML4.01 فلا يمكن استعماله مع العناصر : <base>, <head>, <html>, <meta>, <param>, <script> <style>, <title>.

التركيب :

<العنصر style="تعريفات الستايل"> style

كما ستلاحظ من تجربة هذا المثال بنفسك، فـ موقع google هو اول ما يتم التاشير عليه في صفحة الموقع بالضغط على زر الـ tab لانه ياخذ القيمة 1 في الخاصية tabindex. <a href="http://www.w3schools.com/" tabindex="2">موقع w3schools</a><br/>

<a href="http://www.google.com/" tabindex="1">موقع google</a><br/>

<a href="http://www.microsoft.com/" tabindex="3">موقع microsoft</a> قيمة عددية : الرقم 1 هو اصغر قيمة عددية يمكن اعطاؤها لعنصر الـ HTML. في حالة غياب الفارة لاي سبب كان، تحتاج لاستغلال الكمبيوتر باستعمال لوحة المفاتيح فقط، و زر الـ tab هو احد اهم الازرار للانتقال بين الخيارات او الملفات او...الخ، خاصية tabindex تستعمل لتحديد الاولوية او الترتيب في التنقل بين عناصر الـ HTML عند تصفح صفحة الويب، فباعطاء هذه الخاصية لعنصر HTML معين واعطائها القيمة "1" مثلا فسيصبح لهذا العنصر اولوية عند التنقل بالضغط على زر tab )هذا الزر مرسوم عليه سهمين متعاكسين في الاتجاه في لوحة المفاتيح.(

الاختلاف بين HTML4.01 و HTML5 :

في الـ HTML5 يمكن استعمال هذه الخاصية على أي عنصر، اما في الـ HTML4.01 فيمكن استعماله مع هذه العناصر فقط : <a>, <area>, <button>, <input>, <object> <select>, <textarea>.

التركيب :

<العنصر tabindex="قيمة عددية"> tabindex

كما ستلاحظ من تجربة هذا المثال بنفسك، فانه بوضع مؤشر الفارة على www.w3schools.com سيظهر النص الموقع التعليمي الاول في تطوير المواقع

<p title="الموقع التعليمي الاول في تطوير المواقع">www.W3Schools.com</p> قيمة نصية : وتكون عبارة عن نص يعطي معلومات اضافية حول العنصر تظهر عند مرور الفارة على هذا الاخير. هذه الخاصية تحدد معلومات اضافية حول العنصر، عند اضافة هذه الخاصية الى عنصر ما و اعطائها قيمة نصية معينة )تكون عبارة عن معلومات اضافية حول العنصر( فان المرور بمؤشر الفارة على هذا العنصر سيجعل هذا النص يظهر للمستعمل.

الاختلاف بين HTML4.01 و HTML5 :

التركيب :

<العنصر title=" نص">

title

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

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

الخواص الحدثية للـ HTML :

في الـ HTML4 تم اضافة القدرة على جعل احداث معينة تنطلق كنتيجة لافعال او اعمال او احداث معينة تتم في المتصفح ، كجعل نص Java )سكريبت الجافا( يبدا في التنفيذ عند نقر المستعمل على عنصر ما. لن يكون بمقدورك استعمال هذه الخواص دون تعلم الـ JavaScript.

في الجدول اسفله، ستجد الخواص الحدثية التي يمكنك اضافتها الى عناصر الـ HTML لتعريف او تحديد الاجراءات المرافقة لحدث معين.

: هذا الرمز يعني ان الخاصية جديدة في الـ HTML5.

المتصفح اللذي يظهرمشطوب مثل ) ( يعني انه لا يدعم الخاصية، وهذا الامر ساري المفعول بسنة 2013 و قد يتغير هذا في الاصدارات الاحدث من المتصفح.

خواص الحدث للنافذة: )ويقصد بالنافذة ; نافذة المتصفح (

و هي خواص يتم اطلاقها كاستجابة لحدوث افعال او اعمال معينة على نافذة المتصفح، و يتم وضعها او تطبيقها على الوسم <body>.

القيم التي تاخذهاهذه الخواص هي عبارة عن نصوص Java.

كيفية ظهوره في المتصفح المثال شرحها الخاصية

الرسالة التي تظهر في المتصفح من الصورة اعلاه معرفة في نص الـ Java الظاهر باللون البني في المثال والذي يتم تنفيذه بعد ظهور صندوق الحوار لعملية الطبع والتاكيد عليه بالنقر على ok لبدا عملية الطبع، و تم ربط السكريبت )نص الـ Java ( بعملية الطبع بالخاصية onafterprint. <!DOCTYPE html>

<html>

<head>

<script>

function printmsg()

{

alert("الان يتم طباعة هذه الوثيقة");

}

</script>

</head>

<body onafterprint="printmsg()">

<p>حاول طباعة هذه الوثيقة بالضغط على CTRL+P</p>

</body>

</html>

يتم اطلاق هذه الخاصية وتنفيذ السكريبت المعطى كقيمة لهذه الخاصية بعد وضع المستعمل الصفحة في حالة الطبع )من ادوات المتصفح او بالضغط على CTRL+P في لوحة المفاتيح( و بعد ظهور مربع الحوار الخاص بعملية الطبع، هذه الخاصية تستعمل عادة مع الخاصية onbeforeprint.

هذه الخاصية جديدة في الـ html5.

التركيب :

<العنصر onafterprint="السكريبت"> onafterprintNew

في InternetExpolorer يظهر تاثير هذه الخاصية قبل ظهور مربع الحوار لعملية الطبع، وليس بعده.

الرسالة التي تظهر في المتصفح من الصورة اعلاه معرفة في نص الـ Java الظاهر باللون البني في المثال والذي يتم تنفيذه قبل ظهور صندوق الحوار لعملية الطبع، وبالنقر على ok في الرسالة يظهر صندوق الحوار، و تم ربط السكريبت بعملية الطبع بالخاصية onbeforeprint.

<!DOCTYPE html>

<html>

<head>

<script>

function printmsg()

{

alert("سيتم طباعة هذه الوثيقة");

}

</script>

</head>

<body onbeforeprint="printmsg()">

<p>حاول طباعة هذه الوثيقة بالضغط على CTRL+P</p>

</body>

</html> يتم اطلاق هذه الخاصية و تنفيذ السكريبت مباشرة بعد وضع المستعمل الصفحة في حالة الطبع )من ادوات المتصفح او بالضغط على CTRL+P في لوحة المفاتيح(

ولكن قبل ظهور مربع الحوار لعملية الطبع، هذه الخاصية تستعمل عادة مع الخاصية onafterprint.

هذه الخاصية جديدة في الـ HTML5.

التركيب :

<العنصر onbeforeprint="السكريبت"> onbeforeprintNew

عندما تحاول مغادرة الصفحة بالنقر على الوصلة، او تقوم بتحديث الصفحة، يتم اطلاق الخاصية و تفعيل السكريبت فتظهر لك الرسالة : انت الان تغادر هذه الصفحة. <!DOCTYPE html>

<html>

<head>

<script>

function printmsg()

{

alert("انت الان تغادر هذه الصفحة");

}

</script>

</head>

<body onbeforeunload="printmsg()">

<a href="www.google.com">انقر على هذه الوصلة او قم بتحديث الصفحة</a>

</body>

</html> لفهم هذه الخاصية يجب ان تفهم اولا ان المتصفح يقوم بتحميل عناصر الـ HTML الواحدة تلو الاخرى عند زيارة صفحة معينة على النت، وعند مغادرة الصفحة بالنقر على وصلة ما في الصفحة مثلا، او تسليم استمارة، او تحديث الصفحة )اعادة التحميل(، وما شابه ذلك، يقوم المتصفح بتفريغ الصفحة لتحميل العناصر من جديد في حالة التحديث، او تحميل عناصر الصفحة التي تحاول زيارتها بالنقر على وصلة ما.

يتم اطلاق هذه الخاصية و تنفيذ السكريبت قبل تفريغ الوثيقة.

هذه الخاصية جديدة في الـ HTML5.

التركيب :

<العنصر onbeforeunload="السكريبت"> onbeforeunloadNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

لا داعي للمثال، فيمكن فهم هذه الخاصية بفهم المثالين السابقين. يتم اطلاق هذه الخاصية و تنفيذ السكريبت عندما يحدث خطا ما. onerrorNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

موقع w3schools لم يعطي أي امثلة. يتم اطلاق هذه الخاصية و تنفيذ السكريبت عندما تتغير الوثيقة. onhaschangeNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

<!DOCTYPE html>

<html>

<head>

<script>

function load()

{

alert("انتهى من تحميل الصفحة");

}

</script>

</head>

<body onload="load()">

<h1>لا اعتقد ان هناك داع لوجود مثال</h1>

</body>

</html يتم اطلاق هذه الخاصية و تنفيذ السكريبت عند الانتهاء من تحميل الصفحة، يتم استعمالها عادة مع العنصر<body> لتنفيذ السكريبت بعد الانتهاء من تحميل كافة محتويات الصفحة بما في ذلك الصور، و ملفات الـ JavaScript، و ملفات الـ CSS، الخ...

لا يوجد اختلاف في استعمال هذه الخاصية بين HTML5 و HTML4.01.

التركيب :

<العنصر onload="السكريبت"> onload

لا يوجد. موقع w3schools لم يعطي أي امثلة. يتم اطلاق هذه الخاصية و تنفيذ السكريبت عند اطلاق الرسالة. onmessageNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

لا يوجد. موقع w3schools لم يعطي أي امثلة. يتم اطلاق هذه الخاصية و تنفيذ السكريبت في حال ما اذا انقطع اتصال الانترنت عن الوثيقة. onofflineNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

لا يوجد. موقع w3schools لم يعطي أي امثلة. يتم اطلاق هذه الخاصية و تنفيذ السكريبت عند عودة اتصال الوثيقة بالانترنت بعد الانقطاع. ononlineNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

لا يوجد. موقع w3schools لم يعطي أي امثلة. يتم اطلاق هذه الخاصية و تنفيذ السكريبت عند اخفاء النافذة. onpagehideNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

لا يوجد. موقع w3schools لم يعطي أي امثلة. يتم اطلاق هذه الخاصية و تنفيذ السكريبت عندما تصبح النافذة ظاهرة بعدما كانت مخفية. onpageshowNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

لا يوجد. موقع w3schools لم يعطي أي امثلة. يتم اطلاق هذه الخاصية و تنفيذ السكريبت عندما يتغير تاريخ النافذة. onpopstateNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

لا يوجد. موقع w3schools لم يعطي أي امثلة. يتم اطلاق هذه الخاصية و تنفيذ السكريبت عندما تؤدي الوثيقة عملية اعادة او تجديد. onredoNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

<!DOCTYPE html>

<html>

<head>

<script>

function showMsg()

{

alert("لقد قمت بتغيير ابعاد نافذة المتصفح");

}

</script>

</head>

<body onresize="showMsg()">

<p>حاول تغيير ابعاد النافذة.</p>

</body>

</html> يتم اطلاق هذه الخاصية و تنفيذ السكريبت عندما تتغير ابعاد نافذة المتصفح.

لا يوجد اختلاف في استعمال هذه الخاصية بين HTML5 و HTML4.01.

التركيب :

<العنصر onresize="السكريبت">

onresizeNew

لا يوجد. موقع w3schools لم يعطي أي امثلة. يتم اطلاق هذه الخاصية و تنفيذ السكريبت عند تزويد منطقة تخزين للويب باخر المعلومات او نقول عند القيام بتحديثها. onstorageNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

لا يوجد. موقع w3schools لم يعطي أي امثلة. يتم اطلاق هذه الخاصية و تنفيذ السكريبت عندما تؤدي الوثيقة عملية الغاء. onundoNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

<!DOCTYPE html>

<html>

<head>

<script>

function سكريبت()

{

alert("شكرا على زيارتك لهذا الموقع");

}

</script>

</head>

<body onunload="سكريبت()">

<h1>اهلا في الموقع</h1>

<p>لاعادة تحميل الصفحة F5 اغلق هذه النافذة او اضغط على</p>

</body>

</html> يتم اطلاق هذه الخاصية و تنفيذ السكريبت بعد الانتهاء من تفريغ الصفحة او اغلاق نافذة المتصفح، أي ان الخاصية يتم اطلاقها عندما يقوم المستعمل بالنقر على وصلة او تسليم استمارة او اغلاق نافذة المتصفح او ...الخ، لان الاحداث السابق ذكرها كلها تؤدي الى تفريغ الصفحة.

هناك شبه بين الخواص onbeforeunload و onunload و onload ، اليك توضيح بسيط كي لا تختلط عليك الامور :

يتم اطلاق الخاصية onbeforeunload قبل قيام المتصفح بتفريغ الصفحة فيتم تنفيذ السكريبت.

يتم اطلاق الخاصية onunload بعد تفريغ نافذة المتصفح فيتم تنفيذ السكريبت.

يتم اطلاق الخاصية onload بعد الانتهاء من اعادة التحميل مباشرة فيتم تنفيذ السكريبت.

لا يوجد اختلاف في استعمال هذه الخاصية بين HTML5 و HTML4.01.

التركيب :

<العنصر onunload="السكريبت">

onunload

خواص احداث الاستمارات :

هذه الخواص تنطلق استجابة لحدوث اعمال او افعال معينة داخل استمارة الـ HTML، ورغم انه يمكن تطبيقها على معظم عناصر الـ HTML، الا انها تستعمل غالبا في عناصر الاستمارة.

القيم التي تاخذهاهذه الخواص هي عبارة عن نصوص Java.

كيفية ظهوره في المتصفح المثال شرحها الخاصية

قبل فقدان التركيز : بعد فقدان التركيز :

<!DOCTYPE html>

<html>

<head>

<script>

function upperCase()

{

var x=document.getElementById("اسم").value

document.getElementById("اسم").value=x.toUpperCase()

}

</script>

</head>

<body>

<p>ادخل اسما بالحروف الاتينية، ثم انقر بالفارة على مكان اخر من الصفحة.</p>

ادخل الاسم: <input type="text" name="اسم" id="اسم" onblur="upperCase()">

</body>

</html> يتم اطلاق هذه الخاصية و تنفيذ السكريبت في اللحضة التي يتم فيها فقدان التركيز على العنصر، وللتوضيح فقط ; مثلا، عندما يقوم المستعمل بالنقر بالفارة على حقل لادخال المعلومات في استمارة فهو سيجعل هذا الحقل -و الذي يعتبر عنصر HTML- نشطا أي مستعد لاستقبال البيانات و نقول ان المستعمل قام بالتركيز على العنصر، و يتم فقدان التركيز على هذا العنصر بمجرد نقر المستعمل على عنصر اخر او أي مكان في الصفحة.

هذه الخاصية تستعمل غالبا للمصادقة على ترميز المعلومات المدخلة في الاستمارة، فمثلا ; تجعل رسالة تظهر للمستعمل عندما يخطئ في كتابة معلومة معينة داخل حقل استمارة بمجرد انتقال المستعمل الى أي عنصر اخر او مكان فارغ في الصفحة )أي بمجرد فقدان التركيز على العنصر(، او جعل حروف نص مدخل في عنصر حقل استمارة تتحول من حالة الاحرف الصغيرة الى الاحرف الكبيرة بمجرد فقدان التركيز على العنصر كما ستلاحظ من تجربة المثال.

الخاصية onblur هي الخاصية المعاكسة للخاصية onfocus .

لا يوجد اختلاف في استعمال هذه الخاصية بين HTML5 و HTML4.01.

التركيب :

<العنصر onblur ="السكريبت"> onblur

قبل تغيير النص داخل حقل ادخال المعلومة : بعد تغيير النص داخل حقل ادخال المعلومة :

<!DOCTYPE html>

<html>

<head>

<script>

function checkField(val)

{

alert("تغيرت القيمة المدخلة، القيمة الجديدة هي: " + val);

}

</script>

</head>

<body>

<p>غير النص في حقل الادخال، ثم انقر بالفارة خارج الحقل لمشاهدة تاثير الخاصية.</p>

ادخل نصا ما: <input type="text" name="نص" value="مرحبا" onchange="checkField(this.value)">

</body>

</html> يتم اطلاق هذه الخاصية و تنفيذ السكريبت في اللحضة التي تتغير فيها قيمة العنصر، و اضيف ; فقدان التركيز على العنصر بعد تغير قيمته ضروري لتنفيذ السكريبت.

يمكن استعمال هذه الخاصية مع العناصر : <input>, <textarea>, <select>.

لا يوجد اختلاف في استعمال هذه الخاصية بين HTML5 و HTML4.01.

التركيب :

<العنصر onchange ="السكريبت"> onchange

لا يوجد. موقع w3schools لم يعطي أي امثلة. اذا كنت تتذكر الخاصية العامة contextmenu، يتم اطلاق الخاصية oncontextmenu بمجرد اطلاق الخاصية contextmenu فيتم تنفيذ السكريبت، أي بمجرد ظهور القائمة التي تحتوي الخيارات) اسماء الاوامر(. OncontextmenuNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

يتحول لون خلفية الحقل اللذي يتم التركيز عليه الى الاصفر.

ملاحظة : الدالة هي جزء من سكريبت يقوم بعمل معين. <!DOCTYPE html>

<html>

<head>

<script>

function setStyle(x)

{

document.getElementById(x).style.background="yellow";

}

</script>

</head>

<body">

<p>يتم اطلاق الدالة او نقول تنفيذ السكريبت عندما يتم التركيز على احد حقول الادخال، الدالة او السكريبت يقوم بتغيير لون خلفية حقل الادخال.</p>

الاسم:<input type="text" id="حقل1" onfocus="setStyle(this.id)"><br>

اللقب:<input type="text" id="حقل2" onfocus="setStyle(this.id)">

</body>

</html> يتم اطلاق هذه الخاصية و تنفيذ السكريبت مباشرة بعد التركيز على العنصر، تستعمل هذه الخاصية غالبا مع الوسوم .<input>, <select>, <a>، هذه الخاصية هي الخاصية المضادة او العكسية للخاصية Onblur.

لا يمكن استعمال هذه الخاصية مع الوسوم : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> <title>.

لا يوجد اختلاف في استعمال هذه الخاصية بين HTML5 و HTML4.01.

التركيب :

<العنصر onfocus ="السكريبت"> onfocus

لا يوجد. موقع w3schools لم يعطي أي امثلة. يتم اطلاق هذه الخاصية و تنفيذ السكريبت عندما يحدث تغييرعلى مستوى الاستمارة. OnformchangeNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

لا يوجد. موقع w3schools لم يعطي أي امثلة. يتم اطلاق هذه الخاصية و تنفيذ السكريبت عند ادخال معلومات في الاستمارة من قبل المستعمل. OnforminputNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

لا يوجد. موقع w3schools لم يعطي أي امثلة. يتم اطلاق هذه الخاصية و تنفيذ السكريبت عندما يتم ادخال بيانات الى عنصر HTML من قبل المستعمل. OninputNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

لا يوجد. موقع w3schools لم يعطي أي امثلة. يتم اطلاق هذه الخاصية و تنفيذ السكريبت عندما يكون هناك بطلان )من باطل و المقصود غير صالح( على مستوى العنصر. OninvalidNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

لا يوجد.

موقع w3schools لم يعطي أي امثلة.

يتم اطلاق هذه الخاصية و تنفيذ السكريبت عند النقر على زر reset في استمارة.

هذه الخاصية غير مدعومة في الـ HTML5. Onreset

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

عند قيامك بتحديد انتقائي للنص المكتوب في حقل الادخال كما يظهر في الصورة اعلاه)النص الذي يظهر بخلفية زرقاء هو النص المحدد انتقائيا(، يتم تنفيذ السكريبت و تظهر رسالة للمستعمل كما ترى في الصورة اسفله :

<!DOCTYPE html>

<html>

<head>

<script>

function showMsg()

{

alert("لقد قمت بتحديد انتقائي لهذا النص");

}

</script>

</head>

<body>

Some text: <input type="text" value="قم بتحديد انتقائي لهذا النص" onselect="showMsg()">

<p>عند التحديد الانتقائي للنص المكتوب في حقل الادخال او جزء منه، يقوم السكريبت باظهار رسالة.</p>

</body>

</html> يتم اطلاق هذه الخاصية و تنفيذ السكريبت عندما يقوم المستعمل بتحديد انتقائي لنص او جزء منه في عنصر معين. ويقصد بالتحديد الانتقائي تلك العملية التي يقوم بها المستعمل لتحديد نص او جزء منه من اجل نسخه او حذفه او قصه...الخ.

يمكن استعمال هذه الخاصية مع : <input type="file">, <input type="password">, <input type="text">, <keygen>, <textarea>.

توضيح :

<input type="password"> : المقصود هنا ان هذه الخاصية يمكن استعمالها مع العنصر <input> عندما تاخذ معه الخاصية type القيمة password.

لا يوجد اختلاف في استعمال هذه الخاصية بين HTML5 و HTML4.01.

التركيب :

<العنصر onselect ="السكريبت"> onselect

<!DOCTYPE html>

<html>

<head>

<script>

function checkForm()

{

alert("تم تسليم الاستمارة");

}

</script>

</head>

<body>

<form action="برنامج يقوم بمعالجة البيانات المستلمة" onsubmit="checkForm()">

الاسم: <input type="text" name="الحقل1"><br>

اللقب: <input type="text" name="الحقل2"><br>

<input type="submit" value="تسليم">

<p>عند النقر على زر التسليم، الدالة تجعل رسالة تظهر لمستعمل checkForm()يتم اطلاق الدالة </p>

</body>

</html> يتم اطلاق هذه الخاصية و تنفيذ السكريبت عند تسليم استمارة الـ HTML، أي عند النقر على زر التسليم في الاستمارة.

هذه الخاصية تستعمل مع الوسم <form> فقط.

لا يوجد اختلاف في استعمال هذه الخاصية بين HTML5 و HTML4.01.

التركيب :

<العنصر onsubmit ="السكريبت"> onsubmit

خواص احداث لوحة المفاتيح :

و هي خواص تنطلق بضغط المستعمل على احد ازرار لوحة المفاتيح.

القيم التي تاخذهاهذه الخواص هي عبارة عن نصوص Java.

ملاحظة :

الاولوية في اطلاق الخواص وتنفيذ السكريبتات )ويعني النظام او الترتيب( عند استعمال اكثر من خاصية واحدة من خواص احداث لوحة المفاتيح مع عنصر واحد تكون كما يلي :

1. Onkeydown

2. Onkeypress

3. Onkeyup

لا يمكن استعمال خواص لوحة المفاتيح مع : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title>.

لا يوجد اختلاف في استعمال خواص لوحة المفاتيح بين HTML5 و HTML4.01.

شرحها الخاصية

ملاحظة :

هذه الخاصية تعمل مع جميع المفاتيح، كما ان رمز المفتاح الذي يظغط علية المستعمل يظهر في حقل الادخال قبل تفعيل السكريبت.

<!DOCTYPE html>

<html>

<head>

<script>

function displayResult()

{

var x;

if(window.event) // IE8 and earlier

{

x=event.keyCode;

}

else if(event.which) // IE9/Firefox/Chrome/Opera/Safari

{

x=event.which;

}

var keychar=String.fromCharCode(x);

alert(keychar + " لقد قمت بالضغط على المفتاح");

}

</script>

</head>

<body>

<p> بعد تنشيط عنصر حقل الادخال بالنقرفيه بمؤشر الفارة، و بمجرد ضغط المستعمل على احد المفاتيح يتم اطلاق الدالة و تنفيذ السكريبت، فتظهر رسالة تخبر المستعمل بالمفتاح الذي ضغط علية. </p>

<input type="text" onkeydown="displayResult()">

</body>

</html> يتم اطلاق هذه الخاصية و تفعيل السكريبت عندما يقوم المستعمل بالضغط على أي مفتاح من لوحة المفاتيح.

التركيب :

<العنصر onkeydown ="السكريبت"> onkeydown

ملاحظة :

رغم ان هذه الخاصية شبيهة بالخاصية onkeydown، فهي تختلف عنها في انها لا تعمل عند الضغط على بعض المفاتيح في بعض المتصفحات مثل ; ALT, CTRL, SHIFT, ESC.

الرمز الذي ضغط عليه المستعمل يظهر في حقل الادخال بعد تاكيد المستعمل على الرسالة بالنقر على OK. <!DOCTYPE html>

<html>

<head>

<script>

function displayResult()

{

var x;

if(window.event) // IE8 and earlier

{

x=event.keyCode;

}

else if(event.which) // IE9/Firefox/Chrome/Opera/Safari

{

x=event.which;

}

keychar=String.fromCharCode(x);

alert(keychar + " لقد قمت بالضغط على المفتاح");

}

</script>

</head>

<body>

<p>بعد تنشيط عنصر حقل الادخال بالنقرفيه بمؤشر الفارة، و بمجرد ضغط المستعمل على احد المفاتيح يتم اطلاق الدالة و تنفيذ السكريبت، فتظهر رسالة تخبر المستعمل بالمفتاح الذي ضغط علية. </p>

<input type="text" onkeypress="displayResult()">

</body>

</html> يتم اطلاق هذه الخاصية و تفعيل السكريبت عندما يقوم المستعمل بالضغط على مفتاح من لوحة المفاتيح، هذه الخاصية تختلف عن الخاصية onkeydown في ان الحدث لا يتم اطلاقه من اجل جميع المفاتيح وفي جميع المتصفحات، فمثلا ; هذه الخاصية لن يتم اطلاقها عند ضغط المستعمل على المفاتيح ALT, CTRL, SHIFT ESC، فاذا كانت غايتك هي اكتشاف ان كان المستعمل ضغط على مفتاح ما فقط، فمن الافظل استعمال الخاصية onkeydown لانها تعمل مع جميع المفاتيح.

التركيب :

<العنصر onkeypress ="السكريبت"> onkeypress

الحروف التي تقوم بتحريرها في حقل الادخال تتحول مباشرة من الحالة الصغيرة الى الكبيرة بفعل السكريبت. <!DOCTYPE html>

<html>

<head>

<script>

function displayResult()

{

var x=document.getElementById("fname");

x.value=x.value.toUpperCase();

}

</script>

</head>

<body>

<p> بعد تنشيط عنصر حقل الادخال بالنقرفيه بمؤشر الفارة، و بتحرير رمز او حرف من حروف لوحة المفاتيح فيه، يتم تنفيذ السكريبت و الذي يقوم بتحويل الرمز او الحرف من الحالة الصغيرة الى الحالة الكبيرة. </p>

اكتب اسمك: <input type="text" id="fname" onkeyup="displayResult()">

</body>

</html> يتم اطلاق هذه الخاصية و تفعيل السكريبت عندما يقوم المستعمل بالضغط على احد مفاتيح لوحة المفاتيح.

التركيب :

<العنصر onkeyup ="السكريبت"> onkeyup

خواص احداث الفارة :

و هي خواص تنطلق عند قيام المستعمل بعمل معين باستعمال الفارة.

القيم التي تاخذهاهذه الخواص هي عبارة عن نصوص Java.

كيفية ظهوره في المتصفح المثال شرحها الخاصية

قبل النقر على الزر المكتوب عليه : انسخ النص. بعد النقر.

<!DOCTYPE html>

<html>

<head>

<script>

function copyText()

{

document.getElementById("الحقل2").value=document.getElementById("الحقل1").value;

}

</script>

</head>

<body>

الحقل الاول: <input type="text" id="الحقل1" value="اكتب النص هنا"><br>

الحقل الثاني: <input type="text" id="الحقل2">

<br><br>

<button onclick="copyText()">انسخ النص</button>

</p>يتم اطلاق الدالة عند النقر على الزر المكتوب عليه : انسخ النص، فتقوم الدالة بنسخ النص من الحقل الاول الى الحقل الثاني.<p>

</body>

</html> يتم اطلاق هذه الخاصية عندما يقوم المستعمل بالنقر- مرة واحدة بالزر الايسر للفارة- على عنصر ما باستعمال الفارة.

لا يمكن استمال هذه الخاصية مع : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title>.

لا يوجد اختلاف في استعمال هذه الخاصية بين HTML5 و HTML4.01.

التركيب :

<العنصر onclick ="السكريبت"> onclick

نفس المثال السابق تقريبا، و الاختلاف الوحيد هو ان النص يتم نسخه من الحقل الاول الى الثاني بالنقر المزدوج على الزر المكتوب عليه : انسخ النص. <!DOCTYPE html>

<html>

<head>

<script>

function copyText()

{

document.getElementById("الحقل2").value=document.getElementById("الحقل1").value;

}

</script>

</head>

<body>

الحقل الاول: <input type="text" id="الحقل1" value="اكتب النص هنا"><br>

الحقل الثاني: <input type="text" id="الحقل2">

<br><br>

<button ondblclick="copyText()">انسخ النص</button>

</p>يتم اطلاق الدالة عند النقر المزدوج على الزر المكتوب عليه : انسخ النص، فتقوم الدالة بنسخ النص من الحقل الاول الى الحقل الثاني.<p>

</body>

</html> يتم اطلاق هذه الخاصية عندما يقوم المستعمل بالنقر المزدوج ) النقر مرتين بالزر الايسر للفارة ( على عنصر ما باستعمال الفارة.

لا يمكن استمال هذه الخاصية مع : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title>.

لا يوجد اختلاف في استعمال هذه الخاصية بين HTML5 و HTML4.01.

التركيب :

<العنصر ondblclick ="السكريبت"> ondblclick

لا يوجد. موقع w3schools لم يعطي أي امثلة. يتم اطلاق هذه الخاصية وتنفيذ السكريبت عند قيام المستعمل بسحب العنصر)العنصر القابل للسحب طبعا، راجع الخاصيتين العامتين draggable و dropzone (. ondragNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

لا يوجد. موقع w3schools لم يعطي أي امثلة. يتم اطلاق هذه الخاصية وتنفيذ السكريبت عند انتهاء عملية السحب. ondragendNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

لا يوجد. موقع w3schools لم يعطي أي امثلة. يتم اطلاق هذه الخاصية وتنفيذ السكريبت عند سحب العنصر للهدف )او المكان( المناسب )او المقبول( لاسقاطه. ondragenterNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

لا يوجد. موقع w3schools لم يعطي أي امثلة. يتم اطلاق هذه الخاصية وتنفيذ السكريبت عندما يغادر )او يترك( العنصر المكان المناسب )او الصحيح( لاسقاطه. ondragleaveNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

لا يوجد. موقع w3schools لم يعطي أي امثلة. يتم اطلاق هذه الخاصية وتنفيذ السكريبت اثناء قيام المستعمل بسحب العنصر و مروره بالعنصر عبر المكان المناسب )او الصحيح( لاسقاطه ، و المقصود انه عند توفر عدة اماكن للاسقاط و كل واحد منها يقبل اسقاط عنصر معين فيه، فبمجرد المرور بالعنصر اثناء سحبه على المكان الصحيح لاسقاطه يتم اطلاق الخاصية وتنفيذ السكريبت. ondragoverNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

لا يوجد. موقع w3schools لم يعطي أي امثلة. يتم اطلاق هذه الخاصية وتنفيذ السكريبت في بداية عملية عملية سحب العنصر. ondragstartNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

لا يوجد. موقع w3schools لم يعطي أي امثلة. يتم اطلاق هذه الخاصية وتنفيذ السكريبت عند اسقاط العنصر المسحوب. ondropNew

w3schools لم توضح دعم المتصفحات الرائدة لهذه الخاصية.

قبل النقر

عند الكبس على زر الفارة دون تحريره

عند تحرير زر الفارة

<!DOCTYPE html>

<html>

<head>

<script>

function mouseDown()

{

document.getElementById("p1").style.color="red";

}

function mouseUp()

{

document.getElementById("p1").style.color="green";

}

</script>

</head>

<body>

<p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()">

عند نقر زر الفارة الى اسفل على العنصر، يتم اطلاق الدالة mouseDown() و يتحول لون النص الى الاحمر، و عند تحرير زر الفارة )برفع الاصبع من على الزر( يتم اطلاق الدالة mouseUp() و يتحول لون النص الى الاخضر.

</p>

</body>

</html> يتم اطلاق الخاصية Onmousedown وتنفيذ السكريبت عند كبس زر الفارة الى الاسفل على العنصر، يعني عند الضغط على العنصر بزرالفارة الايسر و عدم رفع الاصبع، و من المثال تتضح الفكرة بشكل افضل.

يتم اطلاق الخاصية onmouseup وتنفيذ السكريبت عند تحرير زر الفارة من على العنصر.

لا يمكن استمال هاتين الخاصيتين مع : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title>.

ملاحظة :

النظام او الترتيب )الاولوية( في اطلاق الاحداث و تنفيذ السكريبتات للاحداث التي لها علاقة بالحدثين onmousedown و onmouseup عند كبس )او نقول الضغط( على الزر الايسر او الاوسط للفارة يكون كما يلي :

1. Onmousedown

2. Onmouseup

3. Onclick

النظام او الترتيب )الاولوية( في اطلاق الاحداث و تنفيذ السكريبتات للاحداث التي لها علاقة بالحدثين onmousedown و onmouseup عند كبس )او نقول الضغط( على الزر الايمن للفارة يكون كما يلي :

1. Onmousedown

2. Onmouseup

3. Oncontextmenu

لا يوجد اختلاف في استعمال هاتين الخاصيتين بين HTML5 و HTML4.01.

تركيب onmousedown :

<العنصر onmousedown="السكريبت">

تركيب onmouseup :

<العنصر onmouseup="السكريبت"> onmousedown

onmouseup

-الصورة الاولى )العلوية( للمتصفح قبل وضع مؤشر الفارة على الصورة.

-و الصورة التي اسفلها للمتصفح عند و ضع مؤشر الفارة على الصورة و اطلاق الدالة bigImg(this)، اطلاق هذه الدالة راجع لاطلاق الخاصية onmousemove، و نحصل على نفس النتيجة باستعمال الخاصية .onmouseover

-و بعد ابعاد المؤشر عن الصورة يتم اطلاق الدالة normalImg(this)، اطلاق هذه الدالة راجع لاطلاق الخاصية onmouseout، فتعود الصورة الى حجمها العادي. <!DOCTYPE html>

<html>

<head>

<script>

function bigImg(x)

{

x.style.height="148px";

x.style.width="148px";

}

function normalImg(x)

{

x.style.height="32px";

x.style.width="32px";

}

</script>

</head>

<body>

<img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="0" src="الصورة.gif" alt="الصورة" width="32" height="32">

<p>

يتم اطلاق الدالة bigImg(this) عند تمرير مؤشر الفارة على الصورة، فيتم تكبير الصورة من قبل الدالة، و عند خروج مؤشر الفارة او نقول ابتعاده من على الصورة يتم اطلاق الدالة normalImg(this) و التي تعيد الصورة الى حجمها العادي.

</p>

</body>

</html> يتم اطلاق الخاصية onmousemove و تفعيل السكريبت عند تمرير مؤشر الفارة على عنصر ما، الخاصية onmouseover تقوم بنفس العمل الذي تقوم به الخاصية onmousemove، و انا شخصيا لم افهم سبب تواجد خاصيتين تقومان بنفس العمل.

يتم اطلاق الخاصية onmouseout و تفعيل السكريبت عند ابعاد مؤشر الفارة من على العنصر.

لا يمكن استمال هذه الخواص مع : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title>.

لا يوجد اختلاف في استعمال هذه الخواص بين HTML5 و HTML4.01.

تركيب الخاصيتين onmousemove و onmouseover :

<العنصر onmousemove ="السكريبت">

<العنصر onmouseover ="السكريبت">

تركيب الخاصية onmouseout :

<العنصر onmouseout ="السكريبت">

Post a Comment

Post a Comment

About Us

Contact Form