السلام عليكم ورحمة الله وبركاته أهلاً ومرحباً بكم في مقال جديد من قسم تقنية وتكنولوجيا تحية طيبة مباركة أما بعد:
في مقال اليوم نقدم إليكم جدول دليل وسوم HTML 4.01 التقليدية وهذا الجدول هو بمثابة مرجعية لنا ولأي شخص يهتم ل تعلم اللغة الأم لوصف وهيكلة صفحات ومواقع الويب وفيما يلي تعريف لغة HTML الصحيح وأجابة على السؤال الأكثر شيوعاً لدى العديد كما سنشرح الشكل العام لعناصر وصفحات HTML.
ماهي لغة HTML 4.01؟
ظهرت لغة HTML والتى هي معروفة في الأوساط التقنية بالإصدار (HTML 4.01) في عام 1999 ميلادياً ، وفي الحقيقة فإن تطورات كثيرة حصلت على مفهوم الويب منذ ذلك الوقت من الزمن إلى يومنا هذا ورغم كل هذا التطور فلا يمكن الإستغناء عن لغة HTML التقليدية.
وأصبحنا نسمع بما يسمى بال Web 2.0 و 3.0 كما أصبح من النادر أن نجد موقع ويب (يعنى موقع جيد الجودة) لا يقدم خدمات مثل تشغيل (الفيديو ،الصوت،وغيرهما…) ولهذا أستوجب تطوير إصدار جديد من لغة HTML بإضافة مجموعة جديدة من الوسوم والواصفات ل اللغة القديمة ليظهر الإصدار الجديد بالإسم HTML5.
ومن المميزات الجديدة التى جائت بها HTML5 ظهور وسوم خاصة لعرض الفيديوهات والصوت ووسوم خاصة بكتابة المقالات أو الأخبار ووسوم خاصة للرسم إضافة إلى مجموعة جديدة من عناصر الإدخال الخاصة بالنماذج وغيرهما مما قد نتعرف عليه فيما بعد إن شاء الله.
وكلمة HTML هيا إختصار abbreviation للحروف الأولي من الجملة ( Hyper Text Markup Language ) ، والتي تعني بترجمة غير حرفية ( لغة وصف صفحات الويب ).
لغة HTML ليست لغة برمجية بل لغة وصفية Markup Language لأن HTML تستخدم مجموعة من الوسوم Tags لوصف صفحة الويب.
ماهي ال Tags الوسوم ؟
هيا كلمات أو حروف محددة مسبقا Keywords تحمل معاني خاصة وتكون محصورة بين قوسين من الشكل <> مثل <html> و <b> .
- الوسوم في الغالب على شكل أزواج مثل <b> و <b/>.
- يدعى الوسم الأول <b> وسم البداية Begin Tag أو وسم الفتح Opening Tag.
- ويدعى الوسم الثاني <b/> بوسم النهاية End Tag أو وسم الأغلاق Closing Tag.
- يتم كتابة HTML بإستخدام أي محرر نصوص مثل notepad أو متقدم Visual Studio أو Dream wover هذا لأجهزة الحاسوب.
- يتم كتابة HTML بالبحث وتحميل أي محرر نصوص أو أكواد من متجر بلاي Play Store مثل Visual Code Mobile أو anWriter هذا كان لأجهزة الهواتف الذكية الأكثر إنتشارا Android.
الشكل العام لعناصر HTML
يتم وصف عناصر HTML بإستخدام الوسوم Tags وفيما يلي نعرض الشكل العام لعناصر HTML:
- يبدء عنصر HTML بوسم البداية Begin Tag.
- ينتهي عنصر HTML بوسم النهاية End Tag.
- كل مايتم كتابتة بين وسمي البداية والنهاية يدعى محتوى HTML علماً أن هناك بعض العناصر التى لا تحوي أي محتوى وتسمى عديمة المحتوى.
- يندمج وسم البداية والنهاية في وسم واحد وهذا في حالة العناصر عديمة الجدوى.
- يتم تمرير مجموعة من الخصائص لأغلب عناصر HTML في وسم البداية عن طريق ما يسمى الواصفات Attributes.
- دائما تكتب عناصر HTML بالأحرف الصغيرة Lower Case.
الجدول التالي يمثل عناصر HTML فالعنصر الأول يبدء بوسم <p> وينتهي بوسم <p/> ويحوي المحتوى النصي Welcome To My Website.
أما العنصر الثاني بالوسم <“a href=”index.htm> وينتهي بالوسم <a/> ويحوى المحتوى النصي Go To index مع إسناد القيمة index.htm إلى واصفته href .
حين أن العنصر الثالث عديم المحتوى يتكون من إتحاد وسمى البداية والنهاية في وسم واحد بهذا الشكل </ hr> وبهذا يتضح معنى عنصر عديم الجدوى.
| وسم النهاية | محتوى العنصر | وسم البداية |
|---|---|---|
| <p/> | Welcome to my website. | <p> |
| <a/> | Go to index | <a> |
| </hr> |
يتم حفظ إمتداد ملف المستند بصيغة html أو htm ولا فرق بينهما وهذا بدلا من حفظه بإمتداد txt.
الشكل العام لصفحات HTML
تتكون كل صفحة من صفحات HTML من ثلاث مناطق كما يلي:
1- منطقة جسد أو جسم الصفحة Body Section.
وهى المنطقة المحصورة بين وسمي <body> و <body/> وهذه المنطقة هي التي تنتج الشكل الكلى والنهائي للصفحة وتضم جميع العناصر التي تمثل المحتوى الظاهر للصفحة والذى يظهر للمستخدمين عبر مستعرض أو متصفح الويب وبالطبع أغلب عناصر HTML ستكون في هذا الجزء.
2- منطقة رأس الصفحة Heading Section.
وهى المنطقة المحصورة بين وسمي <head> و <head/> وهذه المنطقة تحوى مجموعة عناصر HTML غالبا لا تكون ظاهرة أو مرئية للمستخدمين أو المستعرض ولكن الوظيفة الأهم لهذه المنطقة هى إعطاء معلومات عن ماهية محتوى صفحتك أو موقعك مثل (عناصر الميتا Meta) تستخدمها محركات البحث من أجل الأرشفة وتنصيف محتوى موقعك بنتائج البحث.
3- المنطقة الأم.
وهى المنطقة المحصورة بين وسمي <html> و <html/> وهذه المنطقة التى تحدد بداية ونهاية الصفحة والتي تضم منطقتي الرأس والجسد وبهذا يعني أنها تضم كامل عناصر صفحة HTML.
وفيما يأتي شفرة مثال للشكل العام لأى مستند صفحة HTML:
<head>
هنا محتوى منطقة رأس الصفحة الغير مرئي
</head>
<body>
هنا محتوى منطقة جسد الصفحة النهائى الظاهر فعلياً
</body>
</html>
جدول دليل وسوم 4.01 HTML
فيما يلي جدول بأغلبية وسوم HTML 4.01 التقليدية مع العلم أن العنصر الذي يليه رمز / يعني أنه عنصر عديم الجدوى أي أنه لايوجد له وسم إغلاق.
| الوسم | الشرح |
|---|---|
| <!– Hi –> | تعليق |
| <!DOCTYPE> | تحديد/تعريف نوع المستند |
| <a> | رابط تشعبي |
| <abbr> | إختصار لمصطلح إنجليزي مركب |
| <acronym> | إختصار لمصطلح إنجليزي |
| <address> | إضافة معلومات إتصال بمالك الصفحة |
| <applet> | تضمين تطبيق Applet ضمن الصفحة |
| <area/> | تعريف منطقة ضمن الخريطة الصورية |
| <b> | نص عريض |
| <base/> | تعريف بادئة أفتراضية لمسارات الروابط |
| <basefont/> | تعريف/لون/نوع/حجم خط أفتراضي لنصوص الصفحة |
| <bdo> | تحديد إتجاه النص |
| <big> | نص كبير الحجم |
| <blockqoute> | أقتباس طويل |
| <body> | جسد الصفحة |
| <br/> | سطر جديد |
| <button> | زر |
| <caption> | عنوان الجدول |
| <center> | توسيط المحتوى |
| <cite> | أقتباس متوسط |
| <code> | شفرة برمجية |
| <col/> | تعريف واصفات مشتركة لأعمدة الجداول |
| <!colgroup> | تعريف مجموعة من العناصر لتطبيق واصفات مشتركة أو خصائص css عليها |
| <dd> | وصف لمصطلح ضمن قائمة المصطلحات |
| <del> | نص مشطوب |
| <dfn> | تعريف مصطلح ضمن قائمة المصطلحات |
| <dir> | قائمة مجلدات |
| <div> | قسم من مستند HTML |
| <dl> | قائمة المصطلحات |
| <dt> | عنصر قائمة خاص بقائمة المصطلحات |
| <em> | نص مشدد عليه |
| <fieldset> | مجموعة حقول في نموذج |
| <font> | تعريف/لون/حجم/نوع لنص معين |
| <form> | نموذج |
| <frame/> | إطار |
| <frameset> | مجموعة نماذج |
| <h1>إلى<h6> | عناصر العناوين |
| <head> | رأس مستند HTML |
| <hr/> | خط أفقي |
| <html> | العنصر الأم للمستند |
| <i> | نص مائل |
| <iframe> | إطار كعنصر من عناصر الصفحة |
| <img/> | لعرض صورة |
| <input/> | عنصر إدخال |
| <ins> | نص تحته خط |
| <isindex> | إنشاء فهرس قابل للبحث خاص بالصفحة |
| <kbd> | نص بخط حاسوبي برمجي |
| <label> | عنوان لعنصر ما |
| <legeng> | عنوان لمجموعة عناصر الإدخال fieldset |
| <li> | عنصر قائمة |
| <link/> | ربط المستند بمستند أخر ك css أو js |
| <map> | تعريف خريطة صورية |
| <menu> | تعريف قائمة |
| <meta/> | بيانات تعريف محتوى صفحتك وماهيتها |
| <noframes> | لإنشاء بديل لمحتوى الإطار في المتصفحات التي لا تدعم الإطارات |
| <noscript> | إنشاء بديل لمحتوى سكربت للمتصفحات التي لا تدعمه |
| <object> | تضمين كائن برمجي |
| <ol> | قائمة مرتبة |
| <optgroup> | مجموعة خيارات مرتبطة بخيارات القائمة المنسدلة |
| <option> | خيار في قائمة منسدلة |
| <p> | فقرة نصية |
| <param/> | وسيط للكائن البرمجي |
| <pre> | نص منسق مسبقاً |
| <q> | إقتباس قصير |
| <s> | نص مشطوب |
| <samp> | نموذج لشفرة برمجية |
| <script> | سكربت برمجي javascript أو jQuery غالباً |
| <select> | قائمة منسدلة |
| <small> | نص صغير الحجم |
| <span> | تعريف قسم سطري في المستند |
| <strike> | نص مشطوب |
| <strong> | نص عريض |
| <style> | تعريف ورقة أنماط css |
| <sub> | نص سفلي |
| <sup> | نص علوي |
| <table> | جدول |
| <tbody> | جسد الجدول |
| <td> | خلية بيانات الجدول |
| <textarea> | عنصر إدخال نص متعدد الأسطر |
| <tfoot> | ذيل الجدول |
| <th> | خلية عنوان رأس الجدول |
| <thead> | رأس الجدول |
| <title> | عنوان مستند |
| <tr> | سطر الجدول |
| <tt> | نص teletype |
| <u> | نص تحته خط |
| <ul> | قائمة غير مرتبة |
| <var> | جزء متغير من النص |
| <xmp> | نص بتنسيق مسبق |
وفي الختام : نكون أوضحنا ماهي لغة HTML وعرفناها تعريفاً دقيقاً ومبسطاً والسلام عليكم ورحمة الله وبركاته.
إنضم إلينا وشارك!
التعليقات