الآن دروس في لغة Html ( متجدد يومياً ) إن شاء الله تعالى

[(li) صقر (li)]

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته...وبعد

إن شاء الله أبدأ معكم دروس في لغة الهتميل وهي كما تعلمون تستخدم لتصميم مواقع الإنترنت , وهي بسيطة جداً ولا تحتاج إلى أكواد كثيرة ومعقدة , و في هذه الدروس أحب التنبيه على الجديد فيها عن غيرها أنها :
1/ بسيطة جداً .
2/ سيتم التطبيق عمليا ً .
3/ أهم شيء , أنني لن أضع صوراً في شرحي بل سأضع في المرفقات ملفات هتمل مفتوحة يتم التطبيق عليها مباشرة دون الحاجة إلى رؤيتها مصورة .

وأنا سأضع المواضيع من إحدى الموسوعات لدي وسأضيف بعضاً من عندي , وأنا أريد أن يستفيد منه الجميع إرضاءً لوجهه تعالى , وأنتظر إن شاء الله أن أرى صفحات الإنترنت المهمة من صنع المتدربين في هذه الدورة .

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

آسف على تعبكم .

وتفضلوا أيضاً , أربع كتب بروابط مباشرة أسرع من الضوء في الهتمل :



الكتاب الأول (http://abooks.tipsclub.com/index.php?act=download&id=398)

(http://abooks.tipsclub.com/index.php?act=download&id=398)الكتاب الثاني (http://abooks.tipsclub.com/index.php?act=download&id=396)

(http://abooks.tipsclub.com/index.php?act=download&id=398)الكتاب الثالث (http://abooks.tipsclub.com/index.php?act=download&id=397)

(http://abooks.tipsclub.com/index.php?act=download&id=398)الكتاب الرابع (http://abooks.tipsclub.com/index.php?act=download&id=1961)



ولن أبدأ المواضيع حتى أرى الإقبال على الدورة من الأعضاء , وأتمنى أن يستفيد الجميع منها .


والسلام...

[boubekeur]

ان شاء الله انا أتابع الدروس ويمكن أضيف عليها بعض الأشياء بعد اذنك
ورح أطرح موضوع كمان عن لغة xml اللي هي قريبة كثير من لغة html

[(li) صقر (li)]

مشكوووووووووووورررررررررررررررررر أخي وإحنا ممكن نساعد بعض في اللغتين

[new_man]

بارك الله فيك على الموضوع الرائع

[smsm_n]

بسم الله الرحمن الرحيم

بارك الله فيك أخي العزيز ووفقك إلى الخير ومساعدة الآخرين وننتظر الدرس بفارغ الصبر.

http://img96.imageshack.us/img96/7107/c8c7d1df20c7e1e1e5ddeddfeo9.gif

[(li) صقر (li)]

استعدوا غداً إن شاء الله الدرس الأول

[veto_44]

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

[(li) صقر (li)]

أعدك أخي وها أنا أضع الدرس الأول , وانتظروا مني أيضاً برنامج هتمل إيديتور

[veto_44]

جميل اخي صقر بارك الله فيك انا كلمت الاخ
نيو مان عشان يعمل تصميم لهذه الدورة وان
شاء الله يكون جاهز قريبا وننتظر منك الدرس
الاول وانا ساشارك بهذه الدورة بعد اذنك
ممكن ان اضيف دروس او اجيب على اسالة
او اشارك بمواد تعليمية واخونا ابو بكر معنا
ان شاء الله تكون دورة مميزة ويستفيد منها
الكثير من الاعضاء دمت بخير وعافية .

[(li) صقر (li)]

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته...وبعد
كل عام وأنتم بخير , وأحب أدعي في بداية موضوعي للأخ أحمد عصام ( الفرعون المحترف ) بالشفاء العاجل إن شاء الله تعالى .

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



</TAG> txt <TAG> </وسم> نص أو أمر<وسم>

فعلى سبيل المثال الوسم <B> يستخدم لكتابة الكلمات بخط أسود عريض Bold وذلك بالشكل التالي:
<B> Text <‎/B>
وهناك بعض الوسوم الخاصة التي تستخدم بصورة مفردة مثل وسم نهاية السطر <BR> أو قد تستخدم بكلتا الحالتين مثل وسم الفقرة <P>.
وسوف نناقش هذه الوسوم وغيرها بالتفصيل في حينه إن شاء الله

كيف نبدأ...
لا يتطلب كتابة ملف HTML أية برامج خاصة فهي كما ذكرت لغة لا تحتوي على برنامج مترجم. بل نحتاج فقط إلى برنامج لتحرير النصوص البسيطة ومعالجتها، وبرنامج المفكرة الموجود في Windows يفي بهذا الغرض. وكذلك إلى أحد متصفحات الإنترنت Netscape Navigator أو MS Internet Explorer لمعاينة الصفحات التي نقوم بتصميمها. وعليك فقط أن نقوم بحفظ النص المكتوب بملف يحمل الاسم الممتد ‎html,‎htm
والجدير ذكره أنه يوجد العديد من البرامج التي تستخدم لإنشاء صفحات Html. دون الحاجة لمعرفة هذه اللغة حيث يقوم المستخدم من خلالها بكتابة الصفحات وتصميمها بما تحويه من نصوص ورسومات وجداول ثم يقوم البرنامج بتخليق الوسوم المناسبة وتحويل هذه الصفحات من وراء الكواليس تلقائياً وحفظها بتنسيق html. أي أن دور المستخدم ينحصر في الكتابة والتصميم فقط، دون معرفته للشيفرة التي استخدمت. وبالتالي عدم قدرته على التحكم بأي وسم أو تعديل الشيفرة حسب الحاجة، إلا من خلال إعادته للتصميم الأساسي ثم إعادة التحويل والحفظ من قبل البرنامج. وهذه الطريقة على سهولتها وسرعتها نسبياً، إلا أني لا أنصح باستخدامها لمن يريد معرفة هذه اللغة والتمكن منها.
قبل أن نبدأ
حسناً، لديك محرر نصوص ممتاز لكتابة ملفات HTML ولديك متصفح إنترنت لمعاينتها، ولديك هذه الدروس التي ستنطلق معها إلى عالم تصميم صفحات الويب. هل هذا يكفي؟ برأيي المتواضع، لا.
تحتاج دائماً وأبداً إلى تطبيق ما تتعلمه بصورة عملية أكثر من مجرد الأمثلة المدرجة في الدروس. ما رأيك في أن تفكر بموضوع ما يستهويك وتحب أن تصممه ؟ وتخيل أنك ستقوم بإنشاء موقع ويب عنه بصورة واقعية. ومع تقدمك في الدروس ستقوم بتطبيق ما فيها على صفحاتك. ستجد الكثير من المتعة في هذا، وستسر جداً عندما ترى صفحتك تكبر أمام عينيك يوماً بعد يوم، والأهم من هذا كله هو أنك ستكتشف الثغرات في استيعابك لهذه الدروس (وعندها من المؤكد أنك ستقوم بتلافيها) وقد تكتشف كذلك ثغرات ارتكبها كاتب هذه الدروس. (وفي هذه الحالة أرجو أن لا تتردد أبداً في الكتابة لي لكي أعمل على تلافيها أيضاً). وكما ذكرت فلن تتوقف دورتنا على الشرح والتطبيق فقط بل سأضع إن شاء الله ملفات هتمل مفتوحة بدلاً من الصور وأيضاً برنامج الهيتمل إيديتور .

وأنا أنتظر ردودكم يا شباب , وأنتظر التوقيع الخاص بالدورة من الأخ العزيز New Man .

وستلاحظون أن :
الأكواد باللون الأخضر , وذلك ليسهل عليكم حفظها عندكم .
البرامج بالأزرق , حتى لا تتشابه عليكم ( تلخبطكم )
اللغات البرمجية بالبرتقالي , حتى أميزها عن البرامج الأخرى
الملاحظات بالأحمر , لأنه لون جذاب فسينبهك للملاحظة .

سيسأل البعض : لماذا يا علاء ( أنا اسمي علاء ) لم تضع ملف مفتو كما وعدت ؟

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

والبرنامج في الطريق .

والسلام...

[(li) صقر (li)]

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

[(li) صقر (li)]

هذا رابط لأن البرنامج ما رضي يترفع , اضغط هنا (http://www.bramjnet.com/vb3/showthread.php?t=112328)واختار البرنامج المناسب لك , ( انا أفضل إنك تخليك على برنامج المفكرة )

[boubekeur]

السلام عيكم أخي علاء
أنا عندي ملاحظة بشأن كلمة S C R I P T
فكما هو معروف فإن هذه الكلمة اذا كتبت صحيحة ( أي بدون فضاء بين الحروف) فأنها تتحول الى نجوم (في المنتديات فقط)
لذا أرجو منك أن تنبه الأعضاء الآخرين بهذه المشكلة البسيطة
******

[product]

جزاك الله خيرا أخي الفاضل و إنشاء الله ستكون دورة متميزة يستفيد منها الأخوة جميعا

[boubekeur]

http://b2kfreeb2k.googlepages.com/A1111.bmp
هذا رسم توضيحي يبين من أين أتت لغة هتمل وعلاقتها ببقاي الغات التي تستعمل الوسوم
SGML=standarized generalised markup language
HTML = HyperText Markup Language
WML= Wireless Markup Language
XML= extensible Markup Language
MathMl= mathematical markup language
XHTML= Extensible HTML

[(li) صقر (li)]

مشكوووووووووووورررررررررررر أخي أبو بكر , وأنا أعرف معلومة الايسكريبت ولقد نبهني ليها أحد الإخوة الأعزاء من زماااااااااااااااااااااااااااااااااااااااااااااااا ااان , لكنها فاتتني علشان كنت مهتم بتنسيق وتلوين الدرس , وإن شاء الله أعدلها في المرات القادمة , بعدين هي معروفة إن هذه النجوم هي كرمة سكريبت أو كوكيز .
لكن عندي سؤال : لماذا تمنع هذه الكلمة من الظهور في المنتديات ؟

أنتظر ردك .

وترقبوا الدرس القادم غداً بإذن الله تعالى


والسلام...

[boubekeur]

بحثت كثيرا ولم أجد جوابا مقنعا

[(li) صقر (li)]

حسناً إحنا ممكن نسأل أحد المشرفين , وأنا واثق أن الأخ فيتو لن يبخل علينا بما لديه

[veto_44]

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

[(li) صقر (li)]

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

[(li) صقر (li)]

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته...وبعد

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

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

لنأخذ الوسوم التالية:
وسم البداية وسم النهاية

<HTML> <‎/HTML>
<HEAD> <‎/HEAD>
<TITLE> <‎/TITLE>
<BODY> <‎/BODY>

ماذا تلاحظ؟ أن كل منها يتألف من زوج من الوسوم أحدهما وسم البداية، والآخر وسم النهاية. ويتميز وسم النهاية بوجود الرمز / . تأمل الرسم التالي، فهو يعطي فكرة عن تركيب ملف Html

إذن فملف Html يبدأ دائماً بالوسم <HTML> وينتهي بالوسم <‎/HTML>. لا تنسى ذلك!

أما الوسم <HEAD> فيحدد بداية المقطع الذي يحتوي على المعلومات الخاصة بتعريف الصفحة. كالعنوان الظاهر على شريط عنوان المتصفح. وهذا العنوان بدوره يحتاج لأن يوضع بين الوسمين: <TITLE> … <‎/TITLE> وبالطبع يجب كتابة الوسم <‎/HEAD> لكي ننهي هذا المقطع.

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

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

والآن قم بحفظ ما كتبته في ملف وبأي اسم تختاره. ولا تنسى أن الامتداد المستخدم في أسماء ملفات HTML هو htm. أو html. مثلاً أنا اخترت الاسم ‎1st_file.htm ومن الأفضل أن تقوم بإنشاء مجلد مستقل على القرص الصلب لكي تحفظ به ملفاتك فهذا يسهل عليك عملية استرجاعها للعرض أو التحديث وليكن هذا المجلد مثلاً بالاسم C:\htmfiles (أو بأي اسم يحلو لك).
حان وقت العرض، لكي نشاهد نتيجة ما كتبناه. قم بتشغيل متصفح الإنترنت الذي تستخدمه. فإذا كان Netscape Navigator اختر الأمر Open File… من قائمة File. أما في MS Internet Explorer فاختر الأمر Open… من قائمة File. ثم حدد المسار الذي يوجد به الملف. أنا شخصياً قمت بتحديد المسار التالي:
C:\htmfiles\1st_file.htm

وذلك طبعاً حسب الافتراضات السابقة التي اتبعتها عند تخزين الملف , أما النتيجة فسأدعك تراها بنفسك في جميع الأوامر .

وماذا عنك؟ هل حصلت على نفس النتيجة؟ إذن مبروك لقد قمت بإنشاء أول صفحة ويب خاصة بك.
وقبل أن نستمر أريد أن أنبهك إلى بعض الملاحظات عند كتابة صفحات الويب:
" لا يوجد بين كتابة الوسوم بالأحرف الإنجليزية الكبيرة UPPERCASE أو الأحرف الصغيرة lowercase. لذلك تستطيع فرق الكتابة بأي شكل منهما أو حتى الكتابة بكليهما.

" إن المتصفحات لا تأخذ بعين الاعتبار الفراغات الزائدة أو إشارات نهاية الفقرات (أي عندما تقوم بضغط مفتاح Enter) التي تجدها هذه المتصفحات في ملف Html. وبعبارة أخرى فإن باستطاعتك كتابة ملفك السابق بأشكال أربع ستجدها في المرفق ( تطبيق 1 ) .

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

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

والآن قد تتساءل، إذن كيف يمكن التحكم بمقدار النص المكتوب في كل سطر وكيف يمكن تحديد نهاية الفقرة وبداية الفقرة التي تليها؟ سؤال وجيه!!! والإجابة عليه هي:
سوف نستخدم الوسم <BR> لتحديد النهاية للسطر. والبدء بسطر جديد (لاحظ أن هذا الوسم مفرد، أي ليس له وسم نهاية).
ونعود إلى المثال السابق، قم بتعديل الملف لكي يصبح كما في ( الأمر 1 , تطبيق 2 )(في المرفقات ستجد كل ملفات التطبيق ) .

وأنت بنفسك سترى النتيجة
وهناك أيضا الوسم <P> الذي يقوم تقريباً بنفس عمل الوسم السابق أي أنه ينهي السطر أو الفقرة ويبدأ بسطر جديد لكن مع إضافة سطر إضافي فارغ بين الفقرات. ( الأمر 2 ,تطبيق 2 )

أما الفراغات فتعتبر رموزاً خاصة لذلك لا نستطيع التحكم بها وبعددها إلا باستخدام الوسم ‎&nbsp;‎ (والأحرف هي اختصار للعبارة Non Breakable Space). وإذا أردت إدخال عدة فراغات بين نص وآخر ما عليك إلا كتابة هذا الوسم بنفس عدد الفراغات المطلوب. كما يجب عليك التقيد بالأحرف الصغيرة هنا. ( الأمر 3 , تطبيق 2 )

وبمناسبة الحديث عن الرموز الخاصة فهناك العديد من هذه الرموز والتي يجب أن تكتب بصورة معينة وباستخدام الوسوم وليس مباشرة بصورتها العادية. خذ مثلا إشارتي أكبر من وأصغر من وإشارة الاقتباس ". كل هذه الإشارات تستخدم أصلاً مع الوسوم فهي محجوزة ضمن مفردات لغة HTML ومن الخطأ استخدامها بصورتها الصريحة لئلا يؤدي ذلك إلى حدوث مشاكل في طريقة عرض الصفحة. كذلك فإن هناك رموزاً غير موجودة أساساً على لوحة المفاتيح كرمز حقوق الطبع © ورمز العلامة المسجلة ® ونحتاج إلى هذه الطريقة(طريقة الوسوم) لكتابتها. وإليك جدول
( الرابط : http://www.khayma.com/hpinarabic/ampersnd.html (http://www.khayma.com/hpinarabic/ampersnd.html) ) ببعض هذه الرموز و وسومها المكافئة. وألفت نظرك إلى أنها تكتب كما هي في الجدول وبدون إشارتي <>

وصلنا إلى النهاية... نهاية الدرس الثاني .

أرجو أن أفتح عيني لأضع الدرس الثالث فأجد توقيع دورتي وصل وموضوعي قد ثبت من قبل مشرفنا الغالي:eyelove: Veto_44 :eyelove: والأخ العزيز :eyelove: New Man :eyelove:
والسلام...

[(li) صقر (li)]

يلا يا شباب فين ردودكم الجميلة

[boubekeur]

صباح الخير أخي علاء
بس الملف المرفق لما أفتحه يقول أنه ملف غبر صالح ولا يفتح
ممكن تنزله مرة ثانية على موقع www.sendspace.com

[veto_44]

بارك الله فيك اخي علاء على الدرس الجميل
جدا بسيط وخفيف على الصائم ههههههههه
ومنسق جدا جزاك الله عنا كل خير تابع وان
شاء الله تجد متابعة جيدة لك خالص التقديير والاحترام .

[(li) صقر (li)]

مشكوووووووورررررر أخواني وأنا رفعت الملف كويس بس لو تحب ممكن أحطهم الثنان كل على حدى

[(li) صقر (li)]

هذه الملفات مرة أخرى

[(li) صقر (li)]

بسم الله الرحمن الرحيم

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

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

‎<BODY BGCOLOR="FFFFFF">‎
...
<‎/BODY>


لقد قمت بإضافة الخاصية BGCOLOR إلى الوسم <BODY> ، وهي تقوم بتحديد لون الخلفية للصفحة. أما FFFFFF فهي القيمة التي تمثل اللون المختار وهو هنا اللون الأبيض، (لاحظ أنها مكتوبه بين إشارتي " " ) ولو أردت تمثيل اللون الأسود لكتبت الرمز 000000. أو الرمز 6699CC للون الأزرق الفاتح......


فمن أين جاءت هذه القيم، وكيف؟... تابع القراءة وسوف تعرف



القليل عن الألوان...


تلاحظ أن القيم السابقة مكونة من ستة رموز، وهي مكتوبة بالصيغة التالية:-
http://www.khayma.com/hpinarabic/images/rrggbb.gif
هناك ثلاثة ألوان أساسية هي الأحمر والأخضر والأزرق، ولكل منها يوجد 256 درجة لونية ويعبر عن هذه الدرجات بالأرقام من 000 وحتى 255. ومن خلال مزج هذه الألوان بدرجاتها اللونية المختلفة نحصل على الألوان الأخرى
.


* إن أي لون هو مزيج -وبنسبة معينة من الدرجات- من هذه الألوان الثلاثة * فمثلا اللون الأسود مكون من الدرجة 000 من كل من اللون الأحمر والأخضر والأزرق. واللون الأبيض مكون من الدرجة 255 من هذه الألوان. أما اللون الأصفر فهو مكون من الدرجة 255 للون الأحمر، والدرجة 255 للون الأخضر، والدرجة 000 من اللون الأزرق... وهكذا بنفس الطريقة يتم تكوين باقي الألوان.


وبعملية حسابية بسيطة 256×256×256 ينتج لدينا أن عدد الألوان التي يمكن الحصول عليها بمزج الألوان الثلاثة السابقة هو 16777216 بالضبط.

حسنا، لكن من أي جاءت الرموز FFFFFF والتي عبرت عن اللون الأبيض بها. إنها ببساطة أرقام… مكتوبة بالنظام السداس عشري (نظام عددي أساسه الرقم 16 ويعبر عنه باستخدام الأرقام العادية من 0 إلى 9 والرموز A,B,C,D,E,F ). فالرقم 255 بالنظام العشري العادي يكافئه الرقم FF بالنظام السداس عشري.
إذن فالرقم السداس عشري FF على اليسار يمثل الدرجة 255 للون الأحمر. والرقم FF في الوسط يمثل الدرجة 255 من اللون الأخضر. والرقم FF على اليمين يمثل الدرجة 255 من اللون الأزرق.
وعلى هذا المنوال يعبر عن اللون الأزرق الفاتح بالرقم السداس عشري: 6699CC أما اللون الأسود فرقمه هو 000000.

أما كيف تعرف الرمز الخاص باللون الذي تريد اختياره، فيوجد برامج خاصة تستطيع من خلالها دمج الألوان الثلاثة بنسب مختلفة، ومن ثم يقوم البرنامج بتوليد الرمز السداس عشري المكافئ للون الناتج. وهذا أحدها (http://www.khayma.com/hpinarabic/progs/colormix.zip)
إذا لم يفلح البرنامج فاتبع الآتي :
1/ افتح برنامج البوربوينت .
2/ من شريط الأدوات في الأسفل افتح قائمة الألوان .
3/ اختار الخيار الأول .
4/ اختار مخصص .
5/ حدد اللون المطلوب ثم سجل بياناته .
6/ اكتبه في صفحتنا الهتملية .

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

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


ونعود إلى الوسوم و خصائصها ...



‎<BODY BGCOLOR="#FFFFFF" BACKGROUND="image.jpg">‎


...

<‎/BODY>




تقوم الخاصية BACKGROUND بتحديد صورة كخلفية (ورق جدران) للصفحة وقد استخدمت الصورة التالية:



http://www.khayma.com/hpinarabic/images/image.jpgوالمسماة image.jpg في صفحتي وكانت هذه النتيجة


http://www.khayma.com/hpinarabic/images/webback.gif


تلاحظ أن المتصفح قد قام بتكرار عرض الصورة بطريقة التجانب وأنها أصبحت تغطي كل الشاشة. بحيث حجبت أيضاً اللون الأبيض الذي حددناه كلون الخلفية (من خلال الخاصية BGCOLOR) والحقيقة أن اللون يظهر فقط عندما لا نقوم باستخدام صورة ما كخلفية. ومع ذلك يفضل تحديده إحتياطاً خاصة وأن بعض المتصفحات القديمة توصف بأنها متصفحات نصية Text-Based Browsers (أي ليس بإمكانها عرض الصور). أو ربما هناك بعض المستخدمين الذين قاموا بإلغاء خيار عرض الصور تلقائياً من متصفحاتهم. إذن لنعطهم على الأقل فرصة مشاهدة بعض الألوان إن لم يستطيعوا مشاهدة الصور.


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


http://www.khayma.com/hpinarabic/images/back1.jpg (http://www.khayma.com/hpinarabic/examples/bground1.html)

http://www.khayma.com/hpinarabic/images/back3.jpg (http://www.khayma.com/hpinarabic/examples/bground3.html)


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


إليك هذه الخصائص التي تقوم بالتحكم في ألوان النصوص:



‎TEXT="#rrggbb"‎ تحديد لون النص الأساسي للصفحة ‎LINK="#rrggbb"‎ تحديد لون الوصلات التشعبية ‎VLINK="#rrggbb"‎ تحديد لون الوصلات التشعبية التي تمت زيارتها visited links ‎ALINK="#rrggbb"‎ تحديد لون الوصلة التشعبية الفعالة أي عندما يتم النقر عليها active links والآن، دعنا نجمل الخصائص السابقة في عبارة واحدة. وسوف أكتب الرموز الخاصة بالألوان بنفس تلك الألوان التي تمثلها. وألفت نظرك إلى أنه لا أهمية للترتيب في كتابة هذه الخصائص داخل العبارة.




‎<BODY BACKGROUND="backimag.jpg"‎





BGCOLOR="#ffff00"‎

TEXT="#000066"‎
LINK="#00ff00"‎
VLINK="#ff0000"‎
ALINK="#999999">‎



حاول أن تحللها! هل استنتجت أنني قد حددت الصورة backimag.jpg كخلفية للصفحة؟ وأنني اخترت اللون الأصفر للخلفية (في حالة عدم عرض الصورة السابقة كخلفية)؟ وان النص سيظهر باللون الأزرق الغامق؟ أما الوصلات التشعبية فلونها أخضر، والوصلات التي تمت زيارتها ستظهر باللون الأحمر. أما تلك الوصلة الفعالة فستظهر باللون الرمادي في لحظة النقر عليها بالفأرة.

إذا كانت هذه هي استنتاجاتك... فمبروك، لقد نجحت. وكل ما أتمناه أن تكون قد قضيت وقتاً ملوناً وزاهياً مع هذا الدرس.

[new_man]

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

http://img182.imageshack.us/img182/6055/sa9rcl6.jpg

[black burn]

شكرا اخي العزيز صقر وبارك الله فيك واعانك علي الدوره ويشرفني ان اكون احد المستفادين من هذه الدوره الرائعه
مع تحياتي لك
وشكرا

[صـلاح]

الأخ الفاضل

صقـــــــــر

نشكر لك هذه الدورة القيمة

و نحييك و بارك الله فيك

تقبل منى جميل التحية

[キャプテン翼]

شكرا على الدروس الجميلة يا مبدع ::
""""""""""""""""""""

[(li) صقر (li)]

بسم الله الرحمن الرحيم

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

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

ولنبدأ
إننا لم نقم بالتعامل مع الخطوط فيها ولا بأي شكل من الأشكال. أي أننا تركناها على إعداداتها الافتراضية.
وبالمناسبة فإن هذه الإعدادات هي خط عادي، نوعه Times New Roman وحجمه 3 (بمقياس متصفحات الإنترنت).
الوسم الأول الخاص بالخطوط هو <FONT> ... </FONT>
وهو يقوم بالتحكم بالخطوط من حيث النوع واللون والحجم. أما الخصائص التي نستخدمها مع هذا الوسم و الوسوم الأخرى للخطوط فهي كالتالي:
Face
تقوم هذه الخاصية بتحديد نوع الخط الذي نريده، وقد نقوم بتحديد أكثر من نوع معاً. وفي هذه الحالة إذا لم يتواجد الخط المحدد أولاً على جهاز الشخص الذي يتصفح الموقع يتم اعتماد الخط الثاني ... وهكذا
‎<FONT FACE="Traditional Arabic, Arabic Transparent, Simplified Arabic">‎
... Text ...
<‎/FONT>
طبعاً لا تنس أن تتأكد من كتابة أسماء الخطوط بالصورة الصحيحة هجائياً.
Color
أما هذه الخاصية فتحدد لون الخط، وذلك بنفس مبادئ تحديد الألوان التي تحدثنا في درس الألوان
‎<FONT COLOR="#FF0000">‎
... Text ...
<‎/FONT>
Size
ولتحديد حجم الخط نستخدم هذه الخاصية. وفقط هناك سبعة أحجام لأي خط تستطيع المتصفحات التعرف عليها.
ونقوم بتحديد الحجم المطلوب بأسلوبين: أولهما المباشر. حيث يتم كتابة رقم يتراوح ما بين 1-7. أي أننا نختار الحجم الذي نريده مباشرة.
‎<FONT SIZE="4">‎
... Text ...
<‎/FONT>
وإليك نماذج بأحجام الخطوط

خط بحجم 1
خط بحجم 2
خط بحجم 3 (الخط الافتراضي)
خط بحجم 4
خط بحجم 5
خط بحجم 6
خط بحجم 7


أما الأسلوب الثاني فهو النسبي: حيث تكتب الأرقام من 1 إلى 6 مرفقة إما بإشارة + أو بإشارة -.
‎<FONT SIZE="+4">‎
... Text ...
<‎/FONT>
وفي هذه الطريقة فإن الأرقام 1-6 تمثل درجات التكبير (+) أو التصغير (-) للخط وذلك نسبةً إلى الحجم الافتراضي. فمثلا الرقم +4 يعني تكبير الخط أربع درجات عن الحجم الافتراضي وهو 3، أي أنه يصبح بالحجم 7. بالمقابل فأن الرقم -1 يعني تصغير الخط درجة واحدة أي يصبح بالحجم 2.
ولتوضيح هذا الأسلوب، إليك هذه النماذج:

خط بحجم -3
خط بحجم -2
خط بحجم -1
خط بحجم +0 (أو -0 وهو الافتراضي)
خط بحجم +1
خط بحجم +2
خط بحجم +3
خط بحجم +4
خط بحجم +5

لاحظ أنه حتى في الأسلوب النسبي لا نستطيع الحصول على أكثر من سبعة أحجام للخطوط. حتى وإن حاولنا كتابة أرقام أكبر أو أصغر كما فعلت هنا بكتابة الحجم -3 أو +5.


والآن أعرف ماذا تريد أن تسأل، ستقول لقد ثبت حجم الخط على حده الأدنى عند الدرجة -2 وعلى حده الأعلى عند الدرجة +4. إذن ما الفائدة من وجود الدرجات الأخرى الأقل من -2 والأكبر من +4؟
حسنا وأنا أجيبك بسؤال آخر: ماذا لو قمنا بتغيير الحجم الافتراضي للخط في كل الصفحة إلى 1 بدلاً من 3؟ (وسوف نقوم بذلك فعلاً بعد قليل)، ألا نحتاج في هذه الحالة إلى الدرجات من +1 إلى +6 لتمثيل الأحجام الأكبر منه؟ وإذا قمنا بتحديد 7 كحجم افتراضي ألا نحتاج إلى الدرجات من -1 إلى -6 لتمثيل الأحجام الأصغر منه؟ إذن نحن نحتاج فعلاً إلى هذه الدرجات لكي نغطي جميع الاحتمالات الواردة.
أرجو أن يكون هذا الجواب قد أقنعك :-)

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


‎‎<FONT FACE="arial" SIZE="6" COLOR="#FF0000">‎
This font is Arial, Size is 6, Color is Red
<‎/FONT>
This font is Arial, Size is 6, Color is Red


‎<FONT FACE="arial" SIZE="+3" COLOR="#FF0000">‎
This font is Arial, Size is +3, Color is Red
<‎/FONT> This font is Arial, Size is +3, Color is Red



‎‎<FONT FACE="Times New Roman" SIZE="5" COLOR="#0000FF">‎
This font is Times New Roman, Size is 5, Color is Blue
<‎/FONT>

This font is Times New Roman, Size is 5, Color is Blue


‎<FONT FACE="courier" SIZE="2" COLOR="#800000">‎
This font is Courier, Size is 2, Color is Maroon
<‎/FONT>
This font is Courier, Size is 2, Color is Maroon


<FONT FACE="Arial" SIZE="5" COLOR="#00FF00"> This <‎/FONT>
<FONT FACE="Times New Roman" SIZE="7" COLOR="#FF00FF"> is <‎/FONT>
<FONT FACE="Arial" SIZE="2" COLOR="#FF0000"> multi <‎/FONT>
<FONT FACE="Impact" SIZE="4" COLOR="#000000"> colors, <‎/FONT>
<FONT FACE="Courier" SIZE="2" COLOR="#0000FF"> multi <‎/FONT>
<FONT FACE="Times New Roman" SIZE="3" COLOR="#008080"> faces, <‎/FONT>
<FONT FACE="Courier" SIZE="6" COLOR="#FFFF00"> and <‎/FONT>
<FONT FACE="Arial" SIZE="5" COLOR="#808080"> multi <‎/FONT>
<FONT FACE="Impact" SIZE="2" COLOR="#800000"> sizes <‎/FONT>
<FONT FACE="Times New Roman" SIZE="7" COLOR="#00FFFF"> text <‎/FONT>
This is multi colors, multi faces, and multi sizes text



<FONT FACE="Impact" SIZE="6" COLOR="#000000">C <‎/FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#008080">O<‎/FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#FF0000">L<‎/FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#0000FF">O<‎/FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#800000">R<‎/FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#FF00FF">S<‎/FONT>
C O L O R S


ننتقل الآن إلى الوسم الثاني من الوسوم الخاصة بالخطوط وهو <BASEFONT>.
وعمله هو تحديد نوع الخط وخصائصه بالنسبة للصفحة كلها . أي أنه يقوم بتعريف نوع الخط الأساسي الذي سيستخدم في الصفحة من بدايتها إلى نهايتها ويحدد لونه وحجمه.
هل لاحظت انه وسم مفرد ولا يحتوي على وسم للنهاية؟ بالطبع ما الحاجة إلى وسم النهاية طالما أنه يتعامل مع الصفحة ككل ومع الإعدادات الأساسية لها، وليس مع كلمة أو سطر أو فقرة بذاتها. لذلك فإن هذا الوسم يكتب عادة في أول الملف، ويفضل مباشرة بعد وسم <BODY>. أما الخصائص المستخدمة معه فهي نفس الخصائص سالفة الذكر مع <FONT> ، (نستطيع استخدام الخاصية Name معه بدلاً من Face). وبنفس الطريقة وبدون أي اختلافات. وإليك هذه الشيفرة كمثال:
‎<BASEFONT Name="Arial" COLOR="#FF0000" SIZE="5">‎
وبدراسة هذا المثال نستنتج أنه يقوم بتعديل الخط الافتراضي للصفحة بحيث يصبح نوعه Arial وحجمه 5 ولونه أحمر. وبالتالي فإن كل النصوص المكتوبة في تلك الصفحة سيطبق عليها هذا النمط من الخط. ما لم نقم طبعا باستخدام الوسوم <Font> ... </‎Font> لتعديلها والتحكم بمظهرها كما فعلنا في الأمثلة السابقة، فهي أكثر تحديداً وأكثر مرونة من الوسم <BASEFONT>
وبمناسبة الحديث عن الألوان وتغيير اللون الأساسي لنص الصفحة. ألا تذكر أننا في الدرس السابق تكلمنا عن الخاصية Text التي تكتب مع الوسم <Body> والتي استخدمناها لتحديد لون نص الصفحة... أنا لا زلت أذكر ذلك.
لا يوجد تعارض بين هذه الخاصية وخاصية Color في الوسم <BASEFONT> فأنت بكل بساطة تستطيع استخدام أي منهما في صفحتك. وإذا حدث واستخدمت كلاهما فإن اللون المحدد مع الوسم <BASEFONT> هو الذي سيطبقه المتصفح ويعتمده.
وهنا أريد أن أذكرك بما قلته في بداية هذا الدرس:
يوجد دائماً أكثر من طريقة لأداء نفس العمل




هناك وسوم خاصة تستخدم لتمييز العناوين Headings في صفحات الإنترنت وهي:
<Hn> ... <‎/Hn>
وحرف n هو رقم بين 1-6 يمثل مستوى العنوان.

<H1> Heading 1 <‎/H1>
<H2> Heading 2 <‎/H2>
<H3> Heading 3 <‎/H3>
<H4> Heading 4 <‎/H4>
<H5> Heading 5 <‎/H5>
<H6> Heading 6 <‎/H6>
Heading 1
Heading 2

Heading 3

Heading 4

Heading 5

Heading 6




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

* الخط الغامق (الأسود العريض)، ونستخدم له الوسوم التالية:
<B> ... <‎/B>
<STRONG> ... <‎/STRONG>
<B> Bold Text <‎/B>
This is Bold Text
<STRONG> Strong Text <‎/STRONG>
This is Strong Text


* الخط المائل
<I> ... <‎/I>
<EM> ... <‎/EM>
<I> Italic Text <‎/I>
This is Italic Text
<EM> Emphasized Text <‎/EM>
This is Emphasized Text


* الخط المسطر
<U> ... <‎/U>
<U> Undelined Text <‎/U>
This is Undelined Text


* الخط المرتفع
<SUP> ... <‎/SUP>
<SUP> Super****** Text <‎/SUP>
This is Super****** Text


* الخط المنخفض
<SUB> ... <‎/SUB>
<SUB> Sub****** Text <‎/SUB>
This is Sub****** Text


* خط كبير
<BIG> ... <‎/BIG>
<BIG> Big Text </BIG>
This is Big Text


* خط صغير
<SMALL> ... <‎/SMALL>
<SMALL> Small Text <‎/SMALL>
This is Small Text


* نص يعترضه خط
<STRIKE> ... <‎/STRIKE>
<S> ... <‎/S>
<STRIKE> Striked Text <‎/SRTIKE>
This is Striked Text
<S> Striked Text <‎/S>
This is Striked Text too


* نص الآلة الطابعة TeleType
<TT> ... <‎/TT>
<TT> Tele Type Text <‎/TT>
This is Tele Type Text


وهذا النص يعرف أيضاً بالنص موحَد المسافات Monospaced Text. ولتوضيح هذا المفهوم إليك المثال التالي:
إذا أخذنا الحرفين m,i وكتبنا كل منهما عشر مرات متتالية نلاحظ أن المساحة التي شغلها الحرف m هي أضعاف المساحة التي شغلها الحرف i
iiiiiiiiii
mmmmmmmmmm
أما عند استخدام الوسم <TT> ... <‎/TT> فإن المساحة التي يشغلها كلا الحرفين تصبح موحدة
iiiiiiiiii
mmmmmmmmmm

وهذه أمثلة تجمع بين عدة تنسيقات معاً:

<B><I><U>
This is a Bold, Italic and Underlined Text
<‎/U> <‎/I> <‎/B>
This is a Bold, Italic and Underlined Text

<FONT COLOR="#FF0000" SIZE="+3"><U><I>
This text is red, size +3, Italic, and Underlined
<‎/I> <‎/U> <‎/FONT>
This text is red, size +3, Italic, and Underlined


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

فكتابة الوسوم السابقة بالطرق التالية هو خطأ:
<B><I><U>
This is a Bold, Italic and Underlined Text
<‎/B> <‎/I> <‎/U>

hr

<B><I><U>
This is a Bold, Italic and Underlined Text
<‎/B> <‎/U> <‎/I>

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

والسلام...

[(li) صقر (li)]

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

والسلام...

[undying01]

بارك الله جهودك

[cool man]

بارك الله فيك على الموضوع الرائع

[(li) صقر (li)]

مشكوووووووووووررررررررررررين وأنتظر أشوف رمز الدورة في تواقيعكم .
مشكووووووووررررريييييييننننن × 999.999.999.999.999.999.999.999.999.999.999.999.99 9

[jetly126]

أريد يا أخي العزيز أن ترسل لي هذاالبرنامج اللي يحل مشكلة الريجيستير
مشكور سسسسللللللللللفففففففففففففااااااااا

[(li) صقر (li)]

أخي جيتلي , اضغط على السطر اللي فيه البرنامج وادخل وحمله برابط مباشر .

و السلام...

[boubekeur]

ماشاء الله الدورة كاملة متكاملة

الى الأمام أخي علاء

[taimor2010]

بارك الله تعالى فيك وعليك وجعلك الله ومثلك زخرا للوطن ويد نافعه له

[michaelamine]

مشكوووووووووووور اخي , و اشجعك اخي على عملك هذا

[(li) صقر (li)]

مشكووووووووووووووووووررررررررررررررر أخي وأنا أشكرك على ردك هذا .

[(li) صقر (li)]

الدرس الخامس:
أهلاً وسهلاً بك إلى الدرس الخامس من دروس HTML. في هذا الدرس سوف نناقش الوسوم الخاصة بالفقرات بشكل خاص وترتيب الصفحات وتنسيقها بشكل عام.
صحيح أن استخدامك للألوان والرسومات في الصفحة يضفي عليها نوعاً من الحيوية، وأن الخطوط تعطي صفحتك رونقاً وجمالاً. لكنك إن لم تهتم بترتيب صفحتك أو تقضي بعض الوقت في تنسيق هيكلها العام وتنظيم فقراتها وقوائمها، فإنه من الصعب عليك الحصول على صفحة ويب ناجحة. فالترتيب هو الخطوة الأولى لجذب اهتمام الزائر أو القارئ لصفحتك وتسهل عليه فهم الخطوط العريضة للصفحة.
لقد قمت بإيضاح بعض الوسوم الخاصة بالفقرات. ولا بأس من تذكيرك بها. فالوسم <P> يقوم بإنهاء الفقرة. والوسم <BR> ينهي السطر الحالي وينقل النص إلى سطر جديد. والوسم ‎&nbsp;‎ يقوم بإضافة الفراغات، ويجب تكرار كتابته بنفس عدد الفراغات المطلوب.
ونتابع في هذا الدرس مع هذه الوسوم وغيرها.
لقد قلت إن الوسم <P> هو وسم مفرد لكنه يستخدم أيضاً كوسم مزدوج <P> ... <‎/P> وفي هذه الحالة يمكّننا من تحديد اتجاه الفقرة و اتجاه النص فيها حيث يستخدم معه الخصائص ALIGN, DIR.
فالخاصية ALIGN تحدد محاذاة الفقرة وهي تأخذ القيم Left, Center, Right وأوضحها بالأمثلة التالية:
<P Align="left"> This is a left-aligned paragraph <‎/P>
This is left-aligned paragraph

<P Align="right"> This is right-aligned paragraph</P>
This is a right-aligned paragraph

<P Align="center"> This is a centered paragraph</P>
This is a centered paragraph

كذلك لتوسيط الفقرات أو الكائنات بشكل عام في الصفحة نستطيع استخدام الوسوم <CENTER> ... </CENTER>
<CENTER> This is a centered text </CENTER>
This is a centered text


أما الخاصية DIR والتي نستخدمها أيضاً مع <P> فتقوم بتحديد اتجاه قراءة النص وتأخذ القيم
LTR
اتجاه النص من اليسار إلى اليمين (Left To Right)
RTL
اتجاه النص من اليمين إلى اليسار (Right To Left)


(تذكر هذه الخاصية جيداً فهي مهمة عند كتابة صفحات باللغة العربية)

ولتنسيق الفقرات أيضاً يوجد الوسوم
<BLOCKQUOTE> ... <‎/BLOCKQUOTE> أي وسوم الفقرات المقتبسة. ووظيفتها تمييز الفقرة من خلال إدراج مسافة إضافية على الهامشين الأيمن والأيسر لها. أنظر إلى الفقرة التالية التي قمت (باقتباسها) من إحدى ملفاتي . ومن ثم وضعتها ضمن <BLOCKQUOTE> ... <‎/BLOCKQUOTE>
وفكرة هذه الدروس جاءت نتيجة لما لمسته خلال استخدامي لشبكة الإنترنت بشكل عام، والبحث عن المواقع العربية فيها بشكل خاص. فعندما بدأت بتعلم تصميم صفحات الإنترنت، لم يكن هناك مشكلة في الحصول على المصادر أو المواقع التعليمية التي أحتاجها ومن خلال الإنترنت نفسه. لكن المشكلة هي دائماً في الحصول على تلك المصادر بالصورة التي تتناسب مع احتياجاتنا كمستخدمين عرب ....
والحقيقة أنك تستطيع وضع عدة وسوم معاً إذا أردت إدراج هوامش أكبر. كما في المثال التالي:
<BLOCKQUOTE>
<BLOCKQUOTE>
وفكرة هذه الدروس جاءت نتيجة لما لمسته خلال استخدامي لشبكة الإنترنت بشكل عام، والبحث عن المواقع العربية فيها بشكل خاص. فعندما بدأت بتعلم تصميم صفحات الإنترنت، لم يكن هناك مشكلة في الحصول على المصادر أو المواقع التعليمية التي أحتاجها ومن خلال الإنترنت نفسها. لكن المشكلة هي دائماً في الحصول على تلك المصادر بالصورة التي تتناسب واحتياجاتنا كمستخدمين عرب ....
<‎/BLOCKQUOTE>
<‎/BLOCKQUOTE>
وتكون النتيجة:
وفكرة هذه الدروس جاءت نتيجة لما لمسته خلال استخدامي لشبكة الإنترنت بشكل عام، والبحث عن المواقع العربية فيها بشكل خاص. فعندما بدأت بتعلم تصميم صفحات الإنترنت، لم يكن هناك مشكلة في الحصول على المصادر أو المواقع التعليمية التي أحتاجها ومن خلال الإنترنت نفسها. لكن المشكلة هي دائماً في الحصول على تلك المصادر بالصورة التي تتناسب واحتياجاتنا كمستخدمين عرب ....
وبالطبع ليس شرطاً أن تستخدم هذا الوسوم مع الفقرات المقتبسة فقط. فأنا مثلاً أضعها في بداية ونهاية كل صفحة من الصفحات التي أصنعها. وبالتالي يظهر النص بعيداً قليلاً عن حاشية الصفحة فهذا أفضل من أن يكون ملاصقاً لها وأجمل. (مجرد وجهة نظر)

والآن تأمل هذا الشكل وحاول أن تستنتج كيف قمت بإعداده...!؟
A B C DE F G HI J K LM N O PQ R S Tربما توصلت إلى أني استخدمت عدداً كبيراً من وسوم الفراغات ‎&nbsp;‎ ونهاية السطر <BR>. حسناً، استنتاجك لا بأس به ولكنه ليس دقيقاً فأنا لم أستخدم أياً من هذه الوسوم هنا. بل كل ما فعلته بعد إعداد هذا الشكل هو وضعه ضمن:
<PRE> ... </PRE>
وهما اختصار لكلمة Preformatted أي المنسق مسبقاً. وبالفعل فقد احتفظ هذا الشكل بالتنسيق المسبق الذي تم إعداده به. لكن تم تحويل الخط إلى خط موحد المسافات (راجع الدرس السابق) ولو لم أقم بوضعه ضمن هذه الوسوم لكانت النتيجة كالتالي:

A B C D E F G H I J K L M N O P Q R S T
لاحظ أن هذا الوسم يستخدم مع الفقرات التي لا نحتاج فيها إلى تنسيقات متعددة للخطوط أو الألوان. بل فقط مع الفقرات العادية موحدة الخط و التنسيقات.

التطبيق في الرد التالي
والسلام...

[hichamensa]

مشكوووووووووووور اخي

[(li) صقر (li)]

لا شكر على الواجب

[(li) صقر (li)]

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته...وبعد

القوائم
تحتوي لغة HTML على مجموعة من الوسوم الخاصة بتنظيم البيانات في قوائم وباستخدام عدة خيارات. وهناك نوعين من القوائم:
أولهما المتسلسلة Ordered Lists. واليك المثال التالي عليها
أسماء بعض المدن الفلسطينية
1. القدس
2. نابلس
3. رام الله
4. الخليل
5. جنين
6. طولكرم
وثانيهما القوائم غير المتسلسلة Unordered Lists وهذا مثال عليها
أسماء بعض الجامعات الفلسطينية
· جامعة النجاح
· جامعة القدس المفتوحة
· جامعة بيرزيت
· جامعة الخليل
عند التعامل مع القوائم بنوعيهما نحتاج إلى وسوم خاصة بتحديد بداية ونهاية القائمة و وسوم تحدد بنود هذه القائمة.
بالنسبة للقوائم المتسلسلة نستخدم الوسوم

<OL> ... <‎/OL>


أما بالنسبة للقوائم غير المتسلسلة فنستخدم


<UL> ... <‎/UL>



ولتعيين كل بند من بنود القائمة نستخدم الوسم <LI> وهو وسم مفرد يكتب في بداية السطر الخاص بكل بند List Item.
إذن عندما قمت بإنشاء القوائم السابقة استخدمت الشيفرة التالية:
<OL>
<LI>القدس
<LI>نابلس
<LI>رام الله
<LI>الخليل
<LI>جنين
<LI>طولكرم
<‎/OL>

<UL>
<LI>جامعة النجاح
<LI>جامعة القدس المفتوحة
<LI>جامعة بيرزيت
<LI>جامعة الخليل
<‎/UL>
والخاصية الوحيدة التي تستخدم مع هذه الوسوم هي TYPE ووظيفتها تحديد شكل الرمز الظاهر مع بنود القائمة، وعادة تستخدم مع وسوم بداية القوائم <UL> أو <OL> وبذلك نحدد رمزاً واحداً لكل القائمة. ولكن نستطيع استخدامها أيضاً مع وسم البنود <LI> لإعطاء تحكم أكبر في مظهر القائمة من خلال تحديد رمز مختلف لكل بند.
فعند وضعها ضمن تعريف القوائم المتسلسلة تأخذ القيم: A , a , I , i التي تغير رموز الترقيم من الأرقام العادية الافتراضية (والتي رمزها 1) إلى ترقيم باستخدام الأحرف اللاتينية الكبيرة أو الصغيرة، أو باستخدام الأرقام الرومانية كما ترى في الجدول التالي:


‎<OL TYPE="A">‎



‎ A.


B.


C.


D.


E.



‎<OL TYPE="a">
a.


b.


c.


d.


e.
‎


‎<OL TYPE="I">
I.


II.


III.


IV.


V‎




‎<OL TYPE="i">


i.


ii.


iii.


iv.


v.






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

‎<UL TYPE="square">‎
‎<UL TYPE="circle">‎


ولكن للأسف هذه الخاصية لا تعمل ولا يظهر تأثيرها إلا مع متصفح نيتسكيب وليس مع مايكروسوفت إكسبلورر الذي يتعامل فقط مع القيمة الافتراضية للخاصية. (رجاءً لا يغضب مستخدمو إكسبلورر فهناك الكثير من الوسوم والخصائص التي لا يستطيع نيتسكيب عرضها أيضاً).
ولإتمام الحديث عن القوائم، أذكر لك أن هناك وسوماً أخرى تستخدم لإنشاء القوائم غير المتسلسلة، وبنفس الطريقة المستخدمة مع <UL>...<‎/UL> وهذه الوسوم هي:

<DIR> ... <‎/DIR>


<MENU> ... <‎/MENU>



هناك نوع خاص من القوائم يدعى قوائم الشرح أو التعريفات Definition Listsوكما يدل الاسم تستخدم عندما نريد إدراج قائمة من المصطلحات يتبع كل واحد منها شرح أو تعليق.
HTML
Hyper Text Markup Language
WWW
World Wide Web
FTP
File Transfer Protocol
GIF
Graphical Interchange Format
JPG, JPEG
Joint Photographic Experts Group
ونحتاج لإنشاء هذه القوائم إلى ثلاثة وسوم:
الأول <DL> ... <‎/DL> لتعريف بداية ونهاية القائمة.
والثاني <DT> ويوضع قبل كل مصطلح لتحديده، وهو وسم مفرد.
أما الثالث فهو <DD> وهو وسم الشرح أو التعليق وهو أيضا مفرد. ولنقم الآن بكتابة شيفرة القائمة السابقة
‎<DL>‎
‎<DT>HTML <DD>Hyper Text Markup Language‎
‎<DT>WWW <DD>World Wide Web‎
‎<DT>FTP <DD>File Transport Protocol‎
‎<DT>GIF <DD>Graphical Interchange Format‎
‎<DT>JPG, JPEG <DD>Joint Photographic Experts Group‎
‎<‎/DL>‎
وصلنا الآن إلى نهاية هذا الدرس، والذي ناقشنا فيه ترتيب الصفحات و الفقرات والقوائم. أتمنى لك صفحات مرتبة دائماً.

والسلام...

[(li) صقر (li)]

مشكوووووووووورررررررررررييييييننن أخواني على الردود الجميلة

[the chic]

اخوي اشكرك على الاهتمام والطرح الرائع
لكن عندي استفسار
انا في البدايه كتبت بالمفكرة ولكن بصيغة txt وافتح صفحه انترنت واكتب اللي قلته file ثم open ويفتح المفكرة
ما ادري كيف الطريقه ؟
سؤال مبتدىء

[النمر الذهبي2]

انا كتبت بالمفكرة ولكن بصيغة html
فكانت بتتسيف على هيئة صفحة ويب
ولكن صفحة الويب فارغة ومش لاقي فيها اي عبارات
كتبتها بين الوسوم

ارجو الرد السريع انا مبتدىء وجزاكم الله خيرا

[النمر الذهبي2]

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

[nesta5512]

مشكور
مشكور مشكور
مشكور مشكور مشكور مشكور مشكور مشكور مشكور
مشكور مشكور
مشكور

[(li) صقر (li)]

أخي النمر الذهبي وأخي ذا اتشيك :
1/ افتح المفكرة أو الدفتر .
2/ اكتب الوسوم كويس زي ما أنا حاطيتها بالتمام .
3/ بعد ما تخلص اضغط الآتي :
File , Save As ( ملف , حفظ باسم )
4/ اكتب الاسم ( يفضل بالإنجليزي ) وبعدين وليكن اسمه : Alaa . فنكتبه في فراغ الكتابة هكذا : Alaa.html

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

وعلشان تفتحه ببرنامج آخر قم بالآتي :
1/ كليك يمين على صفحة الهتمل .
2/ بعدين اختار : "فتح باستخدام"
3/ بعد كده اختار البرنامج المناسب

آآآه تذكرت .
لو انت ما ظهرتلك الصفحة زي ما كتبتها يبقى عندك مشكلة في الوسم :
<html></html>

( سيتم إضافة الدورة هذه إلى دورة الأخ الغالي " الفرعون المحترف " )

والسلام...

[romi77777]

بارك الله فيك على الموضوع

[xiaodu]

thank so much ala

[(li) صقر (li)]

شكراً على الردود الجميلة .

سيتم إضافة الدورة إلى دورة الأخ العزيز الفرعون المحترف

[(li) صقر (li)]

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

وشكراً لكم

[(li) صقر (li)]

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

وشكراً لكم

[اســـــــــ نت ـــــــــد]

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

[alraiah]

بارك الله فيك

وتسلم على الموضوع

[(li) صقر (li)]

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

والسلام...

[veto_44]

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

[(li) صقر (li)]

مشكووووووووووووووووورررررررررررررين على الردود وبالذات مشرفنا الغالي محمود

[MeDaNy]

الف الف شكر لك اخي الغالي علي الموضوع

في انتظار جديدك

[(li) صقر (li)]

شكراً على ردك يا مشرفنا الغالي .

[(li) صقر (li)]

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته...وبعد
أهلاً وسهلاً بك في الدرس السابع من دروس HTML. في هذا الدرس سوف أقوم بالحديث عن الصور والرسومات وما يتعلق بالتعامل معها، بالإضافة إلى التعريف بأنواع الملفات الرسومية الدارجة في الإنترنت.
لقد اقتصر حديثنا عن الصور حتى الآن على إضافة خلفيات للصفحات، وكان ذلك في الدرس الثاني أما إدراج الصور ضمن الصفحات نفسها فله حكاية أخرى، أبدأ بروايتها لك الآن.
إن الوسم الرئيسي المستخدم لتعريف صورة ما داخل الصفحة هو <IMG> وهو وسم مفرد. لكن هل يكفي هذا لإدراج صورة؟ كلا، بالطبع يجب أن نحدد الصورة التي نريدها. لذلك نضيف الخاصية له SRC لتحديد موقع واسم الصورة.
الصورة التالية اسمها thedome.jpg وعندما قمت بإدراجها. كانت الشيفرة الخاصة بذلك هي
‎<IMG SRC="thedome.jpg">‎

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


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

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


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

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

إن الأبعاد الأساسية لهذه الصورة هي 200×145 بيكسل Pixel (تابع القراءة حتى نهاية هذا الدرس وأعدك أن أوضح لك ما هي وحدة البيكسل إذا كانت هذه أول مرة تتعرف فيها على هذه الوحدة) وكما تلاحظ تم إدراج الصورة مع المحافظة على هذه الأبعاد. ومع ذلك فنحن نستطيع التحكم أيضاً بها وإظهار الصورة بالحجم الذي نريده من خلال هذا الوسم. كيف؟ بإضافة الخصائص HEIGHT, WIDTH متبوعة بأرقام تمثل الإرتفاع والعرض المطلوبين.
‎<IMG SRC="thedome.jpg" HEIGHT="70" WIDTH="120">‎


‎<IMG SRC="thedome.jpg" HEIGHT="300" WIDTH="500">‎


الخاصية التالية التي تستخدم مع <IMG> هي ALT وفيها نحدد نصاً بديلاً يظهر مكان الصورة. وهذا النص يلاحظ خصوصاً عندما يكون خيار "إظهار الصور تلقائياً" غير فعال في المتصفح. كما تستطيع ملاحظته في الفترة التي تسبق تحميل الصور وخاصة في المواقع بطيئة التحميل.
‎<IMG SRC="thedome.jpg" ALT="The Dome Of The Rock">‎

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

في الحالة العادية (مثل هذه) وعندما لا نقوم بتحديد أي محاذاة فإن النص الذي يلي الصورة يظهر بمحاذاة الحافة السفلى لها. وهذه هي الحالة الافتراضية لظهور الصور والتي تمثلها القيمة BOTTOM
‎<IMG SRC="image.jpg" ALIGN="BOTTOM">‎


TOP

وعند تحديد هذه القيمة فإن السطر الأول من النص الذي يلي الصورة يقع بمحاذاة الحافة العليا لها. أما باقي النص فيمتد أسفلها.
‎<IMG SRC="image.jpg" ALIGN="TOP">‎


MIDDLE

أما عند تحديد هذه القيمة فإن السطر الأول من النص يقع بمحاذاة منتصف الصورة. كذلك فإن باقي النص يمتد أسفلها.
‎<IMG SRC="image.jpg" ALIGN="MIDDLE">‎


LEFT

هذه القيمة تؤدي إلى محاذاة الصورة إلى أقصى اليسار. مع التفاف النص الذي يليها على الجهة اليمنى ولعدة أسطر حسب ارتفاع الصورة.
‎<IMG SRC="image.jpg" ALIGN="LEFT">‎


RIGHT

أما هذه القيمة فتؤدي إلى محاذاة الصورة إلى أقصى اليمين. مع التفاف النص الذي يليها على الجهة اليسرى ولعدة أسطر حسب ارتفاع الصورة.
‎<IMG SRC="image.jpg" ALIGN="RIGHT">‎


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

مثال:
‎<IMG SRC="image.jpg" ALIGN="RIGHT" VSPACE="20" HSPACE="20">‎
النتيجة: هذه الشيفرة ستدرج الصورة المسماة image.jpg مع محاذاتها ليمين الصفحة وإضافة مسافة فارغة مقدارها 20 بيكسل على الجهات الأربعة. (قارن بين هذا الإطار والإطار السابق الذي وضحت فيه خاصية ALIGN مع القيمة RIGHT. ولاحظ المسافة بين الصورة والنص المرافق لها.)


الخاصية الأخيرة والتي تستخدم مع الوسم <IMG> هي BORDER ووظيفتها إضافة إطار حول الصور والتحكم بسُمكِه. وهذه الخاصية تستخدم بشكل خاص عند تعيين صورة ما كوصلة تشعبية. (انظر إلى الدرس التالي) ويتم التحكم بالسُمك من خلال إسناد رقم يمثل السُمك بالبيكسل. والقيمة الافتراضية له هي 0 أي لا يوجد إطار حول الصورة.
مثلاٌ لإضافة إطار سُمكه 5 بيكسل نكتب الشيفرة التالية:
‎<IMG SRC="image.jpg" BORDER="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 إلى التحكم بحجم الصور وعرضها بنسب مصغرة حسب ما هو مطلوب؟
إن استخدامك لهذه الخصائص يؤدي إلى إظهار الصورة بحيث تبدو مصغرة، لكنك فعلياً قمت بإجبار متصفح الزائر على تحميل الصورة بالحجم والأبعاد الأصلية ثم عرضها بالحجم المصغر أي أنك في النهاية لم تحقق الغاية من وجود هذه العينات.

معلش إذا كان في بعض الأخطاء




والسلام...

[MR-FOX]

http://www.1ss1.com/uploads/1ss1.com_HS1twrYVCd.jpg

[Samir Aser]

http://www.3adany.com/up/uploads/53e35528a2.gifhttp://img138.imageshack.us/img138/8290/riceworld1pe3.gifhttp://img243.imageshack.us/img243/1909/prem1tt1py0.gif

[(li) صقر (li)]

بسم الله الرحمن الرحيم

السلام عليكم أحبائي في الله

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

Links... أو الوصلات التشعبية هي روح الإنترنت. وإذا كانت الإنترنت بمجملها هي شبكة العنكبوت فإن هذه الوصلات هي الخيوط التي تشكل هذه الشبكة وتؤلف حلقات الوصل بين الملايين من مواقعها. تنقر على وصلة ما فتنقلك إلى صفحة أخرى في نفس الموقع... وتنقر على وصلة أخرى لتنقلك كلياً إلى أحد المواقع في الجانب الآخر من العالم... وصلة تجعلك تحمّل ملفاً وأخرى تجعلك تشغّل مقطعا موسيقياً وثالثة تعرض لك صورة...
حسناً، من المؤكد أنك استنتجت الآن من هذه المقدمة أنك بصدد تعلم كيفية إدراج الوصلات التشعبية في صفحاتك... لقد صدق استنتاجك لذلك هيا إلى العمل...
هناك عدة خيارات للوصلات التشعبية، منها أن تكون الوصلة لموقع آخر، أو أن تكون لصفحة أخرى داخل الموقع نفسه، ومنها أن تكون لمكان آخر في نفس الصفحة (إلى أعلى أو أسفل على سبيل المثال) أو أن تكون وصلة لعنوان بريد إلكتروني E-mail وفي جميع الحالات فإن المبدأ واحد لكن تختلف بعض التفاصيل. وسوف أناقش معك كل حالة على حدة وبالتفصيل.
نستخدم الوسوم
<A> ... <‎/A>

كوسوم أساسية لإدراج الوصلات التشعبية، وهي اختصار لكلمة Anchor. وهي لا تعمل لوحدها بل تتطلب إضافة خصائص معينة أولها وأهمها الخاصية
HREF
التي نحدد من خلالها الموقع الذي نريد الدلالة عليه، ويجب أن يكتب عنوان الموقع كاملاً.
الحالة الأولى: إدراج وصلة تشعبية تشير إلى موقع خارجي.
لنقم بإدراج وصلة تشعبية إلى أحد المواقع العربية الرائدة والرائعة، وهو موقع شركة صخر. وعنوانه http://www.sakhr.com في هذه الحالة يتم كتابة الشيفرة بالشكل التالي:
<A HREF="http://www.sakhr.com"> <‎/A>
لكن بقي شيء واحد وهو العبارة أو الكلمة التي سيتم النقر عليها لتشغيل الوصلة، وهذه يجب أن توضع بين الوسمين <A> ... <‎/A>. أي لكي تكتمل الوصلة السابقة يجب أن نكتب معها أي عبارة نريدها، لكي ينقر عليها الزائر فتنقله إلى العنوان المطلوب. ما رأيك بعبارة: Go To SAKHR والتي تصبح الشيفرة معها بالشكل التالي:
<A HREF="http://www.sakhr.com">Go To SAKHR<‎/A>
وتظهر الوصلة كما يلي:
Go To SAKHR (http://www.sakhr.com/)
لم تعجبك؟ ليس ذلك مشكلة فأنت تستطيع كتابة أي شيء تريده كعنوان للوصلة التي تريدها. ما رأيك لو جعلنا كلمة SAKH‎R هي فقط العنوان لهذه الوصلة.
‎Go To <A HREF="http://www.sakhr.com">SAKHR<‎/A>‎
Go To SAKHR (http://www.sakhr.com/)
بل إنك تستطيع إدراج صورة أو (زر) كبديل عن الكلمات -كما تشاهد في الكثير من المواقع- وكل ما عليك فعله في هذه الحالة هو كتابة الوسم الخاص بإدراج الصورة بين الوسمين <A> ... <‎/A> بالشكل التالي:
<A HREF="http://www.sakhr.com"><IMG SRC="sakhrlgo.gif">‎<‎/A>
والذي يؤدي إلى ظهور الصورة التالية كوصلة تشعبية لموقع صخر
(http://www.sakhr.com/)

وبشكل عام فإن أي شيء يوضع بين الوسمين <A> ... <‎/A> سوف يكون الوسيلة أو العنوان الذي ينقلنا إلى الموقع المشار إليه في الوصلة التشعبية، سواءً كان هذا الشيء نصاً أو صورة أو كلاهما معاً.
والآن هل تلاحظ الإطار الظاهر حول الصورة؟ وهل تذكر متى قمنا بالحديث عن هذا النوع من الإطارات؟ نعم، في الدرس السابق. (http://www.khayma.com/hpinarabic/htutor05.html) عند إدراج صورة كوصلة تشعبية يظهر حولها إطار سمكه 2 بيكسل وهذه هي الحالة الإفتراضية. وبالطبع نستطيع إزالته بكتابة الخاصية BORDER="0"‎ ضمن وسم الصورة.
<A HREF="http://www.sakhr.com"><IMG SRC="sakhrlgo.gif" BORDER="0"><‎/A>
(http://www.sakhr.com/)
أو حتى تكبيره بكتابة السمك المطلوب مع هذه الخاصية.
<A HREF="http://www.sakhr.com"><IMG SRC="sakhrlgo.gif" BORDER="6"><‎/A>
(http://www.sakhr.com/)

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

لنقم بإنشاء وصلة تشعبية تقودنا إلى الصفحة الرئيسية لهذا الموقع وبالمناسبة فإن الملف الذي يحتويها اسمه index.html ، و الشيفرة الخاصة بذلك هي:
<A HREF="index.html">Main Page<‎/A>
Main Page (http://www.khayma.com/hpinarabic/index.html)
وأذكرك بأنك تستطيع إدراج صورة هنا أيضاً كعنوان للوصلة التشعبية وذلك بنفس التفاصيل التي شرحتها في الحالة السابقة.
هيا ندرج صورة مصغرة كعنوان لوصلة تشعبية للصورة الأصلية.
<A HREF="nablus1.jpg"><IMG SRC="nablus_1.jpg" BORDER="0"><‎/A>
في هذا المثال قمت بتحديد الصورة المصغرة المسماة nablus_1.jpg كوصلة تشعبية تصلنا إلى الصورة الأصلية المسماة nablus1.jpg
(http://www.khayma.com/hpinarabic/images/nablus1.jpg)
لكن انتبه I إذا كان الملف المطلوب والذي تريد الإشارة إليه موجوداً في مجلد مختلف عن المجلد الذي يوجد به الملف الحالي، فيجب عليك تحديد المسار الكامل لهذا الملف وذلك بنفس الطريقة التي ناقشناها في الدرس السابق عندما قمنا بإدراج الصور.

الحالة الثالثة هي أن نقوم بالإشارة إلى مكان آخر داخل نفس الصفحة، إلى أولها (http://www.khayma.com/hpinarabic/htutor06.html#begin) مثلاً أو إلى آخرها (http://www.khayma.com/hpinarabic/htutor06.html#end) أو أي مكان آخر نريده...
طبعاً مهما بلغت درجة الذكاء والألمعية التي يتصف بها الكمبيوتر ومتصفح الإنترنت، فهما لا يستطيعان معرفة ما يدور بفكرك وبالتالي لا يستطيعان معرفة المكان الموجود في نفس الصفحة والذي تريد نقل زائرك إليه من خلال الوصلة التشعبية. لذلك يجب أن تقوم أنت بتحديده.

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

أول ما يجب فعله هو الذهاب إلى هذه الفقرة واختيار أول كلمة فيها ثم وضعها داخل الوسوم <A> ... <‎/A>
<A>LINKS<‎/A>
والآن حان الوقت لاستخدام الخاصية NAME فالخطوة الثانية هي تعريف هذه الكلمة بأي اسم نريده (المهم أن نبقى متذكرين له). سوف أقوم بإعطاء الاسم attrib1
<A NAME="attrib1">LINKS<‎/A>
لقد أصبحت هذه الفقرة جاهزة لكي نقوم بإدراج وصلات تشعبية إليها من أي مكان في هذا الملف، بل ومن أي ملف آخر ... وأكثر من ذلك أنه إذا أراد أحد ما في أحد المواقع الأخرى أن يضع وصلة تشعبية لها من موقعه فإن باستطاعته ذلك شرط أن يعرف الاسم الذي عرّفناها به وهذا ليس صعباً بالطبع.
الخطوة الثالثة هي إدراج الوصلة التشعبية لهذه الفقرة.
ويلزمنا هنا معرفة اسم الملف الذي توجد به هذه الفقرة (أي هذا الملف الذي نعمل به) واسمه htutor06.html لأنه سيشكل المدخل الأساسي للوصول إلى الفقرة المحددة. وتكون شيفرة الوصول إلى هذه الفقرة هي كالتالي:
<A HREF="htutor06.html#attrib1">3rd Paragraph<‎/A>
‎3rd Paragraph (http://www.khayma.com/hpinarabic/htutor06.html#attrib1)

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

أما الحالة الأخيرة والتي نقوم فيها بإدراج وصلة تشعبية لعنوان بريد إلكتروني، يؤدي النقر عليها إلى إطلاق برنامج البريد الإلكتروني للزائر بشكل تلقائي. فالاختلاف الوحيد الذي يطرأ هنا هو كتابة كلمة MAILTO بعد خاصية HREF لكي تدل على أن العنوان الذي يلي هو عنوان EMAIL وليس أي عنوان آخر
<A HREF="MAILTO:yahya@palnet.com"> Email Me <‎/A>
Email Me (yahya@palnet.com)


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

عندما قمنا بالتوصيل إلى عنوان خارجي، سواء كان لموقع ويب أو عنوان 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/‎
وكل ما عليك فعله هو كتابة الشيفرة التالية:
<A HREF="ftp://ftp.simtel.net/pub/simtelnet/win95/">Simtel FTP Server<‎/A>
Simtel FTP Server (ftp://ftp.simtel.net/pub/simtelnet/win95/)
أما بالنسبة للمجموعات الإخبارية فتكتب الوصلات التشعبية لها باستخدام الكلمة المفتاحية NEWS. فعلى سبيل المثال، لوضع وصلة تشعبية لمجموعة النقاش alt.html الخاصة بمناقشة لغة HTML نكتب الشيفرة التالية:
<A HREF="news:alt.html">Alt.Html<‎/A>
Alt.Html (news:alt.html)


والسلام...

[master2010]

اولا شكرا لك على الدروس الرائعة و المميزة و تاني شئ اقول لك حظا طيبا و لكن يمكن ان تكون هي المرة الاولي التي ادخل فيها عالم البرمجة و انا ارى هنا استادة جد مميزون و انشاء الله تساعدونني في ان ام اللغة و اكون من تلميد و لكن مع العلم اني و لاول مرة اخوض تجربة تعلم البرمجة و ان شاء الله اصبح بمساعدتكم مضطلع و مع كل المحبة و التقدير شكرا

[yougrtin]

thanxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
vraiment un grand merci pour notre prof SAKR
pour tous ses efforts .... c est un travail immense dont je profit pour lui didie mes profond salutation..... et bon courages

[hanan_fahd]

thanks my friend

[الفرعون المحترف]

الف الف الف

[الفرعون المحترف]

شكرا جدا يا صقر

[mehdi.barkassou]

شكرا اخي جزيلا على هذه الافادة انا الان مبتدئ و اتلقى بعض الدروس منك لكن يا اخي ارغب ببرنامج اكتب عليه لغة htlm
و اتمنى في قريب العاجل ان ترد علي و لك فائق الشكر و احترام

http://www.akhbaruna.com/files/images/نجاد.thumbnail.jpg

[lahock]

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

[msb2010]

ya man gaaaaaaaaaaaamed enta

thnx 4 great work

[moodysalihamidzic]

جزاك الله خيرا

[nour_moheb]

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

احببت ان اشكر أخى العزيز "عــــــــلاء" على مجهوده وافكاره الرائعه وايضا اخواننا المشرفين, من لا يملون ولا يتعبون فى خدمه كل اخوانهم .

هذا كان الشكر ولكن لما كتبت هذه الكلمه """"ولكـــــــن"""
كلمه غريبه حينما افكر فى شكر احدهم ,لذا دعونى اشرح لكم

من منا لم يحزن حين يجد ان كل مجهوده الذى تعب فيه وبذل كل جهده من اجل ان يساعد به اخوانه قد سرق
وانتسب الى شخص جديد لم يكلف نفسه هما بمجرد تعديل كلمه حتى ينسب الفضل لنفسه

كم منا انتابه الحزن حين يدخل فى منتدى جديد ويجد ان موضوعه الذى قد تعب فيه موضوع باسم عضو اخر لم يكلف نفسه بوضع كلمه "منقول" فى اخرالموضوع.

حقا انا حزين حين اجد عضوا اكن له كل الاحترام والحب فى الله قام بمثل هذا العمل الشائن

نعم انت يا علاء او "صقر" اى كان اسمك لم لم تقول انك لست صاحب هذا الموضوع وانك قمت بنقل دروسه كما هى بدون تعديل حتى الأمثله والصور والبرامج كل هذا بدون ان تقول حتى انك استعنت بصاحب الموضوع الاصلى <<< أ / يحيى الشريف >>> والذى لست ادرى ان كان حيا ام ميتا جزاه الله خيرا

يمكنكم اخوانى زيارة موقعه ورؤية الدروس كامله كما نسقها مؤلفها الأصلى وتعب بها على العنوان التالى
المقدمه والتى بها نبذه عن نفسه:
http://www.khayma.com/hpinarabic/index.html

والفهرس لمن يريد المراجعه والاستفاده:

http://www.khayma.com/hpinarabic/htmintro.html

[lahock]

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

احببت ان اشكر أخى العزيز "عــــــــلاء" على مجهوده وافكاره الرائعه وايضا اخواننا المشرفين, من لا يملون ولا يتعبون فى خدمه كل اخوانهم .

هذا كان الشكر ولكن لما كتبت هذه الكلمه """"ولكـــــــن"""
كلمه غريبه حينما افكر فى شكر احدهم ,لذا دعونى اشرح لكم

من منا لم يحزن حين يجد ان كل مجهوده الذى تعب فيه وبذل كل جهده من اجل ان يساعد به اخوانه قد سرق
وانتسب الى شخص جديد لم يكلف نفسه هما بمجرد تعديل كلمه حتى ينسب الفضل لنفسه

كم منا انتابه الحزن حين يدخل فى منتدى جديد ويجد ان موضوعه الذى قد تعب فيه موضوع باسم عضو اخر لم يكلف نفسه بوضع كلمه "منقول" فى اخرالموضوع.

حقا انا حزين حين اجد عضوا اكن له كل الاحترام والحب فى الله قام بمثل هذا العمل الشائن

نعم انت يا علاء او "صقر" اى كان اسمك لم لم تقول انك لست صاحب هذا الموضوع وانك قمت بنقل دروسه كما هى بدون تعديل حتى الأمثله والصور والبرامج كل هذا بدون ان تقول حتى انك استعنت بصاحب الموضوع الاصلى <<< أ / يحيى الشريف >>> والذى لست ادرى ان كان حيا ام ميتا جزاه الله خيرا

يمكنكم اخوانى زيارة موقعه ورؤية الدروس كامله كما نسقها مؤلفها الأصلى وتعب بها على العنوان التالى
المقدمه والتى بها نبذه عن نفسه:
http://www.khayma.com/hpinarabic/index.html

والفهرس لمن يريد المراجعه والاستفاده:

http://www.khayma.com/hpinarabic/htmintro.html


مشكور لك اخي على التوضيح ولتعميم الفائدة جمعت الدروس كما وردت وبدون اي تصرف في
كتاب pdf لمن يرغب في الاحتفاظ بها.
الكتاب في المرفقات.

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


ملاحظة اطلع عليها وتم اخذها بعين الاعتبار وشكرا لك اخي.

[matriciel]

merci, c'est vraiment tres bon
continuez! :smailes66:

[moodysalihamidzic]

جزاك الله خيرا

[veto_44]

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

احببت ان اشكر أخى العزيز "عــــــــلاء" على مجهوده وافكاره الرائعه وايضا اخواننا المشرفين, من لا يملون ولا يتعبون فى خدمه كل اخوانهم .

هذا كان الشكر ولكن لما كتبت هذه الكلمه """"ولكـــــــن"""
كلمه غريبه حينما افكر فى شكر احدهم ,لذا دعونى اشرح لكم

من منا لم يحزن حين يجد ان كل مجهوده الذى تعب فيه وبذل كل جهده من اجل ان يساعد به اخوانه قد سرق
وانتسب الى شخص جديد لم يكلف نفسه هما بمجرد تعديل كلمه حتى ينسب الفضل لنفسه

كم منا انتابه الحزن حين يدخل فى منتدى جديد ويجد ان موضوعه الذى قد تعب فيه موضوع باسم عضو اخر لم يكلف نفسه بوضع كلمه "منقول" فى اخرالموضوع.

حقا انا حزين حين اجد عضوا اكن له كل الاحترام والحب فى الله قام بمثل هذا العمل الشائن

نعم انت يا علاء او "صقر" اى كان اسمك لم لم تقول انك لست صاحب هذا الموضوع وانك قمت بنقل دروسه كما هى بدون تعديل حتى الأمثله والصور والبرامج كل هذا بدون ان تقول حتى انك استعنت بصاحب الموضوع الاصلى <<< أ / يحيى الشريف >>> والذى لست ادرى ان كان حيا ام ميتا جزاه الله خيرا

يمكنكم اخوانى زيارة موقعه ورؤية الدروس كامله كما نسقها مؤلفها الأصلى وتعب بها على العنوان التالى
المقدمه والتى بها نبذه عن نفسه:
http://www.khayma.com/hpinarabic/index.html

والفهرس لمن يريد المراجعه والاستفاده:

http://www.khayma.com/hpinarabic/htmintro.html


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



وأنا سأضع المواضيع من إحدى الموسوعات لدي وسأضيف بعضاً من عندي , وأنا أريد أن يستفيد منه الجميع إرضاءً لوجهه تعالى , وأنتظر إن شاء الله أن أرى صفحات الإنترنت المهمة من صنع المتدربين في هذه الدورة .






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

[nour_moheb]

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


وأخيراً اخى فى الله اقولها للأبد انا لم أقصد الإساءه ولكنى كنت حزين من أخى وأردت عتابه

[veto_44]

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

[(li) صقر (li)]

1/ السلام عليكم إخواني الأعزاء .

2/ أحب أشكرك أخي نور على ملاحظته الجميلة واللافتة , ولكن وكما ذكر أخي العزيز والغالي جداً جداً جداً ..... إلى أن يشاء الله , إنني قلت إنه من إحدى الموسوعات .

3/ هأعطيك سؤال سهل جداً , لو أنا ما كنت وضعت هذا الموضوع هل كان في حد عرف معنى كلمة هتمل حتى ؟ هل كان في أحد هيعرف طريق الاستاذ يحيى الشريف ؟
سؤال آخر , لو انت كنت مدرس حاسب , ودرست طلاب وكنت بتشرحلهم الدروس بطريقة معينة وغريبة عن باقي المدرسين وكمان سهلة الفهم وبعد 30 سنة لقيت أحد طلابك في إحدى المدارس بيدرس الحاسب بنفس الأسلوب , هل ستقول : لقد سرق علمي ؟ أم ستفتخر به وتأخذه في أحضانك لأنه ساعد 30 طالباً آخرين على معرفة عالم الحاسب بشكل أفضل وأحسن ؟
أترك لك الاختيار أخي الحبيب ...

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

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

وأحب أنبه ,, إن هذا ليس معناه أنني سأتهاون في الدروس , لا إن شاء الله . وليس معنى ذلك أنني غاضب ,,لا بل بالعكس التام .
وللعلم الدروس اقتربت من نهايتها لكن إن شاء الله انتظروا مني المسابقات والدروس الهتملية المتقدمة إن شاء الله تعالى .

شكراً لك أخي نور على الملاحظة .
وجزاك الله خيراً أخي فيتو وجعل الله كل حرف انت كتبته بميلون حسنة والله يضاعف لمن يشاء .

شكراً مرة أخرى .


وهذا إثبات إنني مش زعلان : ها ها ها

والسلام...

[hedrafox]

ماشاء الله عليك اخى العزيز
صراحه
انت ميه ميه
وانا معاك فى الدوره

[The Miller]

مشكور جدا يا أخي

[(li) صقر (li)]

مشكووووووووررررررررررريييييين ياشباب الخير

[jet2004]

بجد بجد و الله انا بستفيد
بارك الله فيك اخى علاء

[shady ahmed]

الدورة رائعة أخي صقر ... و بالبانر ما شاء الله على تصميم نيو مان

[على الجابرى الم]

الاخ العزيز القئم على هذا البرنامج اود ان اشارك فى هذة الدورة ول الشرف ان تكون انت قائد المسيرة نحو التقدم فى مجال الكبيوتر ولك الشكر

[أبوالمثنى]

جزاكم الله خيراً
ولو تكرمت عندي سؤال

هل تصلخ لغة HTML لعرض بيانات من قاعدة بيانات Oracle 10g ؟؟؟

وإذا كان الجواب بالنفي فما هي أحسن لغة تصميم صفحات ممكن تعمل ذلك ؟؟

وجزاكم الله خيراً

[(li) صقر (li)]

إجابتك جاية في الطريق أخي العزيز أبو المثنى

[(li) صقر (li)]

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته...وبعد

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

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


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

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

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

<TR>
<‎/TR>

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

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

<TR>
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>
هل اتضحت لك الصورة الآن. أنظر إلى نتيجة العمل التي حصلنا عليها.
Data
Data
Data
Data
Data
Data

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

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

BORDER
تقوم هذه الخاصية بإضافة حدود للجدول وتحديد سماكتها، والقيمة الإفتراضية لها هي صفر أي لا حدود
‎<TABLE BORDER="5">‎
‎<TABLE BORDER="0">‎
WIDTH
نستخدم هذه الخاصية لتحديد عرض الجدول ككل. وهناك أسلوبين لتحديد العرض: المطلق أي بكتابة الرقم الذي يمثل العرض بصورة مباشرة. والنسبي أي كتابة رقم نسبي مئوي يحدد عرض الجدول حسب عرض نافذة المتصفح. (أي أن عرض الجدول سيختلف باختلاف عرض نافذة المتصفح).
‎<TABLE WIDTH="600">‎
‎<TABLE WIDTH="80%">‎
HEIGHT
لتحديد ارتفاع الجدول، ويكون تحديد هذا الإرتفاع من خلال قيمة مطلقة تحدد الإرتفاع بالبيكسل. أو قيمة نسبية تحدد ارتفاع الجدول بالنسبة لارتفاع صفحة المتصفح
‎<TABLE HEIGHT="500">‎
‎<TABLE HEIGHT="100%">‎
CELLSPACING
لتحديد المسافة بين كل خلية من خلايا الجدول
‎<TABLE CELLSPACING="10">‎
CELLPADDING
لتحديد المسافة الفاصلة بين الحدود وبداية النص في كل خلية. أو لنقل: تحديد حجم الهوامش لخلايا الجدول.
‎<TABLE CELLPADDING="10">‎
ALIGN
لتحديد محاذاة الجدول أفقياً على الصفحة يميناً أو يساراً. وهو يأخذ القيم right, left
‎<TABLE ALIGN="Left">‎
‎<TABLE ALIGN="Right">‎
BGCOLOR
ويستخدم لتحديد لون الخلفية للجدول
‎<TABLE BGCOLOR="#00FFFF">‎


هذه هي الخصائص المستعملة مع الجدول. وسأقوم الآن بتطبيقها على المثال الوارد في بداية هذا الدرس وسأكتفي بكتابة وسم البداية أما باقي الوسوم فهي نفسها:
‎<TABLE BORDER="5">‎
Data
Data
Data
Data
Data
Data




‎<TABLE BORDER="5" CELLPADDING="5">‎
Data
Data
Data
Data
Data
Data




‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10">‎
Data
Data
Data
Data
Data
Data




‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"‎
BGCOLOR="#FFFF00">‎
Data
Data
Data
Data
Data
Data




‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"‎
BGCOLOR="#FFFF00" HEIGHT="300">‎
Data
Data
Data
Data
Data
Data




‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"‎
BGCOLOR="#FFFF00" HEIGHT="300" WIDTH="75%">‎
Data
Data
Data
Data
Data
Data





ونتكلم الآن عن الخصائص المستخدمة مع وسوم الصف <TR> ... <‎/TR> ولا بأس من تذكيرك أن عدد الصفوف في الجدول يتحدد بعدد هذه الوسوم. أما أهم الخصائص التي تضاف لهذا الوسم فهي:
ALIGN
لتحديد محاذاة النص أفقياً داخل الخلايا التي يتكون منها الصف، والقيم المحتملة لها هي Right, Left, Center والقيمة الإفتراضية هي Center
VALIGN
لتحديد المحاذاة العمودية للنص داخل خلايا الصف، وذلك إما للأعلى أو للأسفل أو في المنتصف أو على امتداد الخط الأساسي للخلية. وقيمها على التوالي هي: Top, Bottom, Middle, Baseline
BGCOLOR
لتحديد لون الخلفية للخلايا التي يتكون منها الصف. وهنا يتم تجاهل لون الخلفية المحدد ضمن وسم <TABLE> ويتم تطبيق اللون المحدد هنا.

ونعود الآن إلى جدولنا السابق لنطبق عليه هذه الخصائص من خلال الأمثلة التالية:
‎<TABLE BORDER="5" HEIGHT="300">‎
‎<TR ALIGN="Left">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR ALIGN="Right">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR ALIGN="Center">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>
Data
Data
Data
Data
Data
Data




‎<TABLE BORDER="5" HEIGHT="300">‎
‎<TR VALIGN="Top">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR VALIGN="Bottom">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR VALIGN="Baseline">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>
Data
Data
Data
Data
Data
Data




‎<TABLE BORDER="5" HEIGHT="300" BGCOLOR="#FFFFFF">‎
‎<TR BGCOLOR="#808080">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR BGCOLOR="#C0C0C0">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR>‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>
Data
Data
Data
Data
Data
Data




‎<TABLE BORDER="0" HEIGHT="100%" WIDTH="100%">‎
‎<TR BGCOLOR="#808080">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR BGCOLOR="#C0C0C0">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR BGCOLOR="#FFFFFF">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>
Data
Data
Data
Data
Data
Data




----------------------------------------------


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

لنسترجع معا المثال الذي قمنا بالتدرب عليه في الدرس السابق، فسوف نكمل هذا الدرس معه. وهو جدول صغير مكون من ثلاثة صفوف وعمودين (أي خليتين في كل صف).
<TABLE>
<TR>
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<TR>
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<TR>
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>

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

وقبل أن نستمر، يبدو لي أن هناك بعض الملاحظات المهمة التي ينبغي ذكرها:
" كما تلاحظ هناك خصائص تتكرر مع جميع الوسوم. خذ مثلاً الخاصية BGCOLOR. كيف يتم التعامل معها إذا كررت مع جميع الوسوم؟ بكل بساطة يتم تطبيق اللون المحدد مع وسم الخلية، فإذا لم يكن محدداً يطبق اللون المحدد مع وسم الصف، فإذا لم يوجد يطبق اللون المحدد مع وسم الجدول. وإذا لم يكن هذا محدداً بدوره يتم اعتماد لون خلفية الصفحة المحدد في الوسم <BODY>.
" الملاحظة الثانية تتعلق بالخصائص WIDTH, HEIGHT. يختلف أسلوب التعامل مع هذه الخصائص من متصفح لآخر، بل وتختلف أيضاً طريقة تفسير القيم المحددة معها وخصوصاً فيما يتعلق بالنسب المئوية. (راجع الموضوع: الوسوم الخاصة والمتصفحات ).
وبدون الخوض في تفاصيل هذه الاختلافات التي لن تؤدي إلا إلى المزيد من الإشكالات لديك... وبعد التجربة يبدو أن أفضل طريقة للتعامل مع هذه الخصائص هي قيامك بتحديد العرض (وكذلك الإرتفاع إذا أردت ذلك) للجدول ككل من خلال الوسم <TABLE>. ثم استخدام هذه الخصائص في وسوم الخلايا وتحديد العرض المطلوب لكل خلية على حده في الصف الأول، والارتفاع المطلوب لكل صف في الجدول.
وهذه برأيي أفضل طريقة تضمن بها أفضل مشاهدة للجدول لجميع زوار موقعك.
" إذا أردت أن تحتوي بعض الصفوف في الجدول على عدد من الخلايا أقل من باقي الصفوف، فلا يكفي أن تقوم بحذف وسوم الخلايا منها. (كما ترى في الشيفرة التالية:)
<TABLE BORDER="5">
<TR>
<TD> Data <‎/TD>
<‎/TR>
<TR>
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<TR>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>
لأن هذا ما ستحصل عليه:
Data
Data Data
Data

لقد بقي مكان الخلايا المحذوفة محجوزاً كما لو أنها لم تحذف. أما الخلايا الباقية فظلت محتفظة بنفس خصائصها، أي أننا لم نستفد من عملية الحذف. والحقيقة أن الطريقة المثلى لذلك هي أن تقوم بدمج الخلايا معاً وذلك باستخدام الخصائص COLSPAN, ROWSPAN.
________________________________________
إذن لنقم بإعادة كتابة شيفرة الجدول مع استخدام هذه الخصائص:
‎<TABLE BORDER="5">‎
<TR>
<TD COLSPAN="2"> Data <‎/TD>
<‎/TR>
<TR>
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<TR>
<TD COLSPAN="2"> Data <‎/TD>
<‎/TR>
<‎/TABLE>
Data
Data Data
Data

لاحظ أن العدد 2 هو عدد الخلايا التي قمنا بدمجها. ولاحظ أيضاً أنني لم أقم بإعادة وسوم الخلايا المحذوفة لأننا أصلاً لا نحتاج لها بعد أن قمنا بالدمج. وكقاعدة أساسية: كل خلية يتم دمجها يجب بالمقابل حذف وسوم التعريف الخاصة بها. ما عدا تعريف الخلية الأساسية بالطبع.
مثال آخر: لنقم بدمج الخلايا الموجودة في العمود الأول
‎<TABLE BORDER="5">‎
<TR>
<TD ROWSPAN="3"> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<TR>
<TD> Data <‎/TD>
<‎/TR>
<TR>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>
ومرة أخرى بعد تعريف خاصية الدمج العمودي، قمت بحذف تعريف الخلايا المدموجة من الصف الثاني والثالث. وهذا هو الجدول الناتج.
Data Data
Data
Data

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



-------------------------------------------------------

[(li) صقر (li)]

بداية، أجد من الضروري أن أذكرك بالوسمين الأساسيين للإطارات واللذين ندرجهما في الملف الأساسي، وهما <FRAMESET> والذي يوضع بدلاً من <BODY> ويشكّل الوسم الأساسي لتحديد مجموعة الإطارات في الصفحة وخصائص هذه المجموعة ككل. و <FRAME> الذي يوضع داخل نطاق الوسم السابق ويعرّف الملف المصدر لكل إطار ويحدد خصائصه. ومن المهم جداُ أن نميز بين الخصائص المتعلقة بكل وسم وأن لا نخلط بينهما.
وعند الحديث عن الإطارات سوف نواجه تلك المشكلة العتيدة التي تؤرق دائماً مصممي صفحات الويب، ألا وهي مسألة توافق الوسوم والخصائص مع المتصفحات المختلفة. فمثلاً لدينا أربع خصائص للوسم <FRAMESET> ، لكن واحدة منها فقط تعمل مع كلا المتصفحين الرئيسيين Netscape, MS Explorer. وكما اعتدنا سوف لن أركز على هذه الخصائص ، لكن على الأقل سأكتفي بذكرها وذكر عملها وأترك لك حرية تجربتها إن أردت.
أولى هذه الخصائص هي FRAMEBORDER وهي تقوم بتحديد ظهور أو عدم ظهور الحدود حول الإطارات وتأخذ القيم 1 للظهور، و0 لعدم الظهور. وهذا مثال عليها:
‎<FRAMESET ROWS="50,*,15%,20%" FRAMEBORDER="0">‎
‎<FRAME SRC="frame1.html">‎
‎<FRAME SRC="frame2.html">‎
‎<FRAME SRC="frame3.html">‎
‎<FRAME SRC="frame4.html">‎
<‎/FRAMESET>
*
أما الخصائص الثلاث الأخرى فهي:
" BORDER: تحدد سمك الحدود الظاهرة حول الإطارات وهي تأخذ قيماً بالبيكسل. (‎BORDER="n"‎) وتعمل فقط مع Netscape
" BORDERCOLOR: لإضافة لون للحدود (‎BORDERCOLOR="rrggbb"‎) وتعمل مع Netscape أيضاً.
" FRAMESPACING: لتحديد مسافات فارغة إضافية حول الإطارات وتأخذ قيماً بالبيكسل (FRAMESPACING="n"‎) وهي تعمل مع MS Explorer.
________________________________________
أما الخصائص المستخدمة مع الوسم <FRAME> فهي كالتالي:
" MARGINHEIGHT: تحدد مقدار المسافة الفارغة المتروكة للهوامش العلوية والسفلية للإطار (بالبيكسل).
‎MARGINHEIGHT="n"‎
" MARGINWIDTH: تحدد مقدار المسافة الفارغة المتروكة للهوامش اليمنى و اليسرى للإطار (بالبيكسل).
‎MARGINWIDTH="n"‎
" SCROLLING: تحدد إمكانية ظهور أو عدم ظهور أشرطة التصفح الأفقية والعمودية على جوانب أو أسفل الإطار. وتأخذ القيم yes للظهور. no لعدم الظهور. و auto التي تحدد ظهور الأشرطة أو عدمه تلقائياً بحسب الحاجة إليها. تماماً كما يحدث في معظم تطبيقات Windows
SCROLLING="yes"‎
SCROLLING="no"‎
SCROLLING="auto"‎
" NORESIZE عند إضافة هذه الخاصية يتم منع عملية التحكم بحجم الإطار بالتصغير أو التكبير من خلال السحب والإفلات. وهي لا تأخذ أي قيم.
ولتوضيح مبدأ عمل هذه الخصائص إليك هذه الأمثلة، (سأقوم باستخدام الملف الرئيسي الذي أدرجت فيه الصورة في الدرس السابق، فهو أفضل مثال لتوضيحها). وقم بتفحصه ( الدرس السابق ) والتدقيق في تفاصيله لكي تقارنها بما سينتج عن الأمثلة التالية، كذلك حاول القيام بتكبير الإطار أو تصغيره بوضع المؤشر على الحد ثم استخدام السحب والإفلات بالاتجاه المطلوب. وذلك لكي تستطيع تمييز عمل الخاصية NORESIZE
________________________________________
‎<FRAMESET COLS="50%,50%">‎
‎<FRAME SRC="thedome.jpg" MARGINHEIGHT="40">‎
‎<FRAME SRC="frame2.html">‎
‎</FRAMESET>‎
*
________________________________________
‎<FRAMESET COLS="50%,50%">‎
‎<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30">‎
‎<FRAME SRC="frame2.html">‎
‎</FRAMESET>‎
*
________________________________________
‎<FRAMESET COLS="50%,50%">‎
‎<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30" SCROLLING="yes">‎
‎<FRAME SRC="frame2.html">‎
‎</FRAMESET>‎
*
________________________________________
‎<FRAMESET COLS="50%,50%">‎
‎<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30" SCROLLING="yes" NORESIZE>‎
‎<FRAME SRC="frame2.html">‎
‎</FRAMESET>‎
*
________________________________________

كذلك هناك الخصائص FRAMEBORDER, FRAMESPACING, BORDER, BORDERCOLOR التي تستخدم مع هذا الوسم وبنفس التفاصيل التي ذكرت مع <FRAMESET>. لكنها بالطبع تحدد خصائص الإطار وحده وليس مجموعة الإطارات ككل في الصفحة. وهي تعمل على متصفحات معينة دون غيرها.
بقي لدينا الخاصية NAME والتي تعتبر أهم خاصية لهذا الوسم، فهي التي تحدد طريقة تنسيق العمل بين الإطارات والصفحات وأسلوب عرضها لذلك فقد فضلت أن أفرد لها موضوعاً خاصاً وبصورة مستقلة عن باقي الخصائص، وذلك في الدرس التالي إن شاء الله.
________________________________________
هناك وسم ثالث يتعلق بالإطارات، ويتم إدراجه داخل الملف الرئيسي وعادة في النهاية وهو:
<NOFRAMES> ... <‎/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>
أما إذا كنت مصراً على إطاراتك ولا تريد إنشاء نسخة أخرى للموقع بدونها، فلم لا تكتب ملاحظة بسيطة ضمن هذا الوسم تخبر فيها زائرك بأن الموقع يحتوي على هذه الإطارات وأنه يحتاج إلى متصفح مناسب (على الأقل لكي تخفف عنه الصدمة)!!



----------------------------------------------------------


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

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

أي أنني في المثال السابق احتجت فعلياً إلى أربعة ملفات لتكوين الصفحة.
وقبل أن نبدأ… لنقم بالتحضير للأمثلة التي سترد في هذا الدرس. لذلك قم بإنشاء ثلاثة أو أربعة ملفات بسيطة لكي تستخدمها في تطبيق الأمثلة أو استخدم ملفاتك القديمة التي قمت بالتدرب عليها في الدروس السابقة. أنا قمت بإنشاء ملفات على النمط التالي (وهي التي استخدمتها في المثال) وأسميتها frame1.html, frame2.html, frame3.html
<HTML>
<HEAD>
<TITLE>Frame1<‎/TITLE>
<‎/HEAD>
<BODY>
Frame 1
<‎/BODY>
<‎/HTML>
ونبدأ الآن بتعريف الملف الرئيسي الذي سيضم كافة الإطارات والملفات. وهو بالمناسبة ملف ذو حالة خاصة حيث نقوم باستخدام الوسوم
<FRAMESET> ... <‎/FRAMESET>
بدلاً من الوسوم <BODY> ... <‎/BODY>
((إذن الملف الرئيسي للإطارات لا يتضمن تعريفا باستخدام BODY ))
<HTML>
<HEAD>
<TITLE>Master File<‎/TITLE>
<‎/HEAD>

<FRAMESET>
<‎/FRAMESET>

<‎/HTML>
نأتي الآن إلى الخصائص: والخاصية الأولى التي تستخدم مع هذه الوسوم هي COLS وهي تعرّف عدد وأحجام الإطارات العمودية للصفحة. وتُحدد الأحجام بطريقتين (هل عرفتهما؟) نعم… إنهما الطريقة المباشرة والطريقة النسبية...أو كلاهما معا.
والآن إليك هذه الأمثلة التي توضح مفهوم الأعمدة... وألفت نظرك إلى أن قيامك بالنقر على الشيفرة لكل مثال سيؤدي بك إلى مشاهدة هذا المثال بصورة عملية لكن انتبه! فهذه الشيفرة غير مكتملة وكتابتها بهذا الشكل فقط لن يؤدي إلى أي نتيجة ولا إلى ظهور أي إطارات حيث ينقصها وسوم أخرى خاصة بمصدر الملفات الظاهرة داخل الإطارات، وقد قمت بإكمالها لغرض توضيح النتيجة لك فقط. لذلك أرجو أن تكتفي الآن بمعاينة كل شيفرة ونتيجتها إلى أن أقوم بسرد باقي الخصائص المهمة لاحقاً.
‎<FRAMESET COLS="50%,50%">‎
<‎/FRAMESET>
*
يحدد إطارين عموديين حجم كل منهما 50% من حجم الشاشة
‎<FRAMESET COLS="20%,50%,30%">‎
<‎/FRAMESET>
*
يحدد ثلاثة إطارات أحجامها 20% و 50% و 30% على التوالي من حجم الشاشة
‎<FRAMESET COLS="200,300,*">‎
<‎/FRAMESET>
*
يحدد ثلاثة إطارات عمودية الأول حجمه 200 بيكسل، والثاني 300 بيكسل،
أما الثالث * أي انه غير محدد بحجم معين ولكنه سيكون بالحجم المتبقي من الشاشة (طالما أننا لا نعرف استبانة الشاشة التي يستخدمها زائر الموقع)
‎<FRAMESET COLS="200,*,15%,20%">‎
<‎/FRAMESET>
*
يحدد أربعة إطارات حجم الأول هو 200 بيكسل، والثالث 15% من حجم الشاشة، والرابع 20% من حجم الشاشة أما الثاني فسيكون حجمه بما تبقى من الشاشة.
‎<FRAMESET COLS="150,*,2*">‎
<‎/FRAMESET>

*
يحدد ثلاثة إطارات الأول حجمه 150 بيكسل.... أما المساحة المتبقية فتقسم على أساس أن الإطار الثالث حجمه هو ضعفي (*2) حجم الإطار الثاني (*)
أما الخاصية الثانية فهي ROWS وأعتقد أنك استنجت طبيعة عملها. نعم هي تحدد عدد وحجم الإطارات الأفقية (الصفوف) داخل الصفحة. وذلك بنفس الأسلوب المتبع مع الأعمدة، أي إما باستخدام الطريقة النسبية أو المطلقة. وسأقوم بسرد بعض الأمثلة لتوضيحها (وأذكرك ثانية أن هذه الأمثلة غير مكتملة):
‎<FRAMESET ROWS="50%,50%">‎
<‎/FRAMESET>
*
يحدد إطارين أفقيين ارتفاع كل منهما 50% من ارتفاع الشاشة
‎<FRAMESET ROWS="20%,50%,30%">‎
<‎/FRAMESET>
*
يحدد ثلاثة إطارات أفقية ارتفاعاتها 20% و 50% و 30% على التوالي من ارتفاع الشاشة
‎<FRAMESET ROWS="50,120,*">‎
<‎/FRAMESET>
*
يحدد ثلاثة إطارات أفقية الأول ارتفاعه 50 بيكسل، والثاني 120 بيكسل، والثالث سيكون بالارتفاع المتبقي من الشاشة
‎<FRAMESET ROWS="50,*,15%,20%">‎
<‎/FRAMESET>
*
يحدد أربعة إطارات أفقية ارتفاع الأول هو 50 بيكسل، والثالث 15% من ارتفاع الشاشة، والرابع 20% من ارتفاع الشاشة أما الثاني فسيكون ارتفاعه بما تبقى من ارتفاع الشاشة.
‎<FRAMESET COLS="*,2*">‎
<‎/FRAMESET>
*
يحدد إطارين الثاني ارتفاعه ضعفي ارتفاع الأول
لم ننته بعد من ذكر كل الخصائص المتعلقة بالوسوم <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>
________________________________________
وبالإضافة إلى ما ذكر، نستطيع إدراج صورة مباشرةً داخل الإطار وباستخدام <FRAME SRC> تماماً كما ندرجها باستخدام <IMG SRC> وإليك هذا المثال:
‎<FRAMESET COLS="50%,50%">‎
‎<FRAME SRC="frame1.html">‎
‎<FRAME