الدرس العاشر الإطارات (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 للانها سوف تسهل عليك مرور الى اللغات اخرى

الدرس الخامس الصور والرسومات

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

الدرس الخامس
الصور والرسومات

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

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

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

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

‎

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

الحالة الأولى أن تكون الصورة موجودة في مجلد متفرع عن المجلد الموجود به ملف HTMLحسب الشكل التالي:

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

الحالة الثانية: أن يكون ملف HTMLموجوداً في مجلد ما وتكون الصورة موجودة في مجلد آخر بنفس المستوى. أي أنهما مجلدين متجاورين وليسا متفرعين أحدهما عن الآخر.

وفي هذه الحالة نكتب .. (نقطتين) لتوجيه المتصفح للخروج من المجلد الفرعي الحالي (حيث يوجد ملف HT‎ML)ومن ثم الدخول إلى المجلد imagesحيث توجد الصورة.

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

إن الأبعاد الأساسية لهذه الصورة هي 200×145 بيكسل Pixel (تابع القراءة حتى نهاية هذا الدرس وأعدك أن أوضح لك ما هي وحدة البيكسل إذا كانت هذه أول مرة تتعرف فيها على هذه الوحدة) وكما تلاحظ تم إدراج الصورة مع المحافظة على هذه الأبعاد. ومع ذلك فنحن نستطيع التحكم أيضاً بها وإظهار الصورة بالحجم الذي نريده من خلال هذا الوسم. كيف؟ بإضافة الخصائص HEIGHT, WIDTHمتبوعة بأرقام تمثل الإرتفاع والعرض المطلوبين.

‎

‎

‎

الخاصية التالية التي تستخدم مع هي ALTوفيها نحدد نصاً بديلاً يظهر مكان الصورة. وهذا النص يلاحظ خصوصاً عندما يكون خيار "إظهار الصور تلقائياً" غير فعال في المتصفح. كما تستطيع ملاحظته في الفترة التي تسبق تحميل الصور وخاصة في المواقع بطيئة التحميل.

‎

عندما نقوم بإدراج صورة ضمن فقرة فإن موقع ظهورها يتحدد بالطبع حسب ترتيب ورودها في الفقرة، مثلها مثل أي كلمة أو عبارة أخرى. ونستخدم الخاصية ALIGNلتحديد محاذاة الصورة مع النص المرافق لها أو لنقل بعبارة أخرى: تحديد موقع النص الذي يليها بالنسبة لها وهي تأخذ القيم: BOTTOM, TOP, MIDDLE, LEFT, RIGHTوأوضح لك تأثير كل قيمة كما يلي:

في الحالة العادية

(مثل هذه) وعندما لا نقوم بتحديد أي محاذاة فإن النص الذي يلي الصورة يظهر بمحاذاة الحافة السفلى لها. وهذه هي الحالة الإفتراضية لظهور الصور والتي تمثلها القيمة BOTTOM

‎

TOP

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

‎

MIDDLE

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

‎

LEFT

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

‎

RIGHT

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

‎

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

مثال:

‎

النتيجة: هذه الشيفرة ستدرج الصورة المسماه image.jpgمع محاذاتها ليمين الصفحة وإضافة مسافة فارغة مقدارها 20 بيكسل على الجهات الأربعة. (قارن بين هذا الإطار والإطار السابق الذي وضحت فيه خاصية ALIGNمع القيمة RIGHT.ولاحظ المسافة بين الصورة والنص المرافق لها.)

الخاصية الأخيرة والتي تستخدم مع الوسم هي BORDERووظيفتها إضافة إطار حول الصور والتحكم بسُمكِه. وهذه الخاصية تستخدم بشكل خاص عند تعيين صورة ما كوصلة تشعبية. (أنظرالدرس السادس) ويتم التحكم بالسُمك من خلال إسناد رقم يمثل السُمك بالبيكسل. والقيمة الإفتراضية له هي 0 أي لا يوجد إطار حول الصورة.
مثلاٌ لإضافة إطار سُمكه 5 بيكسل نكتب الشيفرة التالية:

‎

والآن حان الوقت لكي نناقش معاً بعض الأمور التي تتعلق بالصور والرسومات بشكل عام.

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

JPG, JPEG
إختصار لـِ Joint Photographic Experts Group. ويدعم هذا التنسيق صوراً بعيار 24 بت (أي 16.7 مليون لون). وميزة هذا التنسيق تتمثل في إمكانية ضغط الصور بنسب مختلفة عند تخزينها وبالتالي الحصول على صور صغيرة الحجم نسبياً.(أعني هنا حجم التخزين بالكيلوبايتات وليس أبعاد الصورة). لكن بالمقابل كلما إزدادت نسبة الضغط وصغر حجم الملف كان ذلك على حساب الجودة والوضوح.

GIF
إختصار لـِ Graphical Interchange Formatوأقصى عدد للألوان في هذا التنسيق هو 265 لون. ومع ذلك فإن أحجام الصور المخزنة به كبير نسبياً مقارنة بتنسيق JPG.لكن هناك مزايا رائعة ينفرد بها تنسيق GIFمما يستدعي استخدامه في صفحات الويب، أولها القدرة على تخزين صور بخلفيات شفافة Transparent Imagesوثانيها الصور المتحركة Animated Gifs
وتجد معلومات وافية ودروساً مفصلة حول هذه المواضيع ضمن دروس Paint Shop Pro.

والآن قد تسأل، أي من هذين التنسيقين أستخدم في صفحاتي؟! لا يوجد جواب قطعي لهذا السؤال لكن إليك هاتين المعادلتين:

JPG=الصور الحقيقية ذات العدد الكبير من الألوان، وذات الأبعاد الكبيرة
GIF=الصور قليلة الألوان وصغيرة الأبعاد مثل الأزرار.

* ما هي درجة إستبانة شاشتك Resolution? إذا كنت لا تعرف الجواب قم بفتح تطبيق لوحة التحكم في ويندوز 95 وإختر أيقونة(العرض) ثم اختر التبويب (إعدادات) وهناك سوف تشاهد "مساحة سطح المكتب" الذي يدل على درجة إستبانة الشاشة، وعلى الأغلب ستكون 640×480 أو 800×600، وهناك درجات أعلى تعتمد على قدرة محول العرض. كذلك سوف تشاهد "لوح الألوان" الذي يدل على عدد الألوان التي يمكن عرضها بالإعدادات الحالية للشاشة.
أما في ويندوز 3.11 أو 3.1 فاختر أيقونة برنامج إعداد Windowsمن لوحة التحكم فتظهر لك قائمة تجد بضمنها نوع وإستبانة الشاشة.

هذا الحديث يقودني إلى وحدة البيكسل Pixel (ألم أعدك مسبقاً بتوضيحها). وهي اختصار لـِ Picture Element. إذا كانت شاشتك بإستبانة 640×480 فهذا يعني أنها مقسمة(نظرياً) إلى شبكة من 640 عمود و480 سطر. وبمنتهى البساطة، إن كل خلية من هذه الشبكة تمثل بيكسلوبالطبع كلما زادت الإستبانة كلما صغر حجم وحدة البيكسل.

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

ومن الواضح أن استخدام العينات مفيد وعملي جداً وأن وضعها في المواقع التي تحتوي على العديد من الصور يؤدي إلى تقليل الزمن اللازم لتحميل الصفحات وتجنب ضياع الوقت بانتظار ظهور الصور الأصلية كبيرة الحجم. لأنها تعطي الزائر الحرية في النقر عليها إذا رغب في رؤية الأصل أو تجاهلها. أما كيف يتم عمل هذه العينات؟ فذلك باستخدام أحد برامج معالجة الرسوم كبرنامج Paint Shop Pro.من خلال تصغير أبعاد الصور الأصلية إلى النسبة المطلوبة.

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

وصلنا إلى نهاية هذا الدرس. هل أصبحت الآن تعرف كيف تدرج الصور في صفحتك؟

أعلن هنا

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

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

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

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

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

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

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

الدرس الخامس الصور والرسومات

التسميات

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

Top Ad unit 728 × 90

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

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

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

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

من أنا

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

المتابعون

التسميات

اعلان

عن المدونة

اعلان

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

أعلن هنا

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

خدماتي

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

التسميات

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

عن القالب

عن القالب

عن القالب

عن القالب