الدرس الحادي عشر الإطارات (3)

omar tarfouss
9:21:00 م
البرمجة
لاتوجد تعليقات

الدرس الحادي عشر
الإطارات (3)

أهلاً وسهلاً بك إلى الدرس الحادي عشر من دروس HTML.كما ترى من العنوان لا زلنا نتابع في موضوع الإطارات، وفي القسم الثالث منه. وذلك لأهمية هذا الموضوع وتشابك خطوطه. وخصوصاً لأننا نحتاج إلى التعامل مع أكثر من وسم في نفس الوقت وداخل أكثر من ملف. مما يستدعي التركيز والتروي عندما نريد إنشاء صفحة إطارات.
لقد أنهينا في الدرسين الماضيين شرح كافة الوسوم والخصائص التي تتعلق بالإطارات، عدا واحدة هي NAME ووعدتك أن أقوم بشرحها بصورة وافية في درس مستقل. كما وعدتك أن نقوم بإجمال موضوع الإطارات والتدرب عليها من خلال مثال واقعي يتمثل بإنشاء صفحة إطارات لهذا الموقع وهاأنا ذا أفي بوعدي.
لقد قلت إن هذه الخاصية تعتبر من أهم خصائص الوسم لأنها تحدد طريقة تنسيق العمل بين الإطارات والصفحات وأسلوب عرضها. لنعتبر هذا تعريفاً مبدئياً. ولكي أوضح لك الهدف من هذه الخاصية، قم باستعراض المثال التالي... الذي قمت فيه بتمثيل بعض الأجزاء من هذا الموقع (لنترك تلك الأمثلة المملة التي كنا نعمل عليها في هذا الدرسين السابقين ولنبدأ بالعمل الجدي). وأنقر على أزرار الوصلات التشعبية الموجودة في الإطار الأيسر ......وبالطبع لا تنسى النقر على زر BACKالموجود في متصفحك للعودة إلى هذه الصفحة. وقد تحتاج إلى نقره عدة مرات بحسب عدد المرات التي تنقلت فيها في صفحات الإطار.

ماذا وجدت؟!؟ إن الصفحات تظهر في نفس الإطار (أعرف أنك كنت تتوقع ظهورها في الإطار الآخر... فهل خيبت ظنّك؟). حسناً، لا زالت هذه الإطارات تحتاج إلى القليل من العمل لكي تعمل كما يجب. وقبل أن نكمل أود أن تتمعن في الشيفرات التالية، وهي في الواقع الشيفرات الخاصة بالملفات المستخدمة في هذا المثال. وأرجو أن تقوم بدراستها جيداً، على الأقل لكي تكون متأكداً من فهمك لكل الأفكار السابقة قبل أن تنتقل إلى النقاط التي ستلي.
شيفرة الملف الرئيسي الذي أسميته mainfile.html

Main File<‎/TITLE> <‎/HEAD> ‎<frameset ROWS="60,*">‎ ‎<frame SRC="header.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">‎ ‎<frameset COLS="120,*">‎ ‎<frame SRC="lftframe.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">‎ ‎<frame SRC="htmintro.html">‎ <‎/FRAMESET> <‎/FRAMESET> <‎/HTML> <hr align="CENTER" size="4" width="40%"> شيفرة الملف العلوي (الترويسة) الذي أسميته <a href="http://www.khayma.com/hpinarabic/examples/header.html" target="_blank">header.html</a><html> <head> <title>Header File<‎/TITLE> <‎/HEAD> ‎<body bgcolor="#BCD8EB">‎ <center><img SRC="frambnr.jpg"><‎/CENTER> <‎/BODY> <‎/HTML> <hr align="CENTER" size="4" width="40%"> شيفرة الملف الذي يحتوي على الأزرار والوصلات التشعبية والذي أسميته <a href="http://www.khayma.com/hpinarabic/examples/lftframe.html" target="_blank">lftframe.html</a><html> <head> <title>Buttons<‎/TITLE> <‎/HEAD> ‎<body BGCOLOR="#BCD8EB">‎ ‎<a HREF="htutor01.html"><img SRC="lesson1.jpg"></A> ‎ ‎<a HREF="htutor02.html"><img SRC="lesson2.jpg"></A> ‎ ‎<a HREF="htutor03.html"><img SRC="lesson3.jpg"></A> ‎ ‎<a HREF="htutor04.html"><img SRC="lesson4.jpg"></A> ‎ ‎<a HREF="htutor05.html"><img SRC="lesson5.jpg"></A> ‎ <‎/BODY> <‎/HTML> <hr align="CENTER" size="4" width="40%">وبالطبع بقي لدينا الإطار الأكبر وهو لا يحتوي على ملف خاص لأنه الإطار العام الذي نريد إظهار الملفات فيه. ولن يتم إجراء أي تعديل على تلك الملفات. وبصورة مبدئية لقد شاهدت أنه يحتوى على صفحة المقدمة والمسماه htmintro.html<hr align="CENTER" size="4" width="80%"> وهنا يأتي دور الخاصية NAMEوالتي نقوم من خلالها بتعيين اسم ما للإطار -أي الإطار الذي نرغب أن تظهر به الملفات عندما نقوم بالنقر على الوصلات التشعبية-حيث سيتم فيما بعد استخدام هذا الإسم من أجل استهداف هذا الإطار من قبل الوصلات التشعبية في الإطارات الأخرى أو حتى في الصفحات الأخرى. وبالمناسبة فقد حان الآن ذكر خاصية جديدة من خصائص الوسم <a> ... <‎/A>( وهو وسم الوصلات التشعبية كما عرفت في <a href="http://www.khayma.com/hpinarabic/htutor06.html">الدرس السادس.</a>) وهذه الخاصية هي TARGET.(انتظر قليلاً وستعرف لماذا) دعنا نقوم بترتيب الأمور بصورة أكثر وضوحاً وتسلسلاً: برأيك بأي من الملفات الثلاثة السابقة يجب أن نضع الخاصية NAME? سؤال سخيف! أليس كذلك؟ طالما أنها إحدى خصائص الوسم <frame>إذن من البديهي جداً أن ترد معه. وبما أن هذا الوسم يوضع فقط في الملف الرئيسي إذن هي توضع في الملف الرئيسي... هذه أصبحت واضحة‍! لكن مع أي وسم من وسوم <frame>الموجودة في الملف الرئيسي؟؟ بالطبع ليس مع الوسم الخاص بتعريف ملف الترويسة فهذا لا نريد استهدافه، وكذلك الأمر بالنسبة لتعريف ملف الوصلات التشعبية الذي لا نريد استهدافه أيضاً. إذن لم يبق لدينا إلا الوسم الخاص بتعريف الإطار العام الذي ستظهر به الملفات. وبافتراض أننا نريد تسمية هذا الإطار بالاسم mainwindow.وهو اسم اختلقته أنا حسب ما أريد وأستطيع إعطاءه أي اسم آخر أريده طالما أنه يبدأ بحرف أبحدي أو رقم وليس برمز خاص مثل /؟#$%^ (عدا الرمز _ الذي يستخدم في حالات خاصة سأذكرها لك لاحقاً في هذا الدرس). إذن تصبح شيفرة الملف الأساسي هي: <html> <head> <title>Main File<‎/TITLE> <‎/HEAD> ‎<frameset ROWS="60,*">‎ ‎<frame SRC="header.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">‎ ‎<frameset COLS="120,*">‎ ‎<frame SRC="lftframe.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">‎ ‎<frame SRC="htmintro.html" NAME="mainwindow">‎ <‎/FRAMESET> <‎/FRAMESET> <‎/HTML> وبهذا نكون قد إنتهينا من إعداد الملف الرئيسي ليكون ملف إطارات فعال مائة بالمائة. ونستطيع الآن استهداف ذلك الإطار من أي مكان باستخدام الإسم الذي عرفناه به. المرحلة الثانية هي تعريف الوصلات التشعبية بطريقة تجعل الملفات المتعلقة بهذه الوصلات تظهر في الإطار المحدد. وهنا يأتي دور الخاصية TARGETسالفة الذكر لكي تقوم على الرحب والسعة بأداء هذه الوظيفة. وسوف نعمل الآن على الملف المسمى lftframe.html.أليس هو الملف الذي يحتوي على الوصلات التشعبية؟! ليصبح بالشكل التالي: <html> <head> <title>Buttons<‎/TITLE> <‎/HEAD> ‎<body BGCOLOR="#BCD8EB">‎ ‎<a HREF="htutor01.html" TARGET="mainwindow"><img SRC="lesson1.jpg"></A> ‎ ‎<a HREF="htutor02.html" TARGET="mainwindow"><img SRC="lesson2.jpg"></A> ‎ ‎<a HREF="htutor03.html" TARGET="mainwindow"><img SRC="lesson3.jpg"></A> ‎ ‎<a HREF="htutor04.html" TARGET="mainwindow"><img SRC="lesson4.jpg"></A> ‎ ‎<a HREF="htutor05.html" TARGET="mainwindow"><img SRC="lesson5.jpg"></A> ‎ <‎/BODY> <‎/HTML> والآن حان وقت العرض، أنقر <a href="http://www.khayma.com/hpinarabic/examples/mainfil2.html" target="_blank">هنا</a>لنشاهد صفحة الإطارات بعد التعديل: لقد نجحنا... أليس كذلكالحقيقة أننا لم ننجح بصورة مطلقة، بل إلى حد ما... وأعتذر لك لأني نغصت عليك هذا النجاح. لكن طالما أننا نريد الوصول إلى أفضل مستوى وأعلى أداء لموقعنا فيجب علينا دائماً تطبيق القواعد التي تضمن ذلك. ولكي أوضح لك السبب الذي يجعلني أتكلم كالفلاسفة سوف أطلب منك العودة إلى الصفحة الرئيسية للإطارات بعد أن قمت بإضافة وصلات تشعبية إضافية لها، واحدة خاصة بالإنتقال إلى ... صفحة الإطارات نفسها، أي إعادة تحميل الصفحة على الشاشة. والثانية للإنتقال من طريقة العرض بالإطارات إلى العرض بدون إطارات. لذلك أنقر <a href="http://www.khayma.com/hpinarabic/examples/mainfil3.html" target="_blank">هنا</a> رجاءً. وقم بتجربة النقر على هذه الوصلات الجديدة. مشكلة جديدة، أليس كذلك؟ ففي الحالة الأولى تم تحميل الصفحة داخل الإطار نفسه، وبذلك أصبحت الصفحات متداخلة في ما بينها، وكذلك الأمر في الحالة الثانية. أي أننا بإختصار لا نستطيع إبقاء الوسم بالشكل:<a HREF="filename.html" TARGET="mainwindow"> ... </A>كما لا نستطيع كتابته بالشكل التالي: <a HREF="filename.html"> ... </A>وطبعاً أنت تعرف السبب في كلتا الحالتين. لقد وقعنا في مصيدة الإطارات. إذن فما الحل؟ الحل توفره لغة HTMLنفسها من خلال وضع قيمة معينة للخاصية TARGETوهي "‎_top"لتخبر المتصفح أن يقوم بتحميل الصفحة في المستوى الأعلى من الشاشة. أي ان يقوم بإلغاء أي إطارات أو صفحات عادية موجودة أصلاً وأن يحمل الصفحة الجديدة مكانها. وهذه القيمة معرفة بشكل مسبق في لغة HTMLوليست من عندي كما في الإسم mainwindow.والحقيقة أنه يوجد ثلاث قيم أخرى بالإضافة إلى ‎_topمعرفة بشكل مسبق في لغة HTMLلتحدد موقع ظهور الصفحة المعنية. ويجب أن تتذكر دائماً أنها تكتب بالأحرف الصغيرة lowercase.فإذا كتبت بالأحرف الكبيرة فلن تحصل على النتيجة التي تريدها لأنها ستعتبر في هذه الحالة وكأنها أسماء عادية. وهذه هي القيم الأربعة: <table border="2" cellpadding="10" width="80%" bgcolor="#FFFFFF"><tbody><tr> <td> <dl><dt>‎_top</dt><dd>تحمل الصفحة في أعلى مستوى للشاشة أي تلغي الإطارات الموجودة أصلاً<center><img src="http://www.khayma.com/hpinarabic/images/top.gif" border="0" height="150" width="250"></center><hr align="CENTER" noshade="noshade" size="4" width="40%"> </dd><dt>‎_blank</dt><dd>تقوم بفتح شاشة جديدة وفارغة للمتصفح وتعرض الصفحة المحملة فيه<center><img src="http://www.khayma.com/hpinarabic/images/blank.gif" border="0" height="150" width="250"></center><hr align="CENTER" noshade="noshade" size="4" width="40%"> </dd><dt>‎_self</dt><dd> (الحالة الإفتراضية) تقوم بتحميل الصفحة في نفس الإطار الذي توجد به الوصلة التشعبية التي تم النقر عليها، (وبالطبع هذا ما يحدث دائما دون وجود هذه القيمة، أليس كذلك؟) <center><img src="http://www.khayma.com/hpinarabic/images/self.gif" border="0" height="150" width="250"> </center><hr align="CENTER" noshade="noshade" size="4" width="40%"> </dd><dt>‎_parent </dt><dd> تقوم بعرض الإطار المحمل مكان الإطار الأب، وتأمل الشكل التالي الذي يمثل صفحة إطارات مركبة. <center><img src="http://www.khayma.com/hpinarabic/images/parent.gif" border="0" height="150" width="250"></center> أنت تعرف أننا نحتاج إلى ثلاثة أزواج من الوسوم <frameset> ... <‎/FRAMESET>لإخراج مثل هذه الصفحة. <ul><li>الأول لتحديد الصفحة ككل </li><li> الثاني لتحديد الإطارين 2 و 3 المتفرعين من الصفحة الرئيسية </li><li> الثالث لتحديد الإطارين 4 و 5 المتفرعين من الإطار 3 </li></ul>وبالتالي نقول أن الصفحة الرئيسية هي الأب (أو الأم إذا أردت) للإطارين 2 و 3 وأن الإطار 3 هو الأب للإطارين 4 و 5. وعلى سبيل المثال إذا احتوى الإطار 5 أو 4 على وصلة تشعبية هدفها القيمة ‎_parentلتم تحميلها مكان الإطار 3... وهكذا الأمر بالنسبة للإطارين 1 و 2 بمقابل الصفحة الرئيسية. وللتمييز بين هذه القيمة والقيمة ‎_top فإن القيمة ‎_topتقوم بالتحميل في المستوى الأول (الأعلى) دائماً وبغض النظر عن موقع الوصلة التشعبية. </dd></dl></td></tr></tbody></table>ونعود الآن إلى صفحتنا. فلو أضفنا السطرين التاليين إلى ملف الوصلات التشعبية: ‎<a HREF="mainfile.html" TARGET="_top"><img SRC="mainpage.jpg"></A> ‎ ‎<a HREF="htmintro.html" TARGET="_top"><img SRC="noframes.jpg"></A> ‎ لحصلنا على النتيجة المرجوة. <a href="http://www.khayma.com/hpinarabic/examples/mainfil4.html" target="_blank">جرّب ذلك</a> وبذلك تستطيع أن تقول وبكل ثقة نجحنا بجدارة</blockquote></div>

