نبذة عامة
كثيراََ ما نسمع عن تصميم المواقع ، وما هي الأشياء التي من خلالها يمكننا بناء موقع الكتروني ، أحد هذه الأشياء هي الـ HTML وأول ما يدور في ذهننا ، ما هي الـ HTML ، وفيما تستخدم وكيف يتم استخدامها ، هذا ما ستتعلمه في هذا الدرس .
بدايةََ يجب ان تعرف ان الـ HTML ليست لغة برمجة ، نعم ليست لغة برمجة ، بل هي لغة توصيف ، توصف محتوى صفحة الإنترنت ، بمعنى أخر لو كنت لا تعرف غيرها فأنت لست مبرمجاََ !
ما هي المواقع الإلكترونية ؟
سنقوم بطرح عده أمثله حتى نفهم ذلك ، عندما يكون لديك بحث دراسي لمادة معينة معك سواء في كليتك الجامعية أو مدرستك ، بالطبع سوف تتوجه إلى Google وتقوم بالبحث عن اسم البحث والبدء بإنتقاء افضل النتائج ، أو عندما تحلم بحلم معين ، وترغب بتفسير هذا الحلم ، ستقوم بكتابة هذا الحلم عبر Google سيكون هناك العديد من النتائج ، لو ضغطت على أحد هذه النتائج سوف يدخل بك إلى صفحة تحتوى على تفسير للحلم الذي قمت بكتابته ، هذه الصفحة بكل محتوياتها وما يتعلق بها ، تعتبر موقع إلكتروني .
ماذا تعني لغة توصيف الـ HTML ؟
يعني انها لغة توصف محتوى صفحة الويب ، لو تسائلت قليلاََ أين نفتح صفحة الويب ، ستجد الإجابة أنه من خلال المتصفحات يتم فتح المواقع وهذا يعني ايضاََ انها لغة يفهمها المستعرض ( المتصفح ) مثل Chorme, Firefox, Internet Explorer ,Opera وغيرها فعندما تقوم بكتابة أي كود فأنت تصف البيانات التي تحتويها الصفحة ، ستضح الفكرة أكثر عند اكمال القراءة .
تعرف أكثر عن الـ HTML
الـ HTML هي اختصار لـ Hyper Text Markup Language ، وهي تعمل على وصف هيكلية محتويات صفحات الويب ، تعتبر أساس لأي صفحة أنترنت أو موقع إلكتروني
هي ذات قواعد معينة ومحددة لتنسيق الصفحة ،تتكون الـ HTML من مجموعة من العناصر يتم استخدامها في صفحة الويب لتظهر بطريقة معينة.
الـ HTML تحتوي على Plain Text وهي مجموعة عادية من الحروف والارقام والرموز الخاصة .
ما المقصود بالعناصر بالـ HTML
لو قمت بالدخول على أي موقع إلكتروني وليكن موقع أكوادي على سبيل المثال ستجد هناك الكثير من العناصر مثل الصور والعناووين والنصوص وايضاََ روابط عند الضغط عليها تنتقل لمكان اخر
هذه الصورة كلها عبارة عن مجموعة من العناصر تم كتابتها بإستخدام الـ HTML لتظهر بهذا الشكل ، يوجد عناويين وايضاََ صور ، لاحظ ان الـ HTML تقوم بوضع العنصر لوصفه وكيفيه اظهاره على صفحة الويب سواء كان بحجم كبير او صغير أو نص مائل أو عند الضغط عليه ينتقل بك لمكان أخر ، هنا انت وصفت الشى ، ولكن لكي تجعله بهذا الشكل واضافة الألوان أنت تحتاج إلى الـ Css لكي تقوم بتنسيق العنصر الذي قمت بوضعه بواسطة الـ HTML ، يمكن أن نطلق ايضاََ على هذه العناصر إسم Tags أو وسوم
الوسوم أو الـ Tags في الـ HTML
الـ Tag يعتبر الكود الخاص بالـ HTML وهو الذي يقوم على وصف المحتوى ، بعض الوسوم يوجد لها نهاية وبعضها لا ، حتى نتعرف معنى ذلك ، دعونا نتعرف كيف يتم كتابة الـ Tag .
الـ Tag يكتب بين علامتي <>
الـ Tag عادة يأتي على شكل أزاوج أي تأتي عملية فتح و إغلاق
<NameTag> يعتبر وسم الفتح البداية ( Start Tag )
</NameTag> يعتبر وسم النهاية أو الإغلاق ( End Tag ) وهو نفس وسم البداية مع اضافة /
ماذا نقصد بـ NameTag : هي العناصر الموجودة باللغة والتي من خلالها يتم وصف ما في داخله ، فيما سبق فيما سبق قلنا ان الـ HTML لغة وصف يفهمها المستعرض عندما نقوم بكتابة
<h1> Hello World </h1>
الـ H1 يعتبر أحد الـ Tags الموجودة باللغة ، بهذه الطريقة انت تصف للمستعرض كيف تريد ان تظهر “Hello World” وقمنا بوضعها بين وسمي H1 أي قم بإظهار كلمة Hello World بشكل كبير , بهذا الشكل تصفها كيف تريد أن تظهر ، إذن المتصفح هو من يفهم الـ Tags ويترجمها على حسب خواصها .
الحروف الخاصة بالـ Tag غير حساسة بمعني لو تم كتابتها صغيرة <tag> أو كبيرة <TAG> لن يؤثر ذلك ، ولكن الأفضل والذي ينصح به هو الحروف الصغيرة حتى يتناسب مع المعايير العالمية.
هذه الوسوم هى التي تستخدم لبناء هيكلية صفحات الإنترنت وتشمل العناوين والفقرات والجداول والنماذج، والأزرار والصور والفيديو وملفات الصوتية والعديد ..
هذه صورة بسيطة فقط لتوضيح بعض الوسوم الموجودة في HTML لا تهتم كثيراََ لها الان ولكن لتعرف كيفية كتابة الوسم .
تشريح وشرح أكثر للـ Tag في الـ HTML
<p> My Cat Is Very Grumpy </p>هذا كله يسمى عنصر أو وسم (Element or Tag ) والذي يحتوي على وسم البداية والنهاية وايضاََ المحتوى الذي يريد وصفه
My Cat Is Very Grumpy وهذا يعتبر محتوى العنصر أو التاق الذي يعمل على وصفه
Opening Tag أو وسم الفتح ، وهو يتألف من إسم العنصر محاطاََ بعلامتي أكبر من وأصغر من .
بالمختصر
الـ HTML هي لغة لوصف صفحات مواقع الإنترنت كوصف ما تحتويه مثل ( عنوان ، صورة ، فقرة ، جدول ) ، وهي ليست لغة برمجة مثل لغات الـ C أو Java أو C# ولا تحتوي على أكواد معقدة أو على جمل الشرط أو الدوال ، وغير مرتبطه بنظام تشغيل معين وهى لغة بسيطة جداََ وسهلة الفهم والتعلم فقط تحتاج لبعض التركيز .
ماذا أحتاج ؟
كل ما تحتاج إليه فقط التركيز ، وايضاََ متصفح ويب مثل ( كروم أو فايرفوكس أو أوبرا ) ، بالإضافة إلى محرر أكواد ، ممكن الكتابة على محرر الأكواد الخاص بالنظام ،ولكن من أجل ان يكون الأكواد التى تقوم بكتابتها مفهومة وملونه سنقوم بتنزل برنامج NotePad++ وهذا ما سيتم شرحة فى الدرس التالي .