.png)
لغة HTML هي لغة توصيف النص الفائق (HyperText Markup Language)
، وهي لغة توصيف تستخدم في إنشاء وتصميم صفحات ومواقع الويب. وتعتبر هذه اللغة من أقدم اللغات وأوسعها استخداما في تصميم صفحات الويب.
بنية لغة HTML
تتكون صفحات HTML من مجموعة من العناصر (Tags) أو تعرف كــ الوسوم، يكتب كل وسم بين (angle brackets) أو كما تسمى علامة أصغر من وعلامة أكبر ولا يقوم المتصفح عادة بعرض تلك الوسوم، و يقوم بعرض محتوياتها فقط، ويوجد نوعين من الوسوم:
الوسم الزوجي وهو عبارة عن وسم له بداية ونهاية. نهاية الوسم الزوجي تكون بإضافة الرمز / في أول إسم الوسم فقط. كمثال بسيط، الوسم الزوجي
- p. نبدأه بالوسم
- <p>
- وننهيه بالوسم
- </p>
- p. نبدأه بالوسم
الوسم الفردي وهو عبارة عن وسم يتم عرض محتواه مباشرة في صفحة الويب، مثال img و input
أمثلة على الوسوم
فيما يلي بعض الأمثلة على الوسوم المستخدمة في لغة HTML:
- وسم الفقرة (p): يستخدم لإنشاء فقرة من النص.
- وسم عنوان (h1-h6): يستخدم لإنشاء عنوان من مستوى معين.
- وسم الصورة (img): يستخدم لإدراج صورة في صفحة الويب.
- وسم القائمة (ul, ol): يستخدم لإنشاء قائمة.
- وسم الجدول (table): يستخدم لإنشاء جدول.
استخدام لغة HTML
لإنشاء صفحة HTML، يجب أولا إنشاء ملف نصي جديد، ثم حفظه بتنسيق .html أو .htm. ثم يمكن كتابة أكواد HTML في هذا الملف.
فيما يلي مثال بسيط على صفحة HTML:
<!DOCTYPE html>
<html lang="ar">
<head>
<title>عنوان الصفحة</title>
</head>
<body>
هذا هو نص الصفحة.
</body>
</html>هذا المثال ينشئ صفحة HTML بها عنوان ونص بسيط.
الخصائص (Attributes)
يمكن للوسوم أن تحتوي على خصائص (Attributes) لتحديد خصائص معينة للمحتوى الموجود بين الوسم. على سبيل المثال، يمكن للوسم <p> استخدام الخاصية align لتحديد محاذاة الفقرة.
فيما يلي مثال على استخدام الخاصية align:
<p align="center">هذا هو نص الفقرة، محاذى إلى الوسط.</p>هذا المثال سيعرض الفقرة محاذة إلى الوسط.
فيما يلي بعض التفاصيل الإضافية حول العناصر الأساسية في صفحات HTML:
العنوان (head): يحتوي العنوان (head) على معلومات حول الصفحة، مثل عنوان الصفحة ووصفها. يتم استخدام هذه المعلومات من قبل محركات البحث لفهم الصفحة وترتيبها في نتائج البحث.
الجسم (body): يحتوي الجسم (body) على المحتوى الرئيسي للصفحة، مثل النص والصور والجداول.
العنوان (h1-h6): يستخدم العنوان (h1-h6) لإنشاء عنوان من مستوى معين. يشير العنوان h1 إلى العنوان الرئيسي للصفحة، بينما يشير العنوان h2 إلى عنوان فرعي، وهكذا.
الفقرة (p): يستخدم الفقرة (p) لإنشاء فقرة من النص.
الصورة (img): يستخدم الصورة (img) لإدراج صورة في صفحة الويب.
القائمة (ul, ol): يستخدم القائمة (ul, ol) لإنشاء قائمة. يمكن أن تكون القائمة مرتبة حسب الترتيب الأبجدي أو الترتيب العددي.
الجدول (table): يستخدم الجدول (table) لإنشاء جدول. يمكن استخدام الجداول لتخزين وعرض البيانات بتنسيق منظم.
خصائص الوسوم (Attributes)
يمكن للوسوم أن تحتوي على خصائص (Attributes) لتحديد خصائص معينة للمحتوى الموجود بين الوسم. على سبيل المثال، يمكن للوسم <p> استخدام الخاصية align لتحديد محاذاة الفقرة.
فيما يلي مثال على استخدام الخاصية align:
<p align="center">هذا هو نص الفقرة، محاذى إلى الوسط.</p>هذا المثال سيعرض الفقرة محاذة إلى الوسط.
هناك العديد من الخصائص المختلفة التي يمكن استخدامها مع الوسوم في لغة HTML. يمكن العثور على قائمة بجميع الخصائص الممكنة في وثائق لغة HTML.
العناصر الأساسية في صفحات HTML
فيما يلي بعض العناصر الأساسية في صفحات HTML:
- العنوان (head): يحتوي على معلومات حول الصفحة، مثل عنوان الصفحة ووصفها.
- الجسم (body): يحتوي على المحتوى الرئيسي للصفحة، مثل النص والصور والجداول.
- العنوان (h1-h6): يستخدم لإنشاء عنوان من مستوى معين.
- الفقرة (p): يستخدم لإنشاء فقرة من النص.
- الصورة (img): يستخدم لإدراج صورة في صفحة الويب.
- القائمة (ul, ol): يستخدم لإنشاء قائمة.
- الجدول (table): يستخدم لإنشاء جدول.
تطبيقات لغة HTML
تستخدم لغة HTML في مجموعة واسعة من التطبيقات، بما في ذلك:
- إنشاء صفحات الويب.
- إنشاء تطبيقات الويب.
- إنشاء صفحات البريد الإلكتروني.
- إنشاء ملفات PDF.
مستقبل لغة HTML
تستمر لغة HTML في التطور، مع إضافة ميزات جديدة باستمرار. على سبيل المثال، يوفر الإصدار الأخير من لغة HTML، HTML5، دعمًا لعناصر جديدة مثل علامات الفيديو والصوت.
خاتمة
لغة HTML هي لغة أساسية في تطوير صفحات الويب. من خلال تعلم أساسيات لغة HTML، يمكنك إنشاء صفحات ويب جذابة وتفاعلية.
.png)