What you know about HTML and CSS

HTML: لغة هيكلة المواقع

الـ HTML اختصار لـ Hypertext Markup Language. طب يعني إيه الكلام ده؟

يعني إيه Hypertext و Markup؟

• الـ Hypertext: يعني نص فيه لينكات (links) لنصوص تانية.
• الـ Markup: يعني الـ tags والـ elements اللي بنستخدمها جوه الـ document.

الـ HTML elements دي، بالـ opening tags والـ closing tags بتاعتها (اللي بين < >)، هي اللي بتكون الـ HTML document. الـ elements دي هي اللي بتعمل هيكل (structure) صفحة الويب، وهي اللي بتقول للـ web browser يعرض إيه بالظبط.

مهم تعرف إيه عن الـ HTML؟

لما نتكلم عن HTML، مهم تعرف:

• الغرض من الـ HTML في الـ web browser.
• استخدام الـ HTML tags والـ syntax الصح.
• إزاي الـ HTML elements بتُستخدم في الـ web document.

طب تقدر تعمل إيه بالـ HTML؟

• تضيف صور لصفحة الويب بكود HTML.
• تعرض بيانات في جداول (tables).
• تبني فورمز (forms) بـ inputs متنوعة كتير.

الـ HTML والـ Accessibility (سهولة الوصول)

• كمان، استخدام الـ HTML structure الصح والعناصر المناسبة أساسي عشان تبني مواقع سهلة الوصول (accessible websites).
• الـ HTML بتساعد في دعم التكنولوجيا اللي بيستخدمها الأشخاص ذوي الإعاقة عشان يتفاعلوا ويفهموا المواقع دي.

الـ DOM: النموذج اللي بيشوفه الـ JavaScript

حاجة تانية مهمة لازم تعرفها هي الـ DOM أو Document Object Model.

ليه الـ DOM مهم؟

• المستخدمين محتاجين يتفاعلوا مع العناصر (elements) اللي في صفحة الويب.
• ده معناه إن الـ HTML document لازم يتمثل بطريقة الكود بتاع الـ JavaScript يقدر يستعلمه (query) ويعدله (update).
• هي دي وظيفة الـ DOM: هو نموذج (model) للـ objects اللي موجودة في ملف الـ HTML بتاعك.
• الـ Web developers بيتعاملوا مع الـ DOM عن طريق الـ JavaScript عشان:
  • يحدثوا المحتوى (content).
  • يظبطوا الـ events (زي الكليك مثلًا).
  • يعملوا animate للـ HTML elements.

الـ CSS: تزيين وتنسيق المواقع

دلوقتي بعد ما غطينا أساسيات الـ HTML، خلينا نروح للـ CSS أو Cascading Style Sheets.

تشبيه بسيط

• لو الـ HTML هو هيكل أو أساسات المبنى، فالـ CSS هو الدهانات، ورق الحائط، التشطيبات، والشكل العام.
• الـ CSS هي اللي بتقول للـ web browser إزاي يعرض عناصر الـ HTML دي على الشاشة.

تقدر تعمل إيه بالـ CSS؟

• تعمل style للعناصر جوه الـ HTML document.
• تعمل layout (تصميم) جذاب لصفحتك باستخدام الـ box model.
• ترتب عناصر الصفحة باستخدام الـ normal document flow.