الدرس العاشر الإطارات (2)

omar tarfouss
9:20:00 م
البرمجة
لاتوجد تعليقات

الدرس العاشر
الإطارات (2)

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

بداية، أجد من الضروري أن أذكرك بالوسمين الأساسيين للإطارات واللذين ندرجهما في الملف الأساسي، وهما والذي يوضع بدلاً من ويشكّل الوسم الأساسي لتحديد مجموعة الإطارات في الصفحة وخصائص هذه المجموعة ككل. و الذي يوضع داخل نطاق الوسم السابق ويعرّف الملف المصدر لكل إطار ويحدد خصائصه. ومن المهم جداُ أن نميز بين الخصائص المتعلقة بكل وسم وأن لا نخلط بينهما.

وعند الحديث عن الإطارات سوف نواجه تلك المشكلة العتيدة التي تؤرق دائماً مصممي صفحات الويب، ألا وهي مسألة توافق الوسوم والخصائص مع المتصفحات المختلفة (والتي قمت بتوضيحها هنا). فمثلاً لدينا أربع خصائص للوسم ، لكن واحدة منها فقط تعمل مع كلا المتصفحين الرئيسيين Netscape, MS Explorer.وكما إعتدنا سوف لن أركز على هذه الخصائص ، لكن على الأقل سأكتفي بذكرها وذكر عملها وأترك لك حرية تجربتها إن أردت.

أولى هذه الخصائص هي FRAMEBORDERوهي تقوم بتحديد ظهور أو عدم ظهور الحدود حول الإطارات وتأخذ القيم 1 للظهور، و0 لعدم الظهور. وهذا مثال عليها:

‎‎
 ‎‎
 ‎‎
 ‎‎
 ‎‎
<‎/FRAMESET>
 *

أما الخصائص الثلاث الأخرى فهي:

BORDER: تحدد سمك الحدود الظاهرة حول الإطارات وهي تأخذ قيماً بالبيكسل. (‎BORDER="n"‎) وتعمل فقط مع Netscape
BORDERCOLOR: لإضافة لون للحدود (‎BORDERCOLOR="rrggbb"‎)وتعمل مع Netscapeأيضاً.
FRAMESPACING: لتحديد مسافات فارغة إضافية حول الإطارات وتأخذ قيماً بالبيكسل (FRAMESPACING="n"‎)وهي تعمل مع MS Explorer.

أما الخصائص المستخدمة مع الوسم فهي كالتالي:

MARGINHEIGHT: تحدد مقدار المسافة الفارغة المتروكة للهوامش العلوية والسفلية للإطار (بالبيكسل).
‎MARGINHEIGHT="n"‎
MARGINWIDTH: تحدد مقدار المسافة الفارغة المتروكة للهوامش اليمنى واليسرى للإطار (بالبيكسل).
‎MARGINWIDTH="n"‎
SCROLLING: تحدد إمكانية ظهور أو عدم ظهور أشرطة التصفح الأفقية والعمودية على جوانب أو أسفل الإطار. وتأخذ القيم yesللظهور. noلعدم الظهور. و auto التي تحدد ظهور الأشرطة أو عدمه تلقائياً بحسب الحاجة إليها. تماماً كما يحدث في معظم تطبيقات Windows
SCROLLING="yes"‎
SCROLLING="no"‎
SCROLLING="auto"‎
NORESIZEعند إضافة هذه الخاصية يتم منع عملية التحكم بحجم الإطار بالتصغير أو التكبير من خلال السحب والإفلات. وهي لا تأخذ أي قيم.

ولتوضيح مبدأ عمل هذه الخصائص إليك هذه الأمثلة، (سأقوم باستخدام الملف الرئيسي الذي أدرجت فيه الصورة في الدرس السابق، فهو أفضل مثال لتوضيحها). ولكي أذكرك به رجاءً أنقر هنا. وقم بتفحصه والتدقيق في تفاصيله لكي تقارنها بما سينتج عن الأمثلة التالية، كذلك حاول القيام بتكبير الإطار أو تصغيره بوضع المؤشر على الحد ثم استخدام السحب والإفلات بالإتجاه المطلوب. وذلك لكي تستطيع تمييز عمل الخاصية NORESIZE

‎‎
‎‎
‎‎
‎‎
*

كذلك هناك الخصائص FRAMEBORDER, FRAMESPACING, BORDER, BORDERCOLORالتي تستخدم مع هذا الوسم وبنفس التفاصيل التي ذكرت مع .لكنها بالطبع تحدد خصائص الإطار وحده وليس مجموعة الإطارات ككل في الصفحة. وهي تعمل على متصفحات معينة دون غيرها.

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

هناك وسم ثالث يتعلق بالإطارات، ويتم إدراجه داخل الملف الرئيسي وعادة في النهاية وهو:

... <‎/NOFRAMES>يستخدم هذا الوسم لتوفير بديل معين عن صفحة الإطارات في حالة قيام أحد الزوار بدخول الموقع مستخدماً متصفحاً لا يدعم الإطارات. (بالمناسبة فإن هناك متصفحات لا يمكن لها أن تعرض الإطارات مثل الإصدارات القديمة لـِ Netscape, MS Explorer)لكنك حتماً تستطيع مشاهدتها وذلك لأن الإصدارات المعربة من هذه المتصفحات هي إصدارات حديثة نسبياً وتدعم الإطارات. فإذا أردت أن تمنح زوار موقعك الذين لا يستخدمون متصفحاً حديثاً فرصة مشاهدة موقعك، فكل ما عليك فعله هو إدراج هذا الوسم في نهاية الملف الرئيسي للإطارات والبدء بكتابة صفحتك كما لو كانت صفحة ويب عادية. <html> <head> <title>Main File<‎/TITLE> <‎/HEAD> ‎<frameset ROWS="50,*,15%,20%" FRAMEBORDER="0">‎     ‎<frame SRC="frame1.html">‎     ‎<frame SRC="frame2.html">‎     ‎<frame SRC="frame3.html">‎     ‎<frame SRC="frame4.html">‎ <‎/FRAMESET>   <noframes> <body> أكتب صفحتك بالصورة الإعتيادية هنا <‎/BODY> <‎/NOFRAMES>   <‎/HTML> أما إذا كنت مصراً على إطاراتك ولا تريد إنشاء نسخة أخرى للموقع بدونها، فلم لا تكتب ملاحظة بسيطة ضمن هذا الوسم تخبر فيها زائرك بأن الموقع يحتوي على هذه الإطارات وأنه يحتاج إلى متصفح مناسب (على الأقل لكي تخفف عنه الصدمة)!! <hr align="CENTER" size="4" width="80%">وماذا بعد...؟ لم يبق أي شيء ليذكر في هذا الدرس فقد قمنا بمناقشة جميع خصائص الإطارات عدا الخاصية NAME. ما رأيك لو قمنا بالتدرب على إنشاء نسخة من هذا الموقع باستخدام الإطارات في الدرس التالي؟ فكر في هذا الموضوع وتخيّل تصميماً معيناً تحب أن تراه في هذا الموقع (أو بالأحرى تحب أن ترى الموقع فيه). </div>

الدرس التاسع الإطارات (1)

omar tarfouss
9:19:00 م
البرمجة
لاتوجد تعليقات

الدرس التاسع
الإطارات (1)

أهلاً وسهلاً بك إلى الدرس التاسع من دروس HTML.في هذا الدرس والدرسين التاليين سوف نقوم بالتعرف على الإطارات Frames وطريقة عرض صفحات الويب باستخدامها…

فهل تعرف ما هي الإطارات؟ حسنا، سأوضحها لك… هل سبق لك وأن زرت إحدى الصفحات لتشاهد أنها مقسمة إلى عدة أقسام بحيث يظهر في كل منها صفحة مستقلة، وتبدو بصورة منفصلة عن الأقسام الأخرى. وربما تكون قد قمت بالنقر على إحدى الوصلات التشعبية الموجودة في أحد الأقسام لتظهر الصفحة المتعلقة بها في القسم الآخر.
إذا كنت قد شاهدت مثل هذه الصفحات فهذا يعني أن الإطارات مألوفة لديك وإلا قم بالنقر هنا لتشاهد مثالاً على صفحة ذات إطارات (ولا تنسى العودة لكي تتابع الدرس معا).

كما شاهدت، فإن الصفحة مكونة من ثلاثة أقسام: علوي وأيسر وأيمن… والحقيقة أن كل قسم منها هو عبارة عن ملف Html كامل ومستقل بحد ذاته. وهي مجرد صفحات عادية لا تختلف أبداً عن تلك التي تعلمت إنشاءها في الدروس السابقة، ولا علاقة لكل منها بالصفحات الأخرى من حيث التركيب والتعريف.
أما كيف تم جمعها معا لتظهر بالشكل الذي شاهدته؟ فهنا بيت القصيد. فبالإضافة إلى الصفحات والملفات الإعتيادية يوجد دائماً ملف أساسي يتم إنشاؤه خصيصا لتعريف صفحة الإطارات وتجميعها وتحديد خصائصها. أي أن المعادلة تتلخص بـِ:

مكونات صفحة الإطارات = عدد ملفات الصفحة نفسها + صفحة الملف الأساسي الذي يجمعها.

أي أنني في المثال السابق إحتجت فعلياً إلى أربعة ملفات لتكوين الصفحة.

وقبل أن نبدأ… لنقم بالتحضير للأمثلة التي سترد في هذا الدرس. لذلك قم بإنشاء ثلاثة أو أربعة ملفات بسيطة لكي تستخدمها في تطبيق الأمثلة أو استخدم ملفاتك القديمة التي قمت بالتدرب عليها في الدروس السابقة. أنا قمت بإنشاء ملفات على النمط التالي (وهي التي استخدمتها في المثال) وأسميتها frame1.html, frame2.html, frame3.html

