سندوتشات HTML

1) مقدمة :

سندوتشات HTML هي عبارة عن دورة مبسطة لتعليم لغة HTML بمنهجية خارجة عن المتعارف عليه، سأعرف أولا ب HTML، ثم أبين مكوناتها وكيف تتركب شفرتها، في نهاية الموضوع سنستخلص أن HTML ماهي إلا وسوم (tags)، لكل وسم إسم ووضيفة، وخصائص تميزه. إذن ليس علينا الى فهم هذه الوسوم، لذا سأشرح لكم في كل مرة مجموعة من الوسوم على شكل تعليقات وهذا ما أسميه سندوتشات HTML.

2) مقدمة في HTML :

اقتباس

لغة HTML هي اللغة المستخدمة لإنشاء صفحات الإنترنت. هي ليست لغة برمجة بالمعنى والشكل المتعارف عليه للغات البرمجة الأخرى كلغة C . فهي مثلاً لا تحتوي على جمل التحكم والدوران، وعند الحاجة لاستخدام هذه الجمل يجب تضمين شيفرات من لغات أخرى كـ Java, JavaScript, CGI . كذلك فهي لا تحتاج إلى مترجم Compiler . وهي غير مرتبطة بنظام تشغيل معين، لأنه يتم تفسيرها وتنفيذ تعليماتها مباشرة من قبل متصفح الإنترنت وبغض النظر عن النظام المستخدم. لذلك فهي لغة بسيطة جداً، وسهلة الفهم والتعلم ولا تحتاج للعمل بها سوي جلسه واحدة لكي تتعلم أسسس اللغه وتستطيع بعدها أنشاء موقع شخصي لك بكل سهوله ، أيضا لا تحتاج لمعرفة مسبقة بلغات البرمجة والهيكلية المستخدمة فيها. بل ربما كل ما تحتاجه هو القليل من التفكير المنطقي وترتيب الأفكار . و تهتم منظمة الـ>> W3C بتصميم ونشر اللغة.

(وكلمة HTML إختصار لـ Hyper Text Markup Language)

و الـ Hyper Text هي الطريقة الخاصة بالتحرك علي صفحات الأنترنت بالضغط علي نص معين يدعي (Hyperlinks ) و هي وسيله للتنقل لأي مكان في شبكة الإنترنت عن طريق الضغط علي الوصلات ( الإرتباطات التشعبيه ) LINKS و تعتمد علي ماذا داخل الأوسمة (TAGS) بمعني أنها تحتوي علي أكواد كأي لغة أخري .

المصدر : html4arab

3) قواعد كتابة الشفرة في HTML :

أ) الأوسمة tags :

HTML هي مجموعة من الأوسمة أي tags لكل وسم إسم ووضيفة، هناك أوسمة تكتب بشكل زوجي وأخرى تكتب بشكل فردي، كالتالي :

<tag></tag> <!-- زوجي !-->
<tag /> <!-- فردي !-->

ب) خصائص الأوسمة tags attributes :

هناك بعض الأوسمة لديها خصائص، لكل خاصية إسم وقيمة، وتكتب كما يلي :

<tag name = "value"></tag>
<tag name = "value"/>

ج) تداخل الوسوم Nested tags :

تعتمد HTML على مبدأ Nested أي التداخل، ونعني بهذا أنه يمكن أن يكون وسم داخل وسم إخر، كالتالي :

<tag1>
	<tag2>
		<tag3><tag5 /></tag3>
		<tag4 />
	</tag2>
</tag1>

في المثال السابق، tag5 بداخل tag3، و tag3 و tag4 بداخل tag2، و tag2 بدوره بداخل tag1. وبهذا تتشكل الشفرة على شكل شجرة العائلة، كما يلي :

د) الأباء Parents، والأبناء Children، والإبن Child، والأشقاء siblings :

قلنا أن شفرة HTML تتركب على شكل شجرة العائلة، ونحن نعلم أن العائلة فيها آباء وأبناء وو ..، هذا ينطبق كذلك مع HTML، ففي مثالنا السابق tag1 أب ل tag2، و tag2 هو أب ل tag3 و tag4، و tag4 بدوره أب ل tag5. بالنسبة للأبناء Children ف tag3 و tag4 هم أبناء ل tag2، أما بالنسبة للإبن Child ف tag2 إبن ل tag1. بالنسبة للأشقاء siblings ف tag3 و tag4 أشقاء فهما في نفس المستوى.

ه) الوسم الجذر Root :

هو الوسم الذي ليس له أب Parent، ففي مثالنا السابق الوسم الجذر هو tag1.

بعدما تعرفنا على HTML جيدا، ليس علينا الأن إلا فهم الوسوم. لذا سأشرح لكم في كل مرة مجموعة من الوسوم على شكل تعليقات.