شرح لغة HTML ومقدمة عن لغة XML

Posted by: المعتصم on: 05/07/2009

In: شروحات
Comment!

أنصح بقراءة الشرح من ملف الـ pdf لأن تنسيقه أفضل من الشرح الموجود في هذه الصفحة

قائمة المحتويات:

ماهي لغة HTML ؟
مثال تطبيقي
ملخص لأهم الشفرات المستخدمة في لغة HTML
التعليقات والملاحظات
عيوب لغة HTML
مقدمة عن لغة XML

1- ماهي لغة HTML ؟

HTML هي اختصار لجملة HyperText Markup Language ، وهي لغة وشفرات برمجية يتم كتابتها يدوياً أو عن طريق برامج متخصصة ، ومن ثم يتم ترجمة هذه الأكواد والشفرات عن طريق متصفحات الانترنت (مثل انترنت اكسبلورر وفايرفوكس وغيرها) وتحويلها إلى صفحات انترنت منسقة ومرتبة على حسب اختيار ورغبة مصمِّم الصفحة.

يتم كتابة شفرات وأكواد هذه اللغة بإحدى الطريقتين التالية:

1- WYSIWYG :

هي اختصار لـ What You See Is What You Get ومعناها ماتشاهده هو ماستحصل عليه. وهي عبارة عن استخدام برامج متخصصة في كتابة هذه اللغة (مثل فرونت بيج ومحرر النصوص وورد و دريم ويفر وغيرها) لتقوم بعمل صفحة انترنت بدون الحاجة لمعرفة وكتابة الشفرات البرمجية الخاصة بهذه اللغة، بمعنى أنه إذا أردنا مثلاً أن نكتب كلمة بلون معين ، كل ماعلينا هو كتابة الكلمة ثم نقوم بتظليلها في البرنامج ومن ثم نذهب إلى قائمة الألوان لنختار اللون الذي نريده، وهكذا لباقي عمليات التنسيق المختلفة، والبرنامج سيقوم بالنيابة عنا بتحويل ماعملناه إلى أكواد وشفرات HTML.
برنامج مايكروسوفت وورد هو أوضح مثال على مثل هذه البرامج ، حيث يمكننا عن طريقه عمل صفحة انترنت بالتنسيق الذي نريده – وكأننا ننسق مستند نصي عادي – وبعدها نقوم بحفظ الملف على شكل صفحة ويب ، وسنجد الملف الناتج يحمل امتداد html وهو الامتداد الخاص بصفحات الانترنت التي نستطيع فتحها ومشاهدتها بواسطة المتصفح.
يفضل استعمال هذا النوع لغير المحترفين في مجال عمل صفحات الانترنت أو لمن لايريد تعلمها لأنها ليست على علاقة مع
تخصصه أو مجال عمله. ويميز هذا النوع بأنه يسمح لنا برؤية عملنا مباشرة في البرنامج، وأيضاً لايتطلب معرفة شفرات اللغة البرمجية.

Explicit Markup -2 :

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

2- مثال تطبيقي :

الصورة التالية أتت لنا في الواجب الثاني لسنة 2008/2009 وسأستخدمها كمثال وسأضيف عليها شعار منتديات طلاب الجامعة العربية المفتوحة في الأعلى حتى يصبح المثال شاملاً لجميع الشفرات الأساسية لعمل صفحة انترنت.

طبعاً هذه الصورة هي لصفحة انترنت ولكن قمت بقص الأجزاء الزائدة حتى تكون واضحة لنا، المطلوب هو كتابة شفرات برمجية لعمل مثل هذه الصفحة ..

أولاً: أي صفحة انترنت مهما كان حجمها ومهما كان نوعها يجب أن تحتوي على الأكواد التالية:

<html>
     <head>
          <title> عنوان الصفحة </title>
     </head>
     <body> محتوى الصفحة </body>
</html>