Frame1<‎/TITLE> <‎/HEAD> <body> Frame 1 <‎/BODY> <‎/HTML> ونبدأ الآن بتعريف الملف الرئيسي الذي سيضم كافة الإطارات والملفات. وهو بالمناسبة ملف ذو حالة خاصة حيث نقوم باستخدام الوسوم <frameset> ... <‎/FRAMESET>بدلاً من الوسوم <body> ... <‎/BODY>((إذن الملف الرئيسي للإطارات لا يتضمن تعريفا باستخدام BODY )) <html> <head> <title>Master File<‎/TITLE> <‎/HEAD> <frameset> <‎/FRAMESET> <‎/HTML> نأتي الآن إلى الخصائص: والخاصية الأولى التي تستخدم مع هذه الوسوم هي COLSوهي تعرّف عدد وأحجام الإطارات العمودية للصفحة. وتُحدد الأحجام بطريقتين (هل عرفتهما؟) نعم… إنهما الطريقة المباشرة والطريقة النسبية...أو كلاهما معا. والآن إليك هذه الأمثلة التي توضح مفهوم الأعمدة... وألفت نظرك إلى أن قيامك بالنقر على الشيفرة لكل مثال سيؤدي بك إلى مشاهدة هذا المثال بصورة عملية لكن إنتبه! فهذه الشيفرة غير مكتملة وكتابتها بهذا الشكل فقط لن يؤدي إلى أي نتيجة ولا إلى ظهور أي إطارات حيث ينقصها وسوم أخرى خاصة بمصدر الملفات الظاهرة داخل الإطارات، وقد قمت بإكمالها لغرض توضيح النتيجة لك فقط. لذلك أرجو أن تكتفي الآن بمعاينة كل شيفرة ونتيجتها إلى أن أقوم بسرد باقي الخصائص المهمة لاحقاً. <center><table dir="LTR" border="1" cellpadding="5" width="80%"><tbody><tr><td>‎<frameset COLS="50%,50%">‎ <‎/FRAMESET> <a href="http://www.khayma.com/hpinarabic/examples/master_1.html" target="_blank"> * </a></td><td>يحدد إطارين عموديين حجم كل منهما 50% من حجم الشاشة </td></tr><tr><td>‎<frameset COLS="20%,50%,30%">‎ <‎/FRAMESET> <a href="http://www.khayma.com/hpinarabic/examples/master_2.html" target="_blank"> * </a></td><td>يحدد ثلاثة إطارات أحجامها 20% و 50% و 30% على التوالي من حجم الشاشة </td></tr><tr><td> ‎<frameset COLS="200,300,*">‎ <‎/FRAMESET> <a href="http://www.khayma.com/hpinarabic/examples/master_3.html" target="_blank"> * </a></td><td>يحدد ثلاثة إطارات عمودية الأول حجمه 200 بيكسل، والثاني 300 بيكسل، أما الثالث * أي انه غير محدد بحجم معين ولكنه سيكون بالحجم المتبقي من الشاشة (طالما أننا لا نعرف استبانة الشاشة التي يستخدمها زائر الموقع) </td></tr><tr><td> ‎<frameset COLS="200,*,15%,20%">‎ <‎/FRAMESET> <a href="http://www.khayma.com/hpinarabic/examples/master_4.html" target="_blank"> * </a></td><td>يحدد أربعة إطارات حجم الأول هو 200 بيكسل، والثالث 15% من حجم الشاشة، والرابع 20% من حجم الشاشة أما الثاني فسيكون حجمه بما تبقى من الشاشة. </td></tr><tr><td>‎<frameset COLS="150,*,2*">‎ <‎/FRAMESET> <a href="http://www.khayma.com/hpinarabic/examples/master_5.html" target="_blank"> * </a></td><td>يحدد ثلاثة إطارات الأول حجمه 150 بيكسل.... أما المساحة المتبقية فتقسم على أساس أن الإطار الثالث حجمه هو ضعفي (*2) حجم الإطار الثاني (*) </td></tr></tbody></table></center>أما الخاصية الثانية فهي ROWSوأعتقد أنك استنجت طبيعة عملها. نعم هي تحدد عدد وحجم الإطارات الأفقية (الصفوف) داخل الصفحة. وذلك بنفس الأسلوب المتبع مع الأعمدة، أي إما باستخدام الطريقة النسبية أو المطلقة. وسأقوم بسرد بعض الأمثلة لتوضيحها (وأذكرك ثانية أن هذه الأمثلة غير مكتملة): <center><table border="1" width="80%"> <tbody><tr><td> ‎<frameset ROWS="50%,50%">‎ <‎/FRAMESET> <a href="http://www.khayma.com/hpinarabic/examples/master_6.html" target="_blank"> * </a></td><td>يحدد إطارين أفقيين ارتفاع كل منهما 50% من ارتفاع الشاشة </td></tr><tr><td> ‎<frameset ROWS="20%,50%,30%">‎ <‎/FRAMESET> <a href="http://www.khayma.com/hpinarabic/examples/master_7.html" target="_blank"> * </a></td><td>يحدد ثلاثة إطارات أفقية ارتفاعاتها 20% و 50% و 30% على التوالي من ارتفاع الشاشة </td></tr><tr><td>‎<frameset ROWS="50,120,*">‎ <‎/FRAMESET> <a href="http://www.khayma.com/hpinarabic/examples/master_8.html" target="_blank"> * </a></td><td>يحدد ثلاثة إطارات أفقية الأول ارتفاعه 50 بيكسل، والثاني 120 بيكسل، والثالث سيكون بالإرتفاع المتبقي من الشاشة </td></tr><tr><td>‎<frameset ROWS="50,*,15%,20%">‎ <‎/FRAMESET> <a href="http://www.khayma.com/hpinarabic/examples/master_9.html" target="_blank"> * </a></td><td>يحدد أربعة إطارات أفقية ارتفاع الأول هو 50 بيكسل، والثالث 15% من ارتفاع الشاشة، والرابع 20% من ارتفاع الشاشة أما الثاني فسيكون ارتفاعه بما تبقى من ارتفاع الشاشة. </td></tr><tr><td> ‎<frameset COLS="*,2*">‎ <‎/FRAMESET> <a href="http://www.khayma.com/hpinarabic/examples/master_0.html" target="_blank"> * </a></td><td>يحدد إطارين الثاني ارتفاعه ضعفي ارتفاع الأول </td></tr></tbody></table></center>لم ننته بعد من ذكر كل الخصائص المتعلقة بالوسوم <frameset>فلا زال هناك الكثير. ولكن من الضروري أن نقوم الآن بالإنتقال إلى وسم آخر للإطارات لأنه مرتبط إرتباطاً وثيقاً بالوسوم السابقة وخصائصها المذكورة أعلاه، وهي <frame>فما هو عمل هذا الوسم؟ حسنا، كل ما قمنا به حتى الآن هو تعريف مجموعة من الإطارات وخصائصها (فقط تعريف الإطارات) لكن لم نحدد ماهية هذه الإطارات ولا محتوياتها ولا مصادرها. تماما كما نقوم بتعريف صفحات الويب الإعتيادية وخصائصها في الوسم <body>دون أن يعني ذلك تحديد محتويات هذه الصفحات. فإذا أردنا فيما بعد إدراج صورة مثلاً نستخدم الوسم الخاص بذلك وهو ‎<img SRC="imagname.ext">‎وفي حالة الإطارات فإننا نستخدم الوسم <frame> وهو وسم مفرد أي ليس له وسم نهاية تماماً مثل <img>. وفيه نقوم بتحديد مصدر وخصائص كل ملف نريد إظهاره داخل أحد الإطارات. ويتم استخدام هذا الوسم مرات بنفس عدد الإطارات المذكورة داخل <frameset>.وسوف أقوم مباشرة باستخدام الخاصية SRCلتحديد مصدر الملف. دعنا نقوم الآن بإتمام الشيفرة لبعض الأمثلة المذكورة أعلاه. ونبدأ بالمثال الأول: ‎<frameset COLS="50%,50%">‎ ‎<frame SRC="frame1.html">‎ ‎<frame SRC="frame2.html">‎ <‎/FRAMESET> الآن ... والآن فقط أصبح لديك صفحة إطارات محترمة.مثال آخر:‎<frameset COLS="200,400,*">‎ ‎<frame SRC="frame1.html">‎ ‎<frame SRC="frame2.html">‎ ‎<frame SRC="frame3.html">‎ <‎/FRAMESET> مثال ثالث:‎<frameset ROWS="50,*,15%,20%">‎ ‎<frame SRC="frame1.html">‎ ‎<frame SRC="frame2.html">‎ ‎<frame SRC="frame3.html">‎ ‎<frame SRC="frame4.html">‎ <‎/FRAMESET> ورابع:‎<frameset COLS="*,2*">‎ ‎<frame SRC="frame1.html">‎ ‎<frame SRC="frame2.html">‎ <‎/FRAMESET> <hr align="CENTER" size="4" width="80%">وبالإضافة إلى ما ذكر، نستطيع إدراج صورة مباشرةً داخل الإطار وباستخدام <frame SRC>تماماً كما ندرجها باستخدام <img SRC>وإليك هذا المثال: ‎<frameset COLS="50%,50%">‎ ‎<frame SRC="frame1.html">‎ ‎<frame SRC="thedome.jpg">‎ <‎/FRAMESET> <a href="http://www.khayma.com/hpinarabic/examples/mastimag.html" target="_blank"> * </a><hr align="CENTER" size="4" width="80%">والآن لماذا لا نقم معاً بمراجعة الأفكار الأساسية السابقة الذكر وتلخيصها؟ وهذه هي:- <center><table dir="rtl" border="5" width="80%" bgcolor="#FFFFFF"><tbody><tr> <td> <ul><li>لإدراج صفحة إطارات نحتاج إلى ملف رئيسي يعتبر بمثابة الوعاء الذي سيضم هذه الإطارات. </li><li>الملف الرئيسي هو ملف HTMLإعتيادي غير أننا نكتب الوسوم <frameset> ...<‎/FRAMESET>بدلاً من <body> ...</BODY>.وبالتالي فهو يحتوي على الخصائص التي نريدها للإطارات وتعريفاتها. </li><li>نستخدم الخصائص COLS, ROWSلتحديد عدد الإطارات (صفوفاً كانت أو أعمدة) وأحجامها. </li><li>الملفات الفرعية التي تظهر ضمن الإطارات هي ملفات عادية كالتي قمنا بإنشائها في الدروس السابقة أو صوراً. ولا تحتوي على أي تنسيق أو وسوم خاصة. </li><li>نستخدم الوسم <frame>داخل الملف الرئيسي لمناداة الملفات الفرعية داخل الإطارات، وذلك مع الخاصية SRC.بالإضافة إلى استخدامه لتحديد باقي الخصائص . </li></ul></td></tr></tbody></table> </center>كما نستطيع تمثيل هيكلية الإطارات من خلال الشكل التالي: <center><img src="http://www.khayma.com/hpinarabic/images/frameset.gif" border="0" height="254" width="304"></center> هل تأكدت من فهمك لهذه النقاط؟ لنتابع إذن ... حتى الآن قمنا بتقسيم الصفحة إما لإطارات أفقية أو لإطارات عمودية. لكن نحتاج لمعرفة كيفية إدراج كلاهما في الصفحة. كما في الأمثلة التالية: <ul><li>صفحة مكونة من صفين، الثاني منهما مقسم بدوره إلى عمودين <a href="http://www.khayma.com/hpinarabic/examples/master.html" target="_blank"> * </a></li><li>صفحة مكونة من عمودين، الثاني منهما مقسم بدوره إلى صفين <a href="http://www.khayma.com/hpinarabic/examples/masterc.html" target="_blank"> * </a></li></ul>لنبدأ بالمثال الأول: بما أن الصفحة تحتوي على صفين نقوم بتعريفهما أولاً حسب الإرتفاعات المرغوب بها: ‎<frameset ROWS="100,*">‎ ‎<frame SRC="frame1.html">‎ ‎<frame SRC="frame2.html">‎ <‎/FRAMESET> لكن الصف الثاني مقسم إلى عمودين وهنا يعتبر بمفهوم لغة HTMLوكأنه صفحة إطارات جديدة لذلك لا نحتاج لتعريفه كصف وبدلاً من ذلك نعاود استخدام تعريف الصفحات! أي <frameset>مرة أخرى. ‎<frameset ROWS="100,*">‎ ‎<frame SRC="frame1.html">‎ <frameset> <‎/FRAMESET> <‎/FRAMESET> وبما أن الصف الثاني (أو لنقل الإطار الثاني) مقسم إلى عمودين، إذن بقي علينا إضافة تعريف لهذه الأعمدة. وبذلك تكون الشيفرة النهائية كالتالي: ‎<frameset ROWS="100,*">‎ ‎<frame SRC="frame1.html">‎ ‎<frameset COLS="200,*">‎ ‎<frame SRC="frame2.html">‎ ‎<frame SRC="frame3.html">‎ <‎/FRAMESET> <‎/FRAMESET> ما رأيك أن تحاول كتابة الشيفرة الخاصة بالمثال الثاني، أما إذا أردت إختصار هذه المهمة <a href="http://www.khayma.com/hpinarabic/examples/framcode.html" target="_blank">فهذه هي</a><hr align="CENTER" size="4" width="80%">لنقم الآن بإدراج مثال آخر وتحليله: أنقر <a href="http://www.khayma.com/hpinarabic/examples/masterc2.html" target="_blank">هنا</a>لمشاهدته ثم عد إلى هنا لنناقشه معاً يوجد لدينا ثلاثة أعمدة، أليس كذلك؟ إذن لنقم بتعريف صفحة إطارات ذات ثلاثة أعمدة (طبعاً لا يوجد أهمية للأحجام المذكورة، فأنا اخترتها حسب رغبتي وتستطيع أنت اختيار الأحجام التي تريدها). ‎<frameset COLS="100,*,100">‎ ‎<frame SRC="frame1.html">‎ ‎<frame SRC="frame2.html">‎ ‎<frame SRC="frame3.html">‎ <‎/FRAMESET> العمود الأوسط من هذه الصفحة مقسم إلى صفين، إذن نستبدل تعريفه بتعريف آخر لصفحة إطارات مكونة من صفين (وهذا هو التعريف بصورة مستقلة) ‎<frameset ROWS="80,*">‎ ‎<frame SRC="frame2.html">‎ ‎<frame SRC="frame4.html">‎ <‎/FRAMESET> وبعد دمج الشيفرتين السابقتين معاً نحصل على هذه الشيفرة النهائية: ‎<frameset COLS="100,*,100">‎ ‎<frame SRC="frame1.html">‎ ‎<frameset ROWS="80,*">‎ ‎<frame SRC="frame2.html">‎ ‎<frame SRC="frame4.html">‎ <‎/FRAMESET> ‎<frame SRC="frame3.html">‎ <‎/FRAMESET> وصلنا الآن إلى نهاية هذا الدرس. وقد قمنا فيه بمناقشة أساسيات إدراج الإطارات، ولكن بقى هناك الكثير ليقال في هذا المجال</div>

