خدماتنا المميزة
أكثر من 100 سكربت مدعوم
اساسيات لغة HTML
اساسيات لغة html
هل أنت مرتبك بشأن موعد استخدام HTML ومتى تستخدم XHTML ؟ تريد أن تعرف ما هي اختلافات الجملة بين الاثنين ؟ هل تترك لك doctypes و DTDs وتفهم معناهم بشكل صحيح؟ أو ربما ترغب ببساطة في فهم البنية الأساسيةمن صفحة على شبكة الإنترنت ؟
تتناول هذه المقالة المفاهيم الرفيعة المستوى المتعلقة بـ اساسيات لغة(HTML و XHTML).
بدلا من العناصر أو الصفات المحددة. حتى لو كنت تعتقد أنك تعرف HTML.
الهيكل الأساسي للصفحة الويب:
في حين أن هذه المقالة تهدف إلى تقديم تفصيل شامل لمختلف HTML العناصر وخصائصها الخاصة، تحتاج أيضًا إلى فهم كيف هذه العناصر تتناسب مع الصورة الأكبر. تم تنظيم صفحة على الشبكة على النحو التالي.
بعض المصطلحات لغة ال HTML
- Tag
التاج وتظهر كما يلي <>ويسمي Tag هي كلمه تعبير عن اوامر الHTML الموجودة داخل الاقواس اي ان الامر يتم كتابتة داخل الاقواس السابقة الاشار لها كما يلي:
<p>
- Container tags
هي التاجس التي يتم فتحه لاداء امر معين وبعد الانتهاء من كتابته الامر يتم اغلاقه اي انه زوج من التاج كما قي المثال التالي:
عند فتح التاج كتب <p>وعند غلقه كتب<p/>
- Empty Tags
اي انه تاج لا يحتاج ان يغلق مثل <br>فهو تاج لا يحتاج اغلاقه
- Inter Prater
هو التاج الذي يقوم بترجمه لغة الHTML الي المستعرض.
- يوجد ثلاث مصطلحات في غاية الاهمية وسوف يتم فهمهم اكثر من خلال التدريب العملي:
سوف نقوم بشرحهم كما يلي:
- Element
هو يعطي الامر الاساسي للتاج مثل (table—- title——– Font) سوف يتم فهمه اكثر من خلال الامثلة مثلا الامر <p>
- Attribute
هو يحدد الخصائص التي سوف تظهر علي هذا الامر مثلا:
<;p color:red>
color:هو الattribute الخاص بالعنصر الذي سيتم تغييره للون الاحمر كما في المثال السابق.
- Value
هي القيمه الخاصه بال(attribute)
اذن المثال التالي يوضح الثلاثه معا :
لنبدأ في تعلم اساسيات لغة الHTML
اولا نقوم بفتح برنامج ال (++note pad )لكتابة الكود البرمجي بداخله
فتظهر لنا واجهة البرنامج وشريط الادوات فنختار file ثم نختار new لبدا ملف جديد
ثم نبدا بكتابه الكود
الفراغات White Spaces:
في لغة الHtml لا يوجد اي قيمة للفراغات مثل (Tap, Space .. الخ) عند استعراض الصفحات باستخدام مستعرض الويب انما تستخدم الفراغات لترتيب الشيفرة و جعلها مقروءة بشكل اوضح فقط فقراءة شيفرة الHTML التالية علي سبيل المثال:
اسهل في القراءة من من هذا الكود:
<html><head></head><body></body></html>
مع انهما متماثلتان تماما عند استعراضهما باستخدم مستعرض الويب.
الشكل العام لعناصر الHTML
يتم وصف العناصر باستخدام الوسوم وفيما يلي نعرض الشكل العام لعنصر HTML:
- يبدأ عنصر HTML بوسم البداية begin Tag.
- ينتهي عنصر HTML بوسم النهاية End Tag.
- كل مايتم كتابته بين وسمي البداية والنهاية يدعي محتوي العنصر HTML علما ان هناك بعض العناصر التي لا تحوي اي محتوي التي تسمي عديمة المحتوي .
- يندمج وسما البداية والنهاية في وسم واحد في حالة العناصر عديمة المحتوي.
- يتم تمرير مجموعة من الخصائص لاغلب عناصر HTML في وسم البداية عن طريق ال Attributes
- لنشاهد الامثلة التالية:
| وسم النهاية | محتوي العنصر | وسم البداية |
| <p/> | Welcome to my frist page | <p> |
| <a/> | Go to index | <“a href =”index.html> |
يمثل كل سطر من الجدول السابق عنصرا من عناصر HTML في الصفحة بشكل تخيلي ,فالعنصر الاول يبدأ بالوسم <p>وينتهي بالوسم <p/> ويحوي المحتوي النصي(Welcome to my frist page)
بينما السطر الثاني من الجدول يبدأ بالوسم <“a href=”index.html > وينتهي بالوسم <a/> ويحوي المحتوي النصي Go to index مع اسناد القيمة (index.html) إلي واصفته href .
الشكل العام لصفحة الHTML
تتكون كل صفحة HTML من ثلاث مناطق :
- منطقة جسد الصفحة(Body Section):
وهي المنطقة المحصورة بين وسمي<body>و<body/>و هذه المنطقة هي التي تنتج الشكل النهائي للصفحة تضم جميع العناصر التي تمثل المحتوي الظاهر للصفحة والذي سيظهر في مستعرض الويب عند استعراض هذه الصفحة بالطبع فإن الجزء الأكبر من عناصر HTML سسيكون في هذه المنطقة.
- منطقة رأس الصفحة (Head Section):
وهي المنطقة المحصورة بين وسمي ال<head>و<head/>وهي المنطقة التي تحوي مجموعة من عناصر HTML اغلبها لايظهر في مستعرض الويب عند استعراض الصفحة ولكن المهمة الرئيسية لهذه المنطقة هي اعطاء معلومات عن ماهية المحتوي الموجود بالصفحة اضافة لبعض المعلومات غير الظاهرة الاخري والتي تستخدمها محركات البحث
من اجل الارشفة والبحث في الغالب.
- المنطقة الأم:
وهي المنطقة المحصورة بين وسمي <html> و<html/>وهذه المنطقة هي المنطقة التي تحدد نهاية وبداية الصفحة وهي التي تضم منطقة الرأس والجسد وبهذا فإنها تضم كامل المستند HTML.
وبهذا يكون الشكل العام لاي مستند HTML كما يلي:
واصفات الوسوم Attributes
يتلخص كل ما قلناه سابقا بان لغة HTML تتيح لك تقديم المحتوي عبر انشاء مجموعة من العناصر ,مهمة كل عنصر من عناصر HTML عرض شئ محدد جدا في صفحتك فهناك عناصر لعرض النصوص مثل(<p>)وهناك عناصر لعرض الصور مثل<img>وهناك عناصر لعرض الروابط التشعبية Links مثل(<a>)
يتم انشاء كل عنصر من هذه العناصر بواسطة وسم خاص من وسوم html ويكون لكل عنصر وسم بداية و وسم نهاية يحصران محتوي العنصر الظاهر بينهما .
يمكن تزويد بعض الوسوم بخصائص اضافية التب تخصص سلوك عرض العنصر لمحتواه ويتم هذا عبر ما يعرف بالواصفات Attributes, انظر للكود التالي علي سبيل المثال:
كما تلاحظ فقد قمنا بإضافة شئ جديد في هذه الشيفرة الي وسم البداية الخاص بالعنصر وهو الواصفة align التي تحدد محاذاة النص الذي سيعرضه العنصر p واعطيناها القيمة center لعرض النص في منتصف الصفحة وعند استعراضها سيظهر النص كما يلي:
علي سبيل المثال القيم التي يمكن ان تتخذها تلك الواصفة هي left للمحاذاة لليسار او right للمحاذاة الي اليمين او center لمحاذاة النص الي الوسط وسيتم بالطبع عرض واصقات كل وسم بالتفصيل عند الحديث عنه
| ملحوظة : يجب ان تتم كتابة وسوم html بحروف انجليزية صغيرة Lower Case. |
اظن اننا الان يمكننا ان نبدا الشرح عن عناصر html من البداية وبالتفصيل واهم من هذا انه يجب عليك التطبيق علي كل ما تتعلمه معنا للذهاب للدرس الثاني اضغط هنا.
