أساسيات لغة HTML
HTML يترجمها البعض في العربية إلى لغة رقم النص الفائق من الإنكليزية Hyper Text Markup Language وهي اللغة الأكثر انتشاراً والأسهل في تصميم صفحات الويب.
عناصر html
تتألف لغة اتش تي ام ال من مجموعة من الكلمات الخاصة باللغة والتي تحصر ضمن علامتي المتباينة < و > تعرف بالوسم tag ولا يشترط كتابتها جميعاً كما أنها ليست حساسة لنوع الحروف (يمكن أن تكون صغيرة، كبيرة أو مركبة) وأهم عناصرها ما يلي:
- <HTML> وهو الوسم الأساسي عند تصميم الصفحة ويكتب غالباً في بدايتها ثم تدرج باقي الأوسام تحته وفي الأخير يتم إنهاءه عبر إضافة غلق الوسم </HTML> هذا الوسم ليس أساسياً في غالبية المتصفحات الحديثة ويمكن للصفحة أن تعمل من دونه ولكن يفضل وضعه حفاظاً على الهيكلة.
- <TITLE> لكتابة عنوان الصفحة والذي يظهر أعلى الصفحة على شريط النافذة عند عرضها. ينتهي العنوان عند إغلاق الوسم </TITLE>. عند عدم كتابة هذا الوسم فإن عنوان الصفحة يحمل اسم المتصفح فقط.
- <BODY> الوسم الخاص بعرض كافة محتوى HTML وقد يندرج ضمنه وسم أو أكثر بغرض تنظيم الصفحة بأشكال متنوعة. ينتهي دور هذا الوسم عند </BODY>
بالإضافة للعناصر السابقة يوجد عدد كبير من العناصر الأخرى والتي يمكنها أن تؤدي وظيفة معينة وخاصة عند إدراجها ضمن الوسم <BODY>. من هذه العناصر:
- <SCRIPT> لإضافة لغة برمجة نصية ينتهي دورها بقفل الوسم </SCRIPT>. يمكن طلب الوسم مرة أخرى وحيث نريد سواء قبل أو بعد الوسم <BODY> ولكن جرت العادة أن يكون هذا الوسم مترافقاً مع وسم العنوان ضمن وسم مستقل يعرف بالوسم <HEAD> والذي ينتهي عند </HEAD>. لغة HTML ليست لغة برمجية بقدر ما هي لغة تصميم ساكنة ولكنها مع ذلك تتيح لنا إمكانية برمجتها عبر دعمها لوسم اللغة النصية السابق وبالتالي يمكن أن تصبح لغة برمجية ديناميكية بفضل الوسم <SCRIPT>. يدعم الوسم <SCRIPT> لغات مثل جافا سكربت، وفجول بيسك سكربت.
جدول عناصر HTMLالجدول التالي يوضح قائمة بعناصر HTML
| اسم الوسم | وصف | أمثلة \ ملاحظات |
|---|---|---|
| <!--...--> | وضع تعليقات | هذا الوسم لا يظهر أثره عند عرض الصفحة. |
| <!DOCTYPE> | تعريف نوع الوثيقة | |
| <a> | إدراج رابط تشعبي | |
| <abbr> | تعريف اختصار | |
| <acronym> | تعريف معنى | |
| <address> | تعريف معلومات جهة اتصال لملك الوثيقة | |
| <applet> | تعريف بريمج مضمن | لم تعد شائعة الاستعمال. |
| <area /> | تعريف مساحة ضمن خارطة صورة | |
| <b> | خط عريض | |
| <base /> | تعريف عنوان أو مسار افتراضي لجميع الروابط الموجودة في صفحة. | |
| <basefont /> | تعريف الخط الافتراضي وخصائصه | لم تعد شائعة الاستعمال |
| <bdo> | تعريف وجهة النص | |
| <big> | تعريف خط كبير | |
| <blockquote> | تعريف علامة تنصيص طويلة | |
| <body> | تعريف جسم الصفحة | |
| <br /> | تعريف سطر فاصل | |
| <button> | تعريف زر انضغاطي | |
| <caption> | تعريف عنوان جدول | |
| <center> | توسيط نص | |
| <cite> | تعريف مصدر | |
| <code> | تعريف نص شفرة حاسوب | |
| <col /> | تعريف قيم نسقية لعمود أو أكثر في جدول | |
| <colgroup> | تعريف مجموعة من الأعمدة في جدول بغرض التنسيق | |
| <dd> | وصف لمصطلح في قائمة تعريفات | |
| <del> | تعريف نص محذوف | |
| <dfn> | مصطلح تعريف | |
| <dir> | تعريف قائمة مجلد | |
| <div> | تعريف قسم من صفحة أو وثيقة | |
| <dl> | قائمة تعريفات | |
| <dt> | تعريف مصطلح أو عنصر ضمن قائمة | |
| <em> | تعريف نص إيضاح | |
| <fieldset> | تعريف حدود حول عنصر في نموذج | |
| <font> | تعريف نوع خط، لون، وحجم نص | لم تعد شائعة الاستعمال |
| <form> | تعريف HTML من مدخلات مستخدم | |
| <frame /> | تعريف نافذة أو إطار ضمن مجموعة أطر | |
| <frameset> | تعريف مجموعة أطر | |
| <h1> to <h6> | تعريف العناوين الرئيسة فيHTML | |
| <head> | تعريف معلومات عن الوثيقة | |
| <hr /> | تعريف خط أفقي | |
| <html> | تعريف وثيقة HTML | |
| <i> | تعريف خط مائل | |
| <iframe> | يعرف إطار ضمن السطر | |
| <img /> | تعريف صورة | |
| <input /> | تعريف أداة تحكم إدخال | |
| <ins> | تعرف نص مدرج | |
| <isindex> | . تعرف فهرسة قابلة للبحث، متعلقة بالوثيقة | منتهية |
| <kbd> | يعرف نص من لوحة المفاتيح | |
| <label> | يعرف عنوان لعنصر إدخال | |
| <legend> | يعرف اسم نصي لعنصر من فئة حقول | |
| <li> | يعرف عنصر مسودة | |
| <link /> | يعرف علاقة بين وثيقة ومصدر خارجي | |
| <map> | تعريف خارطة صورة | |
| <menu> | . تعريف مسودة قائمة | لم تعد شائعة |
| <meta /> | تعريف بيانات وصفية عن وثيقة HTML | |
| <noframes> | تعريف محتوى بديل للمستخدمين الذين لا تدعم متصفحاتهم الأطار frame | |
| <noscript> | تعريف محتوى بديل للمستخدمين الذين لا تدعم متصفحاتهم لغة نصية في جهة العميل script | |
| <object> | تعريف كائن مضمن | |
| <ol> | تعريف مسود مرتبة | |
| <optgroup> | تعريف مجموعة من الخيارات المتصلة ضمن مسودة مختارة | |
| <option> | تعريف خيار في مسودة | |
| <p> | تعريف فقرة | |
| <param /> | تعريف متغير وسيط لكائن | |
| <pre> | تعريف نص محدد النسق سلفاً | |
| <q> | تعريف اختصار علامة التنصيص | |
| <s> | . تعريف نص مخدوش | لم تعد شائعة |
| <samp> | تعريف عينة شفرة حاسوب | |
| <script> | تعريف لغة نصية في جهة العميل | |
| <select> | تعريف مسودة اختيار (قائمة منسدلة) | |
| <small> | تعريف نص أصغر | |
| <span> | تعريف قسم من الوثيقة | |
| <strike> | . تعريف نص مخدوش | لم تعد شائعة |
| <strong> | تعريف نص أغلظ | |
| <style> | تعريف معلومات عن النمط المستعمل في الوثيقة | |
| <sub> | تعريف نص سفلي | |
| <sup> | تعريف نص علوي | |
| <table> | تعريف جدول | |
| <tbody> | تجميع محتويات هيكلية في جدول | |
| <td> | تعريف خلية في جدول | |
| <textarea> | تعريف أداة تحكم إدخال نصي متعدد الأسطر | |
| <tfoot> | تجميع محتويات التذييل في جدول | |
| <th> | تعريف ترويسة خلية في جدول | |
| <thead> | تجميع ترويسة البيانات في جدول | |
| <title> | تعريف عنوان وثيقة | |
| <tr> | تعريف صف في جدول | |
| <tt> | تعريف نص متباعد النوع | |
| <u> | . تعريف نص بتسطير سفلي | لم تعد شائعة الاستعمال |
| <ul> | تعريف مسودة غير مرتبة | |
| <var> | تعريف قسم متغير من النص | |
| <xmp> | . يعرف نص بنسق مضبوط سلفاً | لم تعد شائعة الاستعمال |