تخطيط الصفحة
الصفحة التي سنعملها هي عبارة عن صفحة مقسمة الى قسم في الاعلى وسنضع فيه صورة لعنوان الموقع وعمود على اليمين بعرض 200 بيكسل نضع فيه ما نريد مثلا يمكنك وضع روابط او صور او فيديو او ماتريد في هذا العمود , وبجوار هذا العمود سنعمل عمود بعرض 700 بيكسل سوف نستعرض فيه بعض المحتويات ( مقالات , صور وفيديو ) وفي اسفل الصفحة سنضع قسم صغير لنضع فيه حقوق الموقع يعني سنكتب فيه جميع الحقوق محفوظة للموقع ,, الموقع سنسميه موقع افاق العلمي ,, واليك الصورة التالية التي ستوضح تخطيط الصفحة التي سننشاءها :
في الصورة اعلاه تعرفنا على تخطيط الصفحة التي سننشاءها , ولتقسيم الصفحة بهذا الشكل سنستخدم الجداول حيث سنقوم بانشاء جدول بعرض 900 بيكسل وبثلاثة صفوف وسنقسمه بالشكل التالي :
الصف الاول فيه خليتين بعرض خلية وسنضع فيه صورة لعنوان الموقع.
الصف الثاني فيه خليتين الخلية الاولى بعرض 300 بيكسل وتمثل العمود الذي على اليمين والخلية الثانية بعرض 600 بيكسل وهي للمحتوى .
في الصف الثالث سنقوم بانشاء خلية بعرض خليتين نضع فيه حقوق الموقع .
وسيكون الوسم بالشكل التالي :
<html dir="rtl">
<head><title>موقع أفاق العلمي</title></head>
<body>
<table border="2" width="900" height="100%">
<tr><td colspan="2">هنا سنضع راس الصفحة</td></tr>
<tr><td width="300">هنا العمود علي اليمين</td><td width="600">هنا عمود المحتوى</td></tr>
<tr><td colspan="2">هنا اسفل الصفحة</td></tr>
</table>
</html>
<head><title>موقع أفاق العلمي</title></head>
<body>
<table border="2" width="900" height="100%">
<tr><td colspan="2">هنا سنضع راس الصفحة</td></tr>
<tr><td width="300">هنا العمود علي اليمين</td><td width="600">هنا عمود المحتوى</td></tr>
<tr><td colspan="2">هنا اسفل الصفحة</td></tr>
</table>
</html>
لاحظ اننا قمنا بتحديد ارتفاع الجدول ب 100% لكي يكون على ارتفاع الصفحة كاملة .
والنتيجة ستكون :
لاحظ في الصورة ان الجدول متجه الى اليمين ونحن نريده ان يكون في المنتصف لذا سنضع الوسم align="center" في خصائص الجدول ليصبح الجدول في منتصف الصفحة والوسم سيكون كالتالي :
<html dir="rtl">
<head><title>موقع أفاق العلمي</title></head>
<body>
<table border="2" width="900" height="100%" align="center">
<tr><td colspan="2">هنا سنضع راس الصفحة</td></tr>
<tr><td width="300">هنا العمود علي اليمين</td><td width="600">هنا عمود المحتوى</td></tr>
<tr><td colspan="2">هنا اسفل الصفحة</td></tr>
</table>
</html>
<head><title>موقع أفاق العلمي</title></head>
<body>
<table border="2" width="900" height="100%" align="center">
<tr><td colspan="2">هنا سنضع راس الصفحة</td></tr>
<tr><td width="300">هنا العمود علي اليمين</td><td width="600">هنا عمود المحتوى</td></tr>
<tr><td colspan="2">هنا اسفل الصفحة</td></tr>
</table>
</html>
وسيصبح الجدول بالشكل التالي :
انتهينا من تخطيط الجدول وثاني خطوه هي تغيير خلفية الصفحة وتغيير خلفية الجدول .
الخلفية
انتهينا من تخطيط الجدول وثاني خطوه هي تغيير خلفية الصفحة وتغيير خلفية الجدول .
الخلفية
اولا سنقوم بتغيير خلفية الصفحة وذلك بإستخدام صورة كخلفية للصفحة والصورة التي سنستخدمها هي :
وسنقوم بضبطها كخلفية للصفحة بإستخدام الوسم الخاص بذلك بحيث يصبح الوسم بالشكل التالي :
<html dir="rtl">
<head><title>موقع أفاق العلمي</title></head>
<body background="14.png">
<table border="2" width="900" height="100%" align="center">
<tr><td colspan="2">هنا سنضع راس الصفحة</td></tr>
<tr><td width="300">هنا العمود علي اليمين</td><td width="600">هنا عمود المحتوى</td></tr>
<tr><td colspan="2">هنا اسفل الصفحة</td></tr>
</table>
</html>
الجزء المظلل باللون الاخضر هو الجزء الذي استخدمناه لتعيين خلفية الصفحة ......... وستكون النتيجة كالتالي :
ونلاحظ ان الصورة اصبحت ايضا خلفية للجدول لان الجدول في هذه الحالة بدون خلفية لاننا لم نقم بتحديدها لذلك ستصبح خلفية الصفحة خلفية للجدول ايضا ولكننا لا نريد ان نجعل خلفية الصفحة كخلفية للجدول لذلك سوف نغير خلفية الجدول الى اللون الابيض ليصبح الوسم كالتالي :
<html dir="rtl">
<head><title>موقع أفاق العلمي</title></head>
<body background="14.png">
<table border="2" width="900" height="100%" align="center" bgcolor=#ffffff>
<tr><td colspan="2">هنا سنضع راس الصفحة</td></tr>
<tr><td width="300">هنا العمود علي اليمين</td><td width="600">هنا عمود المحتوى</td></tr>
<tr><td colspan="2">هنا اسفل الصفحة</td></tr>
</table>
</html>
والجزء المظلل عليه باللون الاخضر هو الوسم الذي استخدمناه لتعيين خلفية الجدول ............. والنتيجة ستكون :
انتهينا من تخطيط الصفحة وتعيين خلفيتها وسننتقل لاول جزء من التصميم وهو رأس الصفحة .
رأس الصفحة
رأس الصفحة هو الصف الاول في الجدول الذي قمنا بإنشاءه وهو الجزء المظلل عليه باللون الازرق في الوسم التالي :
<html dir="rtl">
<head><title>موقع أفاق العلمي</title></head>
<body background="14.png">
<table border="2" width="900" height="100%" align="center" bgcolor=#ffffff>
<tr><td colspan="2">هنا سنضع راس الصفحة</td></tr>
<tr><td width="300">هنا العمود علي اليمين</td><td width="600">هنا عمود المحتوى</td></tr>
<tr><td colspan="2">هنا اسفل الصفحة</td></tr>
</table>
</html>
وسنعمل عليه فقط اي سنقوم بتعديل الجزء المظلل باللون الازرق الخاص برأس الصفحة ثم سننتقل لباقي الاجزاء .
اول ما سنقوم به هو تغيير خلفية رأس الصفحة بالصورة التالية :
وسنقوم بتعيين الصورة باستخدام الوسم background وذلك ضمن الوسم td الخاص بالخلية المخصصة لرأس الصفحة وسيكون الوسم بالشكل التالي :
<tr><td colspan="2" background="12.png" height="120"></td></tr>
الجزء المظلل باللون الاخضر هو الجزء الخاص بالوسم الذي استخدمناه لتعيين الصورة كخلفية للخلية اما الجزء المظلل باللون الازرق فهو الجزء الخاص بتحديد ارتفاع الخلية لتتناسب مع ارتفاع الصورة ........ وستكون النتيجة كالتالي :
لاحظ اننا قمنا بمسح النص الذي كان موجود في الخلية والذي كان بالشكل التالي :
<tr><td colspan="2">هنا سنضع راس الصفحة</td></tr>
الجزء المظلل باللون الاخضر هو الجزء الذي مسحناه حيث اننا لم نعد نحتاجه لان الصورة التي استخدمناها تحتوي على عنوان الموقع لذلك لا حاجة للنص .
انتهينا من رأس الصفحة وسننتقل الى العمود الايمن .
العمود الايمن
الجزء المخصص للعمود الايمن هو الخلية الاولى في الصف الثاني والمحدد عليه باللون الاخضر في الكود التالي :
<html dir="rtl">
<head><title>موقع أفاق العلمي</title></head>
<body background="14.png">
<table border="2" width="900" height="100%" align="center" bgcolor=#ffffff>
<tr><td colspan="2" background="12.png" height="120"></td></tr>
<tr><td width="300">هنا العمود علي اليمين</td><td width="600">هنا عمود المحتوى</td></tr>
<tr><td colspan="2">هنا اسفل الصفحة</td></tr>
</table>
</html>
وسوف نغير خلفية العمود الى اللون الرمادي الفاتح والذي يحمل الرمز f6f6f6 حتي يصبح الوسم بالشكل التالي :
<tr><td width="300" bgcolor=#f6f6f6 >هنا العمود علي اليمين</td>
الجزء المظلل باللون الاخضر هو الجزء الذي استخدمناه لتغيير لون خلفية العمود ....... وستكون النتيجة بالشكل التالي :
اما محتوى العمود فسيكون بالشكل التالي :
وسنبدء بالجزء الاول وهو جزء " التعريف بالموقع " وسيكون الوسم الخاص به بالشكل التالي :
<h3>تعريف بالموقع </h3>
<font>هو موقع علمي يحتوي على مواضيع متنوعة كما يحتوي على فيديوهات وصور ممتعة ومسلية للجميع </font>
وسنقوم باضافة الوسم الخاص ب" التعريف بالموقع " الى العمود ليصبح بالشكل التالي :
<tr><td width="300" bgcolor=#f6f6f6 >
<h3>تعريف بالموقع </h3>
<font>هو موقع علمي يحتوي على مواضيع متنوعة كما يحتوي على فيديوهات وصور ممتعة ومسلية للجميع </font>
</td>
وستكون النتيجة بالشكل التالي :
تلاحظ ان النص ظهر في منتصف العمود ..ولحل هذه المشكلة نحذف الوسم height="100%" الموجود في الوسم الاصلي والمؤشر عليه باللون الاخضر في الوسم التالي :
<html dir="rtl">
<head><title>موقع أفاق العلمي</title></head>
<body background="14.png">
<table border="2" width="900" height="100%" align="center" bgcolor=#ffffff>
<tr><td colspan="2" background="12.png" height="120"></td></tr>
<tr><td width="300" bgcolor=#f6f6f6 ><h3>تعريف بالموقع </h3>
<font>هو موقع علمي يحتوي على مواضيع متنوعة كما يحتوي على فيديوهات وصور ممتعة ومسلية للجميع </font></td>
<td width="600">هنا عمود المحتوى</td></tr>
<tr><td colspan="2">هنا اسفل الصفحة</td></tr>
</table>
</html>
بعد ان قمنا بحذف الوسم ستكون النتيجة بالشكل التالي :
لا عليك سيتمدد الجدول كل ما اضفت مزيد من المحتويات وستلاحظ ذلك عندما ننتهي من تصميم الصفحة .
الان ننتقل الى الجزء الخاص ب"فيديو " وسنستخدم فيديو من موقع هارون يحيى رابط الفيديو هو :
http://174.121.197.240/download/24/18/d9f5cda25e327e45db6906e30a02a6a7
/Harun.Yahya.Miracles.of.the.Brain.Smell.and.Taste.Arabic.wmv
وسنضيف مقطع الفيديو بالوسم التالي :
<h3>فيديو </h3>
<embed src="http://174.121.197.240/download/24/18/d9f5cda25e327e45db6906e30a02a6a7/Harun.Yahya.Miracles.of.the.Brain.Smell.and.Taste.Arabic.wmv" width="300" height="190">
وسنضيفه للعمود ليصبح بالشكل التالي :
<td width="300" bgcolor=#f6f6f6 >
<h3>تعريف بالموقع </h3>
<font>هو موقع علمي يحتوي على مواضيع متنوعة كما يحتوي على فيديوهات وصور ممتعة ومسلية للجميع </font>
<h3>فيديو </h3>
<embed src="http://174.121.197.240/download/24/18/d9f5cda25e327e45db6906e30a02a6a7/Harun.Yahya.Miracles.of.the.Brain.Smell.and.Taste.Arabic.wmv" width="290" height="190">
</td>
الجزء الخاص بالفيديو هو الجزء المظلل باللون الاخضر .......وستكون النتيجة بالشكل التالي :
--------تطبيق 9 ---
الان سنضيف الجزء " صور من اختيارنا " وسنستخدم في ذلك الصورة التالية :
وسيكون الوسم الخاص بهذا الجزء كالتالي :
<h3>صورة من اختيارنا</h3>
<img src="99.jpg" width="300" height="220">
وسنضيفها للعمود لتصبح بالشكل التالي :
<td width="300" bgcolor=#f6f6f6 >
<h3>تعريف بالموقع </h3>
<font>هو موقع علمي يحتوي على مواضيع متنوعة كما يحتوي على فيديوهات وصور ممتعة ومسلية للجميع </font>
<h3>فيديو </h3>
<embed src="http://174.121.197.240/download/24/18/d9f5cda25e327e45db6906e30a02a6a7/Harun.Yahya.Miracles.of.the.Brain.Smell.and.Taste.Arabic.wmv" width="290" height="190">
<h3>صورة من اختيارنا</h3>
<img src="99.jpg" width="300" height="220">
</td>
الجزء المظلل بالاخضر هو الجزء الخاص ب" صورة من اختيارنا " ......بعد الاضافة ستكون النتيجة كالتالي :
اخيرا سنضيف جزء "روابط صديقة " حيث سنضيف مجموعة من الروابط الرابط الاول لمدونة علاء الدين وعنوانه :
http://aladdintech.blogspot.com/
والثاني لموقع التقنية اليوم وعنوانه :
http://www.dtarabia.co.cc/
والثالث لمدونة أماس وعنوانه :
http://ammaasblog.blogspot.com
وسيكون الوسم الخاصه بهذا الجزء كالتالي :
<h3>روابط صديقة </h3>
<a href="http://www.dtarabia.co.cc/">موقع التقنية اليوم</a>
<br><a href="http://aladdintech.blogspot.com/">مدونة علاء الدين </a>
<br><a href="http://ammaasblog.blogspot.com">مدونة أماس</a>
وسنضيف الوسم السابق للعمود ليصبح الوسم بالشكل التالي :
<td width="300" bgcolor=#f6f6f6 >
<h3>تعريف بالموقع </h3>
<font>هو موقع علمي يحتوي على مواضيع متنوعة كما يحتوي على فيديوهات وصور ممتعة ومسلية للجميع </font>
<h3>فيديو </h3>
<embed src="http://174.121.197.240/download/24/18/d9f5cda25e327e45db6906e30a02a6a7/Harun.Yahya.Miracles.of.the.Brain.Smell.and.Taste.Arabic.wmv" width="290" height="190">
<h3>صورة من اختيارنا</h3>
<img src="99.jpg" width="300" height="220">
<h3>روابط صديقة </h3>
<a href="http://www.dtarabia.co.cc/">موقع التقنية اليوم</a>
<br><a href="http://aladdintech.blogspot.com/">مدونة علاء الدين </a>
<br><a href="http://ammaasblog.blogspot.com">مدونة أماس</a>
</td>
الجزء المظلل باللون الاخضر هو الجزء الخاص بروابط صديقة ........ وستكون النتيجة كالتالي :
بعد ان انتهينا من تصميم العمود سننتقل الى تصميم الجزء الخاص بالمحتوى .
جزء المحتوى
الجزء الخاص بالمحتوى هو المحدد باللون الاخضر في الوسم التالي :
<html dir="rtl">
<head><title>موقع أفاق العلمي</title></head>
<body background="14.png">
<table border="2" width="900" height="100%" align="center" bgcolor=#ffffff>
<tr><td colspan="2">هنا سنضع راس الصفحة</td></tr>
<tr><td width="300">هنا العمود علي اليمين</td><td width="600">هنا عمود المحتوى</td></tr>
<tr><td colspan="2">هنا اسفل الصفحة</td></tr>
</table>
</html>
وسنعمل على هذا الوسم لاضافة مواضيع للمحتوى .
في الجزء الخاص بالمحتوى سنضيف اولا موضوع عن الخليفة عمر بن عبدالعزيز رضي الله عنه
وثم سنضيف موضوع عن الايمان بالقضاء والقدر
ثم سنضيف فيديو من موقع الدكتور هارون يحيى
اولاً: موضوع الخليفة عمر بن عبد العزيز رضي الله عنه وهو منقول من المكتبة الاسلامية وعنوان الموضوع
http://www.afdhl.com/islamic/show.php?id=541
وسيكون الكود الخاص بهذا الموضوع كالتالي :
<h3>الخليفة عمر بن عبدالعزيز رضي الله عنه</h3>
<img src="100.jpg" align="left" width="200" height="160">
<font>
رأى أمير المؤمنين عمر بن الخطاب رؤيا، فقام من نومه يردد: مَنْ هذا الأشجُّ من بني أمية، ومِنْ ولد عمر يُسَمى عمر، يسير بسيرة عمر ويملأ الأرض عدلاً.
ومرت الأيام، وتحققت رؤيا أمير المؤمنين، ففي منطقة حلوان بمصر حيث يعيش وإلى مصر عبد العزيز بن مروان وزوجته ليلى بنت عاصم بن عمر بن الخطاب وُلِد
عمر بن عبد العزيز سنة 61هـ، وعني والده بتربيته تربية صالحة، وعلَّمه القراءة والكتابة، لكن عمر رغب أن يغادر مصر إلى المدينة ليأخذ منها العلم، فاستجاب
عبد العزيز بن مروان لرغبة ولده وأرسله إلى واحد من كبار علماء المدينة وصالحيها وهو (صالح بن كيسان).
حفظ عمر بن عبد العزيز القرآن الكريم، وظهرت عليه علامات الورع وأمارات التقوى، حتى قال عنه معلِّمه صالح بن كيسان: ما خَبَرْتُ أحدًا -الله أعظم في صدره- من هذا الغلام، وقد فاجأته أمه ذات يوم وهو يبكي في حجرته، فسألته: ماذا حدث لك يا عمر؟ فأجاب: لا شيء يا أماه إنما ذكرتُ الموت، فبكت أمه.
وكان معجبًا إعجابًا شديدًا بعبد الله بن عمر -رضي الله عنه- وكان دائمًا يقول لأمه: تعرفين يا أماه لأكونن مثل خالي عبد الله بن عمر، ولم تكن هذه الأشياء وحدها هي التي تُنبئ بأن هذا الطفل الصغير سيكون علمًا من أعلام الإسلام، بل كانت هناك علامات أخرى تؤكد ذلك، فقد دخل عمر بن العزيز إلى إصطبل
أبيه، فضربه فرس فشجَّه (أصابه في رأسه) فجعل أبوه يمسح الدم عنه، ويقول: إن كنتَ أشجَّ بني أمية إنك إذن لسعيد.
</font>
وسنضيف هذا الموضوع الى المحتوى ليصبح بالشكل التالي :
<td width="600">
<h3>الخليفة عمر بن عبدالعزيز رضي الله عنه</h3>
<img src="100.jpg" align="left" width="200" height="160">
<font>
رأى أمير المؤمنين عمر بن الخطاب رؤيا، فقام من نومه يردد: مَنْ هذا الأشجُّ من بني أمية، ومِنْ ولد عمر يُسَمى عمر، يسير بسيرة عمر ويملأ الأرض عدلاً.
ومرت الأيام، وتحققت رؤيا أمير المؤمنين، ففي منطقة حلوان بمصر حيث يعيش وإلى مصر عبد العزيز بن مروان وزوجته ليلى بنت عاصم بن عمر بن الخطاب وُلِد
عمر بن عبد العزيز سنة 61هـ، وعني والده بتربيته تربية صالحة، وعلَّمه القراءة والكتابة، لكن عمر رغب أن يغادر مصر إلى المدينة ليأخذ منها العلم، فاستجاب
عبد العزيز بن مروان لرغبة ولده وأرسله إلى واحد من كبار علماء المدينة وصالحيها وهو (صالح بن كيسان).
حفظ عمر بن عبد العزيز القرآن الكريم، وظهرت عليه علامات الورع وأمارات التقوى، حتى قال عنه معلِّمه صالح بن كيسان: ما خَبَرْتُ أحدًا -الله أعظم في صدره- من هذا الغلام، وقد فاجأته أمه ذات يوم وهو يبكي في حجرته، فسألته: ماذا حدث لك يا عمر؟ فأجاب: لا شيء يا أماه إنما ذكرتُ الموت، فبكت أمه.
وكان معجبًا إعجابًا شديدًا بعبد الله بن عمر -رضي الله عنه- وكان دائمًا يقول لأمه: تعرفين يا أماه لأكونن مثل خالي عبد الله بن عمر، ولم تكن هذه الأشياء وحدها هي التي تُنبئ بأن هذا الطفل الصغير سيكون علمًا من أعلام الإسلام، بل كانت هناك علامات أخرى تؤكد ذلك، فقد دخل عمر بن العزيز إلى إصطبل
أبيه، فضربه فرس فشجَّه (أصابه في رأسه) فجعل أبوه يمسح الدم عنه، ويقول: إن كنتَ أشجَّ بني أمية إنك إذن لسعيد.
</font>
</td>
الان نأتي الى موضوع الايمان بالقضاء والقدر وهو منقول من موقع البلاغ وعنوانه
http://www.balagh.com/deen/6j04w6q9.htm
وسيكون الوسم الخاص بهذا الجزء بالشكل التالي :
<h3>الايمان بقضاء الله وقدره </h3>
<img src="200.jpg" align="left" width="200" height="160">
<font>
* الشيخ محمود المصري
إنّ بلسم الجراحات هو الإيمان بالقضاء والقدر، وعجباً لأمر المؤمن إن أمره كله له خير، إن أصابته سراء شكر، فكان خيراً له، وإن أصابته ضراء صبر، فكان خيراً له، قد علم أن ما أصابه لم يكن ليخطئه، وعلم أن ما أخطأه لم يكن ليصيبه، علم أنّ الأُمّة لو اجتمعت على أن ينفعوه بشيء، لن ينفعوه إلا بشيء قد كتبه الله له، ولو اجتمعت على أن يضروه بشيء لم يضروه إلى بشيء قد كتبه الله – عزّ وجل – عليه، رضي فرضى الله عنه، وسعد في حياته وأخراه، وإطمأن قلبه وسكنت روحه، فهو في نعيم وأي نعيم!!
فالإيمان بالقضاء والقدر نعمة على البشر وبلسم وظل وافر من الطمأنينة وفيض من الأمن والسكينة، ووقاية من الشرور، وحافظ على العمل، وباعث على الصبر والرضا، والصبر مُرٌّ مذاقه، لذيذة عاقبته.
صبرت ومَن يصبر يجد غبَّ صبره **** ألذَّ وأحلى من جني النحل في الفم
فاحرص على ما ينفعك، وارض بما قسم الله لك، واستعن بالله ولا تعجز، وإن أصابك شيء فلا تقل: لو أنني فعلت كذا، ولكن قل: "قدر الله وما شاء فعل".
</font>
وسنضيفه للمحتوى ليكون الوسم بالشكل التالي :
<td width="600">
<h3>الايمان بقضاء الله وقدره </h3>
<img src="200.jpg" align="left" width="200" height="160">
<font>
* الشيخ محمود المصري
إنّ بلسم الجراحات هو الإيمان بالقضاء والقدر، وعجباً لأمر المؤمن إن أمره كله له خير، إن أصابته سراء شكر، فكان خيراً له، وإن أصابته ضراء صبر، فكان خيراً له، قد علم أن ما أصابه لم يكن ليخطئه، وعلم أن ما أخطأه لم يكن ليصيبه، علم أنّ الأُمّة لو اجتمعت على أن ينفعوه بشيء، لن ينفعوه إلا بشيء قد كتبه الله له، ولو اجتمعت على أن يضروه بشيء لم يضروه إلى بشيء قد كتبه الله – عزّ وجل – عليه، رضي فرضى الله عنه، وسعد في حياته وأخراه، وإطمأن قلبه وسكنت روحه، فهو في نعيم وأي نعيم!!
فالإيمان بالقضاء والقدر نعمة على البشر وبلسم وظل وافر من الطمأنينة وفيض من الأمن والسكينة، ووقاية من الشرور، وحافظ على العمل، وباعث على الصبر والرضا، والصبر مُرٌّ مذاقه، لذيذة عاقبته.
صبرت ومَن يصبر يجد غبَّ صبره **** ألذَّ وأحلى من جني النحل في الفم
فاحرص على ما ينفعك، وارض بما قسم الله لك، واستعن بالله ولا تعجز، وإن أصابك شيء فلا تقل: لو أنني فعلت كذا، ولكن قل: "قدر الله وما شاء فعل".
</font></td>
بعد اضافة الموضوعين للمحتوى ستكون النتيجة كالتالي :
بعد ان انتهينا من المحتوى سننتقل الى اسفل الصفحة .
أسفل الصفحة
الجزء الخاص بالصفحة هو الصف الاخير من الجدول والمحدد عليه باللون الاخضر في الوسم التالي :
<html dir="rtl">
<head><title>موقع أفاق العلمي</title></head>
<body background="14.png">
<table border="2" width="900" height="100%" align="center" bgcolor=#ffffff>
<tr><td colspan="2">هنا سنضع راس الصفحة</td></tr>
<tr><td width="300">هنا العمود علي اليمين</td><td width="600">هنا عمود المحتوى</td></tr>
<tr><td colspan="2">هنا اسفل الصفحة</td></tr>
</table>
</html>
ونعمل عليه لتعديل اسفل الصفحة .
اول ما سنقوم به هو تغيير خلفية اسفل الصفحة الى اللون السماوي ذو الرمز 8ab9ff ليصبح الوسم الخاص بأسفل الصفحة بالشكل التالي :
<tr><td colspan="2" bgcolor=#8ab9ff>هنا اسفل الصفحة</td></tr>
وستكون النتيجة بالشكل التالي :
تطبيق 21
الان سنقوم بكتابة النص التالي في اسفل الصفحة :
" جميع الحقوق محفوظة لـ موقع افاق 2010 "
وسيكون الوسم الخاصة باضافة هذا النص بالشكل التالي :
<p align="center">جميع الحقوق محفوظة لـ موقع افاق 2010 </p>
لاحظ اننا استخدمنا الوسم align="center" لجعل النص في منتصف اسفل الصفحة
سنضيف هذا الجزء الى اسفل الصفحة ليصبح وسم اسفل الصفحة بالشكل التالي :
<tr><td colspan="2" bgcolor=#8ab9ff><p align="center">جميع الحقوق محفوظة لـ موقع افاق 2010 </p></td></tr>
وستكون النتيجة بالشكل التالي :
بعد ان انتهينا من تصميم الصفحة سنضيف بعض اللمسات الجمالية الى الصفحة واولا سنقوم بإخفاء اطار الجدول وذلك بتغيير قيمة border الى صفر وذلك في الوسم <table> بالشكل التالي :
<table border="0" width="900" align="center" bgcolor=#ffffff>
الجزء المظلل باللون الاخضر هو الجزء الذي قمنا بتغييره لإخفاء الاطار وبعد اخفاءة ستكون النتيجة كالتالي :
ثانيا سنضيف سطر بين المواضيع في المحتوى ولعمل سطر نقوم باستخدام الوسم <hr> دون اي اضافات , قم بوضع هذا الوسم بنهاية كل موضوع وبعد اضافتة ستكون النتيجة كالتالي :
وثانيا سنضيف خاصية cellpadding للخلايا td والذي ستنشء فراغا بين النص وجدار الخلية وذلك في كل خلية في الجدول كالتالي :
الخلية الخاصة بالعمود الايمن :
<td width="300" bgcolor=#f6f6f6 cellpadding="10">
الخلية الخاصة بالمحتوى
<td width="600" cellpadding="10">
الجزء المظلل باللون الاخضر في الوسمين هما الذي قمنا باضافتها وبعد اضافة هذين الوسمين ستصبح النتيجة كالتالي :
تعليقان على | مثال تطبيقي لكافة دروس html |
30 ديسمبر 2011 في 10:28 ص [حذف]
بسم الله الرحمن الرحيم
اخي العزيز شكرا لك على ماقدمت من تصميم رئع بصراحة كل المواقع التي بحثة عنها مااعجبتني مثل ماقدمت انت اخي العزيز على تصميمك على هذا المواقع من لغة html فشكرا لك ونسأل الله لك الثبات
30 ديسمبر 2011 في 3:32 م [حذف]
مرحبا بك اخي العزيز
ونتمنى لك الفائدة
اترك تعليقك على الموضوع