[الدرس الثانى]مقدمة فى xhtml+css الجزء الأول

[الدرس الثانى]مقدمة فى xhtml+css الجزء الأول

بعد ان تعرفنا على مفهوم web 2.0 بشكل صحيح

دعونا نبدأ بأول دروس الدورة وهى اعطاء نبذة عن xhtml+css بما يخدم
دورتنا.

والنبذة راح أركز فيها على ما يهمنا لان الكلام قد يطول كثيرا فى التحدث
عن xhtml+css ولكن دعونا نعطيكم الخلاصة من خلال ما توصلت له

وراح اشرح الموضوع بشكل ممتع ان شاء الله

ولكن قبل ان تبدأ عليك ان تعرف أساسيات بشكل أساسى
لذا أنصح بالتوجه لدورة html على مطور فهى راح تفيدك كثير

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

ننطلق بمثال عملى حتى نفهم بشكل أوسع :

اولا: افتح الرابط الاتى: اضغـــــط هـــنا

قم بعمل كليك يمين وأنت واقف على الصفحة , واختيار عرض مصدر هذه الصفحة view source code

راح نشوف السورس البرمجى لهذه الصفحة كما بالصورة :

#صورة 1

وهذا هو السورس الخاص بها:

كود:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>درس تخطيط وتصميم الزوايا المستديرة</title> <**** ************"content-type" content="text/html;charset=windows-1256" /> <**** name="keywords" content="css tutorial"></****> <**** name="description" content=""></****> <link rel="stylesheet" href="style.css" media="screen" /> </head> <body> <div id="container"> <div id="header"> <h1><a href="http://vistacompany.org" title="درس عمل تخطيط وزوايا مستديرة ">vista-design</a></h1> </div> <div id="content"> <h2>المحتوى</h2> <p >ماذا يمكن أن أفعل بتقنية CSS؟ CSS هي لغة تصميم تحدد شكل وثيقة HTML، فهي تهتم بالخطوط، الألوان، الهامش، والعرض والارتفاع، </br> صورة خلفية الموقع، وكيفية توزيع المساحات وأشياء أخرى كثير ة، انتظر فقط وسترى! </br> HTML يمكن أن تستخدم بشكل خاطئ لإضافة تصميم للمو اقع، لكن CSS توفر المزيد من الخيارات وهي أكثر دقة وعملية، وهي مدعومة من قبل المتصفحات الرئيسية اليوم. </br> </div> <div id="footer"> coded by <a href="http://vistacompany.org.com" title="css xhtml valid">vistacompany.org</a> </div> </div> </body> </html>

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

دعونا نحلل هذه الصفحة :

كود:

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

هذه الجملة مهمة جدا ولابد من وضعها فى بداية اى صفحة , ووظيفتها
انها تقوم بجعل نسق الصفحة مٌوحد على جميع المتصفحات طبقا لw3 المؤسس
للhtml
فمثلا قد تجد موقع فى الهيدر فوقه فراغ على الاكسبلور
وعلى الفايرفوكس يعمل بشكل سليم , وهذا بسبب ان هذه الجملة
قد لاتدعم الانترنت اكسبلورر 6

نكمل.......

لو تلاحظ انه بين وسمى head تم وضع الاتى:

كود:

<title>درس تخطيط وتصميم الزوايا المستديرة</title>

وهو خاص بعنوان الصفحة اللى راح يظهرلك فى المتصفح:

#صورة 2

كود:

<**** ************"content-type" content="text/html;charset=windows-1256" />

هذه الجملة مهمة جدا, ووظيفتها تكمن فى تعريف الترميز الخاص بالصفحة

لاحظ ان windows-1256 هو الترميز الخاص بالصفحة والمناسب للغة العربية

ويوجد أنواع ترميز اخرى ك utf-8 وiso-8859-1

تخيل مثلا اننا قمنا بتغيير ترميز هذهة الصفحة ل iso-8859-1
شوفوا اللخبطة اللى راح تحصل:

#صورة 3

اكيد عرفتوا الحين اهمية هذه الجملة

نكمل......

كود:

<link rel="stylesheet" href="style.css" media="screen" />

جملة مهمة وهى تشير لمكان ملف css المسمى style.css اللى لاحقا راح نتعرف كيف عن طريقه راح نغير تصميم الصفحة

يمكنك رؤية هذا الملف من هذا الرابـــــط

بهيك انتهى ما بين وسم head , ولاحظ ان هذه الاكواد لابد وان تٌوضع بين هذا الوسم وليس فى اى مكان اخر

نأتى الان لوسم الbody وهو خاص بجسم الصفحة ومحتواها....

كود:

<div id="container"> <div id="header"> <h1><a href="http://vistacompany.org" title="درس عمل تخطيط وزوايا مستديرة ">vista-design</a></h1> </div> <div id="content"> <h2>المحتوى</h2> <p>ماذا يمكن أن أفعل بتقنية CSS؟ CSS هي لغة تصميم تحدد شكل وثيقة HTML، فهي تهتم بالخطوط، الألوان، الهامش، والعرض والارتفاع، </br> صورة خلفية الموقع، وكيفية توزيع المساحات وأشياء أخرى كثير ة، انتظر فقط وسترى! </br> HTML يمكن أن تستخدم بشكل خاطئ لإضافة تصميم للمو اقع، لكن CSS توفر المزيد من الخيارات وهي أكثر دقة وعملية، وهي مدعومة من قبل المتصفحات الرئيسية اليوم. </br> </div> <div id="footer"> coded by <a href="http://vistacompany.org.com" title="css xhtml valid">vistacompany.org</a> </div> </div>

لاحظ ان هذا الجملة تم وضعها بين وسم اسمه div

وسم <div></div> مهم جدا وراح يستخدم بشكل مكرر

وفائدته انه يعتبر اشارة للمنطقة اللى راح نعدل عليها من خلال
ملف css

ما فهمت!!!! أقولك أنا

لاحظ فى بداية وسم div

كود:

<div id="container">

جملة id هى عبارة عن مٌحدد ان هذه المنطقة راح تخضع للتعديل ,

شوف ملف الcss وراح تفهم قصدى:

#صورة 4

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

نشوف اخر الصفحة مثال اخر لوسم ال div

كود:

<div id="footer"> coded by <a href="http://vistacompany.org.com" title="css xhtml valid">vistacompany.org</a> </div>

لاحظ ان الid معرفه اختلف واسمه footer
اى اننا فى ملف css عندما نشير له كالاتى:

كود:

#footer{ padding:50px 60px; background:url(steps_10.gif) no-repeat 0 0; color:#ffffff; }

راح يتم التعديل والتغيير على منطقة الفوتر فقط دون التأثير على جزء اخر من الصفحة

بهيك يكون اخذنا مثال عملى للجزء الاول من التعرف على html+css

وانبه واكرر, لابد من القاء نظرة على دورة html حتى تضح لك الصورة
أكثر..........

بالتوفيق