الدرس الثامن الجداول (2)

omar tarfouss
9:18:00 م
البرمجة
لاتوجد تعليقات

الدرس الثامن
الجداول (2)

أهلاً وسهلاً بك إلى الدرس الثامن من دروس HTML.نتابع معاً في هذا الدرس الحديث عن الجداول. وأنا أفترض أنك قد أنهيت الدرس السابق بنجاح، وأن لديك الآن فكرة جيدة جداً عن الجداول وكيفية إنشائها والتعامل مع خصائصها ومع الصفوف وخصائصها. ونكمل الآن من حيث توقفنا، أي مع خصائص الخلايا.

هل تذكر ما قلناه عن عدد الخلايا في الصف الواحد؟ إن عدد الخلايا المطلوب يتحدد من خلال كتابة الوسوم ... <‎/TD>مرات بنفس العدد المطلوب. ومن الممكن أن تحتوي الخلية على أي عنصر من عناصر لغة HTML: نصوص، رسوم، قوائم، وصلات تشعبية، بل وحتى جداول. (نعم، تستطيع إدراج جدول داخل جدول آخر)

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

Data <‎/TD>
Data <‎/TD>

<‎/TR>

Data <‎/TD>
Data <‎/TD>

<‎/TR>

Data <‎/TD>
Data <‎/TD>

<‎/TR>

<‎/TABLE>

أما الخصائص المستخدمة مع الخلايا، فهذا جدول بها:

حيث n هو عدد الخلايا التي سيتم دمجها

وبالطبع n هو عدد الخلايا التي سيتم دمجها

ALIGN	تحدد محاذاة النص الموجود في الخلية أفقياً، والقيم المستخدمة هي Left, Center, Right
VALIGN	تحدد المحاذاة العمودية للنص، وهو يأخذ القيم Top, Middle, Bottom, Baseline
WIDTH	تحدد عرض الخلية، وذلك بكتابة القيمة المباشرة للعرض المطلوب بالبيكسل، أو بكتابة رقم يمثل النسبة المئوية. ويكفي تحديد العرض للخلايا في أحد الصفوف لكي يتم تطبيقه على كل الخلايا في كل الصفوف.
HEIGHT	تحدد الإرتفاع المطلوب للخلية في الصف، وذلك بالطرق المباشرة أو النسبية. وقيامك بتحديد ارتفاع إحدى الخلايا في الصف يؤدي إلى تطبيقه على كل الخلايا فيه.
BGCOLOR	تحدد لون خلفية الخلية
COLSPAN	يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها أفقياً ‎	‎
ROWSPAN	يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها عمودياً (أي أسفلها). ‎	‎

وقبل أن نستمر، يبدو لي أن هناك بعض الملاحظات المهمة التي ينبغي ذكرها:

كما تلاحظ هناك خصائص تتكرر مع جميع الوسوم. خذ مثلاً الخاصية BGCOLOR.كيف يتم التعامل معها إذا كررت مع جميع الوسوم؟ بكل بساطة يتم تطبيق اللون المحدد مع وسم الخلية، فإذا لم يكن محدداً يطبق اللون المحدد مع وسم الصف، فإذا لم يوجد يطبق اللون المحدد مع وسم الجدول. وإذا لم يكن هذا محدداً بدوره يتم إعتماد لون خلفية الصفحة المحدد في الوسم .
الملاحظة الثانية تتعلق بالخصائص WIDTH, HEIGHT.يختلف أسلوب التعامل مع هذه الخصائص من متصفح لآخر، بل وتختلف أيضاً طريقة تفسير القيم المحددة معها وخصوصاً فيما يتعلق بالنسب المئوية. (راجع الموضوع: الوسوم الخاصة والمتصفحات).
وبدون الخوض في تفاصيل هذه الإختلافات التي لن تؤدي إلا إلى المزيد من الإشكالات لديك... وبعد التجربة يبدو أن أفضل طريقة للتعامل مع هذه الخصائص هي قيامك بتحديد العرض (وكذلك الإرتفاع إذا أردت ذلك) للجدول ككل من خلال الوسم .
ثم استخدام هذه الخصائص في وسوم الخلايا وتحديد العرض المطلوب لكل خلية على حده في الصف الأول، والارتفاع المطلوب لكل صف في الجدول.
وهذه برأيي أفضل طريقة تضمن بها أفضل مشاهدة للجدول لجميع زوار موقعك.
إذا أردت أن تحتوي بعض الصفوف في الجدول على عدد من الخلايا أقل من باقي الصفوف، فلا يكفي أن تقوم بحذف وسوم الخلايا منها. (كما ترى في الشيفرة التالية:)

Data <‎/TD>

<‎/TR>

Data <‎/TD>
Data <‎/TD>

<‎/TR>

Data <‎/TD>

<‎/TR>
<‎/TABLE>

لأن هذا ما ستحصل عليه:
Data
Data Data
Data

لقد بقي مكان الخلايا المحذوفة محجوزاً كما لو أنها لم تحذف. أما الخلايا الباقية فظلت محتفظة بنفس خصائصها، أي أننا لم نستفد من عملية الحذف. والحقيقة أن الطريقة المثلى لذلك هي أن تقوم بدمجالخلايا معاً وذلك باستخدام الخصائص COLSPAN, ROWSPAN.

إذن لنقم بإعادة كتابة شيفرة الجدول مع استخدام هذه الخصائص:

‎‎

Data <‎/TD>

<‎/TR>

Data <‎/TD>
Data <‎/TD>

<‎/TR>

Data <‎/TD>

<‎/TR>

<‎/TABLE>

Data
Data	Data
Data

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

مثال آخر: لنقم بدمج الخلايا الموجودة في العمود الأول

‎‎

Data <‎/TD>
Data <‎/TD>

<‎/TR>

Data <‎/TD>

<‎/TR>

Data <‎/TD>

