كـتـاب HTML & CSS

هــذا الكـتـاب

HTML & CSSنتناول تصميم صفحات الإنترنت باستخدام HTML, CSS ، بكل تأكيد قمت بتصفح العديد من صفحات الإنترنت والتي يطلق عليها صفحات الويب، وتتمنى أن تقوم بتصميم مثل هذه الصفحات ولكنك لا تعرف من أين تبدأ.

كل صفحات الإنترنت هي ملفات مكتوب بها تعليمات بلغة HTML، هذه التعليمات مسئولة عن عرض محتوى الصفحة من نصوص وصور، وفيديو ... وغيرها.

إذا سألت البعض كيف يمكن إنشاء مثل هذه الصفحات سيذكر أن هناك العديد من البرامج مثل Dreamweaver, Expression Web تقوم بتنفيذ ذلك بكل سهولة، وهذا صحيح ولكنك هنا أشبه بمن تعلم قيادة السيارات دون معرفة الحد الأدنى عن كيفية عمل السيارة وبعض أساسيات الميكانيكا والتي في بعض المواقف والأوقات قد يتمنى أن يكون على دراية بهذه الأساسيات.

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

عدد الصفحات

0 صفحة

بعد الانتهاء من هذا الكتاب ستكون قادرا على أن:

* تلخص المقصود بموقع وصفحات الويب.
* تدرج النصوص والفقرات في الصفحة.
* تنسق النصوص والفقرات.
* تدرج الصور.
* تدرج الارتباطات التشعبية.
* تدرج الجداول وتضبط خصائصها.
* تنشىء صفحات تحتوي على نموذج بيانات.
* تستخدم تنسيقات CSS.
* تنشىء هيكل الصفحة باستخدام العنصر DIV.

مقدمة ومفاهيم أساسية:

  • موقع الويب، والصفحة الرئيسية، لغة HTML، والمتصفحات.
  • مصمم الويب، مطور الويب.
  • لغات Server side، لغات Client Side.
  • أنواع صفحات الويب، الاستضافة وعنوان الموقع.
  • حجز عنوان للموقع، طرق إنشاء الصفحات.
  • تسمية صفحات الويب.
  • البروتوكولات  HTTP, FTP.
  • أنظمة إدارة المحتوي.

كتابة عناصر HTML الأساسية:

  • محرر النصوص، المقصود بعناصر HTML.    
  • العنصر <html>، العنصر <body>.    
  • رأس الصفحة Head، عنوان الصفحة Title.    
  • خصائص العناصر واستخدامها.    
  • العنصر <br>، العنصر <p>.    
  • إضافة المسافات الزائدة.    
  • العنصر <div>، العنصر <span>.    
  • لغات التصميم HTML, XHTML, HTML5.
  • استخدام العنصر <DOCTYPE>.    

تنسيق النصوص والفقرات:

  • نصوص العناوين <h>.    
  • تغيير نوع وحجم ولون الخط و إضافة التأثيرات.
  • إنشاء تنسيقات CSS.    
  • تنسيق الخطوط باستخدام CSS.    
  • وحدات قياس حجم الخط (المطلقة، النسبية).    
  • اتجاه الفقرات باستخدام CSS.    
  • المحاذاة، والمسافة بين الأسطر.    
  • ضبط الإعدادات الافتراضية للنصوص والفقرات.    
  • التعداد الرقمي التعداد النقطي.

الألوان- الصور-الخلفيات:

تغيير الخلفية بلون أو صورة     
تكرار صورة الخلفية وضبط موضعها.

ضبط صورة الخلفية للتمرير background- attachment    
إدراج صورة في الصفحة <img>     
ضبط مسار الصورة     
ضبط أبعاد الصورة     
ضبط محاذاة الصورة     
إضافة حدود حول الصورة     
خصائص CSS لضبط هوامش الصورة ومحاذاتها     
خصائص CSS لضبط الإطار حول الصورة     
إضافة خط أفقي في الصفحة     




 

  

تصميم هيكل الصفحة والقوائم:

  • الخاصية Position، الخاصية Float.
  • الخاصية padding، الخاصية margin.
  • توسيط <div> أفقيا في الصفحة.
  • إنشاء أعمدة تمثل نسبة من العرض.
  • التعامل مع الصفحات من اليمين لليسار.
  • الخاصية Display.
  • القوائم الرأسية والأفقية.

إنشاء الجداول:

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