<html> يدل على أن صفحة الانترنت تبدأ من هنا.
<head> يحتوي على شفرة عنوان الصفحة وشفرات أخرى متقدمة لسنا مطالبون بمعرفتها حالياً مثل شفرات لغة XML ولغة الجافاسكربت.
<title> يحتوي على عنوان الصفحة الذي نريده أن يظهر في أعلى المتصفح كاسم وعنوان للصفحة.
<title/> هو شفرة الإغلاق لشفرة العنوان والذي يخبرنا بأنها شفرة نهاية أو إغلاق هو رمز / الموجود قبل الكلمة.
وأحب أن أذكر هنا بأن أي شفرة أو وسم يجب علينا إغلاقها بعد انتهاؤنا منها مثلما عملنا هنا في إغلاق شفرة العنوان بعد كتابة العنوان الذي نريده.
<head/> إغلاق للشفرة السابقة لأننا لم نعد نريد إضافة شيء في داخلها.
<body> بعد هذه الشفرة سنضع كل شفرات ومحتويات صفحة الانترنت التي نريد عملها.
<body/> هذه الشفرة تدل على أن محتوى الصفحة التي صممناها انتهى هنا.
<html/> يدل على أن ملف صفحة الانترنت ينتهي هنا.

بعض الملاحظات الهامة:

الأكواد والشفرات يجب أن نكتبها كلها إمما بأحرف كبيرة مثل <HTML> أو كلها بأحرف صغيرة مثل <html> ، ويجب الثبات على هذا الشيء في جميع أكواد الملف. ويفضل التعوُّد على الكتابة بالأحرف الصغيرة دائماً.
يجب علينا المحافظة على ترتيب الشفرات البرمجية المختلطة أو المتداخلة مع بعض، كمثال:
<p> <center> Hello! </p> </center>
الطريقة هذه خاطئة وسيتم إنقاص درجات منك إذا قمت بعملها، المفترض أن نكتبها بالشكل التالي:
<p> <center> Hello! </center> </p>
قاعدة: آخر شفرة نكتبها هي أول شفرة نغلقها.
زر إدخال أو إنتر لايوجد له أي تأثير على النتيجة النهائية للأكواد البرمجية، يعني لوكتبنا الشفرات والمحتوى كله بدون أن نضغط زر إنتر لتصبح جميع الشفرات والأكواد موجودة في سطر واحد ، أو قمنا بالضغط على زر إنتر لتصبح الشفرات موزعة على عدة أسطر ، النتيجة ستكون نفسها للطريقتين.
استعمال زر المسافة سيتم احتسابه مرة واحدة فقط سواء ضغطنا عليه مرة واحدة أو خمس مرات، النتيجة واحدة.
الأوامر البرمجية يتم تنفيذها بالتسلسل ، ابتداءً من أول أمر موجود في الأعلى ، وانتهاءً بآخر أمر موجود في الأسفل.

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

مكان النقط نضع رابط الصورة التي نريد عرضها، وهنا يجب أن نذكر بأنه توجد حالتين لعرض الصور:

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

الثانية: إذا كانت الصورة موجودة لدينا في الحاسب أو في السيرفر الذي سنرفع عليه صفحة الانترنت، وطريقتها يجب أن نضع الصورة في نفس المجلد الذي توجد فيه صفحة الانترنت ، مثلاِ لو كان ملف صفحة الانترنت الذي نقوم بتصميمه موجود في سطح المكتب يجب أن نضع الصورة في سطح المكتب أيضاً ، ولو كان الملف موجود في المستندات يجب أن نضع الصورة معه في المستندات.

الآن بعد ماوضعنا الصورة والملف في نفس المجلد نأخذ اسم الصورة مع امتدادها ونضعها مكان النقط الحمراء ، الصورة في حالتنا هذه اسمها aoua.jpg. لذلك نعيد كتابة شفرة عرض الصورة لتصبح بالشكل التالي:

طيب الآن عرفنا كيف نعرض الصورة ، ولكن تبقا أن نجعلها تظهر في وسط الصفحة ..
الشفرة الخاصة بالتوسيط هي <center> .
لذلك نضيفها مع شفرة إغلاقها على شفرة عرض الصورة السابقة ، لتصبح بالشكل التالي:

طبعاً هذه الشفرة نكتبها في مكان المحتوى الذي حددته في الشفرات الأساسية ، ليصبح عملنا حتى الآن كالتالي:

<html>
     <head>
          <title>My first web page!</title>
     </head>
     <body>
          <center> <img src=”aoua.jpg”> </center>
     </body>
</html>

الآن انتهينا من أول خطوة في الصفحة، الخطوة القادمة هي كتابة عنوان القطعة Luke Howard
العناوين توجد لها ست مقاسات أو أحجام ، وتكتب شفرتها كالتالي:

<h1>عنوان كبير جداً</h1>

<h2>عنوان كبير</h2>

<h3>عنوان متوسط</h3>

<h4>عنوان أصغر</h4>

<h5>عنوان صغير</h5>

<h6>عنوان صغير جدا</h6>

كلما كبر الرقم كلما صغر حجم العنوان ..

في حالتنا هذه العنوان كبير جداً ، ولذلك سنستعمل الشفرة الخاصة به لتصبح كالتالي:

<h1>Luke Howard</h1>

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

<html>
     <head>
          <title>My first web page!</title>
     </head>
     <body>
          <center> <img src=”aoua.jpg”> </center>
          <h1>Luke Howard</h1>
     </body>
</html>

الآن ننتقل للخطوة التالية وهي كتابة القطعة النصية التالية وتنسيقها حتى تصبح مشابهة للصورة التي لدينا:

Luke Howard (1773-1864) was a British manufacturing chemist who was fascinated by weather phenomena. He provided the basis of the system of classifying clouds which we still use today, over 200 years later.

Howard gave three “modifications” of clouds

Cumulus (from the Latin for heap)
Stratus (from the Latin for a layer)
Cirrus (from the Latin for a curl)

To these he added Nimbus, from the Latin for rain, to denote a rain or snow cloud.

Howard’s scheme was first published in a paper he gave to the Askesian Society in 1802.

توجد أكثر من طريقة لكتابة أي شفرة برمجية ، وذلك يعتمد على فكر المبرمج ورؤيته للمشروع ..
سأشرح طريقتين أرى بأنهم الأفضل للمبتدئين لتطبيق هذا المثال حتى يستوعبوا اللغة أكثر إن شاء الله:

الطريقة الأولى:

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

<p> النص سيكون هنا </p>

الفائدة من وضع كل جزء بين علامات خاصة به هو أن العلامات هذه ستقوم بوضع سطر فاصل فيما بينها، يعني لو وضعنا مثلاً أول جزئين نصية في نفس الشفرات لن يكون بينهم سطر فاصل.
لذلك سيصبح عملنا كالتالي:

<p>Luke Howard (1773-1864) was a British manufacturing chemist who was fascinated by weather phenomena. He provided the basis of the system of classifying clouds which we still use today, over 200 years later.</p>

<p>Howard gave three “modifications” of clouds</p>

Cumulus (from the Latin for heap)
Stratus (from the Latin for a layer)
Cirrus (from the Latin for a curl)

<p>To these he added Nimbus, from the Latin for rain, to denote a rain or snow cloud.</p>

<p>Howard’s scheme was first published in a paper he gave to the Askesian Society in 1802. </p>

طيب الآن وضعنا الأجزاء النصية في شفراتها وتبقّى لدينا القائمة، القوائم في هذه اللغة تنقسم لقسمين; قوائم مرتبة (أو مرقمة) وقوائم عشوائية (أو غير مرتبة):

القوائم المرتبة شفرتها هي <ol> ، وهي اختصار لـ Ordered List .

القوائم الغير مرتبة شفرتها <ul> ، وهي اختصار لـ Unordered List .

في حالتنا هذه نريد استخدام القوائم الغير مرتبة ، لذلك نضع الشفرات حول القائمة الموجودة لدينا:

<ul>
Cumulus (from the Latin for heap)
Stratus (from the Latin for a layer)
Cirrus (from the Latin for a curl)
</ul>

ما قمنا به لايكفي لعرض القوائم ، لأنه يجب علينا تحديد كل عنصر في القائمة بشفرة <li> ، حتى يميز البرنامج كم عنصر يوجد في هذه القائمة ، لذلك سنقوم بوضع شفرة عناصر القائمة على العناصر الثلاثة الموجودة لدينا لتصبح بالشكل التالي:

<ul>
     <li>Cumulus (from the Latin for heap)</li>
     <li>Stratus (from the Latin for a layer)</li>
     <li>Cirrus (from the Latin for a curl)</li>
</ul>

اذا جمعنا ماقمنا به حتى الآن سنحصل على التالي:

<html>
     <head>
          <title>My first web page!</title>
     </head>
     <body>
          <center> <img src=”aoua.jpg”> </center>
          <h1>Luke Howard</h1>
          <p>Luke Howard (1773-1864) was a British manufacturing chemist who was fascinated by weather phenomena. He provided the basis of the system of classifying clouds which we still use today, over 200 years later.</p>