<‎/TR>

<‎/TABLE>

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

Data	Data
	Data
	Data

هناك نوع خاص من الخلايا التي يتم تعريفها باستخدام الوسوم ... <‎/TH>وهي اختصار Table Headerأي ترويسة الجدول.
والفرق الوحيد بينها وبين ... <‎/TD>هو أن النص الذي تحتويه يظهر بخط أسود عريض ومحاذاته في منتصف الخلية بصورة إفتراضية. (ليس بالشيء المهم، كما أعتقد)، خاصة وأن الخصائص المستخدمة معها هي نفس خصائص وبنفس التفاصيل التي ذكرت.

الوسوم الأخيرة المستخدمة في الجداول هي ... <‎/CAPTION> وهي تختص بإضافة عنوان رئيسي للجدول ككل. لذلك فهي عندما تكتب يتم وضعها مباشرة بعد الوسم

وبصورة مستقلة وليس ضمن وسوم الصفوف أو الخلايا.

‎‎

Data <‎/TD>
Data <‎/TD>

<‎/TR>

Data <‎/TD>
Data <‎/TD>

<‎/TR>

Data <‎/TD>
Data <‎/TD>

<‎/TR>

<‎/TABLE>

Table Caption
Data	Data
Data	Data
Data	Data

وأخيراً... وصلنا إلى نهاية هذه الدرس

الدرس السابع الجداول (1)

omar tarfouss
9:17:00 م
البرمجة
لاتوجد تعليقات

الدرس السابع
الجداول (1)

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

هل أنت مستعد؟ إذن هيّا بنا…

بداية، إليك هذا الوصف البسيط للوسوم الأساسية الخاصة بالجداول
...<‎/TR>
...<‎/TABLE>
وسوم تعريف الجدول

Table Row وسوم تعريف الصف في الجدول
Cell Data <‎/TD>
Table Data وسوم تعريف الخلايا في الصف وتعريف محتويات كل خلية

والآن لنتكلم بصورة أكثر دقة وتفصيلاً:

هذه هي الوسوم التي نبدأ بها لإدراج جدول مكون من خلية واحدة أو من مليون خلية… الأمر سيان
... <‎/TABLE>

والآن بعد إدراج هذين الوسمين، هناك سؤالين ينبغي الإجابة عليهما. الأول: كم عدد الصفوف التي نريدها في الجدول؟ ثلاثة، أربعة، مائة؟ لا بأس، قم بإضافة الوسوم
... <‎/TR>
بنفس عدد الصفوف التي تريدها. ولنفترض هنا أنها ثلاثة.

<‎/TR>

<‎/TR>

<‎/TR>

<‎/TABLE>

والسؤال الثاني هو، كم عدد الخلايا (أو الأعمدة) التي نريدها في كل صف؟
وهنا نضيف الوسوم
... <‎/TD>
بنفس عدد الخلايا المطلوب. ومن البديهي أن نكتبها بين الوسوم ... <‎/TR>طالما أن الخلايا هي جزء من الصفوف. وهنا سأفترض أننا نريد خليتين في كل صف، وبذلك يجب تكرار كتابتها مرتين لكل صف.
وأذكرك أن النص الذي نريد إدراجه في الخلية يكتب ضمن هذين الوسمين.

Data <‎/TD>
Data <‎/TD>

<‎/TR>

Data <‎/TD>
Data <‎/TD>

<‎/TR>

Data <‎/TD>
Data <‎/TD>

<‎/TR>
<‎/TABLE>

هل اتضحت لك الصورة الآن. أنظر إلى نتيجة العمل التي حصلنا عليها.
Data Data
Data Data
Data Data
هناك شيء ما ينقص. بالطبع ... الحدود. انتظر قليلاً وستعرف الخاصية التي تقوم بإضافة الحدود للجدول وغيرها من الخصائص الأخرى. لأنني قبل أن أستمر أود أن ألفت نظرك لمسألة معينة في الجداول. وهي أن طريقة التعامل معها تتم على ثلاثة مستويات:
مستوى الجدول ككل
مستوى الصفوف ككل أو كل واحد على حده
مستوى الخلايا ككل أو كل واحدة على حده.
ولكل من هذه المستويات خصائصه التي ينفرد بها كما أن هناك خصائص مشتركة تستخدم مع كل الوسوم.

نبدأ بمناقشة الخصائص التي تستخدم مع الوسوم ... <‎/TABLE>
وسأقوم أولاً بسردها لك، ومن ثم إدراج بعض الأمثلة التي توضحها.

BORDER
تقوم هذه الخاصية بإضافة حدود للجدول وتحديد سماكتها، والقيمة الإفتراضية لها هي صفر أي لا حدود
‎‎
‎
‎

WIDTH

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

‎‎
‎

‎

HEIGHT

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

‎‎
‎

‎

CELLSPACING

لتحديد المسافة بين كل خلية من خلايا الجدول

‎‎

CELLPADDING

لتحديد المسافة الفاصلة بين الحدود وبداية النص في كل خلية. أو لنقل: تحديد حجم الهوامش لخلايا الجدول.

‎‎

ALIGN

لتحديد محاذاة الجدول أفقياً على الصفحة يميناً أو يساراً. وهو يأخذ القيم right, left

‎‎
‎

‎

BGCOLOR

ويستخدم لتحديد لون الخلفية للجدول

‎‎

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

‎‎

Data	Data
Data	Data
Data	Data

‎‎

Data	Data
Data	Data
Data	Data

‎‎

Data	Data
Data	Data
Data	Data

‎BGCOLOR="#FFFF00">‎

Data	Data
Data	Data
Data	Data

‎BGCOLOR="#FFFF00" HEIGHT="300">‎

Data	Data
Data	Data
Data	Data

‎ BGCOLOR="#FFFF00" HEIGHT="300" WIDTH="75%">‎

Data	Data
Data	Data
Data	Data

ونتكلم الآن عن الخصائص المستخدمة مع وسوم الصف ... <‎/TR>ولا بأس من تذكيرك أن عدد الصفوف في الجدول يتحدد بعدد هذه الوسوم. أما أهم الخصائص التي تضاف لهذا الوسم فهي:

ALIGN

لتحديد محاذاة النص أفقياً داخل الخلايا التي يتكون منها الصف، والقيم المحتملة لها هي Right, Left, Centerوالقيمة الإفتراضية هي Center

VALIGN

لتحديد المحاذاة العمودية للنص داخل خلايا الصف، وذلك إما للأعلى أو للأسفل أو في المنتصف أو على امتداد الخط الأساسي للخلية. وقيمها على التوالي هي: Top, Bottom, Middle, Baseline

BGCOLOR

لتحديد لون الخلفية للخلايا التي يتكون منها الصف. وهنا يتم تجاهل لون الخلفية المحدد ضمن وسم

ويتم تطبيق اللون المحدد هنا.

ونعود الآن إلى جدولنا السابق لنطبق عليه هذه الخصائص من خلال الأمثلة التالية:

‎‎
‎ ‎
<‎/TR>

‎ ‎
<‎/TR>

‎ ‎
<‎/TR>
<‎/TABLE>

Data <‎/TD>	Data <‎/TD>
Data <‎/TD>	Data <‎/TD>
Data <‎/TD>	Data <‎/TD>

Data	Data
Data	Data
Data	Data

‎‎
‎ ‎
<‎/TR>

‎ ‎
<‎/TR>

‎ ‎
<‎/TR>
<‎/TABLE>

Data <‎/TD>	Data <‎/TD>
Data <‎/TD>	Data <‎/TD>
Data <‎/TD>	Data <‎/TD>

Data	Data
Data	Data
Data	Data

‎‎
‎ ‎
<‎/TR>

‎ ‎
<‎/TR>

‎ ‎
<‎/TR>
<‎/TABLE>

Data <‎/TD>	Data <‎/TD>
Data <‎/TD>	Data <‎/TD>
Data <‎/TD>	Data <‎/TD>

Data	Data
Data	Data
Data	Data

‎‎
‎ ‎
<‎/TR>

‎ ‎
<‎/TR>

‎ ‎
<‎/TR>
<‎/TABLE>

Data <‎/TD>	Data <‎/TD>
Data <‎/TD>	Data <‎/TD>
Data <‎/TD>	Data <‎/TD>

Data	Data
Data	Data
Data	Data

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

الدرس السادس الوصلات التشعبية

omar tarfouss
9:13:00 م
البرمجة
لاتوجد تعليقات

الدرس السادس
الوصلات التشعبية

أهلاً وسهلاً بك إلى الدرس السادس من دروس HTML

كيف وصلت إلى هذه الصفحة؟! ربما تعتبر هذا سؤالاً سخيفاً، وأن الإجابة عليه هي من البديهيات ... وهذا صحيح! من المؤكد أنك قمت بالإنتقال إلى هنا من خلال إحدى صفحات هذا الموقع، أو من خلال أحد محركات التفتيش، أو من خلال أحد المواقع التي قمت بزيارتها مؤخراً ... وفي كل الأحوال قمت بالنقر على وصلة تشعبية ما.

Links...أو الوصلات التشعبية هي روح الإنترنت. وإذا كانت الإنترنت بمجملها هي شبكة العنكبوت فإن هذه الوصلات هي الخيوط التي تشكل هذه الشبكة وتؤلف حلقات الوصل بين الملايين من مواقعها. تنقر على وصلة ما فتنقلك إلى صفحة أخرى في نفس الموقع... وتنقر على وصلة أخرى لتنقلك كلياً إلى أحد المواقع في الجانب الآخر من العالم... وصلة تجعلك تحمّل ملفاً وأخرى تجعلك تشغّل مقطعا موسيقياً وثالثة تعرض لك صورة...
حسناً، من المؤكد أنك استنتجت الآن من هذه المقدمة أنك بصدد تعلم كيفية إدراج الوصلات التشعبية في صفحاتك... لقد صدق استنتاجك لذلك هيا إلى العمل...

هناك عدة خيارات للوصلات التشعبية، منها أن تكون الوصلة لموقع آخر، أو أن تكون لصفحة أخرى داخل الموقع نفسه، ومنها أن تكون لمكان آخر في نفس الصفحة (إلى أعلى أو أسفل على سبيل المثال) أو أن تكون وصلة لعنوان بريد إلكتروني E-mailوفي جميع الحالات فإن المبدأ واحد لكن تختلف بعض التفاصيل. وسوف أناقش معك كل حالة على حدة وبالتفصيل.

نستخدم الوسوم

... <‎/A>

كوسوم أساسية لإدراج الوصلات التشعبية، وهي اختصار لكلمة Anchor.وهي لا تعمل لوحدها بل تتطلب إضافة خصائص معينة أولها وأهمها الخاصية

HREF

التي نحدد من خلالها الموقع الذي نريد الدلالة عليه، ويجب أن يكتب عنوان الموقع كاملاً.

الحالة الأولى: إدراج وصلة تشعبية تشير إلى موقع خارجي.
لنقم بإدراج وصلة تشعبية إلى أحد المواقع العربية الرائدة والرائعة، وهو موقع شركة صخر. وعنوانه http://www.sakhr.comفي هذه الحالة يتم كتابة الشيفرة بالشكل التالي:

<‎/A>

لكن بقي شيء واحد وهو العبارة أو الكلمة التي سيتم النقر عليها لتشغيل الوصلة، وهذه يجب أن توضع بين الوسمين ... <‎/A>.أي لكي تكتمل الوصلة السابقة يجب أن نكتب معها أي عبارة نريدها، لكي ينقر عليها الزائر فتنقله إلى العنوان المطلوب. ما رأيك بعبارة: Go To SAKHRوالتي تصبح الشيفرة معها بالشكل التالي:

Go To SAKHR<‎/A>

وتظهر الوصلة كما يلي:

Go To SAKHR

لم تعجبك؟ ليس ذلك مشكلة فأنت تستطيع كتابة أي شيء تريده كعنوان للوصلة التي تريدها. ما رأيك لو جعلنا كلمة SAKH‎R هي فقط العنوان لهذه الوصلة.

‎Go To SAKHR<‎/A>‎

Go To SAKHR

بل إنك تستطيع إدراج صورة أو (زر) كبديل عن الكلمات -كما تشاهد في الكثير من المواقع- وكل ما عليك فعله في هذه الحالة هو كتابة الوسم الخاص بإدراج الصورة بين الوسمين ... <‎/A> بالشكل التالي:

‎<‎/A>

والذي يؤدي إلى ظهور الصورة التالية كوصلة تشعبية لموقع صخر

وبشكل عام فإن أي شيء يوضع بين الوسمين ... <‎/A>سوف يكون الوسيلة أو العنوان الذي ينقلنا إلى الموقع المشار إليه في الوصلة التشعبية، سواءً كان هذا الشيء نصاً أو صورة أو كلاهما معاً.

والآن هل تلاحظ الإطار الظاهر حول الصورة؟ وهل تذكر متى قمنا بالحديث عن هذا النوع من الإطارات؟ نعم، في الدرس السابق.عند إدراج صورة كوصلة تشعبية يظهر حولها إطار سمكه 2 بيكسل وهذه هي الحالة الإفتراضية. وبالطبع نستطيع إزالته بكتابة الخاصية BORDER="0"‎ضمن وسم الصورة.

<‎/A>

أو حتى تكبيره بكتابة السمك المطلوب مع هذه الخاصية.

<‎/A>

ننتقل الآن إلى الحالة الثانية، وهي أن تشير الوصلة التشعبية إلى ملف موجود في نفس الموقع (أي ملف محلي) سواءً كان ملف HTMLأو صورة أو غير ذلك. وفي هذه الحالة فإن ما يكتب مع الخاصية HREFهو اسم هذا الملف المطلوب الوصول إليه.

لنقم بإنشاء وصلة تشعبية تقودنا إلى الصفحة الرئيسية لهذا الموقع وبالمناسبة فإن الملف الذي يحتويها اسمه index.html ، والشيفرة الخاصة بذلك هي:

Main Page<‎/A>

Main Page

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

هيا ندرج صورة مصغرة كعنوان لوصلة تشعبية للصورة الأصلية.

<‎/A>

في هذا المثال قمت بتحديد الصورة المصغرة المسماه nablus_1.jpgكوصلة تشعبية تصلنا إلى الصورة الأصلية المسماه nablus1.jpg

لكن إنتبه Iإذا كان الملف المطلوب والذي تريد الإشارة إليه موجوداً في مجلد مختلف عن المجلد الذي يوجد به الملف الحالي، فيجب عليك تحديد المسار الكامل لهذا الملف وذلك بنفس الطريقة التي ناقشناها في الدرس السابق عندما قمنا يإدراج الصور.

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

والمبدأ هنا هو أن تقوم بتعريف أو تسمية هذا المكان بإسم معين سوف تقوم لاحقا باستخدامه في الوصلة التشعبية. وفي هذه الحالة يتحتم عليك استخدام الخاصية الثانية للوسم وهي NAME

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

أول ما يجب فعله هو الذهاب إلى هذه الفقرة واختيار أول كلمة فيها ثم وضعها داخل الوسوم ... <‎/A>

LINKS<‎/A>

والآن حان الوقت لاستخدام الخاصية NAMEفالخطوة الثانية هي تعريف هذه الكلمة بأي اسم نريده (المهم أن نبقى متذكرين له). سوف أقوم بإعطاء الاسم attrib1

LINKS<‎/A>

لقد أصبحت هذه الفقرة جاهزة لكي نقوم بإدراج وصلات تشعبية إليها من أي مكان في هذا الملف، بل ومن أي ملف آخر ... وأكثر من ذلك أنه إذا أراد أحد ما في أحد المواقع الأخرى أن يضع وصلة تشعبية لها من موقعه فإن باستطاعته ذلك شرط أن يعرف الإسم الذي عرّفناها به وهذا ليس صعباً بالطبع.

الخطوة الثالثة هي إدراج الوصلة التشعبية لهذه الفقرة.
ويلزمنا هنا معرفة اسم الملف الذي توجد به هذه الفقرة (أي هذا الملف الذي نعمل به) واسمه htutor06.htmlلأنه سيشكل المدخل الأساسي للوصول إلى الفقرة المحددة. وتكون شيفرة الوصول إلى هذه الفقرة هي كالتالي:

3rd Paragraph<‎/A>

‎3rd Paragraph

لاحظ أننا لم نكتف بذكر اسم الفقرة لوحدها بل يجب أن تقرن باسم الملف الأب الذي يتضمنها من خلال إشارة #

أما الحالة الأخيرة والتي نقوم فيها بإدراج وصلة تشعبية لعنوان بريد إلكتروني، يؤدي النقر عليها إلى إطلاق برنامج البريد الإلكتروني للزائر بشكل تلقائي. فالإختلاف الوحيد الذي يطرأ هنا هو كتابة كلمة MAILTOبعد خاصية HREFلكي تدل على أن العنوان الذي يلي هو عنوان EMAIL وليس أي عنوان آخر

Email Me <‎/A>

Email Me

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

عندما قمنا بالتوصيل إلى عنوان خارجي، سواء كان لموقع ويب أو عنوان Emailلاحظنا أننا استخدمنا كلمات مفتاحية ميزت طبيعة هذا العنوان، وأعطت المتصفح فكرة عن طبيعة التعامل مع هذا العنوان وطريقة الاتصال به. فعندما أردنا التشعب إلى موقع الويب كتبنا كلمة HTTPوالتي تدل على نوع البروتوكول المستخدم في الاتصال بهذا الموقع، وهو بروتوكول نقل النصوص المتشعبة HyperText Transfer Protocolوعندما كتبنا عنوان Emailاستخدمنا كلمة MAILTOقبل هذا العنوان. وبالتالي قمنا بالإيعاز للمتصفح بفتح برنامج البريد الإلكتروني الافتراضي وتجهيزه لإرسال رسالة إلى العنوان المدرج. وحتماً لقد صادفت مثل هذه الحالة كثيراً خلال تجولك في مواقع الويب.

