الدرس الأول: سلسلة دروس تصميم المواقع باستخدام الCSS

isader.com · 08-05-2005, 04:38 AM

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

تحية طيبه إلى أعضاء سوالف سوفت جميعاً...

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

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

لنبدأ الآن في درسنا الأول على بركة الله..
____________________________________________________________________

هذا الدرس سيتطلب منك معرفه سابقه في التقنيات التاليه:
- XHTML
- CSS

تصميم الموقع الذي سنبنيه سوياً هو التالي:

هذا الموقع يحتوي على 4 أقسام رئيسية و هي:
1- رأسية (header)
2- القائمة الرئيسية (navigation)
3- محتويات الموقع (content)
4- قاع الموقع (footer)

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

سنحتاج في هذا التصميم إلى ستة "صناديق" (الترجمة السريعه التي سأستخدمها لكلمة div) كما هو موضع بالصورة التالية:

الصندوق الاول للرأسية
الصندوق الثاني للقائمه
الصندوق الثالث للمحتويات
الصندوق الرابع لقاع الموقع
الصندوق الخامس ليحتوي الصندوق الثاني و الثالث (وسط الموقع)
الصندوق السادس ليحوي جميع الصناديق السابقه (الحاويه)

اذا لنبدأ بالعمل:

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

أول سطر في هذا الملف سيكون الDOCTYPE و هو الأمر الذي يعرف المتصفح على نوع الملف، و في حالتنا هنا سيكون XHTML من التصنيف strict فيكون الكود المطلوب هو التالي:

كود بلغة HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

و من ثم سنبني الهيكل الأساسي لأي صفحة HTML...

كود بلغة HTML:

<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar"> <head> <title>موقعي الشخصي | تم بناء هذا الموقع لأهداف تعليمية و حسب</title> <meta http-equiv="Content-Type" content="text/html;charset=windows-1256" /> </head> <body> </body> </html>

لاحظ وسم الmeta الذي أضفناه بداخل الhead لتعريف المتصفح بلغة الترميز التي نريد استخدامها.

ما تبقى علينا الآن هو أهم شيء و هو محتويات وسم الـ body:

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

كود بلغة HTML:

<div id="container"> <!--الصناديق الأخرى--> </div>

الصندوق التالي هو رأسية الموقع، و سنسميه header، و سيحوي بداخله العنوان "موقعي الشخصي":

كود بلغة HTML:

<div id="header"> <h1>موقعي الشخصي</h1> </div>

و من ثم سنبني الصندوق الثالث و هو الصندوق المتوسط. هذا الصندوق سيحتوي على صندوقين آخرين بداخله و هما صندوق القائمه و صندوق المحتويات:

كود بلغة HTML:

<div id="middle"> <!-- صندوقي القائمة و المحتويات--> </div>

صندوق القائمه سيحوي على قائمه غير مرقّمه و بها ستكون قائمة موقعنا كالتالي:

كود بلغة HTML:

<div id="navigation"> <ul id="navlist"> <li><a href="#">الصفحة الرئيسية</a></li> <li><a href="#">من أنا؟</a></li> <li><a href="#">أعمالي</a></li> <li><a href="#">مقالاتي</a></li> <li><a href="#">اتصل بي</a></li> </ul> </div>

أما صندوق المحتويات فسيكون به أولاً عنوان محتواه "أهلا و سهلاً بكم في موقعي" و ثلاث فقرات أخرى كالتالي:

كود بلغة HTML:

<div id="content"> <h1>أهلا و سهلا بكم في موقعي</h1> <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p> <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p> <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p> <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p> </div>

أما الصندوق الأخير فهو لقاع الموقع، و سيحتوي على فقرة وحيده بها عبارة الحقوق:

كود بلغة HTML:

<div id="footer"> <p>&copy; جميع الحقوق محفوظه لـ موقعي الشخصي 2005</p> </div>

فيكون كامل محتوى الصفحة هو التالي:

كود بلغة HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="rtl" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar"> <head> <title>موقعي الشخصي | تم بناء هذا الموقع لأهداف تعليمية و حسب</title> <meta http-equiv="Content-Type" content="text/html;charset=windows-1256" /> </head> <body> <div id="container"> <div id="header"> <h1>موقعي الشخصي</h1> </div> <div id="middle"> <div id="navigation"> <ul id="navlist"> <li><a href="#">الصفحة الرئيسية</a></li> <li><a href="#">من أنا؟</a></li> <li><a href="#">أعمالي</a></li> <li><a href="#">مقالاتي</a></li> <li><a href="#">اتصل بي</a></li> </ul> </div> <div id="content"> <h1>أهلا و سهلا بكم في موقعي</h1> <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p> <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p> <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p> <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p> </div> </div> <div id="footer"> <p>&copy; جميع الحقوق محفوظه لـ موقعي الشخصي 2005</p> </div> </div> </body> </html>

بعد بناء هذه الصفحه و عرضها على المتصفح، النتيجه ستكون بالصوره التاليه:

بهذا نكون قد انتهينا من بناء ملف الـ HTML.. خطوتنا التاليه الآن هي بناء ملف السي اس اس...
_________________________________

يتبع....

isader.com · 08-05-2005, 04:39 AM

ثانياً: ملف السي اس اس:

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

الستايل الأول سيكون لوسم الـbody:

كود:

body{direction:rtl;margin:0;background:url(images/bg.gif) repeat-y 50% 0 #DCDCDC; font-family:Tahoma, Arial, Verdana, sans-serif; font-size:0.75em; color:#646464;text-align: right;}

في هذا الستايل سنقوم أولا بتحديد الإتجاه الذي نريد أن يكون عليه المستند و هو "من اليمين إلى اليسار".
الأمر الثاني سيكون margin:0 و الذي سيزيل الحواشي الإفتراضيه التي تكون موجوده في صفحة الويب عند بنائها.
الأمر الثالث الذي سنحدده هنا هو خلفيه الصفحه، هذه الخلفيه ستكون عباره عن صوره تتوسط الصفحه، و باقي الخلفيه ستكون اللون:#DCDCDC. أما باقي الأوامر فهي لتحديد نوع الخط و حجمه و لونه.

الستايل الثاني سيكون للصندوق Container و هو الصندوق الأكبر و الحاوي لجميع الصناديق الأخرى:

كود:

#container{width:524px; margin-top:0; margin-bottom:0; margin-left:auto; margin-right:auto;}

هذا الستايل يحتوي على أمرين أساسيان و حسب، و هما العرض الذي نريده لذاك الصندوق و الذي سيكون 524 بكسل، و الأمر الآخر هو الحواشي، و ستكون كالتالي:
- الحاشية العلويه ستكون مساوية للصفر، أي أننا لا نريد اي حاشيه،
- الحاشية السفليه ستكون كالعلوية، أي أننا لا نريد أي حاشية سفليه أيضاً،
- الحاشية اليمنى و اليسرى سيحتويان على القيمة auto لنقوم بوضع هذا الصندوق بمنتصف الصفحه.

الستايل الثالث هو لصندوق رأسية الموقع header:

كود:

#header{width:500px; height:100px; background-color:#F5F5F5; border-bottom:1px solid #A7A7A7; margin-right:4px; margin-left:6px; margin-bottom:35px; padding-top:32px; padding-right:15px;text-align: right;}

هذا الستايل قد يبدو طويلاً نسبياً، لكنه بسيط و ليس فيه أي شكل من التعقيد:
- الأمرين الأول و الثاني لتحديد عرض (500 بكسل) و طول (100 بكسل) الصندوق
- الأمر الثالث لتحديد لون خلفية الصندوق
- الأمر الرابع لإخبار المتصفح أننا نريد وضع حد أو border في الجزء السفلي من الصندوق و نقوم بتحديد عرضه و نوعه و أخيراً لونه.
- بالنسبه للحواشي فإننا نريد وضع حاشيه يمنى (5 بكسل) و يسرى (5 بكسل) و أخيره في الأسفل (35 بكسل)
- لوضع عنوان الموقع بالمكان المحدد الذي نريده، علينا وضع بعض الحواشي الداخليه باستخدام الأمر padding. سنحتاج هنا لوضع حاشية داخليه علويه بمقدار 32 بكسل و أخرى بالجهة اليمنى بمقدار 15 بكسل. يمكنك تغيير هذه المقاييس حسب حاجتك و ذوقك!
- آخر أمر هنا هو إتجاه النص نريده يكون من الجهة اليمين.

الآن نريد تحديد حجم العنوان الرئيسي للموقع من خلال الستايل التالي:

كود:

#header h1{ font-size:2em;}

فيكون حجم العنوان بداخل الصندوق header هو 2em

نأتي الآن إلى صندوق middle و هو كما ذكرنا في السابق فإنه يحتوي على صندوقين بداخله و هما صندوق القائمه الرئيسية و صندوق المحتويات. في هذا الصندوق (middle) سنقوم فقط بوضع الحواشي اليمنى و اليسرى اللازمه لإبعاد الصندوقين الذين بداخله عن حافة الصندوق الأكبر (Container)، و نقوم بعمل هذا كالتالي:

كود:

#middle{margin-right:35px; margin-left:35px;}

الآن سنبدأ في صندوق القائمة الرئيسية للموقع و المسمى Navigation، في هذا الصندوق سنقوم سنقوم بوضع ثلاثة أوامر، و ستكون على الشكل التالي:

كود:

#navigation{width:125px; float:right;text-align: right;}

هذه الأوامر الثلاثه هي:
- عرض الصندوق و الذي يساوي هنا القيمة 125 بسكل
- float:right.... و هذا الأمر يخبر المتصفح أننا نريد أن نضع هذا الصندوق في الجهة اليمنى من الصندوق الأكبر الذي هو بداخله و هو الصندوق middle. هذا الأمر (float) يعتبر من أهم الأوامر في عملية ترتيب الصناديق المستخدمه في بناء الموقع، فهو الذي يقوم بإخبار المتصفح عن الأماكن التي نريد أن نضع فيها صناديقنا دون أن نضع قيم ثابته (position:absolute) لتحديد مكان ظهور الصندوق.
- الأمر الأخير هو لتحديد إتجاه النصوص.

بداخل هذا الصندوق يوجد لدينا القائمه الرئيسية. هذا القائمه قمت بعمل ستايل لها لتظهر صورة السهم على الجانب الأيمن من كل رابط بدلاً من الدائرة الممله التي نراها عند قيامنا ببناء قوائم غير مرقمه <ul>.
الستايل الذي سيلزمنا للقيام بذلك هو التالي:

كود:

#navlist{margin-right:0; padding-right:0; list-style: none;}
#navlist li{padding-right:20px; background-image:url(images/arrow.gif); background-repeat:no-repeat; background-position: center right;}

الصندوق التالي الذي سنقوم بعمل الستايل الخاص به هو صندوق المحتويات (content)، و سيكون بالشكل التالي:

كود:

#content{width:310px; float:left; margin-bottom:50px; text-align: right;}

هذا الستايل يحتوي على أربعه أوامر:
- أمر عرض الصندوق و سيحتوي على القيمة 310 بكسل
- الأمر float و هو الذي تحدثنا عنه سابقاً في ستايل صندوق القائمه. لكننا سنقوم الآن باستخدامه لوضع هذا الصندوق في الجهة اليسرى من الصندوق middle.
- الحاشية السفليه للصندوق و ستحوي القيمة 50 بكسل
- أخيراً إتجاه كتابة النصوص

بالنسبه للعنوان في هذا الصندوق فسنقوم بتحديد حجمه باستخدام الستايل التالي:

كود:

#content h1{font-size:1.5em;}

اذا فحجمه سيكون 1.5em

الستايل التالي الذي سنطبقه سيكون على صندوق قاع الموقع footer، و به سيكون لدينا 3 أوامر كالتالي:

كود:

#footer{clear:both; margin-right:25px;text-align: right;}

- الأمر الأول هنا (clear:both

هو الأهم لدينا، فهو يقوم بإنزال الصندوق المطبق عليه هذا الإمر إلى السطر التالي. مثلاً لو كان لدينا قبل هذا الصندوق صندوق آخر عرضه 100 بكسل، فسيكون عندنا بهذه الحاله مكان كافي لوضع هذا الصندوق بجانبه، و لكننا لا نريد فعل ذلك، لهذا سنقول للمتصفح أننا نريد هذا الصندوق أن ينزل تحت الصندوق السابق مهما كان عرض او قيمة حاشية ذاك الصندوق.
- الأمر الثاني هو للحاشية اليمنى و التي نريدها أن تكون 35 بكسل. تذكر هنا أننا خرجنا الآن من الصندوق middle أي أن هذه الحاشيه ستكون بين هذا الصندوق و الصندوق الحاوي لجميع الصناديق container.
- الأمر الثالث و الأخير هو لتحديد مسار النص بداخل هذا الصندوق.

آخر ستايل سيكون للروابط و هو كالتالي:

كود:

a:link, a:visited{color:#646464; text-decoration:none;}
a:hover{text-decoration:underline;}

لا أظن أنه يحتاج إلى أي شرح..

النتيجه النهائيه لجميع الأوامر السابقه هي:

كود:

body{direction:rtl;margin:0;background:url(images/bg.gif) repeat-y 50% 0 #DCDCDC; font-family:Tahoma, Arial, Verdana, sans-serif; font-size:0.75em; color:#646464; text-align: center;}
#container{width:524px; margin-top:0; margin-bottom:0; margin-left:auto; margin-right:auto;}
#header{width:500px; height:100px; background-color:#F5F5F5; border-bottom:1px solid #A7A7A7; margin-right:4px; margin-left:6px; margin-bottom:35px; padding-top:32px; padding-right:15px;text-align: right;}
#header h1{ font-size:2em;}
#middle{margin-right:35px; margin-left:35px;margin-bottom:50px;}
#navigation{width:125px; float:right;text-align: right;}
#navlist{margin-right:0; padding-right:0; list-style: none;}
#navlist li{padding-right:20px; background-image:url(images/arrow.gif); background-repeat:no-repeat; background-position: center right;}
#content{width:310px; float:left;text-align: right;}
#content h1{font-size:1.5em;}
#footer{clear:both; margin-right:25px;text-align: right;}
a:link, a:visited{color:#646464; text-decoration:none;}
a:hover{text-decoration:underline;}

بهذا نكون قد انتهينا من بناء ملف السي اس اس.

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

إما عن طريق وضع هذه الستايلات بداخل الوسم head في صفحة الـ html كالتالي:

كود بلغة HTML:

<head> <title>موقعي الشخصي | تم بناء هذا الموقع لأهداف تعليمية و حسب</title> <meta http-equiv="Content-Type" content="text/html;charset=windows-1256" /> <style type="text/css" media="screen">
     	 body{direction:rtl;margin:0;background:url(images/bg.gif) repeat-y 50% 0 #DCDCDC; font-family:Tahoma, Arial, Verdana, sans-serif; font-size:0.75em; color:#646464; text-align: center;}

... باقي الستايلات
	 
   </style> </head>

أو عن طريق وضع هذه الستايلات بملف خارجي و لنسمه styles.css و وضعه في المجلد ذاته الذي يحوي ملف الhtml، فنضع بهذه الحاله وصله له في وسم الhead كالتالي:

كود بلغة HTML:

<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />

و بهذا نكون قد انتهينا من العمل، و أصبح موقعنا جاهزاً..

يمكنك إلقاء نظره على العمل النهائي من الرابط التالي:

كود بلغة HTML:

http://www.isader.com/SSS1/css01.html

http://www.isader.com/SSS1/css01.html

ملاحظه: بحال كان الشرح غير كافي على أحد النقاط، أرجو من الجميع عدم التردد في طرح الأسئله.

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

أتمنى أن يكون هذا الدرس مفيداً و أدى الغرض المطلوب منه

تحيتي للجميع...

عماد الصدر
معاً لإنترنت عربية أفضل

بووليد · 08-05-2005, 04:59 AM

جزاك الله ألف خير ... شرح واضح ومفهووم ..

RED_LINE · 08-05-2005, 05:22 AM

ماشاء الله شرح مبسط وجميل وللامانه استفدت من الكثير

شكرا لك

Fuga · 08-05-2005, 09:56 AM

شرح جميل يعطيك العافية

hossam elkady · 08-05-2005, 11:24 AM

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

قوي ورائع وفي الصمييييييييييييييييم

بارك الله فيك أخي الكريم
وفي إنتظار التالي

دركوش · 08-05-2005, 11:25 AM

يعطيك العافيه انتظرنا بداية السلسله التعليميه
وماتأخرت علينا بالدرس الأول
يعطيك العافيه ..
بالنسبه لي ماني من اصحاب الخبره في هالمجال
لكن اضل مبتدئ وفي اول الخطوات نحو ال css

moslem_tk · 08-05-2005, 12:11 PM

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

08-05-2005, 12:31 PM

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

وفقك الله

إنترنت بلس · 08-05-2005, 12:56 PM

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

AMiSHKA · 08-05-2005, 12:59 PM

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

الباهر · 08-05-2005, 02:23 PM

بارك الله فيك يا عماد على بدابة الدروس ,,

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

وبالتوفيق

وفي امان الله

N-DES · 08-05-2005, 02:29 PM

بااااارك الله فيك
ومشكور على الدرس الرائع

طبقت الدرس لكن هذه النتيجة

http://www.mudares.com/css223

وهذه الصفحة اللتي نتجت معي
لا اعلم اين الخطأ !

كود بلغة HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN" "http://www.w3.org/TR/xhtml1-transtional.dtd"> <html dir="rtl" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar"> <head> <title>اول تجربة CSS</title> <meta http-equiv="Content-Type" content="text/html;charset=windows-1256" /> <style type="text/css" media="screen">
    	 body{direction:rtl;margin:0;background:url(images/bg.gif) repeat-y 50% 0 #DCDCDC; font-family:Tahoma, Arial, Verdana, sans-serif; font-size:0.75em; color:#646464; text-align: center;}
	 #container{width:524px; margin-top:0; margin-bottom:0; margin-left:auto; margin-right:auto;}
	 	#header{width:500px; height:100px; background-color:#F5F5F5; border-bottom:1px solid #A7A7A7; margin-right:4px; margin-left:6px; margin-bottom:35px; padding-top:32px; padding-right:15px;text-align: right;}
	 #header h1{ font-size:2em;}
	 #middle{margin-right:35px; margin-left:35px;margin-bottom:50px;}
	 #navigation{width:125px; float:right;text-align: right;}
	 #navlist{margin-right:0; padding-right:0; list-style: none;}
    	 #navlist li{padding-right:20px; background-image:url(images/arrow.gif); background-repeat:no-repeat; background-position: center right;}
	 #content{width:310px; float:left;text-align: right;}
	 #content h1{font-size:1.5em;}
	 #footer{clear:both; margin-right:25px;text-align: right;}
	 a:link, a:visited{color:#646464; text-decoration:none;}
	 a:hover{text-decoration:underline;}
   </style> </head> <body> <div id"container"> <div id"header"> <h1>اول تجربة CSS</h1> </div> <div id"middle"> <div id"navigation"> <ul id="navlist"> <li><a href="index.htm">الصفحة الرئيسية</a></li> <li><a href="index.htm">من انا</a></li> <li><a href="index.htm">من علمني البرمجة</a></li> <li><a href="index.htm">قريباً (رابط)</a></li> <li><a href="index.htm">اتصل بي</a></li> </div> <div id"content"> <h1>أهلا و سهلا بكم في موقعي</h1> <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p> <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p> <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p> <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p> </div> </div> <div id"footer"> <p>&copy; جميع الحقوق محفوظه لـ موقعي الشخصي 2005</p> </div> </div> </body> </html>

محمد العتيبي · 08-05-2005, 02:47 PM

شو هذا كله

فعلا انك رائع

شكرا لك عل ى هذه الدروس المفيدة

yemen-1-host · 08-05-2005, 05:30 PM

جزاك الله ألف خير ... شرح واضح ومفهووم

الحضرمي · 08-05-2005, 05:55 PM

الله يوفقك اخي
جزاك الله خيرا

مُجَاهِد · 08-05-2005, 05:58 PM

الف الف شكر لك على هذا الدرس الرائع والجميل ..

وأتمنى ان يكون معمق أكثر ..

وخالص المودة

،،

محمود المسعودي · 08-05-2005, 09:49 PM

جزاك الله خير ... شرح أكثر من ممتاز

isader.com · 09-05-2005, 02:59 AM

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

بووليد: شكراً لك أخي.. و ان شاء الله تكون استفدت من الدرس

RED_LINE: يعطيك العافيه.. و الحمدلله إنك استفدت من الدرس

Fuga: الله يعافيك، و أشكرك على التثبيت..

hossam elkady: تحيتي لك و سلامي أخي حسام، و الثاني قادم قريباً..

دركوش: أشكرك أخي دركش على ردك.. و بإذن الله تصبح من محترفي هذه اللغه...

moslem_tk: شكراً لك أخي.. و قريباً سأكمل السلسلة..

داعية: بإذن الله أخي داعية سنواصل... و معاً لإنترنت عربية أفضل..

إنترنت بلس: أهلا بك أخي إنترنت بلس، و بانتظار رؤية تطبيقك للدرس...

4AMIN: أشكرك أخي على ردك.. و بانتظار تطبيقك على الدرس..

بالنسبه لسؤالك فيمكنني أن أختصر الإجابه في 4 نقاط قصيره و هي أن الxhtml تتميز على الhtml بأنها:
- أرتب
- أنظف
- تتبع هيكل الxml
- يمكنها الإتحاد مع لغات أخرى بشكل أسهل

اما لمزيد من التفصيل فيمكنك زيارة الصفحة التاليه:
http://www.w3.org/MarkUp/2004/xhtml-faq#need

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

يمكنك زيارة هذا الرابط لتتعرف أكثر على الفوارق بين اللغتين:
http://www.w3schools.com/xhtml/xhtml_intro.asp

الباهر: شكراً لك أخي الباهر على ردك، و اقتراحك سأبدأ بتطبيقه بالدرس القادم بإذن الله..

N-DES: صراحة أسعدني كثيراً رؤية تطبيقك للدرس، و بالفعل بدأت أحس أن هذا الدرس كان مفيداً للبعض..

بالنسبه للخطأ في الصفحه فهو بسيط للغايه، و أظن أنك قد سهوت عنه..
الخطأ ببساطه هو أنك قد نسيت أن تضع علامة اليساوي (=) بعد الـ id.. و هذا كل ما في الأمر..

أتمنى لك التوفيق في تصاميمك القادمه باستخدام الcss...

محمد العتيبي: شكراً لك أخي محمد على ردك.. و يعطيك العافيه..

yemen-1-host: أتمنى أن يكون أعجبك الدرس..

الحضرمي: تسلم أخي و الله يجزي الخير جميع المسلمين..

مُجَاهِد: شكراً لك أخي.. و بإذن الله سيكون بشكل أعمق في الدروس القادمه..

ابو محمود: تحيتي لك أخي أبو محمود.. و أطال الله في عمرك..

أشكركم مره أخرى.. و أتمنى من جميع الأخوه تطبيق الدرس لتعم الفائده على الجميع...

تقبلوا تحيتي و سلامي..

عماد الصدر

ابو مشاري 97 · 09-05-2005, 04:20 AM

بارك الله فيك

هذا الدرس الاول فقط وش بقى فيها بعد

على العموم تم حفظ الدرس لتطبيقه في وقت قريب

===================

س / هل تعتبرهذه اللغة اسرع من لغة html في فتح الصفحات المنشأة فيها ؟
وهل يمكن الدمج بينها وبين لغة html ؟

مشراق · 09-05-2005, 08:20 AM

بارك الله فيك شرح جميل وواضح
تمت اضافته للمفضلة
جزاك الله خير اخي isader.com

N-DES · 09-05-2005, 12:41 PM

مــــشكور والله اخي عماد

هذه النتيجة
والحمد لله الدرس اتطبق صحيح

http://www.mudares.com/css223/index.htm

isader.com · 10-05-2005, 12:21 AM

أخي أبو مشاري: أشكرك على ردك هذا... و ان شاء الله يفيدك الدرس...

اقتباس:

س / هل تعتبرهذه اللغة اسرع من لغة html في فتح الصفحات المنشأة فيها ؟
وهل يمكن الدمج بينها وبين لغة html ؟

الحقيقه من وجهة نظري الشخصيه، فإني أرى أن الxhtml أسرع من الhtml و ذلك لإنها أكثر ترتيباً، و لا تقبل أكوام الmark-up الغير مفيده، و التي كانت تقبل به من قبل الـ html..
هذا كله يوفر على المتصفح الكثير من الوقت لفهم المستند، مما يؤدي إلى الإسراع في عرضه للمستخدم..

بالنسبه للدمج.. فلا يجوز الدمج بين هاتين اللغتين، و لا أظن من الأصل أن هناك حاجه للدمج بينهما..

مشراق: أشكرك أخوي.. و بانتظار رؤية التطبيق على الدرس..

N-DES:

مبروك أخي على التطبيق... لكن الآن حاول أن تغير قليلاً بالقيم الموجوده.. و انظر كيف تأثر في التصميم.. و من ثم حاول أن تكتب أوامرك الخاصه.. لتتماشى مع التصميم الخاص بك الذي تريده..