مقدمة في الـ HTML
ما هو ملف الـ HTML؟
HTML هي اختصار لمجموعة كلمات Hyper Text Markup Language وهى تعنى لغة النصوص الفائقة ذات العلامة ، وقد سميت تلك النصوص بهذا الأسم لإختلافها عن النصوص العادية فهى تمتاز عادة بأن تحتها خط و دائما ما تقودنا الى مكان ما على الانترنت و ما أن تقترب من هذه النصوص بالفأرة حتى نجد شكل المشيرة قد تغير ، و إذا قمنا بالضغط على الزر الأيمن للفأرة يتم نقلنا إلى موقع أخر على الإنترنت .
لذا فالنصوص الفائقة ذات العلامة تحمل بداخلها أكثر من مجرد نص لذا سميت بالنصوص الفائقة ذات العلامة التى تتميز عن النصوص العادية.
و هناك بعض الخصائص التي تميز ملفات الـ HTML نذكر منها.
* ملفات الـ HTML هي ملفات نصية تحتوى على رموز الوسوم الصغيرة.
* رموز الوسوم تخبر المتصفح بكيفية عرض صفحة الويب.
* ملفات الـ HTML يجب أن تأخذ الامتداد HTM أو HTML.
* يمكن تحرير ملفات الـ HTML باستخدام أي محرر نصوص بسيط مثل الـ Notepad.
تحرير أول ملفاتك بلغة الـ HTML
إذا كنت تستخدم نظام Windows فابدأ بتشغيل الـ Notepad ، إما إذا كنت تستخدم نظام Mac فيمكنك أن تبدأ SimpleText الآن.
في أي نظام تشغيل أخر، ابدأ TextEdit وغير التفضيلات التالية: حدد (في نافذة التفضيلات) "Plaintext" بدلاً من "Rich text" ثم حدد "Ignore rich text commands in HTML files". وهذا الأمر هام للغاية، إذا لم تفعل ذلك، فلن يعمل كود الـ HTML.
قم بنسخ النص التالي في محرر النصوص الذي تستخدمه.
<html>
<head>
<title> عنوان الصفحة </title>
</head>
<body>
هذه هي أول صفحة نقوم بتصميمها. <b> ما رأيكم في هذا النص العريض ؟ </b>
</body>
</html>
الآن قم بحفظ هذا الملف باسم " index.html " ، ثم قم بتشغيل متصفحك ، و من قائمة ملف أختر الأمر " فتح " و من مربع الحوار أختر الأمر "Browse" أو استعرض و ابحث عن الملف index.html الذي قمت بتحريره الآن قم باختياره ثم قم بالضغط على زر فتح أو " Open " ... الآن يمكنك مشاهدة عنوان الملف في مربع الحوار اضغط ok سوف يقوم المتصفح بعرض الصفحة الآن ... ماذا ترى ؟
شرح المثال
من خلال المثال السابق نجد مجموعة من وسوم HTML سوف نقوم بشرحها الآن حيث نجد أن ملف HTML يجب أن يبدأ بالوسم <html> فهذا الوسم يخبر المتصفح هذا هو بداية ملف HTML ، كما يجب أن ينتهي الملف بالوسم </html> و هذا الوسم يخبر المتصفح بأن هذه هي نهاية ملف HTML.
أي أن جميع ملفات HTML يجب أن يكون لها بداية و نهاية ، البداية تكون من خلال الوسم <html> و النهاية تكون من خلال الوسم </html>.
و ملفات الـ HTML يمكن تقسيمها إلى جزئين رئيسيين هما الـ head أو ما يسمي برأس الملف و جزء الـ body أو ما يسمى بجسم الملف.
رأس الملف الـ head
الجزء المحصور بين الوسمين <head> و </head> يسمى رأس الصفحة ، و النص الموجود بين هذين الوسمين هو عبارة عن معلومات رأس الصفحة ، و تلك المعلومات لا يتم عرضها داخل نافذة المتصفح.
أما النص الموجود بين الوسمين <title> و </title> هو عبارة عن عنوان الصفحة ، هذا العنوان يتم عرضه عنوان المتصفح " هو الشريط الافقي الموجود أعلى شاشة المتصفح ".
جسم الملف الـ body
الجزء الموجود بين الوسمين <body> و </body> هو ما يسمى بجسم الملف ، و النص الموجود بين هذين الوسمين هو ما يعرض داخل نافذة المتصفح .
أما النص الموجود بين الوسم <b> و </b> فسوف يعرض من خلال المتصفح كخط عريض ، و هو ما سوف نتعرف عليه قريباً عند شرح الجزء المتعلق بالخطوط.
امتداد ملفات الـ HTML
عند حفظ ملفات HTML يجب أن تقوم باستخدام الامتداد .htm أو الامتداد .html ، في الماضي كنا مضطرين لاستخدام الامتداد .htm فقط نظراً لأن البرامج كانت لا تسمح إلا بثلاث حروف فقط كامتداد للملفات.
و لكن مع الإصدارات الحديثة للبرمجيات فمن الأفضل أن نستخدم الامتداد .html
ملاحظات على محررات لغة الـHTML:
يمكنك تحرير ملفات HTML باستخدام محرر WYSIWYG (ما تراه هو ما تحصل عليه) مثل FrontPage، أو Claris Home Page أو Adobe PageMill بدلاً من كتابة وسوم التمييز في ملف نص عادي.
لكن إذا كنت تريد أن تصبح مطور ويب محترف، ننصحك بشدة أن تستخدم محرر نص عادي لتتعلم بدايات الـ HTML.
2-عناصر الـ HTML
ملفات HTML هي ملفات نصية مكونة من عناصر HTML. عناصر الـ HTML تحدد وسوم HTML المستخدمة.
وسوم HTML
* وسوم HTML تستخدم لتعليم عناصر الـ HTML.
* وسوم الـ HTML يتم أحاطتها برمزين هما < و > .
* رموز المحيطة بكود الـ HTML، تدعى أقواس الفئة.
* وسوم الـ HTML العادية تكتب بشكل مزدوج كما بالشكل التالي:
<b>هذا هو شكل الوسم</b>
* الوسم الأول هو وسم بداية الكود، و الوسم الثاني هو وسم إغلاق الكود.
* النص الموجود بين وسم البداية و وسم الإغلاق هو محتويات العنصر.
* وسوم الـ HTML غير حساسة لحالة الأحرف، بمعنى أن الوسم <b> هو ذاته الوسم <B> .
عناصر الـ HTML
بالرجوع للمثال الذي درسناه في الفصل السابق:
<html>
<head>
<title>عنوان الصفحة</title>
</head>
<body>
هذه هي أول صفحة نقوم بتصميمها. <b>ما رأيكم في هذا النص العريض ؟</b>
</body>
</html>
هذا هو عنصر الـ HTML:
<b>ما رأيكم في هذا النص العريض ؟</b>
عنصر الـ HTML يبدأ مع وسم البداية <b> ثم محتويات عنصر الـ HTML و هي في ذلك المثال " ما رأيكم في هذا النص العريض ؟ " ثم إغلاق الوسم بوسم الإغلاق </b>.
الغرض من الوسم <b> هو تحديد عنصر الـ HTML الواجب عرضه كنص عريض.
و هذا أيضاً يعد عنصر HTML:
<body>
هذه هي أول صفحة نقوم بتصميمها. <b>ما رأيكم في هذا النص العريض ؟</b>
</body>
هذا العنصر يبدأ مع وسم البداية <body> و ينتهي مع وسم النهاية </body>.
الغرض من هذا الوسم تحديد عناصر الـ HTML الموجودة داخل جسم ملف الـ HTML .
لماذا نستخدم الحروف الصغيرة في الوسوم؟
منذ دقائق معدودة قلنا أن وسوم HTML غير حساسة لحالة الأحرف و هذا يجعل الوسم <b> يعني نفسه الوسم <B>.
و عند تصفحك للمواقع العديدة التي تقوم بشرح دروس الـ HTML سوف تلاحظ أن غالبية تلك المواقع تستخدم الحروف الكبيرة لكتابة وسوم الـ HTML في شرح أمثلتها... و قد تتساءل لماذا نستخدم نحن الحروف الصغيرة؟
الإجابة بسيطة جداً... و هو إذا كنت تريد أن تجهز نفسك و تعدها لأن تتعامل مع الأجيال القادمة من HTML يجب عليك أن تستخدم الحروف الصغيرة للوسوم.
فجمعية World Wide Web Consortium " W3C " توصي باستخدام الحروف الصغيرة في كتابة الوسوم ضمن توصياتها لـ HTML 4 و إصدارة XHTML تتطلب استخدام الحروف الصغيرة.
سمات الوسم
الوسوم يمكن أن تحتوي على سمات، تلك السمات تزودنا بمعلومات إضافية حول عناصر الـ HTML في صفحتك.
الوسم الذي يحدد عنصر الجسم في صفحتك هو: الوسم <body>. و بإضافة السمة bgcolor تستطيع أن تخبر المتصفح أن لون الخلفية لصفحتك هو اللون الأحمر كما بالمثال التالي:
<body bgcolor="red">
الوسم الذي يحدد الجداول في ملف الـ HTML هو: الوسم <table>. و بإضافة السمة border يمكنك أن تخبر المتصفح أن هذا الجدول بدون حدود كما بالمثال التالي:
<table border="0">>
السمات دائماً تأتي على شكل أسم أو قيمة و سواء كانت أسم أو قيمة فكلاهما تأخذ الشكل التالي:
name="value"
السمات دائماً يتم إضافتها في وسم البداية لعنصر الـ HTML.
نمط الأقواس
قيمة السمة دائماً يجب أحاطتها بأقواس الاقتباس " علامات التنصيص " أقواس الاقتباس المزدوجة هي الأكثر شيوعاً... و لكن هذا لا يمنع استخدام الأقواس المفردة.
في بعض الحالات النادرة مثل أن تكون قيمة السمة تحتوي على علامة اقتباس يكون من الضروري استخدام علامات الاقتباس المفردة.
التعليقات (0)
لايوجد لديك حساب في عالم البرمجة؟
تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !