البرمجة

تعلم HTML: أساسيات تطوير الويب

اخر تحديث 14/05/2025
25 تمت قراءة 4 دقيقة

تعلم لغة HTML: أساسيات تطوير المواقع الإلكترونية

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

ما هي لغة HTML؟

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

مواضيع ذات صلة

على سبيل المثال، إذا أردنا إضافة عنوان صفحة على الإنترنت، سنستخدم وسم

الذي يمثل العناوين الرئيسية. إذا أردنا إضافة فقرة من النصوص، سنستخدم وسم

.

تاريخ HTML

تم إنشاء HTML في أواخر الثمانينات من قبل “تيم بيرنرز-لي”، الذي كان يعمل في CERN (منظمة الأبحاث النووية الأوروبية). الهدف الأساسي من HTML كان إنشاء لغة موحدة لعرض المستندات على الإنترنت باستخدام الروابط التشعبية (hyperlinks). مع مرور الوقت، تطورت HTML بشكل كبير لتشمل العديد من العناصر التي تُسهم في بناء صفحات الإنترنت المعقدة.

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

عناصر HTML الأساسية

الوسوم (Tags)

الوسم (tag) هو العنصر الأساسي في HTML. يتم تحديده باستخدام زاويتين < >، مثل:

  • : وسم بدء مستند HTML.

  • : يحدد القسم الخاص بالبيانات الوصفية (metadata) مثل العنوان (title) والروابط الخاصة بالملفات الخارجية (مثل ملفات CSS).

  • : يمثل القسم الذي يحتوي على المحتوى الفعلي الذي يظهر للمستخدم.

الوسوم الأساسية

  1. الوسم : يُستخدم هذا الوسم لتحديد بداية ونهاية مستند HTML.

    html
    <html>
  
html>

  2. الوسم : يحتوي هذا الوسم على البيانات الوصفية للمستند، مثل العنوان (title) وأوراق الأنماط (CSS) والسكريبتات (JavaScript).

    html
    <head>
  <title>عنوان الصفحةtitle>
head>

  3. الوسم : يحتوي هذا الوسم على المحتوى الفعلي للصفحة، مثل النصوص والصور والفيديو.

    html
    <body>
  <h1>مرحباً بكم في موقعناh1>
  <p>هذه هي الفقرة الأولى في الصفحة.p>
body>

العناوين (Headings)

العناوين هي واحدة من العناصر الأكثر استخدامًا في HTML لتنظيم المحتوى. يوجد 6 مستويات من العناوين تبدأ من

(أعلى مستوى) إلى

(أدنى مستوى).

html
<h1>عنوان رئيسيh1>
<h2>عنوان فرعيh2>
<h3>عنوان ثالثh3>

الفقرات (Paragraphs)

الفقرات تُستخدم لتنظيم النصوص داخل الصفحة. يتم استخدام الوسم

لإنشاء فقرة.

html
<p>هذه هي فقرة نصية.p>

الروابط (Links)

تُستخدم الروابط لربط صفحات ويب مختلفة معًا. يتم استخدام الوسم لتحديد الرابط.

html
<a href="https://www.example.com">زيارة موقع Examplea>

الصور (Images)

تُستخدم الصور لإضافة الصور التوضيحية أو الجمالية للموقع. يتم استخدام الوسم لذلك، ويتطلب تحديد مصدر الصورة باستخدام السمة src.

html
<img src="image.jpg" alt="وصف الصورة">

تنسيق النصوص في HTML

تسمح HTML بتنسيق النصوص بطرق متعددة باستخدام الوسوم المناسبة. يمكن تعديل النصوص لتكون عناوين، فقرات، قوائم مرتبة أو غير مرتبة، كما يمكن إضافة خطوط فاصلة أو تلوين النصوص باستخدام CSS.

قوائم النقاط (Unordered List)

القوائم غير المرتبة تستخدم لإدراج العناصر التي لا تحتاج إلى ترتيب معين. يتم استخدامها مع الوسم