محمدسمسمة
04-11-09, 04:51 AM
بسم الله الرحمن الرحيم
عرفنا عن اللينك حاجات كتير…
وهنزود حاجتين كمان انهاردة ان شاء الله..
احيانا في بعض المواقع بتلاقي لينك موجود في الصفحة من تحت خالص اسمه/ ارجع لبداية الصفحة…وده بيبقي موجود في الصفحات الطويلة اوي.. زي الصفحة اللي قدام حضرتك دي..المنتدي ده فيه الموضوع ده…اول مبتضغط علي اللينك ده بيطلعلك لاول حتة في الصفحة خالص..
ازاي نعمل كده؟؟؟
احنا مش بس ممكن نخليه يطلع لبداية الصفحة…احنا ممكن نعمل لنك يوديك لاي حتة معينة في الصفحة..يعني انت عامل صفحة طويلة ..هتيجي في الاخر تحت وتحط لينك يطلعك لاخر الصفحة ولينك يطلعك لحتة معينة مهمة في النص وكده…كل ده ازاي؟؟
احنا لما كنا بنعمل لينك يوديك لصفحة تانية كنا بنكتب اسم الصفحة اللي هيروحلها او اسم الموقع اللي هيحمله…طب انا دلوقتي عايزه يروح لحتة معينة في الصفحة…
فاللي بنعمله في الحالة دي اننا بندي للحتة دي اسم"وهنعرف دلوقتي ازاي" وبعدين نقولله روح للحتة اللي اسمها كذا لما يضغط علي الينك ده…
يعني انا عايزه يروح لبداية الصفحة مثلا…هاجي علي اول كلمة انا كاتبها في الصفحة واديلها اسم…..الاسم ده هيكون البراوزر محتفظ بيه لنفسه عارف ان الحتة دي اسمها كده بس مش هيظهره في الموقع…واجي في الاخر خالص اقولله روح للحتة اللي اسمها كذا
ازاي نسمي جزء معين؟؟
لنفرض ان اول كلمة في الصفحة مكتوبة هي كده:welcome in our website
هكتبها بالطريقة دي<a name=”this”>welcome in our website</a>
هو كده فهم ان الكلام ده اسمه this ..ومش هيظهر الاسم ده في الصفحة بس هيعرفه لنفسه…وطبعا ممكن تكتب أي اسم يعجبك..انا هنا خترت this وانت حر سميها زي متحب…
واجي وانا بعمل الللينك اقولله كده:
<a href="mostafa.htm#this>highest point in this page</a>
بقولله اسم الصفحة الاول وبعدين العلامة دي # ودي شفت مع الرقم 3 ..دي بتعرفه اني هقولله اسم حتة معينة من الصفحة يروحلها..جرب وشوف…
طب ليه انا قلتله اسم الصفحة؟؟طب ماقولله وخلاص اسم الحتة االلي هيروحلها….
وده لاني ممكن اعمل الكلام مش في نفس الصفحة..يعني ممكن اعمل لينك يوديك لحتة معينة في صفحة تانية بنفس الطريقة.0مش هقوللك ازاي..جرب انت بقي يلا لوحدك…
الحاجة الاخيرة عن اللينكات..انت أي موقع بتدخله وبتفتح فيه لينك وتدخله …وبعدين ترجع تاني للصفحة الرئيسية بتاعت الموقع ده بتلاقي اللينك لونه بقي غامق شوية…والينكات اللي مفتحتهاش بتفضل عادية…
ودي لها اتربيوت بيتحط في البودي..وده اللي انا كنت قلت عنه قبل كده ان فاضل اتربيوت في البودي هناخده بعدين لانه محتاج نعرف حاجات في البودي الاول…
<body link="red" alink="black" vlink="green>
link دي بتحدد لون أي لينك طبيعي في الصفحة
vlink بتحدد لون اللينك اللي اتفتح قبل كده…وهي اختصار ل visited link
alink بتحدد لون اللينك اللي انت واقف عليه بتضغط عليه حالا… ودي اختصار ل active link
جرب وشوف…ودي طبعا برده ممكن تكتب فيها الالوان كتابة او بالطريقة العشرية
تقريبا فاضل حاجة بسيطة كمان عن اللينكات هتعرفها بعد شوية صغيرين اوي ان شاء الله…
لادراج فيديو او فلاش:
<" "=embed src=" " width=" " height>
مش محتاجة شرح حاجة..جربها وشوفها…..بس هنا عايز اقول حاجة تانية بره الموضوع سنة هقولها في الاخر ان شاء الله..
لادراج صوت:
<bgsound src=name of the file>
كده الصوت ده هيشتغل لوحده علطول مع الموقه اول ميفتح…
طب لو انا عايز احط صوت او فيديو او فلاش ..بس ميشتغلوش في الموقع..بس يبقوا موجودين علي هيئة لينكات يضغط عليها الزائر عشان يعمللها داونلود عنده علي الجهاز؟؟
هيه دي استخدام اللينك الاخير اللي كنت بقول عليه من شوية:
<a href="name of the file">download sorat el baqara</a>
كده اول ميضغط علي اللينك هيعملله داون لود علي الجهاز بتاعه…
يعني انا كده بكتب a href وبكتب فيها أي حاجة.ممكن اسم صفحة تانية في موقعي يقوم محملها..مكن اكتب ايميل ..هيبعت عليه..ممكن اكتب اسم حتة معينة من الصفحة هيحملها..ممكن اكتب اسم ملف صوت او فيديو او فلاش هيروح عاملهللا دوانلود…يعني ممكن اكتب أي حااااااااجة هنا….
كده عرفنا ازاي نتعامل مع الصوت والفيديو والفلاش و الصور …..يبقي كده اللغة دي خلصت؟؟؟؟؟
لا لسة فاضل بقي شوية تحابيش…شوية حاجات تنظملك الصفحة بتاعتك وتخلي شكلها حلو
بس كده وخلاص….عشان في حاجات ممكن تحب تعلمها في صفحتك ومتقدرش تعملها…الطرق والحاجات التنظيمية دي هتخليك تقدر تعمل كل اللي انت عاوزه ان شاء الله…
الاول في امرين بسيطين كده:
الامر <marquee>………..</marquee>
بيخليلك الكلام يتحرك بعرض الصفة….الكلام اللي انت كاتبه في النص كده..جرب وشوف..
الامر <hr> بيعمل خط مكان متكتبه…خط بعرض الصفحة..ده بتلاقيه في المواقع دايما في اولها خالص او في اخر الصفحة…
وطبعا بدام هو هيعمل خط وخلاص يبقي مبيتقفلش…
والخط ده بتلاقي تحته ظل وشكله حلو ..وممكن تتحكم فيه بالاتربيوتس دي:
width-size-color-align-noshade
هما مش محتاجين كلام..جربهم وشوفهم..ماعدا بس الاتربيوت align بيحدد اذا كان الخط ده هيبقي ناحية اليمين ولا الشمال ولا في النص..وده لو هتعلمه خط صغير..انما هو غالبا بيبقي بعرض الضفحة كلها..ودي بتتحكم فيها من width… انت جربهم وشوفهم
فاضل كده في اللغة دي كلها حاجتين مهمييييييييين ينظموا الصفحة كلها :
tables-frames
ال tables :
ودي تقريبا اهم حااااااااااااااااااااااااااااااااااااجة في الاتش تي ام ال يعد اللينكات… لانها بتنظم الصفحة كويس اوي ي ي ي ي ..
ركز كويس عشان تفهمها كويس وطبق عليها كتييييييييير عشان هتريحك جامد اوييييييي لو فهمتها كويس ان شاء الله…
ودي بتبقي موجودة تقربا في كل المواقع..بتلاقي الموقع كله معمول عبارة عن جدول..وبديله امر اقولله متخليش البوردرز بتاعة الجدول باينة..فبيظهر قدام الزائر كانه مش جدول …بس بيبقي مترتب كويس…
ودي بتريح كتير اوي..لان انت ممكن تحب تعمل حاجات في صفحتك ومتقدرش تعملها غير بالجدول…انا مش هقدر اقوللكوا حاجات زي ايه..لان دي بتيجي بالخبرة والممارسة..بس هقوللكوا مثال بسيط عنها بعد شوية ان شاء الله…
أي جدول في الدنيا عبارة عن صفوف افقية واعمدة راسية …
جدول عادي…بنعمل احنا جدول مكون من الصفوف والاعمدة دي وبنحدد احجامها ومساحاتها زي ماحنا عايزين ونقسم الصفحة كلها كده.تبقي الصفحة كلها عبارة عن خانات جدول…وبكده تقدر تحط أي حاجة انت عايزها في أي حتة من الصفحة زي متحب…تحدد تقولله في الخانة دي حطها…وتلغي البوردر…
ازاي بقي تعمل الجدول ده وتظبطه؟؟؟؟؟
الامر <table>
احنا قلنا ان الجدول عبارة عن صفوف واعمدة فعشان اعرفه اني بكتب في صف معين دي لها امر ولما اخلص كتابة في الصف ده اقفله…وبعدين افتح واحد تاني واكتب فيه واقفله…ونفس الموضوع بالنسبة للاعمدة…
الامر <tr> صف
الامر<td> عمود
منظر لجدول بسيط تفهموا منه طريقة عمل الجدول:
<table>
<tr>
<td>…………………………</td>
<td>…………………………..</td>
</tr>
<tr>
<td>…………………………</td>
<td>…………………………..</td>
</tr>
</table>
tr في ااول فهمته اني شغال في الصف الاول…وكتبت جواها td يبقي انا شغال في العمود الاول فيها..او الخانة الاولي فيه يعني..
وخلصت كتبابة فيها وقفلتها وفتحت الخانة التانية فيه وخلصت وقفلتها وبعدين قفلت ال tr يبقي خلصت الصف الاول ودخلت في التاني وكده….
ومينفعش اعكس واكتب العمود واقسم جواه الخانات ..هما عملوها نظامها كده بس..
<table>--<tr>-<td>
وطبعا في كل خانة ممكن احط أي حاجة..ممكن كلام او صورة او لينك او أي حاجة..متفتكرش انه جدول بقي يعني خانات صغيرة وكده..انت ممكن تحدد حجم الخانا وهنعرف دلوقتي ازاي…دانا ممكن اعمل جدول بمساحة الصفحة كلها ويكون خانتيت بس يعني كل خانة نص الصفحة..وهنا مثلا مثال عن ازاي ممكن تستفيد بالجدول…
لو انا عايز عمل صفحة يكون فيها فيلمين فيديو وشغالين جنب بعض…كل واحد شغال في نص الصفحة..
لو انت جدع اعملها من غير جدول ..تلاقيهم نزلوا تحت بعض..لو بجدول تبقي سههههههلللللللة…يعني الجدول بيسمحلك انك تحط أي حاجة انت عايزها في أي مكان في الصفحة..وممكن من غيره بعض الحاجات متقدرش تحطها كده….
وطبعا مش دي بس الحاجة الوحيدة..بس دي جت في دماغي دلوقتي..
نعرف بقي ازاي نتعامل مع الجدول ده ونظبطه.
او بمعني تاني الاتربيوتس بتاعة الجدول..
الاتربيوتس بتاعة الامر <table>:
border بيحدد حجم البوردر لو انت عايز تخليه جدول طبيعي والبوردر بتاعه ظاهر في الصفحة..لو مكتبتوش مش هتبقي البوردرز ظاهرة…وبتكتب فيها أي رقم 1-2-3-5-6 زي متحب
width بتحدد حجم الجدول كله هيكون اد ايه..وبعد كده لسة هنعرف ازاي نحدد حجم كل خانة فيه…
height بتحدد طوله..
cellspacing بتحدد لو انت عامل بوردر المسافة المتروكة بين البوبدر والكلام المكتوب جواه..جربها وانت تفهم…واكتب جواها أي رقم
sellpading جربها واكتب أي رقم برده وانت تفهم بتعمل ايه…
bgcolor بتحدد لون خلفية الجدول لو انت عايز تعملله خلفية..
align بتحدد الجدول هيبدا من علي اليمين ولا الشممال ولا في النصright-left-center
..
الامرين tr و td لهم شوية اتربيوتس:
align لتحديد اذا كان الكلام جوه الصف ده كله هيبقي من اليمين ولا الشمال ولا في النص"right-left-center”
valign لتحديد الكلام جواه هيكون من فوق خالص ولا في النص ولا تحت خالص"top-bottom-middle”
طبعا ممكن تقول دلوقتي طب منا الحاجات دي محددها للجدول كله من فوق خالص…
الحاجات اللي اتحددت من فوق خالص للجدول هتبقي علي كله ..ولو عايز تغير في واحدة معينة يبقي من تحت شوية هتقول عليها هيه بس كده..هتلاقيها هيه بس اتغيرت والباقي زي مانت محدد في الجدول فوق
height-width-bdcolor
كده انت عرفت الحاجات دي..عشان تقدر تفهمها كويس اتدرب عليها كتيييير ..
وجرب تدخل بينها وبين بعضها….
ناقص حاجة واحدة بس في الجداول:
وهي لو انا عامل جدول.وعايز احط صورة مثلا في خانتين اتنين مع بعض..تكون نفس الصورة..او في تلات خانانت ..او أي عدد..ومش لازم صورة..لو أي حاجة عايز اعملها تكون مساختها اكتر من خانة:
ودي لها اتربيوت في ال td
اسمه colspan و rowspan
لما انا احب اعمل خانة بحجم خانتين لو بالعرض بقولله colspan=2 ولو بحجم 3 خانات بقولله colspan=3 وكده…
طبعا انت ممكن تكون بتسال وتقول منا ممكن احدد حجم الخانات من برة من الاول….بس التحديد اللي هتحدده من برة ده هيتحدد علي كل الخانات وكلها هتطلع كده……هيه العملية دي مش هقدر اقولها نظري اوي..بس انت جربها عملي اكتر من مرة هتفهمها كويس ان شاء الله..ومتسبهاش الا لما تفهمها…
والامر rowspan عشان لو عايز خانة بحجم خانتين بالطول او بحجم تلاتة..
انا عارف ان الحتة دي رخمة شوية بس انت حاول تفهمها كده وجربها كتير عشان توضحلك.ولو معرفتوش تفخهموها كويس قولولي احاول اوضحها تاني…عشان التابل ده مهم اوي ي ي ي ي ي ي ي ي…
والتابل بيستخدم دايما بالطريقة دي في عمل أي موقع..غالبا بتلاقي الصفحة كلها عبارة عن جدول…عشان تعرف تقسمه براحتك…وبيحط كل حاجة بمزاجه في المكان اللي يعجبه..ومكش لازم تكون الصفحة كلها…ممكن بس تعمل الحتة اللي انت عايز تحط فيها حاجة في مكان معين مش قاجر توصلله….بتعمل جدول في الحتة دي وتظبطه بالطريقة دي…
ودي هتلاقي فايدتها دايما لو انت مثلا هتحط فلاش او فيديو وعايز تحط حاجة جنبه…مش هتعرف تعلملها الا بالجدول….
كده ناقصلنا ال frames ونبقي كده خلصنا كل حاجة في البودي.وناخد الحاجات اللي قلنا عليها هتتقال في الخهيد اخر حاجة خالص ونبقي خلصنا خالص ان شاء الله…
يارييييييييييييييت تتدربوا علي ال tables كويس….
بالنسبة للفلاش كان في حاجة كنت قايل عليها انها بره الموضوع وهقولها في الاخر ..
وهي ان مصمم المواقع لو بيعرف يستخدم فلاش هيقدر يطلع فلاشات جمييييلة في موقعه وهتساعده جدااااااا في عمل الموقع….
ياريييييييييت تتعلموا فلاش… هتلاقوه بيعمل حاجات راااااااااااااااااااائعة ومش طويل …… وهتستفيدوا بيه جداااااا في الموقع…
وعلي فكرة..برنامج الفلاش ممكن يتصمم بيه لوحده موقع كاااااامل بدون استعمال html خالص او أي لغة تانية!!!…ويكون تصميمه سهل جدااااااااا وافضل من موقع الhtml كمان…..بس طبعا انت لو كملت بعد الاتش تي ام ال ودرست مثلا جافا سكربت اوphp دول لغتين متطورتين تبقي احسن من الفلاش مليون مرة..يعني اقصد اقول انك لو عرفتهم الاتنين هتعمل موقع شديدة وفلاشات توضح التاثير اللي انت عايزه في موقعك …
--------------------
امثلة لشوية جداول عشان تفهموا منهم كويس طريقة عمل الجدول وطريقة الاستفادة بيها في تنسيق صفحتك..
هما 3 امثلة
المثال الاول لتوضيح كل حاجة في الجدول من غيلا ماهتم بالمنظر اوي ي ..بس لتوضيح طريقة استعمال كل حاجة…
المثال التاني لفكرة في دماغي وعايز انفذها بالجدول…هيكون تنفيذها ازاي؟؟عشان الصورة توضح اكتر…
المثال التالت لصفحة كاملة معمولة ومستخدم الجدول في تنسيقها….
المثال الاول :
ده جدول تقريبا استعملت فيه كل الاتربيوتس وحبيت انوع فيه في الالوان عشان تعرفوا تستخدموها كويس….وخليت البوردرز..تقريبا كل الاتربيوتس موجودة فيه….
انسخه زي ماهو كده وحطه عندك في صحفة النوتباد ..وعايزكوا تدرسوه كويس….لو في أي حاجة مش فاهمين اتعملت ليه او هدفها ايه اسالوا علطول…
<HTML><center>
<table border=3 width=500 height=300 cellspacing=2 cellpading=2 bgcolor=yellow>
<caption>الاهلي"قاهر العمالقة"</caption>
<tr align=center bgcolor=green>
<td colspan=2>عصام الحضري </td><td colspan=2>وائل جمعة</td></tr>
<tr align=center>
<td>اسامة حسنى</td><td>محمود طلعت</td><td>أحمد حسن</td><td>احمد بلال</td></tr>
<tr align=center>
<td>جلبرتو</td><td colspan=2>ابوتريكة</td><td>حسام عاشور</td></tr>
<tr align=center><td>بركات</td><td colspan=2>عماد متعب</td><td>عفرتو</td></tr>
</center>
</HTML>….
عايزكوا تدرسوه كويس….
عرفنا عن اللينك حاجات كتير…
وهنزود حاجتين كمان انهاردة ان شاء الله..
احيانا في بعض المواقع بتلاقي لينك موجود في الصفحة من تحت خالص اسمه/ ارجع لبداية الصفحة…وده بيبقي موجود في الصفحات الطويلة اوي.. زي الصفحة اللي قدام حضرتك دي..المنتدي ده فيه الموضوع ده…اول مبتضغط علي اللينك ده بيطلعلك لاول حتة في الصفحة خالص..
ازاي نعمل كده؟؟؟
احنا مش بس ممكن نخليه يطلع لبداية الصفحة…احنا ممكن نعمل لنك يوديك لاي حتة معينة في الصفحة..يعني انت عامل صفحة طويلة ..هتيجي في الاخر تحت وتحط لينك يطلعك لاخر الصفحة ولينك يطلعك لحتة معينة مهمة في النص وكده…كل ده ازاي؟؟
احنا لما كنا بنعمل لينك يوديك لصفحة تانية كنا بنكتب اسم الصفحة اللي هيروحلها او اسم الموقع اللي هيحمله…طب انا دلوقتي عايزه يروح لحتة معينة في الصفحة…
فاللي بنعمله في الحالة دي اننا بندي للحتة دي اسم"وهنعرف دلوقتي ازاي" وبعدين نقولله روح للحتة اللي اسمها كذا لما يضغط علي الينك ده…
يعني انا عايزه يروح لبداية الصفحة مثلا…هاجي علي اول كلمة انا كاتبها في الصفحة واديلها اسم…..الاسم ده هيكون البراوزر محتفظ بيه لنفسه عارف ان الحتة دي اسمها كده بس مش هيظهره في الموقع…واجي في الاخر خالص اقولله روح للحتة اللي اسمها كذا
ازاي نسمي جزء معين؟؟
لنفرض ان اول كلمة في الصفحة مكتوبة هي كده:welcome in our website
هكتبها بالطريقة دي<a name=”this”>welcome in our website</a>
هو كده فهم ان الكلام ده اسمه this ..ومش هيظهر الاسم ده في الصفحة بس هيعرفه لنفسه…وطبعا ممكن تكتب أي اسم يعجبك..انا هنا خترت this وانت حر سميها زي متحب…
واجي وانا بعمل الللينك اقولله كده:
<a href="mostafa.htm#this>highest point in this page</a>
بقولله اسم الصفحة الاول وبعدين العلامة دي # ودي شفت مع الرقم 3 ..دي بتعرفه اني هقولله اسم حتة معينة من الصفحة يروحلها..جرب وشوف…
طب ليه انا قلتله اسم الصفحة؟؟طب ماقولله وخلاص اسم الحتة االلي هيروحلها….
وده لاني ممكن اعمل الكلام مش في نفس الصفحة..يعني ممكن اعمل لينك يوديك لحتة معينة في صفحة تانية بنفس الطريقة.0مش هقوللك ازاي..جرب انت بقي يلا لوحدك…
الحاجة الاخيرة عن اللينكات..انت أي موقع بتدخله وبتفتح فيه لينك وتدخله …وبعدين ترجع تاني للصفحة الرئيسية بتاعت الموقع ده بتلاقي اللينك لونه بقي غامق شوية…والينكات اللي مفتحتهاش بتفضل عادية…
ودي لها اتربيوت بيتحط في البودي..وده اللي انا كنت قلت عنه قبل كده ان فاضل اتربيوت في البودي هناخده بعدين لانه محتاج نعرف حاجات في البودي الاول…
<body link="red" alink="black" vlink="green>
link دي بتحدد لون أي لينك طبيعي في الصفحة
vlink بتحدد لون اللينك اللي اتفتح قبل كده…وهي اختصار ل visited link
alink بتحدد لون اللينك اللي انت واقف عليه بتضغط عليه حالا… ودي اختصار ل active link
جرب وشوف…ودي طبعا برده ممكن تكتب فيها الالوان كتابة او بالطريقة العشرية
تقريبا فاضل حاجة بسيطة كمان عن اللينكات هتعرفها بعد شوية صغيرين اوي ان شاء الله…
لادراج فيديو او فلاش:
<" "=embed src=" " width=" " height>
مش محتاجة شرح حاجة..جربها وشوفها…..بس هنا عايز اقول حاجة تانية بره الموضوع سنة هقولها في الاخر ان شاء الله..
لادراج صوت:
<bgsound src=name of the file>
كده الصوت ده هيشتغل لوحده علطول مع الموقه اول ميفتح…
طب لو انا عايز احط صوت او فيديو او فلاش ..بس ميشتغلوش في الموقع..بس يبقوا موجودين علي هيئة لينكات يضغط عليها الزائر عشان يعمللها داونلود عنده علي الجهاز؟؟
هيه دي استخدام اللينك الاخير اللي كنت بقول عليه من شوية:
<a href="name of the file">download sorat el baqara</a>
كده اول ميضغط علي اللينك هيعملله داون لود علي الجهاز بتاعه…
يعني انا كده بكتب a href وبكتب فيها أي حاجة.ممكن اسم صفحة تانية في موقعي يقوم محملها..مكن اكتب ايميل ..هيبعت عليه..ممكن اكتب اسم حتة معينة من الصفحة هيحملها..ممكن اكتب اسم ملف صوت او فيديو او فلاش هيروح عاملهللا دوانلود…يعني ممكن اكتب أي حااااااااجة هنا….
كده عرفنا ازاي نتعامل مع الصوت والفيديو والفلاش و الصور …..يبقي كده اللغة دي خلصت؟؟؟؟؟
لا لسة فاضل بقي شوية تحابيش…شوية حاجات تنظملك الصفحة بتاعتك وتخلي شكلها حلو
بس كده وخلاص….عشان في حاجات ممكن تحب تعلمها في صفحتك ومتقدرش تعملها…الطرق والحاجات التنظيمية دي هتخليك تقدر تعمل كل اللي انت عاوزه ان شاء الله…
الاول في امرين بسيطين كده:
الامر <marquee>………..</marquee>
بيخليلك الكلام يتحرك بعرض الصفة….الكلام اللي انت كاتبه في النص كده..جرب وشوف..
الامر <hr> بيعمل خط مكان متكتبه…خط بعرض الصفحة..ده بتلاقيه في المواقع دايما في اولها خالص او في اخر الصفحة…
وطبعا بدام هو هيعمل خط وخلاص يبقي مبيتقفلش…
والخط ده بتلاقي تحته ظل وشكله حلو ..وممكن تتحكم فيه بالاتربيوتس دي:
width-size-color-align-noshade
هما مش محتاجين كلام..جربهم وشوفهم..ماعدا بس الاتربيوت align بيحدد اذا كان الخط ده هيبقي ناحية اليمين ولا الشمال ولا في النص..وده لو هتعلمه خط صغير..انما هو غالبا بيبقي بعرض الضفحة كلها..ودي بتتحكم فيها من width… انت جربهم وشوفهم
فاضل كده في اللغة دي كلها حاجتين مهمييييييييين ينظموا الصفحة كلها :
tables-frames
ال tables :
ودي تقريبا اهم حااااااااااااااااااااااااااااااااااااجة في الاتش تي ام ال يعد اللينكات… لانها بتنظم الصفحة كويس اوي ي ي ي ي ..
ركز كويس عشان تفهمها كويس وطبق عليها كتييييييييير عشان هتريحك جامد اوييييييي لو فهمتها كويس ان شاء الله…
ودي بتبقي موجودة تقربا في كل المواقع..بتلاقي الموقع كله معمول عبارة عن جدول..وبديله امر اقولله متخليش البوردرز بتاعة الجدول باينة..فبيظهر قدام الزائر كانه مش جدول …بس بيبقي مترتب كويس…
ودي بتريح كتير اوي..لان انت ممكن تحب تعمل حاجات في صفحتك ومتقدرش تعملها غير بالجدول…انا مش هقدر اقوللكوا حاجات زي ايه..لان دي بتيجي بالخبرة والممارسة..بس هقوللكوا مثال بسيط عنها بعد شوية ان شاء الله…
أي جدول في الدنيا عبارة عن صفوف افقية واعمدة راسية …
جدول عادي…بنعمل احنا جدول مكون من الصفوف والاعمدة دي وبنحدد احجامها ومساحاتها زي ماحنا عايزين ونقسم الصفحة كلها كده.تبقي الصفحة كلها عبارة عن خانات جدول…وبكده تقدر تحط أي حاجة انت عايزها في أي حتة من الصفحة زي متحب…تحدد تقولله في الخانة دي حطها…وتلغي البوردر…
ازاي بقي تعمل الجدول ده وتظبطه؟؟؟؟؟
الامر <table>
احنا قلنا ان الجدول عبارة عن صفوف واعمدة فعشان اعرفه اني بكتب في صف معين دي لها امر ولما اخلص كتابة في الصف ده اقفله…وبعدين افتح واحد تاني واكتب فيه واقفله…ونفس الموضوع بالنسبة للاعمدة…
الامر <tr> صف
الامر<td> عمود
منظر لجدول بسيط تفهموا منه طريقة عمل الجدول:
<table>
<tr>
<td>…………………………</td>
<td>…………………………..</td>
</tr>
<tr>
<td>…………………………</td>
<td>…………………………..</td>
</tr>
</table>
tr في ااول فهمته اني شغال في الصف الاول…وكتبت جواها td يبقي انا شغال في العمود الاول فيها..او الخانة الاولي فيه يعني..
وخلصت كتبابة فيها وقفلتها وفتحت الخانة التانية فيه وخلصت وقفلتها وبعدين قفلت ال tr يبقي خلصت الصف الاول ودخلت في التاني وكده….
ومينفعش اعكس واكتب العمود واقسم جواه الخانات ..هما عملوها نظامها كده بس..
<table>--<tr>-<td>
وطبعا في كل خانة ممكن احط أي حاجة..ممكن كلام او صورة او لينك او أي حاجة..متفتكرش انه جدول بقي يعني خانات صغيرة وكده..انت ممكن تحدد حجم الخانا وهنعرف دلوقتي ازاي…دانا ممكن اعمل جدول بمساحة الصفحة كلها ويكون خانتيت بس يعني كل خانة نص الصفحة..وهنا مثلا مثال عن ازاي ممكن تستفيد بالجدول…
لو انا عايز عمل صفحة يكون فيها فيلمين فيديو وشغالين جنب بعض…كل واحد شغال في نص الصفحة..
لو انت جدع اعملها من غير جدول ..تلاقيهم نزلوا تحت بعض..لو بجدول تبقي سههههههلللللللة…يعني الجدول بيسمحلك انك تحط أي حاجة انت عايزها في أي مكان في الصفحة..وممكن من غيره بعض الحاجات متقدرش تحطها كده….
وطبعا مش دي بس الحاجة الوحيدة..بس دي جت في دماغي دلوقتي..
نعرف بقي ازاي نتعامل مع الجدول ده ونظبطه.
او بمعني تاني الاتربيوتس بتاعة الجدول..
الاتربيوتس بتاعة الامر <table>:
border بيحدد حجم البوردر لو انت عايز تخليه جدول طبيعي والبوردر بتاعه ظاهر في الصفحة..لو مكتبتوش مش هتبقي البوردرز ظاهرة…وبتكتب فيها أي رقم 1-2-3-5-6 زي متحب
width بتحدد حجم الجدول كله هيكون اد ايه..وبعد كده لسة هنعرف ازاي نحدد حجم كل خانة فيه…
height بتحدد طوله..
cellspacing بتحدد لو انت عامل بوردر المسافة المتروكة بين البوبدر والكلام المكتوب جواه..جربها وانت تفهم…واكتب جواها أي رقم
sellpading جربها واكتب أي رقم برده وانت تفهم بتعمل ايه…
bgcolor بتحدد لون خلفية الجدول لو انت عايز تعملله خلفية..
align بتحدد الجدول هيبدا من علي اليمين ولا الشممال ولا في النصright-left-center
..
الامرين tr و td لهم شوية اتربيوتس:
align لتحديد اذا كان الكلام جوه الصف ده كله هيبقي من اليمين ولا الشمال ولا في النص"right-left-center”
valign لتحديد الكلام جواه هيكون من فوق خالص ولا في النص ولا تحت خالص"top-bottom-middle”
طبعا ممكن تقول دلوقتي طب منا الحاجات دي محددها للجدول كله من فوق خالص…
الحاجات اللي اتحددت من فوق خالص للجدول هتبقي علي كله ..ولو عايز تغير في واحدة معينة يبقي من تحت شوية هتقول عليها هيه بس كده..هتلاقيها هيه بس اتغيرت والباقي زي مانت محدد في الجدول فوق
height-width-bdcolor
كده انت عرفت الحاجات دي..عشان تقدر تفهمها كويس اتدرب عليها كتيييير ..
وجرب تدخل بينها وبين بعضها….
ناقص حاجة واحدة بس في الجداول:
وهي لو انا عامل جدول.وعايز احط صورة مثلا في خانتين اتنين مع بعض..تكون نفس الصورة..او في تلات خانانت ..او أي عدد..ومش لازم صورة..لو أي حاجة عايز اعملها تكون مساختها اكتر من خانة:
ودي لها اتربيوت في ال td
اسمه colspan و rowspan
لما انا احب اعمل خانة بحجم خانتين لو بالعرض بقولله colspan=2 ولو بحجم 3 خانات بقولله colspan=3 وكده…
طبعا انت ممكن تكون بتسال وتقول منا ممكن احدد حجم الخانات من برة من الاول….بس التحديد اللي هتحدده من برة ده هيتحدد علي كل الخانات وكلها هتطلع كده……هيه العملية دي مش هقدر اقولها نظري اوي..بس انت جربها عملي اكتر من مرة هتفهمها كويس ان شاء الله..ومتسبهاش الا لما تفهمها…
والامر rowspan عشان لو عايز خانة بحجم خانتين بالطول او بحجم تلاتة..
انا عارف ان الحتة دي رخمة شوية بس انت حاول تفهمها كده وجربها كتير عشان توضحلك.ولو معرفتوش تفخهموها كويس قولولي احاول اوضحها تاني…عشان التابل ده مهم اوي ي ي ي ي ي ي ي ي…
والتابل بيستخدم دايما بالطريقة دي في عمل أي موقع..غالبا بتلاقي الصفحة كلها عبارة عن جدول…عشان تعرف تقسمه براحتك…وبيحط كل حاجة بمزاجه في المكان اللي يعجبه..ومكش لازم تكون الصفحة كلها…ممكن بس تعمل الحتة اللي انت عايز تحط فيها حاجة في مكان معين مش قاجر توصلله….بتعمل جدول في الحتة دي وتظبطه بالطريقة دي…
ودي هتلاقي فايدتها دايما لو انت مثلا هتحط فلاش او فيديو وعايز تحط حاجة جنبه…مش هتعرف تعلملها الا بالجدول….
كده ناقصلنا ال frames ونبقي كده خلصنا كل حاجة في البودي.وناخد الحاجات اللي قلنا عليها هتتقال في الخهيد اخر حاجة خالص ونبقي خلصنا خالص ان شاء الله…
يارييييييييييييييت تتدربوا علي ال tables كويس….
بالنسبة للفلاش كان في حاجة كنت قايل عليها انها بره الموضوع وهقولها في الاخر ..
وهي ان مصمم المواقع لو بيعرف يستخدم فلاش هيقدر يطلع فلاشات جمييييلة في موقعه وهتساعده جدااااااا في عمل الموقع….
ياريييييييييت تتعلموا فلاش… هتلاقوه بيعمل حاجات راااااااااااااااااااائعة ومش طويل …… وهتستفيدوا بيه جداااااا في الموقع…
وعلي فكرة..برنامج الفلاش ممكن يتصمم بيه لوحده موقع كاااااامل بدون استعمال html خالص او أي لغة تانية!!!…ويكون تصميمه سهل جدااااااااا وافضل من موقع الhtml كمان…..بس طبعا انت لو كملت بعد الاتش تي ام ال ودرست مثلا جافا سكربت اوphp دول لغتين متطورتين تبقي احسن من الفلاش مليون مرة..يعني اقصد اقول انك لو عرفتهم الاتنين هتعمل موقع شديدة وفلاشات توضح التاثير اللي انت عايزه في موقعك …
--------------------
امثلة لشوية جداول عشان تفهموا منهم كويس طريقة عمل الجدول وطريقة الاستفادة بيها في تنسيق صفحتك..
هما 3 امثلة
المثال الاول لتوضيح كل حاجة في الجدول من غيلا ماهتم بالمنظر اوي ي ..بس لتوضيح طريقة استعمال كل حاجة…
المثال التاني لفكرة في دماغي وعايز انفذها بالجدول…هيكون تنفيذها ازاي؟؟عشان الصورة توضح اكتر…
المثال التالت لصفحة كاملة معمولة ومستخدم الجدول في تنسيقها….
المثال الاول :
ده جدول تقريبا استعملت فيه كل الاتربيوتس وحبيت انوع فيه في الالوان عشان تعرفوا تستخدموها كويس….وخليت البوردرز..تقريبا كل الاتربيوتس موجودة فيه….
انسخه زي ماهو كده وحطه عندك في صحفة النوتباد ..وعايزكوا تدرسوه كويس….لو في أي حاجة مش فاهمين اتعملت ليه او هدفها ايه اسالوا علطول…
<HTML><center>
<table border=3 width=500 height=300 cellspacing=2 cellpading=2 bgcolor=yellow>
<caption>الاهلي"قاهر العمالقة"</caption>
<tr align=center bgcolor=green>
<td colspan=2>عصام الحضري </td><td colspan=2>وائل جمعة</td></tr>
<tr align=center>
<td>اسامة حسنى</td><td>محمود طلعت</td><td>أحمد حسن</td><td>احمد بلال</td></tr>
<tr align=center>
<td>جلبرتو</td><td colspan=2>ابوتريكة</td><td>حسام عاشور</td></tr>
<tr align=center><td>بركات</td><td colspan=2>عماد متعب</td><td>عفرتو</td></tr>
</center>
</HTML>….
عايزكوا تدرسوه كويس….