بسم الله الذي لا يحمد علي شئ سواه
ابدا علي بركه الله الدرس الاول
من دروس تعلم لغه css لتصميم صفحات الويب
اولا عليك اخي العزيز ان تعرف بعض المعلومات عن لغه xhtml
والفروق بسيطه جداااا بين
xhtml &html
حيث X تعني Extensible اي ممتده لها
وهذه اهم الفروق في xhtml
العناصر في XHTML يجب أن تكون حروف صغيرة (lowercase)
مثال
تجربة
هذا كود خاطئتجربة
هذا كود صحيحكود XHTML يجب أن يكون مرتباً جيداً
بمعنى، الوسم الذي يتم فتحه أولا يغلق آخراً
مثال
تجربة كود خاطئ
تجربة كود صحيح
يجب دائماً اغلاق وسوم XHTML
يجب دائماً اغلاق الوسم بعد انتهاء الغرض منه
مثال
كود خاطئ تجربة
تجربة
كود صحيحيجب أن تحتوي الصفحة على وسم واحد رئيسي تتفرع جميع الوسوم منه
وهو شرط أن تكون اكواد الصفحة كلها متفرعة من الوسم
....
....
كود صحيح
هذه اهم الختلافات بينهما
قمت بعمل دوره تعلم html ستساعدك جدااا في فهم هذه الدروس
موجوده علي موقع انجاز التقني
يجب عليك تعلم كلا اللغتين
xhtml &css
حيث يجب عليك تحديد العناصر اللازمة في الموقع باستخدام (XHTML) وبطريقة أخرى تحديد ألوان وتنسيق العناصر باستخدام (CSS).
سنقوم بتطبيق عملي بسم الله نبدأ… في هذا الدرس سيتم شرح طريقة عمل موقع باستخدام XHTML و CSS معاً بشكل جيد.
ساقوم بانشاء موقع ""مصر ام الدنيا""
اقوم بانشاء المجلد الخاص بالموقع وساسميه مثلا Egypt Mother of the World
سنقوم الان بإنشاء صفحه جديده باستخدام اي محرر نصوص ولتكن المفكره علي اقل تقدير
الان الصيغه الرئيسيه لكل صفحه ويب هي :
XHTML namespace" dir="rtl">
يجب ان نتأكد بأن العنصر html يحتوي على الخاصية dir=”rtl” وهذه الخاصية تجعل الصفحة من اليمين إلى اليسار للغة العربية
سنبدأ الآن بكتابة عنوان الموقع ومن ثم إضافة العناصر الرئيسية للموقع داخل العنصر body
مصر ام الدنيا
مصر الحاضر والمستقبل من اين والي اين
ستجد أن ما تم إضافته هو
وهذا العنصر يسمى div اختصاراً لـ division ومعناه قسم, فعند تحديد قسم أو جزء معين فنستخدم div مثل تحديد الجزء الأسفل أو الجز الأوسط أو الجزء العلوي.
وتم إعطاء هذا القسم العلوي اسم header للتعرف عليه عند تلوينه بالـ CSS وتم كتابة الخاصية id لإعطاءه اسم
بعدها أضفنا
عادة ما يتم كتابة h1 في أي عنوان رئيسي وذلك لأنه يعني فقرة بخط رئيسي أول header1 وهناك header2 و header3 و header4 وتم استخدام العنوان الرئيسي رقم 4 لكتابة شرح مختصر عن الموقع أو الشعار النصي للموقع وذلك لأنه عنوان رئيسي لا نحتاج لتكبيره فـ 1 تعني كبير جداً و 2 أصغر و 3 أصغر
وتكون بالشكل التالي
XHTML namespace" dir="rtl">
مصر ام الدنيا
مصر الحاضر والمستقبل من اين والي اين
فنقوم بحفظ الصفحة في مجلد (Egypt Mother of the World) باسم index.htm ولماذا تم تسميته index؟ وذلك لأنه الصفحة هي الصفحة الرئيسية ودائماً يجب أن يكون اسم الصفحة الرئيسية index لماذا؟ لأن عند فتح موقع http://www.xxxxx.com فإنه يتم فتح index مباشرة لأنه هو الصفحة الرئيسية
فبعد الحفظ وفتح الصفحة ستظهر النتيجة كالتالي
هناك ثلاث طرق لاستخدام css
1__أن ننشئ ملف جديد باسم style.css في المجلد (Egypt Mother of the World)
2__ أن نكتب الـ CSS داخل ملف الـ HTML أي مباشرة على ملف index.htm
3__ أن يتم كتابة الـ CSS داخل سطور الـ HTML على كل عنصر
سنعتمد الطريقه الاولي والافضل
ونقوم بانشاء ملف style.css
ونكتب داخله التالي " الملف عباره عن ملف نصي نقوم بانشاءه بمحرر نصوص مثل النوتباد
نكتب داخله
#header {
padding:20px;
background:url(images/header1.jpg);
border:3px gray solid;
}
طبعاً استخدمنا في أكواد لغة CSS حدود رمادي وخلفية بالصورة الموضحة أمامكم مع مسافة داخلية تساوي 20 بكسل أو نقطة فقط, فهذا هو التصميم للموقع باستخدام CSS وذلك للعنصر header فقط
طبعااحنا بنقوم بعمل style.css بفتح النوتباد
ونكتب فيها الكود السابق ونضعه ونحفظها في المجلد
(Egypt Mother of the World)
وهنضع داخله الفولدر images ونضع داخله الصور المستخدمه في التصميم
سيكون شكل هذا المجلد من الداخل كالتالي انظر الصوره
بعد حفظها يجب علينا استدعاء الملف style.css داخل ملف index.htm وذلك عن طريق كتابة الكود التالي داخل العنصر
" />
وتكون النتيجه كالتالي
http://bit.ly/d9Ihq0
ليست هناك تعليقات:
إرسال تعليق