مقدمة عن HTML

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

تقنيات مختلفه (مثل css, javascript, flash,AJAX, JSON) يمكن استخدامها لتعريف عناصر صفحة ويب, لكن في أدنى مستوى صفحة الويب تعرف باستخدام HTML(لغة رقم النّص الفائق), بدون HTML لا وجود لصفحة الويب, HTMLهي الصدفه التي تربط مختلف العناصر. معايير عالميه يتم متابعتها من قبل رابطة الشبكه العالميه(W3C) و WHATWG.   WHATWG تعتبر   HTML معيار حي يتطور بثبات بينما W3C تعمل على "مقتطفات"HTML',منها النسخة الأحدث  HTML5 والنسخة قيد التطوير HTML5.1.

معاير HTML تحدد لغه واحده يمكن كتابتها بواسطة بواسطة  HTML تركيب المتساهل او بواسطة XML (), لا تصف HTML طراز أو تكوين المحتوى , بل المحتوي نفسه أي معناه.

معايير HTML تعرف لغة واحدة تكتب بنحو  متحرر, هناك أيضا ال XML بقواعد أكثر صرامة, HTML لا تعرف نمط المحتوى بل المحتوى نفسه أي معناه.

صانع صفحه الويب بمقدور استعمال صفحات الطرز المتراصه CSS لتعريف مظهر و نسق النص و غيرها من عناصر الصفحه, معظم اتجاهات التصميم الحاليه تشجع استخدام css بدل عناصر العرض لHTML.

هذه المقاله هي مقدمه لHTML في حال تساءلت يوما عن ماذا يجري خلف كواليس متصفحك, فهنا تبدأ.

تاريخ موجز لHTML

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

ما هي الHTML؟

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

مثلا, عنصر الفقره يتكون من وسم بدء "<p>" و وسم اغلاق "<p/>", تاليا مثال يبين فقره محتواه في عصر HTML.

<p>.HTML لفد بدأت تعلم</p>

في المتصفح هكذا تكون النتيجه:

المتصفح يستخدم الوسوم لتحديد كيفية عرض المحتوى.

العناصر التي تحدد المحتوى في العاده تجمع عناصر أخرى, على سبيل المثال عنصر التشديد "<em>" قد يضمن في فقره للتأكيد على فقره أو كلمة.

<p>لقد بدأت تعلم HTML</p>

والنتيجه تكون:

بعض العناصر لا تتضمن عناصر أخرى مثل وسم الصوره "<img>" يحدد اسم الملف  كسمه:

<img src="smileyface.jpg">

في الغالب شارطه خلفيه تكتب قبل الأقوس الأخير  للإشار إلى نهاية الوسم. هذا اختياري في HTML , الزامي في XHTML

ما تبقى من هذه المقاله يشرح بالتفصيل المفهوم الذي تقدم. لكن إذا أردت أن ترى عناصر HTML في العمل تفقد موزيلا تيمبل وهو عبارة عن محرر تفاعلي يساعدك على تعلم HTML كذلك انظر قائمة العناصر للتعرف عليها واستخداماتها.

العناصر-وحدة البناء الرئيسيه:

HTML تتكون من مجموعه من العناصر. العنصر يحدد دلالة  المحتوى. تجمع العناصر المحتوى بين عنصرين متشابهين وهذا يشمل الوسوم, مثلا <p> عنصر الفقره; <img> عنصر الصور, للمزيد انظر قائمة عناصر HTML.

بعض العناصر لها معاني محدده,مثل "هذه صوره","هذا عنوان", "هذه قائمه مرقمه", أخرى أقل اختصاصا "كهذا قسم في الصفحه" أو هذا "جزء من نص". عناصر أخرى تستخدم لغرض تقني فقط  "كهذه هوية الصفحه التي لا تعرض", على كل  عناصر HTML لها قيمه دلالية  بطريقه ما أو أخرى.

معظم العناصر يمكن أن تتضمن عناصر أخرى. صفحة ويب بسيطه كاملة :

 

<html>
  <body>
    <p> you are in your beginning stage of HTML</p>
  </body>
</html>

كما يمكنك أن ترى عنصر <html> يحيط ببقية العناصر, و عنصر <body> يحيط بمكونات الصفحة. هذه التركيبة التي تشبه الشجرة(<p>و<dody> فرو ع تنموا من الجذع <html>) , تركيبه وراثيه تسمى DOM (النموذج الكائني للمستند) .

الوسوم:

نصوص HTML تكتب في مستند تص عادي. ويمكن كتابتها في أي محرر نصوص و حفضها كنص عادي مثل نوتباد أوو نوتباد ++ أو سوبلين, لكن معظم محرري  HTML يفضلون استخدام محرر خاص يعلم النحو و يظهر DOM. تكتب الوسوم إما بالأجرف الكبيره او الصغيره. لكن W3C توصي باستخدام الاحرف الصغيرة (في XHTML الحروف الصغيرة الزامية.). 

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

هذا مثال بسيط:

<p>This is text within a paragraph.</p>

في هذا المثال هناك وسم بدايه و وسم نهايه . وسم النهايه هو نفسه البدايه بالإضافه الي شارطه أماميه مباشرة بعد علامة الأضغر من. معظم العناصر في الHTML تكتب باستخدام كلا وسمي البدايه و النهايه. وسوم  البدايه والنهايه؛ يجب تضمين الوسوم بشكل صحيح , بحيث وسوم النهايه تكتب بترتيب عكسي لوسوم البدايه. التضمين الصحيح قاعده اساسيه لكتابة كود صالح.

