هل HTML هي لغة برمجية؟
إن HTML هي اختصار للحروف الأولى من Hyper Text Markup Language و التي تعني (لغة وصف صفحات الويب), والجواب على السؤال المطروح أعلاه هو لا, HTML ليست لغة برمجَّية, انما هي لغة وصفَّية Markup Language, حيث تستخدم HTML مجموعة من الوسوم ـ Tags لوصف صفحة الويب.
الوسوم ـ Tags هي كلمات أو احرف Keywords , مثل <b> و <html>, تأتي الوسوم ـ وفي الغالب كل وسم له وسم البداية والنهاية, <b> </b> و <html> </html>.
لكتابة ملفات الـ HTML نحتاج الى محرر نصوص, وهي كثير فمنها المحررات البسيطة كالـ notepad أو المتقدمة كالـ DreamWaver أو Visual Studio و Sublime text, و يتم تخزينها في ملفات تحمل امتداد html.
يمثل ملف الـ HTML صفحة الويب, حيث تحتوي هذه الملفات على مجموعة من النصوص الموضوعة في داخل وسوم ـ Tags لكل وسم وظيفة مخصصة. ليتم عرض هذه النصوص على شكل صفحة ويب سنحتاج الى متصفح -Web browser, كالـ Google chrome و Firefox و Internet Explorer وغيرها الكثير.
عناصر HTML
تتكون كل صفحة HTML من مجموعة من العناصر - Elements التي يتم إنشاؤها باستخدام الوسوم ـ Tags ، كما ذكرنا سابقًا ، فهي عبارة عن أحرف أو كلمات تحمل معاني خاصة بالنسبة لمتصفح الويب. لأنشاء العنصر المسؤول عن عرض النصوص - Paragraphs داخل صفحات HTML ، والذي سيتم مناقشة عمله مع عمل باقي الوسوم بالتفصيل لاحقا.
يتم وضع الوسوم بين أقواس < > مثل الوسم <html> و <head> و <title> و<body> و <p>.
يحتوي كل عنصر HTML على وسم بداية و وسم النهاية ، وتكون وسوم البداية محصورة بهذا الشكل < >، و وسم النهاية بنفس شكل وسم البداية ، مع إضافة رمز الخط المائل المعروف باسم Slash </> وهناك أمثلة على علامات النهاية, بهذا الشكل < html/> و <head/> و <title/> و <body/> و <p/> يحتوي كل عنصر من عناصر HTML بين وسمي البداية والنهاية نص ليتم عرضه على صفحة الويب. هذه الوسوم يجب ان تكتب بترتيب معين, كل وسم بداية يجب غلقه بوسم نهايته قبل كتابة الوسم الذي يليه وهكذا.
مثال:
<html>
<body>
<p>مثال على ترتيب الوسوم</p>
</body>
</html>
الشكل العام لصفحات الـ HTML
تتكون كل صفحة HTML من ثلاث مناطق:
جسم الصفحة Body Section:
و هي المنطقة المحصورة بين وسمي <body> و <body/> وهذه المنطقة المسؤولة على إعطاء الشكل النهائي للصفحة وتضم جميع العناصر التي تمثل المحتوى المرئي الذي سيظهر في متصفح الويب ، وبالطبع ، يكون هذا الجزء يحتوي على معظم عناصر HTML.
رأس الصفحة Head Section:
و هي المنطقة المحصورة بين وسمي <head> و <head/> وتحتوي هذه المنطقة على مجموعة من عناصر HTML الغير مرئية في متصفح الويب. وتكمن أهمية هذه المنطقة في إعطاء المعلومات الرئيسية عن المحتوى الموجود في صفحة الويب والتي تستخدمها محركات البحث من أجل الارشفة والبحث.
الصفحة ككل:
و هي المنطقة المحصورة بين وسمي <html> و <html/> و هذه المنطقة هي التي تحدد بداية و نهاية الصفحة و والتي تضم منطقتي رأس الصفحة وجسم الصفحة والتي تشكل صفحة الـ HTML.
مثال:
<html>
<head>
رأس الصفحة
</head>
<body>
جسم الصفحة
</body>
</html><p align="center"> محتوى نصي مضاف إليه صفة العرض في الوسط </p>
سنقدم جدولًا يضم مجموعة من الصفات - Attributes المشتركة من بين اغلب وسوم HTML الأكثر شيوعًا:
عناصر العناوين
توفر HTML ستة عناصر لعرض الرؤوس ، وهي بالترتيب : h1 ، h2 ، h3 ، h4 ، h5 ، h6 ، حيث h1 هي الأكبر و h6 هي الأصغر ، وما بينها يتدرج في الحجم وبالطبع الحرف h هنا هو اختصار لكلمة عنوان Heading.
مثال:
<html>
<head>
<title>
اختبار عناصر العناوين
</title>
</head>
<body dir='rtl'>
<h1>المستوى الاول</h1>
<h2>المستوى الثاني</h2>
<h3>المستوى الثالث</h3>
<h4>المستوى الرابع</h4>
<h5>المستوى الخامس</h5>
<h6>المستوى السادس</h6>
</body>
</html>
عناصر تنسيق النص Text Formatting
توفر HTML مجموعة من العناصر لتنسيق النص ، مثلا لجعل النص عريضا يوفر الوسم <b> أو <strong> ذلك ، او لجعل النص مائلًا نستعمل العنصر <i> أو <em> لوضع خط اسفل النص نستخدم الوسم <u> ، و لشطب النص نستخدم الوسم <del>.
عناصر الروابط Hyper Links
توفر HTML آلية للتنقل بين الصفحات المختلفة عبر عناصر الروابط Hyper Links ، وتكون الروابط عبارة عن نصوص أو صور تنقلك عند النقر من الصفحة الحالية إلى صفحة ويب أخرى ، وتقوم متصفحات الويب بتمييز الروابط عن طريق عرض "يد صغير" كمؤشر للفأرة عند الإشارة إلى أحد الروابط ، ويتم إنشاء الروابط باستخدام الوسم <a> ، وهو اختصار لـ Anchor. يتم تزويد عنصر الارتباط بنص يتم عرضه كمحتوى إذا تم توفير موقع الهدف (الذي سيتم نقله إليه عند النقر فوق الارتباط) ويتم تزويده بالوصف href ، والتي يتم اختصارها لـ Hyper Reference.
مثال:
<html>
<head>
<title>
اختبار الروابط
</title>
</head>
<body>
<a href="http://www.microsoft.com">مايكروسوفت</a>
<br />
<a href="http://www.google.com">جوجل</a>
<br />
<a href="http://www.msn.com" target="_blank" >MSN</a>
</body>
</html>
عناصر الصور Images
توفر HTML عنصرًا خاصًا لعرض الصور ضمن الصفحة. هذا العنصر هو عنصر
<img/> (اختصارا لـ Image) ، الذي يعرض الصورة داخل الصفحة اعتمادا على مسارها الذي يمرر العنصر عبر الصفة src (اختصار لـ Source) ، كما هو الحال بالنسبة للعنصر <br/>
لا يحتوي العنصر <img/> على أي وسم نهاية ، لذلك يكون شكله العام عادةً <img src="path">.
مثال:
<html>
<head>
<title>
عرض الصور
</title>
</head>
<body>
<img src="myPic.jpg" />
</body>
</html>
القوائم Lists
توفر HTML نوعين من عناصر القوائم:
١- القوائم غير المرتبة Unordered List عبر وسم <ul>.
٢- القوائم المرتبة Ordered List عبر وسم <ol>.
بعد أن نحدد نوع القائمة التي نريد إنشاءها ، نضيف محتواها كمجموعة من عناصر <li> ، والتي تعني List Item ، المثال التالي يوضح كيفية إنشاء قائمة بسيطة غير مرتبة:
<html> <head> <title>قائمة غير مرتبة</title> </head> <body dir="rtl"> <p>عنوان القائمة</p> <ul> <li>HTML</li> <li>HTML5</li> <li>XHTML</li> <li>CSS</li> <li>CSS3</li> </ul> </body> </html>
الجداول Tables
مثال :
<html> <head> <title>انشاء جدول</title> </head> <body dir="rtl"> <table border="1" width="50%"> <tr> <td>اسم الخدمة</td> <td>السعر</td> </tr> <tr> <td>برمجة موقع الكتروني</td> <td>١٥٠</td> </tr> <tr> <td>برمجة تطبيق</td> <td>٢٥٠</td> </tr> <tr> <td>برمجة الالعاب</td> <td>٣٠٠</td> </tr> </table> </body> </html>
النتيجة:
