تعلَّم HTML5 & CSS3

الفصل الأول: HTML 5

مقدمة

يناقش هذا الفصل لغة HTML5 التي تعتبر حجر الأساس في إنشاء مواقع الويب، و لأننا لا يمكن أن نتحدث عن HTML5 مباشرةً فسيناقش هذا الفصل لغتي HTML و XHTML أولاً، و البداية مع HTML لغة

ما هي HTML ؟

إِنَّ HTML هي اختصار abbreviation الحروف الأولى من الجملة Hyper Text Markup Language و التي تعني بترجمة غير حرفية لغة وصف صفحات الويب)، و هي ليست لغة برمجية، لا ، بل هي لغة وصفية Markup Language ، لأنَّ HTML تستخدم مجموعة من الوسوم Tags لوصف صفحة الويب.

أما الوسوم Tags فهي كلمات أو أحرف محددة مسبقاً Keywords تحمل معاني خاصة، و تكون محصورة بين قوسين من الشكل < > مثل <b> و <html> تأتي الوسوم في الغالب على شكل أزواج مثل <b> و </b> ، يدعى الوسم الأول <b> بوسم البداية Begin Tag أو وسم الفتح Opening Tag، و يدعى الوسم الثاني </b> بوسم النهاية End Tag أو وسم الإغلاق Closing Tag.

يتم كتابة مستندات HTML باستخدام أي محرر نصي بسيط مثل notepad) أو متقدم (مثل DreamWaver أو Visual Studio) ، و يتم تخزينها في ملفات تحمل امتداداً extension من الامتدادين التاليين : html أو htm.، و بالطبع لا يوجد أي فرق بينهما.

تتكون مستندات HTML بشكل أساسي من محتوى نصي عادي بالإضافة إلى مجموعة من وسوم HTML، و في الحقيقة فإن مستندات HTML تدعى بـ (صفحات الويب Web Pages، و يتم استخدام برنامج خاص لقراءة هذه المستندات يعرف هذا البرنامج باسم مستعرض الويب Web Browser و من أمثلته Internet Explorer و Firefox و Google chrome .. إلخ.

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

كيف أبدأ في تعلم كتابة مستندات HTML ؟

كل ما تحتاجه لكي تبدأ في تعلم كتابة مستندات HTML هو محرر نصوص (مثل Notepad) و مستعرض ويب مثل Internet Explorer)، بعد ذلك يمكنك قراءة الفقرات التالية و التعلم خطوة بخطوة و أؤكد لك أن أفضل طريقة للتعلم برأيي - هي كتابة الأمثلة التي ستصادفك لاحقاً بشكل مباشر باستخدام محرر النصوص و من ثم اختبارها باستخدام مستعرض الويب.

المثال الأول في لغة HTML

سنقوم الآن بكتابة أول صفحة HTML معاً باتباع الخطوات التالية: نقوم أولاً بفتح أحد محررات النصوص و ليكن المفكرة Notepad على سبيل المثال و نكتب الشيفرة التالية:

<html>
<head>
<title>
My first HTML page
</title>
</head>
<body>
<p>
Welcome to my first HTML page!
</p>
</body>
</html>

ثم نقوم بحفظ الملف باسم firstPage.html

ملحوظة : لحفظ الملف بلاحقة مختلفة عن اللاحقة txt. هناك طريقتان الأولى أن نختار الخيار جميع الملفات *.* من القائمة المنسدلة حفظ ـ Save as type الظاهرة في الصورة أسفل اسم الملف ثم نكتب اسم الملف و لاحقته بشكل عادي، أما الثانية و التي أفضلها شخصياً فهي أن نضع اسم الملف مع لاحقته المطلوبة بين علامتي اقتباس مزدوجتين و نختار حفظ.

الآن و بعد أن قمنا بحفظ الملف بالاسم firstPage.html نقوم باستعراضه باستخدام أحد مستعرضات الويب و ليكن Internet Explorer على سبيل المثال لنشاهد الشكل النهائي للصفحة. كما ترى فقد قمنا بكتابة صفحتنا الأولى باستخدام لغة HTML و هذه الصفحة تحتوي على نص ترحيب بسيط هو النص Welcome to my first HTML page ، تم توليد هذا النص باستخدام الوسم الخاص p و بتصوّري فإنَّ هذه الصفحة على بساطتها ستكون الباب الواسع للدخول إلى لغة HTML إن قرأت الفقرات التالية بقليل من التركيز.