هذا مثال لكود صالح

<em>I <strong>really</strong> mean that</em>.

هذا مثال لكود غير صالح:

Invalid: <em>I <strong>really</em> mean that</strong>.

لاحظ أن في المثال السابق وسم الإغلاق للعنصر المضمن يكون قبل وسم الإغلاق للعنصر المضمن فيه .

 

بعض العناصير لا تحتوي على ننص أو أي عنصر أخر, وتعرف بالعناصر الفارغة ولا تحتاج إلى وسم اغلاق.مثال:

<img src="smileyface.jpg">

البعض يكتب العناصر الفارغة ملحقة بشارطة أماميه (هذا الزامي في كتابة  XML).

<img src="smileyface.jpg" />

في HTML هذه الشارطه ليس لها أي هدف تقني  و استخدامها هو مسألة أسلوب بحثه.و لكن يستحسن دائما اغلاق الوسم.

السِّمات:

وسم البدايه قد يحتوي على معلومات إضافيه كما في المثال االآتي. مثل هذه المعلومات تعرف ب السِّمات.السِّمات في العادة تتكون من جزئين:

  • اسم السِّمة.
  • قيمة السِّمة.

البعض من السمات يمكن أن يحمل قيمة واحدة فقط. هذه هي السمات المنطقية ويمكن اختصارها باسم السمة فقط أو ترك القيمة فارغة. الأمثلة التاليه تحمل نفس المعنى:

<input required="required">

<input required="">

<input required>

قيمة السمة التي تتكون من كلمة واحدة أو رقم يمكن كتابتها مباشرة, القيمة التي تتكون من أكثرمن كلمة تكتب ضمن علامة اقتباس المفردة(') أو المزدوجة("), معضم المطورين  يفظليون استخدام علامات الإقتباس دائما لتكون الشفرة اقل ارباكا للعين ولتجنب الأخطاء, كالأتية:

<p class=foo bar> (Beware, this probably does not mean what you think it means.)

في هذا المثال القيمة يجب ان تكتب "foo bar" , لكن بما أنه لم تكتب علامات الترقيم تم تمثيل السمة  كالآتي:

<p class="foo" bar=""

مراجع الأحرف المسماة:

مراجع الأحرف المسمات تستخدم لكتابة الحروف والرموز ذات المعنى الخاص في HTML , مثلا تعتبر الHTML علامتي الأصفر من و الأكبر من كمحددات وسوم. عندما تريد استخدام علامتي الأكبر من و الأصغر من في نص, تستطيع استخدام مراجع الأحرف المسمات. هناك أربعة شائعة هي:

  • &gt;للأكبر من  (>).
  • lt& للأصغر من.
  • amp& ل&.
  • quot& لعلامات الإقتباس.

يوجد العديد مراجع الحروف المسماة لكن هذه الأربعة الرئيسية الأإكثر استخداما.

نوع المستند و التعليق:

بالإضافة للوسوم و النص و مراجع الحروف المسمات , مستند HTML يجب أن يحتوي على إشعار بنوع المستند في السطر الأول. تصريح نوع المستند ليس وسما, بل هو  توجيه للمتصفح  عن إصدار  HTML الذي تستخدمه.

في  HTML4.01 نوع المستند يرمز ل DTD (تعريف نوع المستند) كما هو معتمد في SGML. ثلاثة أشكال مختلفة من تصريح نوع المستند في HTML4.01 :

HTML4.01 المقيد:

هذا التعريف يحتوي على كل وسوم و سمات HTML, لكن لا يحتوي علي وسوم تمثيلة (مثل الخط),الإطارات غير مسموحة.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML4.01 المتحولة:

هذا التعريف يحوي على كل العناصر و السمات بمافيها التمثيلية و المهملة (كالخط) ,الإطارات غير مسموحة.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML4.01 المأطرة:

تعريف المستند هذا يشبه السابق إلا انه يسمح باستخدام الإطارات.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

في HTML5 هناك تعريف واحد يكتب الآتي:

<!DOCTYPE html>

نوع المستند له تاريخ طويل و معقد, لكن الآن كل ما تحتاج إلى معرفته هو أن نوع المستند يخبر متصفحك أن يظهر صفحت الويب خاصتك وفق معاير W3C .

HTML لها طريقة لإضافت تعليقات لا تظهر عند عرض الصفحة في المتصفح, هذا مفيد لشرح جزء من الترميز أو ترك ملاحظة أو تذكير. تعليقات HTML تكتب كلآتي : 

<!-- هذا النص تعليق -->

مستند صغير ولكن مكتمل:

بوضع كل هذا معا, هذا مثال صغير لمستند HTML . بامكانك نسخ هذا لمحرر نصوص و حفظه تم فتحه باستخدام متصفح. تأكد من حفظه باستخدام UTF-8 . بما انه لا يحتوي علي أي نمط سيظهر بسيطا ولكن هذه ليست إلا بداية صغيرة.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>A tiny document</title>
</head>
<body>
  <h1>Main heading in my document</h1>
  <!-- Note that it is "h" + "1", not "h" + the letters "one" -->
  <p>Look Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
</body>
</html>

Document Tags and Contributors

 Contributors to this page: teoli, kadimi, Hajer
 Last updated by: teoli,