تم تعطيل الجافا سكربت. للحصول على تجربة أفضل، الرجاء تمكين الجافا سكربت في المتصفح الخاص بك قبل المتابعة.

الرد على الموضوع

الرسالة: [QUOTE="pola, post: 16167, member: 416"] [CENTER][FONT=Arabic Transparent][SIZE=6][COLOR=#ff0000][B]الدرس الرابع الفقرات والقوائم [/B][/COLOR][/SIZE][/FONT] [/CENTER] [RIGHT][COLOR=blue]أهلاً وسهلاً بك إلى الدرس الرابع من دروس [FONT=Times New Roman][SIZE=4]HTML.[/SIZE][/FONT] في هذا الدرس سوف نناقش الوسوم الخاصة بالفقرات بشكل خاص وترتيب الصفحات وتنسيقها بشكل عام. صحيح أن استخدامك للألوان والرسومات في الصفحة يضفي عليها نوعاً من الحيوية، وأن الخطوط تعطي صفحتك رونقاً وجمالاً. لكنك إن لم تهتم بترتيب صفحتك أو تقضي بعض الوقت في تنسيق هيكلها العام وتنظيم فقراتها وقوائمها، فإنه من الصعب عليك الحصول على صفحة ويب ناجحة. فالترتيب هو الخطوة الأولى لجذب اهتمام الزائر أو القارئ لصفحتك وتسهل عليه فهم الخطوط العريضة للصفحة. [/COLOR] [COLOR=blue]لقد قمت فى الدرس الاول بإيضاح بعض الوسوم الخاصة بالفقرات. ولا بأس من تذكيرك بها. فالوسم [FONT=Times New Roman][SIZE=4] [/SIZE][/FONT]يقوم بإنهاء الفقرة. والوسم [FONT=Times New Roman][SIZE=4] [/SIZE][/FONT] ينهي السطر الحالي وينقل النص إلى سطر جديد. والوسم [FONT=Times New Roman][SIZE=4]‎ ‎[/SIZE][/FONT] يقوم بإضافة الفراغات، ويجب تكرار كتابته بنفس عدد الفراغات المطلوب. ونتابع في هذا الدرس مع هذه الوسوم وغيرها.[/COLOR] [COLOR=blue]لقد قلت إن الوسم [FONT=Times New Roman][SIZE=4][/SIZE][/FONT] هو وسم مفرد لكنه يستخدم أيضاً كوسم مزدوج [FONT=Times New Roman][SIZE=4] ... <‎/P>[/SIZE][/FONT] وفي هذه الحالة يمكّننا من تحديد إتجاه الفقرة وإتجاه النص فيها حيث يستخدم معه الخصائص [FONT=Times New Roman][SIZE=4]ALIGN, DIR.[/SIZE][/FONT] [/COLOR] [COLOR=blue]فالخاصية [FONT=Times New Roman][SIZE=4]ALIGN[/SIZE][/FONT] تحدد محاذاة الفقرة وهي تأخذ القيم [FONT=Times New Roman][SIZE=4]Left, Center, Right[/SIZE][/FONT] وأوضحها بالأمثلة التالية:[/COLOR][/RIGHT] [LEFT][FONT=Arial][SIZE=2][COLOR=blue] This is a left-aligned paragraph <‎/P> [/COLOR][/SIZE][/FONT] [COLOR=blue]This is left-aligned paragraph[/COLOR][/LEFT] [COLOR=blue][/COLOR][LEFT][FONT=Arial][SIZE=2][COLOR=blue] This is right-aligned paragraph [/COLOR][/SIZE][/FONT][/LEFT] [RIGHT][COLOR=blue]This is a right-aligned paragraph[/COLOR][/RIGHT] [COLOR=blue][/COLOR][LEFT][FONT=Arial][SIZE=2][COLOR=blue] This is a centered paragraph[/COLOR][/SIZE][/FONT][/LEFT] [CENTER][COLOR=blue]This is a centered paragraph[/COLOR][/CENTER] [COLOR=blue][/COLOR][RIGHT][COLOR=blue]كذلك لتوسيط الفقرات أو الكائنات بشكل عام في الصفحة نستطيع استخدام الوسوم [FONT=Times New Roman][SIZE=4]<CENTER> ... </CENTER> [/SIZE][/FONT][/COLOR][/RIGHT] [LEFT][FONT=Arial][SIZE=2][COLOR=blue]<CENTER> This is a centered text </CENTER> [/COLOR][/SIZE][/FONT][/LEFT] [COLOR=blue]This is a centered text [/COLOR][RIGHT] [RIGHT][COLOR=blue]أما الخاصية [FONT=Times New Roman][SIZE=4]DIR[/SIZE][/FONT] والتي نستخدمها أيضاً مع [FONT=Times New Roman][SIZE=4][/SIZE][/FONT] فتقوم بتحديد إتجاه قراءة النص وتأخذ القيم [/COLOR][/RIGHT] [COLOR=blue][FONT=Times New Roman][SIZE=4]LTR[/SIZE][/FONT] [/COLOR][FONT=Arabic Transparent][SIZE=4][COLOR=blue]إتجاه النص من اليسار إلى اليمين [FONT=Times New Roman][SIZE=4](Left To Right)[/SIZE][/FONT] [/COLOR][/SIZE][/FONT][COLOR=blue][FONT=Times New Roman][SIZE=4]RTL[/SIZE][/FONT] [/COLOR][FONT=Arabic Transparent][SIZE=4][COLOR=blue]إتجاه النص من اليمين إلى اليسار [FONT=Times New Roman][SIZE=4](Right To Left)[/SIZE][/FONT] [/COLOR][/SIZE][/FONT][RIGHT][COLOR=blue](تذكر هذه الخاصية جيداً فهي مهمة عند كتابة صفحات باللغة العربية) [/COLOR][/RIGHT] [COLOR=blue][/COLOR] [RIGHT][COLOR=blue]ولتنسيق الفقرات أيضاً يوجد الوسوم [FONT=Times New Roman][SIZE=4]<BLOCKQUOTE> ... <‎/BLOCKQUOTE>[/SIZE][/FONT] أي وسوم الفقرات المقتبسة. ووظيفتها تمييز الفقرة من خلال إدراج مسافة إضافية على الهامشين الأيمن والأيسر لها. أنظر إلى الفقرة التالية التي قمت (باقتباسها) من إحدى صفحات هذا الموقع. ومن ثم وضعتها ضمن [FONT=Times New Roman][SIZE=4]<BLOCKQUOTE> ... <‎/BLOCKQUOTE>[/SIZE][/FONT] [/COLOR][/RIGHT] [INDENT][RIGHT][SIZE=3][COLOR=blue]وفكرة هذه الدروس جاءت نتيجة لما لمسته خلال استخدامي لشبكة الإنترنت بشكل عام، والبحث عن المواقع العربية فيها بشكل خاص. فعندما بدأت بتعلم تصميم صفحات الإنترنت، لم يكن هناك مشكلة في الحصول على المصادر أو المواقع التعليمية التي أحتاجها ومن خلال الإنترنت نفسها. لكن المشكلة هي دائماً في الحصول على تلك المصادر بالصورة التي تتناسب واحتياجاتنا كمستخدمين عرب .... [/COLOR][/SIZE][/RIGHT] [/INDENT][RIGHT][COLOR=blue]والحقيقة أنك تستطيع وضع عدة وسوم معاً إذا أردت إدراج هوامش أكبر. كما في المثال التالي: [/COLOR][/RIGHT] [FONT=Arial][SIZE=2][LEFT][COLOR=blue]<BLOCKQUOTE> <BLOCKQUOTE> [/COLOR][/LEFT] [RIGHT][COLOR=blue]وفكرة هذه الدروس جاءت نتيجة لما لمسته خلال استخدامي لشبكة الإنترنت بشكل عام، والبحث عن المواقع العربية فيها بشكل خاص. فعندما بدأت بتعلم تصميم صفحات الإنترنت، لم يكن هناك مشكلة في الحصول على المصادر أو المواقع التعليمية التي أحتاجها ومن خلال الإنترنت نفسها. لكن المشكلة هي دائماً في الحصول على تلك المصادر بالصورة التي تتناسب واحتياجاتنا كمستخدمين عرب .... [/COLOR][/RIGHT] [LEFT][COLOR=blue]<‎/BLOCKQUOTE> <‎/BLOCKQUOTE> [/COLOR][/LEFT] [/SIZE][/FONT][RIGHT][COLOR=blue]وتكون النتيجة:[/COLOR][/RIGHT] [INDENT][INDENT][RIGHT][SIZE=3][COLOR=blue]وفكرة هذه الدروس جاءت نتيجة لما لمسته خلال استخدامي لشبكة الإنترنت بشكل عام، والبحث عن المواقع العربية فيها بشكل خاص. فعندما بدأت بتعلم تصميم صفحات الإنترنت، لم يكن هناك مشكلة في الحصول على المصادر أو المواقع التعليمية التي أحتاجها ومن خلال الإنترنت نفسها. لكن المشكلة هي دائماً في الحصول على تلك المصادر بالصورة التي تتناسب واحتياجاتنا كمستخدمين عرب .... [/COLOR][/SIZE][/RIGHT] [/INDENT][/INDENT][RIGHT][COLOR=blue]وبالطبع ليس شرطاً أن تستخدم هذا الوسوم مع الفقرات المقتبسة فقط. فأنا مثلاً أضعها في بداية ونهاية كل صفحة من صفحات هذا الموقع. وبالتالي يظهر النص بعيداً قليلاً عن حاشية الصفحة فهذا أفضل من أن يكون ملاصقاً لها وأجمل. (مجرد وجهة نظر) [/COLOR][/RIGHT] [COLOR=blue][/COLOR] [COLOR=blue] [/COLOR] [RIGHT][COLOR=blue]والآن تأمل هذا الشكل وحاول أن تستنتج كيف قمت بإعداده...!؟ [/COLOR][/RIGHT] [COLOR=blue]A B C DE F G HI J K LM N O PQ R S T[/COLOR][RIGHT][COLOR=blue]ربما توصلت إلى أني استخدمت عدداً كبيراً من وسوم الفراغات [FONT=Times New Roman][SIZE=4]‎ ‎[/SIZE][/FONT] ونهاية السطر [FONT=Times New Roman][SIZE=4] .[/SIZE][/FONT] حسناً، إستنتاجك لا بأس به ولكنه ليس دقيقاً فأنا لم أستخدم أياً من هذه الوسوم هنا. بل كل ما فعلته بعد إعداد هذا الشكل هو وضعه ضمن: [/COLOR][/RIGHT] [CENTER][FONT=Times New Roman][SIZE=4][COLOR=blue]<PRE> ... </PRE> [/COLOR][/SIZE][/FONT][/CENTER] [RIGHT][COLOR=blue]وهما اختصار لكلمة [FONT=Times New Roman][SIZE=4]Preformated[/SIZE][/FONT] أي المنسق مسبقاً. وبالفعل فقد احتفظ هذا الشكل بالتنسيق المسبق الذي تم إعداده به. لكن تم تحويل الخط إلى خط موحد المسافات ( راجع الدرس السابق ) ولو لم أقم بوضعه ضمن هذه الوسوم لكانت النتيجة كالتالي: A B C D E F G H I J K L M N O P Q R S T [/COLOR] [COLOR=blue]لاحظ أن هذا الوسم يستخدم مع الفقرات التي لا نحتاج فيها إلى تنسيقات متعددة للخطوط أو الألوان. بل فقط مع الفقرات العادية موحدة الخط والتنسيقات.[/COLOR][/RIGHT] [CENTER][SIZE=6][B]القوائم[/B][/SIZE] [B][SIZE=6][/SIZE][/B] [/CENTER] [RIGHT][COLOR=blue]تحتوي لغة [FONT=Times New Roman][SIZE=4]HTML[/SIZE][/FONT] على مجموعة من الوسوم الخاصة بتنظيم البيانات في قوائم وباستخدام عدة خيارات. وهناك نوعين من القوائم: أولهما المتسلسلة [FONT=Times New Roman][SIZE=4]Ordered Lists.[/SIZE][/FONT] واليك المثال التالي عليها [/COLOR] [I][COLOR=blue]أسماء بعض محافظات مصر[/COLOR][/I] [COLOR=blue][/COLOR] [/RIGHT] [LIST=1][RIGHT] [*][RIGHT][COLOR=blue]القاهرة [/COLOR][/RIGHT] [/RIGHT] [*][RIGHT][COLOR=blue]القليوبية [/COLOR][/RIGHT] [*][RIGHT][COLOR=blue]الاسكندرية[/COLOR][/RIGHT] [*][RIGHT][COLOR=blue]اسوان[/COLOR][/RIGHT] [*][RIGHT][COLOR=blue]شرم الشيخ[/COLOR][/RIGHT] [/LIST][RIGHT][COLOR=blue] [/COLOR][/RIGHT] [COLOR=blue][/COLOR] [RIGHT][COLOR=blue]وثانيهما القوائم غير المتسلسلة [FONT=Times New Roman][SIZE=4]Unordered Lists[/SIZE][/FONT] وهذا مثال عليها [/COLOR] [COLOR=blue][I]أسماء بعض الجامعات المصرية[/I] [/COLOR][/RIGHT] [COLOR=blue][/COLOR][LIST] [*][RIGHT][COLOR=blue]جامعة القاهرة [/COLOR][/RIGHT] [*][RIGHT][COLOR=blue]جامعة الاسكنردية [/COLOR][/RIGHT] [*][RIGHT][COLOR=blue]جامعة الزقازيق [/COLOR][/RIGHT] [*][RIGHT][COLOR=blue]جامعة بنها [/COLOR][/RIGHT] [/LIST][COLOR=blue][/COLOR] [RIGHT][COLOR=blue]عند التعامل مع القوائم بنوعيهما نحتاج إلى وسوم خاصة بتحديد بداية ونهاية القائمة ووسوم تحدد بنود هذه القائمة. بالنسبة للقوائم المتسلسلة نستخدم الوسوم [/COLOR][/RIGHT] [FONT=Times New Roman][SIZE=4][COLOR=blue]<OL> ... <‎/OL> [/COLOR][/SIZE][/FONT][RIGHT][COLOR=blue] [/COLOR] [COLOR=blue]أما بالنسبة للقوائم غير المتسلسلة فنستخدم [/COLOR][/RIGHT] [FONT=Times New Roman][SIZE=4][COLOR=blue]<UL> ... <‎/UL> [/COLOR][/SIZE][/FONT][RIGHT][COLOR=blue] [/COLOR] [COLOR=blue]ولتعيين كل بند من بنود القائمة نستخدم الوسم [FONT=Times New Roman][SIZE=4]<LI>[/SIZE][/FONT] وهو وسم مفرد يكتب في بداية السطر الخاص بكل بند [FONT=Times New Roman][SIZE=4]List Item.[/SIZE][/FONT] [/COLOR] [COLOR=blue]إذن عندما قمت بإنشاء القوائم السابقة استخدمت الشيفرة التالية: [/COLOR][/RIGHT] [LEFT][FONT=Arial][SIZE=2][COLOR=blue]<OL> <LI>القدس <LI>نابلس <LI>رام الله <LI>الخليل <LI>جنين <LI>طولكرم <‎/OL> [/COLOR][/SIZE][/FONT][/LEFT] [RIGHT][COLOR=blue] [/COLOR][/RIGHT] [LEFT][FONT=Arial][SIZE=2][COLOR=blue]<UL> <LI>جامعة النجاح <LI>جامعة القدس المفتوحة <LI>جامعة بيرزيت <LI>جامعة الخليل <‎/UL> [/COLOR][/SIZE][/FONT][/LEFT] [RIGHT][COLOR=blue]والخاصية الوحيدة التي تستخدم مع هذه الوسوم هي [FONT=Times New Roman][SIZE=4]TYPE[/SIZE][/FONT] ووظيفتها تحديد شكل الرمز الظاهر مع بنود القائمة، وعادة تستخدم مع وسوم بداية القوائم [FONT=Times New Roman][SIZE=4]<UL>[/SIZE][/FONT] أو [FONT=Times New Roman][SIZE=4]<OL>[/SIZE][/FONT] وبذلك نحدد رمزاً واحداً لكل القائمة. ولكن نستطيع استخدامها أيضاً مع وسم البنود [FONT=Times New Roman][SIZE=4]<LI>[/SIZE][/FONT] لإعطاء تحكم أكبر في مظهر القائمة من خلال تحديد رمز مختلف لكل بند. [/COLOR] [COLOR=blue]فعند وضعها ضمن تعريف القوائم المتسلسلة تأخذ القيم: [FONT=Times New Roman][SIZE=4]A, a, I, i[/SIZE][/FONT] التي تغير رموز الترقيم من الأرقام العادية الإفتراضية (والتي رمزها 1) إلى ترقيم باستخدام الأحرف اللاتينية الكبيرة أو الصغيرة، أو باستخدام الأرقام الرومانية كما ترى في الجدول التالي:[/COLOR][/RIGHT] [FONT=Arial][SIZE=2][COLOR=blue]‎<OL TYPE="A">‎ [/COLOR][/SIZE][/FONT][FONT=Arial][SIZE=2][COLOR=blue]‎<OL TYPE="a">‎ [/COLOR][/SIZE][/FONT][FONT=Arial][SIZE=2][COLOR=blue]‎<OL TYPE="I">‎ [/COLOR][/SIZE][/FONT][FONT=Arial][SIZE=2][COLOR=blue]‎<OL TYPE="i">‎ [/COLOR][/SIZE][/FONT][LIST=1] [*][COLOR=blue] [/COLOR] [*][COLOR=blue] [/COLOR] [*][COLOR=blue] [/COLOR] [*][COLOR=blue] [/COLOR] [*][COLOR=blue] [/COLOR][/LIST][LIST=1] [*][COLOR=blue] [/COLOR] [*][COLOR=blue] [/COLOR] [*][COLOR=blue] [/COLOR] [*][COLOR=blue] [/COLOR] [*][COLOR=blue] [/COLOR][/LIST][LIST=1] [*][COLOR=blue] [/COLOR] [*][COLOR=blue] [/COLOR] [*][COLOR=blue] [/COLOR] [*][COLOR=blue] [/COLOR] [*][COLOR=blue] [/COLOR][/LIST][LIST=1] [*][COLOR=blue] [/COLOR] [*][COLOR=blue] [/COLOR] [*][COLOR=blue] [/COLOR] [*][COLOR=blue] [/COLOR] [*][COLOR=blue] [/COLOR][/LIST][RIGHT][COLOR=blue]والحديث عن هذه الخاصية يقودني إلى الحديث عن مسألة مهمة في لغة [FONT=Times New Roman][SIZE=4]HTML[/SIZE][/FONT] وهي مسألة الوسوم والخصائص المحددة بمتصفح معين دون غيره أي التي تعمل مع أحد المتصفحات ولا تعمل مع غيره. [/COLOR] [COLOR=blue]والسبب في ذلك أن هذه الخاصية تستخدم أيضاً مع القوائم غير المتسلسلة، لكن ليس بصورة مطلقة...كيف؟ أنت ترى أن الرمز الموجود عند كل بند في القائمة هو عبارة عن نقطة سوداء يطلق عليها اسم [FONT=Times New Roman][SIZE=4]Disc[/SIZE][/FONT] وهي المعرفة ضمناً في خاصية [FONT=Times New Roman][SIZE=4]TYPE.[/SIZE][/FONT] لكن هناك رموز أخرى يمكن إظهارها وهي المربع [FONT=Times New Roman][SIZE=4]square,[/SIZE][/FONT] والدائرة المفرغة [FONT=Times New Roman][SIZE=4]circle[/SIZE][/FONT] وتعرف بالشكل التالي: [/COLOR][/RIGHT] [CENTER][FONT=ARIAL][SIZE=2][COLOR=blue]‎<UL TYPE="square">‎ ‎<UL TYPE="circle">‎ [/COLOR][/SIZE][/FONT][/CENTER] [RIGHT][COLOR=blue]ولكن للأسف هذه الخاصية لا تعمل ولا يظهر تأثيرها إلا مع متصفح نيتسكيب وليس مع مايكروسوفت إكسبلورر الذي يتعامل فقط مع القيمة الإفتراضية للخاصية. (رجاءً لا يغضب مستخدمو إكسبلورر فهناك الكثير من الوسوم والخصائص التي لا يستطيع نيتسكيب عرضها أيضاً). ولإتمام الحديث عن القوائم، أذكر لك أن هناك وسوماً أخرى تستخدم لإنشاء القوائم غير المتسلسلة، وبنفس الطريقة المستخدمة مع [FONT=Times New Roman][SIZE=4]<UL>...<‎/UL>[/SIZE][/FONT] وهذه الوسوم هي: [/COLOR][/RIGHT] [CENTER][FONT=Times New Roman][SIZE=4][COLOR=blue]<DIR> ... <‎/DIR> <MENU> ... <‎/MENU> [/COLOR][/SIZE][/FONT][/CENTER] [COLOR=blue][/COLOR][RIGHT][COLOR=blue] [/COLOR] [COLOR=blue]هناك نوع خاص من القوائم يدعى قوائم الشرح أو التعريفات [FONT=Times New Roman][SIZE=4]Definition Lists [/SIZE][/FONT]وكما يدل الإسم تستخدم عندما نريد إدراج قائمة من المصطلحات يتبع كل واحد منها شرح أو تعليق. [/COLOR][/RIGHT] [COLOR=blue][/COLOR][FONT=Arial][SIZE=2][COLOR=blue]HTML [/COLOR][COLOR=blue]Hyper Text Markup Language [/COLOR][COLOR=blue]WWW [/COLOR][COLOR=blue]World Wide Web [/COLOR][COLOR=blue]FTP [/COLOR][COLOR=blue]File Transfer Protocol [/COLOR][COLOR=blue]GIF [/COLOR][COLOR=blue]Graphical Interchange Format [/COLOR][COLOR=blue]JPG, JPEG [/COLOR][COLOR=blue]Joint Photographic Experts Group [/COLOR][/SIZE][/FONT][COLOR=blue][/COLOR] [RIGHT][COLOR=blue]ونحتاج لإنشاء هذه القوائم إلى ثلاثة وسوم: الأول [FONT=Times New Roman][SIZE=4]<DL> ... <‎/DL> [/SIZE][/FONT]لتعريف بداية ونهاية القائمة. والثاني [FONT=Times New Roman][SIZE=4]<DT> [/SIZE][/FONT]ويوضع قبل كل مصطلح لتحديده، وهو وسم مفرد. أما الثالث فهو [FONT=Times New Roman][SIZE=4]<DD> [/SIZE][/FONT]وهو وسم الشرح أو التعليق وهو أيضا مفرد. ولنقم الآن بكتابة شيفرة القائمة السابقة [/COLOR][/RIGHT] [LEFT][FONT=Arial][SIZE=2][COLOR=blue]‎<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>‎ [/COLOR][/SIZE][/FONT][/LEFT] [RIGHT][COLOR=blue]وصلنا الآن إلى نهاية هذا الدرس، والذي ناقشنا فيه ترتيب الصفحات والفقرات والقوائم. أتمنى لك صفحات مرتبة دائماً.[/COLOR] [B][SIZE=5][COLOR=deepskyblue]تحياتى للجميع[/COLOR][/SIZE][/B][/RIGHT] [/RIGHT] [/QUOTE]

التحقق