عناصر HTML

تتكون كل صفحة من صفحات HTML من مجموعة من العناصر Elements يتم إنشاؤها باستخدام الوسوم Tags و الوسوم كما قلنا سابقاً عبارة عن أحرف أو كلمات تحمل معاني خاصة بالنسبة لمستعرض الويب و غالباً ما تكون أسماء الوسوم عبارة عن اختصارات لكلمات إنجليزية فالوسم <p> مثلاً يستخدم لإنشاء العنصر المسؤول عن عرض مقاطع النصوص Paragraphs ضمن صفحات HTML و الذي سيتم مناقشة عمله مع عمل باقي الوسوم بشكل تفصيلي في الصفحات التالية.

تحصر الوسوم بين أقواس من الشكل < > و من أمثلتها الوسم <html> و الوسم <head> و الوسم <title> و الوسم <body> و الوسم <p>.

لكل عنصر من عناصر HTML وسم بداية Begin و وسم نهاية End Tag تكون وسوم البداية محصورة بين القوسين < > أما وسوم النهاية فتكون محصورة بين القوسين السابقين مضافاً إليهما رمز الخط المائل / المعروف بـ Slash بالشكل </ > و من أمثلة وسوم النهاية الوسم </html> و الوسم </head> و الوسم </title> و الوسم </body> و الوسم </p> و يحوي كل عنصر من عناصر HTML بين وسمي بدايته و نهايته نصاً عادياً لعرضه كما فعل العنصر p في مثالنا السابق و يمكن أن يحوي أي عدد آخر من عناصر HTML شرط الالتزام بترتيب متناظر لوسوم النهاية و البداية، فعند كتابة وسوم النهاية يجب أن يُراعى الترتيب فيتم كتابة وسم النهاية الخاص بوسم البداية غير المنتهي الذي ليس له وسم نهاية الأقرب فالأقرب، ففي حين أن الترتيب التالي يعتبر صحيحياً:

<html>
<body>
<p>
نص عادي سيتم عرضه في المستعرض
</p>
</body>
</html>

لأن وسم النهاية الأول </p> جاء لإنهاء أقرب وسم بداية غير منتهي و هو <p> في مثالنا، ثم جاء وسم النهاية </body> لإنهاء أقرب وسم بداية غير منتهي و هو <body>، ثم جاء وسم النهاية </html> لإنهاء أقرب وسم بداية غير منتهي و هو <html>.

الخلاصة: لا تنس كتابة وسم الإغلاق و راع ترتيب وسوم الإغلاق.

الفراغات White Spaces

في لغة HTML لا يوجد أي قيمة لمحارف الفراغات مثل Space و Tab .. إلخ) عند استعراض الصفحات باستخدام مستعرض الويب و إنما تستخدم محارف الفراغات لغرض ترتيب الشيفرة و جعلها مقروءة بشكل أوضح فقط، فقراءة شيفرة HTML التالية على سبيل المثال:

أسهل بكثير من قراءة شيفرة HTML التالية:

مع أنهما متماثلتان تماماً عند استعراضهما باستخدام مستعرض الويب. (فائدة : من العادات البرمجية الجيدة إزاحة كل المحتوى الموجود بين وسمي بداية و نهاية متماثلين بمقدار ضغطة Tab).

الشكل العام لعناصر HTML

يتم وصف عناصر HTML باستخدام الوسوم، وفيما يلي نعرض الشكل العام لعنصر HTML :

يبدأ عنصر HTML بوسم البداية Begin Tag.
ينتهي عنصر HTML بوسم النهاية End Tag.
كل ما يتم كتابته بين وسمي البداية والنهاية يدعى محتوى عنصر HTML علماً أن هناك بعض العناصر التي لا تحوي أي محتوى و التي تسمى عديمة المحتوى.
يندمج وسما البداية والنهاية في وسم واحد في حالة العناصر عديمة المحتوى.
يتم تمرير مجموعة من الخصائص لأغلب عناصر HTML في وسم البداية عن طريق Attributes الواصفات.

ملحوظة: دائماً و أبداً ، قم بكتابة عناصر HTML بالأحرف الإنجليزية بحالتها الصغيرة Lower Case.

لنشاهد الأمثلة التالية:

وسم البداية	محتوى العنصر	وسم النهاية
<p>	Welcome to my website.	</p>
<a href="index.htm">	Go to index	</a>
<hr />	-	-

الشكل العام لصفحات HTML

تتكون كل صفحة HTML من ثلاث مناطق:

منطقة جسد الصفحة Body Section: و هي المنطقة المحصورة بين وسمي <body> و </body> و هذه المنطقة هي التي تنتج الشكل النهائي للصفحة و تضم جميع العناصر التي تمثل المحتوى الظاهر للصفحة و الذي سيظهر في مستعرض الويب عند استعراض هذه الصفحة و بالطبع فإن الجزء الأكبر من عناصر HTML سيكون في هذه المنطقة.
منطقة رأس الصفحة Head Section: و هي المنطقة المحصورة بين وسمي <head> و </head> و هذه المنطقة تحوي مجموعة من عناصر HTML أغلبها لا يظهر في مستعرض الويب عند استعراض الصفحة و لكن المهمة الرئيسية لهذه المنطقة هي إعطاء معلومات عن ماهية المحتوى الموجود بالصفحة إضافة لبعض المعلومات غير الظاهرة الأخرى و التي تستخدمها محركات البحث من أجل الأرشفة و البحث في الغالب.
المنطقة الأم: و هي المنطقة المحصورة بين وسمي <html> و </html> و هذه المنطقة هي المنطقة التي تحدد بداية و نهاية الصفحة و هي التي تضم منطقتي الرأس و الجسد و بهذا فهي تضم كامل مستند (صفحة) HTML.

<html>
<head>
محتوى منطقة الرأس غير الظاهر سيكون هنا
</head>
<body>
محتوى الصفحة النهائي و الظاهر فعلياً سيكون هنا
</body>
</html>

واصفات الوسوم Attributes

يمكن تزويد بعض وسوم البداية بمجموعة من الخصائص الإضافية و التي تخصص سلوك عرض العنصر المحتواه و يتم هذا عبر ما يعرف بالواصفات Attributes ، انظر للشيفرة التالية على سبيل المثال :

<p align="center">
المحتوى النصي لعنصر عرض النصوص
</p>

كما تلاحظ فقد قمنا بإضافة شيء جديد في هذه الشيفرة إلى وسم البداية الخاص بالعنصر p ألا و هو الواصفة align التي تحدد محاذاة النص الذي سيعرضه العنصر p و أعطيناها القيمة center لعرض النص في منتصف الصفحة. الشكل العام للواصفة هو name="value" حيث أن name هو اسم الواصفة و value هي القيمة المسندة لتلك الواصفة و التي يجب أن توضع بين علامتي اقتباس مزدوجتين " " أو علامتي اقتباس مفردتين.

جدول الواصفات المشتركة بين أغلب عناصر HTML

اسم الواصفة	القيم الممكنة	الشرح
id	اي اسم فريد غير مكرر	يتم استخدام هذا الاسم للتعامل مع العنصر برمجياً باستخدام لغة Java Script أو jQuery.
dir	ltr, rtl	لتحديد اتجاه القراءة (من اليسار لليمين أو اليمين لليسار).
align	left, right, center, justify	لتحديد محاذاة النص.
class	أي اسم فئة CSS صالح	لمنح كافة خصائص الفئة إلى العنصر و سيتم مناقشة هذا بالتفصيل في الفصل الخاص بـ CSS3.
name	أي اسم فريد	تستخدم لتمييز العنصر برمجيا.

عناصر العناوين Headings

توفر لغة HTML ستّة عناصر لعرض العناوين و هي على الترتيب: h1 و h2 و h3 و h4 و h5 و h6 حيث أنَّ العنصر h1 هو أكبرها حجماً و العنصر h6 هو الأصغر و ما بينهما يتدرج في الحجم، و طبعاً حرف الـ h هنا اختصار لكلمة Heading.

<html>
<head>
<title>صفحة اختبار لعناصر العناوين</title>
</head>
<body dir='rtl'>
<h1>عنصر عنوان من المستوى الأول</h1>
<h2>عنصر عنوان من المستوى الثاني</h2>
<h3>عنصر عنوان من المستوى الثالث</h3>
<h4>عنصر عنوان من المستوى الرابع</h4>
<h5>عنصر عنوان من المستوى الخامس</h5>
<h6>عنصر عنوان من المستوى السادس</h6>
</body>
</html>

التعليقات Comments

توفر آلية لكتابة التعليقات ضمن المستندات، فتقدم الصيغة العامة التالية لكتابة التعليق:

عناصر تنسيق النصوص Text Formatting

توفر لغة HTML مجموعة من العناصر لتنسيق النصوص، فلجعل النص عريضاً Bold توفر العنصر <b> (أو العنصر <strong>)، و لجعل النص مائلاً Italic توفر العنصر <i> (أو العنصر <em>)، و لوضع خط أسفل النص توفر العنصر <u> ، و لشطب النص Delete توفر العنصر <del>.

عناصر الروابط Hyper Links

توفر لغة HTML آلية للانتقال بين الصفحات المختلفة عبر عناصر الروابط Hyper Links، و يتم إنشاء الروابط بواسطة الوسم <a> ، و الـ a هذه اختصار لـ Anchor ، يتم تزويد عنصر الرابط بنص يُعرض كمحتوى له أما الموقع الهدف الذي سيتم الانتقال إليه عند النقر على الرابط فيتم تزويده للواصفة href.

<a href="http://www.microsoft.com">مايكروسوفت</a>
<a href="firstPage.html" target="_self">أول مثال</a>

عناصر الصور Images

توفر لغة HTML عنصراً خاصاً لعرض الصور ضمن الصفحة هذا العنصر هو العنصر <img> اختصاراً لـ Image الذي يقوم بعرض الصورة ضمن الصفحة اعتماداً على مسارها الذي يمرر للعنصر عبر الواصفة src. و من واصفات هذا العنصر الواصفة alt التي تسند إليها قيمة نصية يتم عرضها في حال تعذر الوصول إلى الصورة.

الجداول Tables

توفر لغة HTML آلية لإنشاء الجداول عبر العنصر <table> و يتم ذلك عبر إنشاء العنصر <table> أولاً و تمرير واصفتي العرض width و عرض الحدود border بالبكسل، و من ثم إنشاء محتويات الجدول عبر عنصر أسطر الجدول table rows و الذي يتم تحقيقه باستخدام الوسم <tr> ، ثم يتم ذكر محتويات خلايا table data عبر الوسم <td>.

النماذج Forms

تستخدم النماذج Forms في لغة HTML لاستقبال المدخلات Inputs من المستخدم بغية عرضها أو تخزينها أو القيام بعمليات معالجة معينة عليها، يتم إنشاء النماذج باستخدام الوسمين <form> و </form> اللذان سيحويان بينهما مجموعة من عناصر الإدخال <input>.

مقدمة حول CSS و CSS3

إن CSS هي اختصار للأحرف الأولى من الجملة Cascading Style Sheet و التي تُرجِمَتْ على أنها أوراق الأنماط الانسيابية ، ففي حين أن HTML تهتم بوصف عناصر مستندات الويب فإن CSS تهتم بوصف شكل و مظهر هذه العناصر.

تتكون شيفرة CSS من مجموعة من القواعد Rules ، تصف كل قاعدة منها مظهر عنصر أو مجموعة من العناصر في الصفحة، و الشكل العام القاعدة CSS هو :

selector {
property:value;
property:value;
}

خصائص مظهر النصوص في CSS

text-align: خاصية المحاذاة (center, right, left, justify).
text-decoration: خاصية التزييف (underline, overline, line-through, none).
direction: خاصية اتجاه القراءة (rtl, ltr).
text-transform: تحويل حالة الأحرف (uppercase, lowercase, capitalize).
color: خاصية اللون.

التحويالت الهندسية ثالثية الأبعاد 3D Transformation في CSS3

تتيح CSS3 القيام بتحويلات هندسية ثالثية الأبعاد على العناصر باستخدام توابع مثل: translate3d(x,y,z), scale3d(x,y,z), rotateX(α), rotateY(α), rotateZ(α).