<p>Howard gave three “modifications” of clouds</p>

          <ul>
               <li>Cumulus (from the Latin for heap)</li>
               <li>Stratus (from the Latin for a layer)</li>
               <li>Cirrus (from the Latin for a curl)</li>
          </ul>

<p>To these he added Nimbus, from the Latin for rain, to denote a rain or snow cloud.</p>

<p>Howard’s scheme was first published in a paper he gave to the Askesian Society in 1802. </p>
</body>
</html>

الطريقة الثانية:

هي أن نضع كل الكلام الموجود في الصورة في داخل شفرة <p> واحدة، وعند الرغبة في نزول سطر نستعمل شفرة <br> ، هذه الشفرة مهمتها هي مثل أمر إنتر في برنامج تحرير النصوص ، يعني ستجعل النص ينزل لسطر جديد.

لو قمنا الآن بحفظ الملف وثم فتحناه بمتصفح انترنت سنحصل على النتيجة التالية:

الآن تقريباً قطعنا ثلثي المشوار وتبقا الثلث. تبقى أن نقوم بالعمليات التنسيقية التالية حتى نجعل عملنا يتطابق مع الصورة الأولى:
1.تغيير نوع الخط لـ Luke Howard الموجودة في القطعة الأولى لتكون بالخط السميك.
2.تغيير نوع خط الأرقام (1864 – 1773) الموجودة في القطعة الأولى لتصبح بالخط المائل.
3.تغيير نوع الخط لكلمة modifications الموجودة في القطعة الثانية لتصبح بالخط السميك.
4.إضافة رابط لصفحة انترنت أخرى على كلمات Askesian Society الموجودة في القطعة الأخيرة.

نبدأ بالعملية الأولى، ولجعل نوع الخط يكون بالخط السميك نستعمل الشفرة <b> اختصاراً لكلمة bold.
لذلك نضيفها على الكلمات لتصبح بالشكل التالي:

<b>Luke Howard</b>

طبعاً الكلمتين موجودين في مكانهم بين شفرتهم الأساسية <p> ، وأضفنا قبلهم وبعدهم شفرات لجعل الخط سميك.

العملية الثانية بنفس الطريقة، وشفرة تغيير الخط ليصبح مائل هي <i> اختصاراً لكلمة italic.
نضيفها على الأرقام لتصبح بالشكل التالي:

العملية الثالثة هي نفس الأولى، فيصبح لدينا:

<b>modifications</b>

العملية الرابعة هي شبيهه جداً بعملية عرض صورة في الصفحة بالنسبة للروابط المحلية والخارجية لذلك لن أعيد شرح هذه النقطة، ولوضع رابط على كلام معين في الصفحة نستخدم الشفرة التالية:

<a href=”…“> الكلام الذي نرغب أن نضع عليه رابطاً لصفحة انترنت أخرى </a>

مكان النقط الحمراء نضع الرابط الذي نريد (بين علامات التنصيص) ، وفي مكان الكتابة الملونة بالأحمر يكون الكلام الذي نريد أن نضيف إليه رابط لصفحة انترنت أخرى، وسنعتبر في حالتنا هذه بأن الرابط الذي سنتستخدمه رابط محلي موجود في نفس المجلد الذي توجد فيه الصفحة التي نقوم بتصميمها حالياً باسم Askesian.html ، لذلك ستصبح لدينا الشفرة الآتية:

<a href=”Askesian.html”>Askesian Society</a>

الآن انتهينا من تنسيق النص، والنتيجة الكاملة لما قمنا به هي:

<p>Howard gave three “<b>modifications</b>” of clouds</p>

          <ul>
               <li>Cumulus (from the Latin for heap)</li>
               <li>Stratus (from the Latin for a layer)</li>
               <li>Cirrus (from the Latin for a curl)</li>
          </ul>

<p>To these he added Nimbus, from the Latin for rain, to denote a rain or snow cloud.</p>

<p>Howard’s scheme was first published in a paper he gave to the <a href=”Askesian.html”>Askesian Society</a> in 1802. </p>
</body>
</html>

ولو قمنا الآن بحفظ الملف باسم first_web_page.html على سبيل المثال ، وثم قمنا بفتح الملف عن طريق متصفح الانترنت سنحصل على هذه النتيجة:

وهي نفس النتيجة المطلوب تحقيقها في سؤال الواجب، وبهذا نكون انتهينا من عمل أول صفحة انترنت في مسيرتنا.

لتحميل الصفحة التي صممناها مع الملفات المستخدمة في الشرح

أحب أن أذكر هنا بأن تنسيق كتابة الشفرات لأي لغة برمجة شيء ضروري جداً لسببين:
1.لأنها تجعل قراءة الشفرات أسهل بكثير لمن أراد الاطلاع عليها (كالمدرس).
2.لأنها تسهل علينا تصحيح الأخطاء إذا حدثت أو تطوير الشفرات فيما بعد.

على سبيل المثال ، انظر لهذه الأكواد:

<html><head><title> My first web page! </title></head><body><center> <img src=”aoua.jpg”> </center><h1>Luke Howard</h1><p><b>Luke Howard</b> <i>(1773-1864)</i> was a British manufacturing chemist who was fascinated by weather phenomena. He provided the basis of the system of classifying clouds which we still use today, over 200 years later.</p><p>Howard gave three “<b>modifications</b>” of clouds</p><ul><li>Cumulus (from the Latin for heap)</li><li>Stratus (from the Latin for a layer)</li><li>Cirrus (from the Latin for a curl)</li></ul><p>To these he added Nimbus, from the Latin for rain, to denote a rain or snow cloud.</p><p>Howard’s scheme was first published in a paper he gave to the <a href=”Askesian.html”>Askesian Society</a> in 1802. </p></body></html>

وانظر لهذه الأكواد:

<p>Howard gave three “<b>modifications</b>” of clouds</p>

          <ul>
               <li>Cumulus (from the Latin for heap)</li>
               <li>Stratus (from the Latin for a layer)</li>
               <li>Cirrus (from the Latin for a curl)</li>
          </ul>

<p>To these he added Nimbus, from the Latin for rain, to denote a rain or snow cloud.</p>

<p>Howard’s scheme was first published in a paper he gave to the <a href=”Askesian.html”>Askesian Society</a> in 1802. </p>
</body>
</html>

أي الاثنين أريح للعين وأسهل للقراءة والفهم؟
بالتأكيد الثاني لأنه منسق بشكل واضح ، مع العلم بأن كل الشفرتين سيعرضون نفس النتيجة بالضبط! لأني كما ذكرت سابقاً: الضغط على زر إنتر أو مسافة أو حتى استخدام زر tabs لا يؤثر على النتيجة النهائية للعمل.
وللتنسيق أنصح باستخدام زر Tabs لزيادة وانقاص المحاذاة بين الشفرات والجهة اليسرى بدلاً من زر المسافة.

3- ملخص لأهم الشفرات المستخدمة في لغة HTML

الشفرتين الملونتين بالأخضر مرتبطتين ببعض وسأذكر طريقة عملهم باختصار..
في بعض صفحات الانترنت ، تكون الصفحة طويلة جداً وتحتوي على عدة عناوين ونقاط، للتسهيل على القارئ يفضل وضع قائمة بالمحتويات في أعلى الصفحة وفي حالة الضغط على أحد العناوين الموجودة في القائمة سينزل المتصفح مباشرة إلى العنوان الذي ضغطنا عليه. لرؤية مثال مباشر على هذه الطريقة زوروا هذا الرابط:
http://aoum150.wordpress.com/2009/08/08/javascript_lesson

لو أخذنا عنوان المقدمة كمثال ، فأنا ذهبت إلى عنوان “المقدمة” – وليست الكلمة الموجودة في قائمة المحتويات – ووضعت عليها علامة باسم introduction ، فأصبح الكود الخاص بها بهذا الشكل:

<a name=”introduction”>المقدمة</a>

الآن انتهيت من الخطوة الأولى وهي وضع علامة في المكان الذي أريد أن أنتقل إليه. الخطوة التالية هي الذهاب لكلمة “المقدمة” الموجودة في قائمة المحتويات ، ومن ثم أضع عليها رابط ينتقل إلى المكان الذي وضعت فيه العلامة قبل قليل ، بهذا الشكل:

<a href=”#introduction”>المقدمة</a>

طبعاً الرابط أو الكلمة الموجودة بعد علامة # ، يجب أن تكون نفس اسم العلامة التي وضعناها بالضبط.
ويمكننا أن نضع مثلاً علامة في بداية الصفحة ، حتى نستطيع أن نضيف في أسفل الصفحة رابط للعودة إلى أعلى الصفحة إذا كانت الصفحة طويلة. وهكذا لبقية الحالات.

نصيحة:
في العلامات وأسماء صفحات HTML لاتستعملوا المسافات قدر الإمكان ، واستعملوا بدلاً منها – dashes أو _ underscores.

4- التعليقات والملاحظات :

التعليقات هي شيء أساسي في أي لغة برمجة لأن لها فوائد كثيرة ، منها أنها توضِّح لنا الفائدة والغرض من كتابة أمر معين وبالتالي يستطيع من يقرأ الأمر أن يعرف سببه ويفهمه بسهولة ، وأيضاً يساعد المبرمج الذي كتب الأمر البرمجي – إذا عاد للاطلاع عليه ليصحح بعض الأخطاء بعد مرور فترة زمنية طويلة – في تذكر سبب كتابته والفائدة منه ، وبالتالي يستطيع التعديل وتصحيح الأخطاء بسرعة و سهولة. وطبعاً التعليقات لاتظهر أبداً في المتصفحات ، وفائدتها الرئيسية هي للمبرمج نفسه وبقية المبرمجين الذي سيقرأون الكود البرمجي.

التعليقات في هذه اللغة نكتبها بالطريقة التالية:

<!– هذا الكلام لن يظهر في المتصفح وسيعتبر تعليق أو ملاحظة –>

5- عيوب لغة HTML :

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

6- مقدمة عن لغة XML :

كلمة XML هي اختصار لـ eXtensible Markup Language ، وهي لغة تم ابتكارها لتساعد على تخطي عيوب لغة HTML. فهذه اللغة قادرة على معرفة محتويات صفحات الانترنت ، وبالتالي تستطيع أن تعطي محركات البحث والمتصفحات معلومات كافية عن صفحات الانترنت.
فمثلاً لو كان لدينا موقع لبيع الكتب ، طبعاً كل كتاب سيحتوي على معلومات كثيرة مثل: اسم الكتاب ، اسم الكاتب ، سعر الكتاب ، دار النشر ، تاريخ الطبعة ، عدد الصفحات ، وغيرها. لو استعملنا لغة HTML لوحدها في تصميم هذا الموقع ، فإن محركات البحث لن تستطيع أن تميز بين اسم الكتاب وبين اسم المؤلف على سبيل المثال ، أو بين سعر الكتاب وبين عدد صفحاته. لكن عن طريق لغة XML أصبح بإمكان المتصفح ومحركات البحث التمييز بين أسعار الكتب وبين عدد صفحاتها والأرقام الأخرى التي تتعلق بها ، وبالتالي أصبحت نتائج البحث حالياً أكثر دقة وفعالية ، حيث أصبحت قادرة على وضع مقارنة بين الأسعار وخيارات لترتيب الكتب حسب حداثتها وغيرها من الميزات الأخرى.

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

للمعلومية، المنهج ذكر بأننا غير مطالبين بتعلم تفاصيل هذه اللغة:

“You are not expected to learn the details of XML.”
Source: M150, Unit 4, Section 6, Page 54

تمَّ بحمد الله
أتمنَّى أن أكون وفِّـقت في شـرح هـذه اللغـة الجـميـلـة بـبـسـاطـة وسهـولـة.
في حال وجود أخطاء إملائية أو قواعدية أو في الشرح أتمنى أن تعذروني وتبلغوني عنها حتى أقوم بتصحيحها.
أخوكم المعتصم

الأوسمة: HTML, Learner, M150A, unit-4

مدونة مادة M150

شرح لغة HTML ومقدمة عن لغة XML

قائمة المحتويات:

1- ماهي لغة HTML ؟

1- WYSIWYG :

Explicit Markup -2 :

2- مثال تطبيقي :

بعض الملاحظات الهامة:

<h1>عنوان كبير جداً</h1>

<h2>عنوان كبير</h2>

<h3>عنوان متوسط</h3>

<h4>عنوان أصغر</h4>

<h5>عنوان صغير</h5>

<h6>عنوان صغير جدا</h6>

الطريقة الأولى:

الطريقة الثانية:

3- ملخص لأهم الشفرات المستخدمة في لغة HTML

4- التعليقات والملاحظات :

5- عيوب لغة HTML :

6- مقدمة عن لغة XML :

2 تعليقات إلى "شرح لغة HTML ومقدمة عن لغة XML"

اترك رد

أقسام الموقع

ابحث في المدونة

الكلمات المفتاحية (الأوسمة – Tags)

مواقع هامة

آخر التعليقات

خدمات أخرى