لكن هنا مجالات أخرى لاستخدام الإنترنت ولكل منها بروتوكوله الخاص. فمثلاً هناك الآلاف من المزودات المنتشرة عبر الإنترنت والتي تحتوي على أعداد هائلة لا تحصى من الملفات والبرامج الجاهزة للتحميل ويتم الوصول إليها عبر بروتوكول خاص لنقل الملفات يدعى FTP (File Transfer Protocol)‎. ومن هذه المجالات أيضاً والتي لا تقل أهمية عن الويب أو البريد الإلكتروني المجموعات الإخبارية News Groupsأو مجموعات النقاش التي تختص كل منها بمناقشة موضوع معين. وهذه تعمل من خلال بروتوكول NNTP (Network News Transfer Protocol)‎.

إن تعدد مجالات إستخدام الإنترنت وتعدد البروتوكولات فيها لا يعني أنك تحتاج لأن يكتظ سطح مكتبك بالعديد من البرامج للتعامل معها. فمعظم المتصفحات التي نستخدمها تحتوي على برامج خاصة تدعم هذه الخدمات.
فمثلاً عند النقر على عنوان مزود FTPيتم الدخول إليه مثله مثل أي موقع ويب عادي وتظهر قائمة المجلدات والملفات فيه بشكل مشابه للمستكشف في Windows95.أما النقر على عنوان إحدى المجموعات الإخبارية فيؤدي إلى سلوك مشابه للنقر على عناوين البريد الإلكتروني، أي إطلاق برنامج تصفح خاص بالمجموعات الإخبارية يكون مدمجاً ضمن حزمة المتصفح الأصلي.

والآن... أعتقد أنه ليس من الصعب عليك استنتاج الكيفية التي نضيف بها وصلات تشعبية لمزود FTP.
إليك هذا العنوان لأحد المزودات التي يحتوي على الكثير من البرامج المجانية أو المشتركة

ftp://ftp.simtel.net/pub/simtelnet/win95/‎

وكل ما عليك فعله هو كتابة الشيفرة التالية:

Simtel FTP Server<‎/A>

Simtel FTP Server

أما بالنسبة للمجموعات الإخبارية فتكتب الوصلات التشعبية لها باستخدام الكلمة المفتاحية NEWS.فعلى سبيل المثال، لوضع وصلة تشعبية لمجموعة النقاش alt.htmlالخاصة بمناقشة لغة HTMLنكتب الشيفرة التالية:

Alt.Html<‎/A>

البرمجة من صفر الى احتراف

omar tarfouss
9:10:00 م
البرمجة
لاتوجد تعليقات

كل يتسائل عن ما هي افضل واسهل لغة برمجة للبدء في التعلم بها ؟..
لكن الحقيقــة أن هذا السؤال لايوجد له اجابة .

للبــدء في تعلم لغات البرمجة يجب اولاً ان تسأل ما هي اللغة الانسب التي تلبي احتياجاتي ؟ .. فمثلاً هل تريد ان تقوم ببرمجة المواقع , او البرامج , او برمجة تطبيقات اندرويد او ابل
لغات البرمجة عديدة وليس هناك لغة قديمة او حديثة ، المهم ان تلبي حاجات المشروع التي ترغب بالعمل فيه .. كما ان هناك العديد من الشركات التي تفضل أن يكون الشخص ان يكون ملم بأكثر من لغة برمجية..حيث اذا كنت تتوفر على اكثر من لغة كل ما زادت فرصة العمل

العوامل المساعدة في اختيار اللغة البرمجية المناسبة :

– اللغة التي تراها سهلة و تجيد عملها (مثل بناء موقع)
– اللغة التي ستساعدك الى الانتقال الى اللغات الاخرى بكل سهولة
– اللغة التي تساعدك في التسويق لعملك

_________________________________________

لتعلم اساسيات البرمجة اعتقد ان لغة python و ruby مفيدة جداً , لكن انا انصح بلغة c# و java لأنها تساعد كثيراً للأنتقال الى لغات اخرى بكل سهولة , طبعاً اضيف عليهم لغة c++

تعــالوا نأخذ جولــة سريعـــة فى هذه اللغــات :
html
إنها اللغة المستخدمة لإنشاء صفحات الإنترنت. (والكلمة إختصار لـ Hyper Text Markup Language). وهي ليست لغة برمجة بالمعنى والشكل المتعارف عليه للغات البرمجة الأخرى كلغة C. فهي مثلاً لا تحتوي على جمل التحكم والدوران، وعند الحاجة لاستخدام هذه الجمل يجب تضمين شيفرات من لغات أخرى كـ Java, JavaScript, CGI. كذلك فهي لا تحتاج إلى مترجم خاص به Compiler. وهي غير مرتبطة بنظام تشغيل معين، لأنه يتم تفسيرها وتنفيذ تعليماتها مباشرة من قبل متصفح الإنترنت وبغض النظر عن النظام المستخدم. لذلك فهي لغة بسيطة جداً، وسهلة الفهم والتعلم ولا تحتاج لمعرفة مسبقة بلغات البرمجة والهيكلية المستخدمة فيها. بل ربما كل ما تحتاجه هو القليل من التفكير المنطقي وترتيب الأفكار.
Java
لغة غرضية التوجه ظهرت لأول مرة عام 1995 حيث قام بتصميمها جيمس جوسلينغ , كما انها تعد الأكثر شعبية من بين جميع لغات البرمجة

الاستخدامات : برمجة الشبكات , تطوير تطبيقات الوب , تطوير البرامج , تطوير واجهات المستخدم الرسومية GUI

مستخدمة من قبل اندرويد (نظام التشغيل , التطبيقات)
C#

لغة غرضية التوجه ظهرت لأول مرة عام 2000 قام بتصميمها شركة مايكروسوفت , شبيها بلغة java تمتاز بسرعة الاداء , لكن نقطة الضعف انها تعمل فقط على بيئة windows
C++

الجميع يعتبر هذه اللغة الأفضل في بناء التطبيقات , ظهرت لأول مرة عام 1983 قام بتصميمها بيارن ستروستروب , ميزاتها انها سريعة , نقطة الضعف يعتقد البعض انها اصبحت قديمة

الاستخدامات : برمجة الالعاب , كما انها تعتبر جزء لا يتجزء في بناء البرامج

مستخدمة في :Mozilla Firefox , Adobe Google Chrome , Internet Explorer
Python

لغة برمحة غرضية التوجه , تتميز بسهولة تعليمها , وببساطة كتابتها و قرائتها , ظهرت لأول مرة عام 1991 قام بتصميمها جايدو فان روسم

الاستخدامات : تطبيقات الويب , تطوير البرامج , امن المعلومات

مستخدمة من قبل Google , Yahoo
Ruby

ظهرت هذه اللغة لأول مرة عام 1993, قام بتصميمها الياباني يوكيهيــرو ماتسوموتو , وهي غرضية بشكل كامل, كما انها سهلة التعلم

الاستخدامات : تطوير تطبيقات الويب , Ruby on Rail

مستخدمة في : twitter , hulu

___________________

3

اللغات التي تساعدك على التسويق ، ذلك يعتمد على ما الذي ترغب بالقيام به .. مثلاً :

# تريد العمل في بناء المواقع لديك PHP
# بناء تطبيقات ابل Objective-C
# تطبيقات اندرويد java
Objective-C
لغة برمجة مستخدمة بشكل رئيسي من قبل شركة ابل ظهرت لأول مرة عام 1983 قام بتصميمها براد كوكس وتوم لوف

الاستخدامات: برمجة تطبيقات ابل
Php

ظهرت لأول مرة عام 1995 قام بتصميمها راسموس ليردور , وهي اللغة الأكثر شعبية في بناء تطبيقات الويب التفاعلية , كما انها مفتوحة المصدر

مستخدمة في
فيسبوك
اخترت ان نتعلم في هذه الدورة اللغة html للانها سوف تسهل عليك مرور الى اللغات اخرى

أعلن هنا

المدونة رامو للمعلوميات تم تأسيسها سنة 2014 و مؤسسها عمر الترفوس من المغرب تحديدا من مدينة طنجة عمره 15 سنة مهووس بالجديد التقنية والتكنولوجيا المدونة كانت في اصل خاصة بمعنى اخر للصور والملفات ...الخ فقررت ان احولها الى المدونة تختص في هادروين نظرا الى شغفي الذي من صغري وانا افكك اشياء سواء كانت الكترونية او بلاستيكية فقلت مع نفسي من الذي يستمع الى طفل عمره 11 سنة في اليوتيوب و المدونة فلم انتظر فبدأت بشروحات على سطح المكتب (على شاشة حاسوب) حتى وصلنا الى هنا واحمد الله على كل نعمه

الدرس الحادي عشر الإطارات (3)

الدرس العاشر الإطارات (2)

الدرس التاسع الإطارات (1)

الدرس الثامن الجداول (2)

الدرس السابع الجداول (1)

الدرس السادس الوصلات التشعبية

البرمجة من صفر الى احتراف

التسميات

مدونة عمر للتقنية

Top Ad unit 728 × 90

تابعنا على الفيسبوك

إجمالي مرات مشاهدة الصفحة

أرشيف المدونة الإلكترونية

أخر حلقات | مهووس المعلوميات

من أنا

نموذج الاتصال

المتابعون

التسميات

اعلان

عن المدونة

اعلان

تابعنا عبر الفيسبوك

أعلن هنا

اشترك معنا في القائمة البريدية

خدماتي

المشاركات الشائعة

التسميات

المشاركات الشائعة لهذا الشهر

عن القالب

عن القالب

عن القالب

عن القالب