.jpg)
في العالم الرقمي الضخم لتطوير مواقع الويب ، تبرز لغة واحدة باعتبارها العمود الفقري مثل بناء جسم الانسان تماما لكل صفحة ويب-لغة ترميز النص الفائق وهى اختصار ل( Hypertext Markup Language ) أو لغة البرمجة الخاصة بصفحات الويب او المواقع الاليكترونية.
في حين أنها ليست لغة البرمجة التقليدية ، HTML تعتبر بمثابة أداة وصفية لمتصفحات الويب لتفسير وعرض محتويات صفحة ويب. في هذا الدليل الشامل ، سوف نتعمق في تعقيدات HTML ومكوناته الأساسية والعلامات أو العناصر المختلفة التي تشكل صفحات الويب.
في جوهرها ،HTML هي اللغة الأساسية المستخدمة وهي حجر الأساس لإنشاء مواقع الويب وصفحات الويب على الإنترنت. وهو يتكون من مجموعة من العلامات Tags، والمعروفة أيضا باسم العناصر Tags، والتي يتم تضمينها بين قوسين زاوية (< >). تصف هذه العلامات بنية ومحتوى صفحة الويب ، بما في ذلك العناوين والنصوص والصور والروابط والمزيد.
أنواع علامات HTML؟
هناك نوعان من علامات HTML:1. علامات الإغلاق الذاتي: تعرض هذه العلامات محتواها مباشرة على صفحة الويب. ومن الأمثلة على ذلك < /img > و </input>.
2. علامات الحاوية: تحتوي هذه العلامات على محتوى نصي وقد تحتوي على علامات متداخلة أخرى. وهو وسم يصف ما بداخله على سبيل المثال<p>نص بداخل العلامة</p> وهي تتكون من علامة فتح ومحتوى وعلامة إغلاق. من المهم ملاحظة أن علامتي الفتح والإغلاق تشتركان في نفس الاسم ، مع علامة الإغلاق مسبوقة بشرطة مائلة للأمام (/).
في المثال أعلاه ، يمكننا ملاحظة أن كل عنصر يتكون من علامة فتح وعلامة إغلاق والمحتوى المعروض في المتصفح. بالإضافة إلى ذلك ، استخدمنا السمات داخل العلامة ، والتي تشتمل على اسم وقيمة مقابلة. على سبيل المثال ، تشير سمة" href" إلى عنوان موقع الويب المرتبط بالرابط. من الأهمية بمكان ملاحظة أن السمات والعناصر الأخرى داخل العلامة لا تظهر على المتصفح ولكنها تعمل كارشادات للمتصفح لإنشاء ارتباط تشعبي.
أنواع HTML Tags
يشمل HTML مجموعة واسعة من العلامات التي تخدم أغراض مختلفة في هيكلة وتصميم صفحات الويب. دعنا نستكشف بعض العلامات الأكثر استخداما:
- علامات العنوان: تستخدم علامات العنوان لتحديد الهيكل الهرمي لصفحة الويب. وهي تتراوح من < h1 > إلى < h6> ، مع <h1> تدل على العنوان الرئيسي و < h6> تمثل العنوان الثانوي الأدنى.
- علامات الفقرة paragraph: تستخدم العلامات <p> لإحاطة فقرات النص. أنها توفر فصل مرئي واضح بين كتل مختلفة من المحتوى.
- علامات الصورة : < img> العلامات تمكنك من إدراج الصور في صفحة ويب. وهي تتطلب السمة"src " وهي اختصار source، وتحديد مصدر الصورة.
- أو موقعها ، والسمة" Alt" ، وتوفير نص بديل Alt Text لغرض الوصول إلى الصورة خلال العرض على الويب.
- علامات الارتباط التشعبى Links: تنشئ العلامات ارتباطات تشعبية داخل صفحة ويب أو إلى مواقع ويب خارجية. أنها تستخدم السمة" href" لتحديد عناوين Url لصفحات الويب.ويمكن أن نكتب الرابط هكذا <a href="test.html">.
إنشاء صفحة ويب مع HTML
الآن نحن لدينا فهم أساسي عن HTML وعلاماته ، دعونا نتعمق في عملية إنشاء صفحة ويب بسيطة باستخدام HTML. للبدء ، سنحتاج إلى محرر نصوص قادر على كتابة نص عادي أو كود برمجة. من أجل البساطة ، سنستخدم تطبيق Notepad المتاح على ويندوز.- افتح المفكرة notepad أو أي محرر كود آخر من اختيارك ال visual studio code مثلا.
- انتقل إلى قائمة" ملف "وحدد" حفظ باسم".
- في حقل" اسم الملف "، أدخل اسم الملف هتمل الخاص بك مع الامتداد".HTML "على سبيل المثال ، " اختبار.أتش تي أم أل".
- في حقل" حفظ كنوع "، حدد " جميع الملفات."
- اختر الترميز المناسب ، مثل UTF-8 ، لدعم الأحرف العربية.
- احفظ الملف.
بعد إنشاء الملف ، يمكننا البدء في كتابة رمز HTMLالأساسي لإنشاء صفحة الويب الخاصة بنا. بدلا من ذلك ، يمكنك نسخ ولصق التعليمات البرمجية التالية في ملف هتمل الذي تم إنشاؤه حديثا:
<!DOCTYPE html><html lang="ar"><head><meta charset="UTF-8" /><title>عنوان الصفحة</title></head><body dir="rtl"><img src="https://static.kwkb3lm.com/imgs/logo_150x96.png" alt="kwkb3lm Logo" /><h1>هذا عنوان رئيسي</h1><p>هذا محتوى لصفحة HTML بسيطة</p><a href="https://abuelfateh.com/">إضغط هنا لزيارة موقع كوكب العلم</a></body></html>
دعونا نشرح التعليمات البرمجية وفهم كل مكون:
- <!DOCTYPE html>: يحدد هذا الإعلان إصدار هتمل المستخدم ، في هذه الحالة ، هتمل 5.
- <html lang="ar">: تشير هذه العلامة إلى أن الكود مكتوب بلغة أتش تي أم أل وأن المحتوى سيكون باللغة العربية. السمة " لانغ "يدل على رمز اللغة ،" ع " في هذا المثال.
- <head>: يحتوي هذا القسم على بيانات وصفية وإرشادات للمتصفح ، مثل ترميز الأحرف عنوان صفحة الويب.
- <meta charset="UTF-8" />: تحدد هذه العلامة الوصفية ترميز الأحرف على أنه utf-8 ، مما يسمح للمتصفح بتفسير الأحرف العربية بشكل صحيح.
- <title>عنوان الصفحة</title>: تحدد علامة العنوان عنوان صفحة الويب التي تظهر في شريط عنوان المتصفح أو علامة التبويب.
- <body dir="rtl">: تشمل علامة الجسم المحتوى المرئي لصفحة الويب. يتم تعيين سمة " دير "إلى" رتل " (من اليمين إلى اليسار) لضمان المحاذاة الصحيحة للنص العربي.
- < img>: تدرج هذه العلامة الصورة في صفحة الويب. تحدد السمة " سرك "مصدر الصورة ، وتوفر السمة" ألت " نصا بديلا لإمكانية الوصول.
- < h1>: تمثل علامة العنوان هذه العنوان الرئيسي لصفحة الويب.
- <p>: تحتوي علامة الفقرة على محتوى نصي داخل فقرة.
- <a>: تقوم هذه العلامة بإنشاء ارتباط تشعبي. تحدد السمة" href" عنوان url الوجهة.
باتباع هذه الخطوات أو باستخدام بعض التعليمات البرمجية المتوفرة ، يمكنك إنشاء صفحة ويب بسيطة باستخدام html. تذكر حفظ الملف مع الامتداد المناسب .تمديد html وفتحه مع متصفح ويب لرؤية الصفحة المصممة.
قوة لغة HTML
HTML تعتبر بمثابة الأساس لكل موقع على شبكة الإنترنت. قدرتها على هيكلة المحتوى وإدراج عناصر الوسائط وإنشاء ارتباطات تشعبية links تجعلها لغة أساسية لتطوير الويب. من خلال إتقان HTML، يمكنك الحصول على القدرة على تشكيل الجوانب البصرية والهيكلية لصفحات الويب ، وتوفير تجربة جذابة للمستخدمين وذلك عن طريق لغة CSS.بينما أنت تواصل رحلتك في تطوير الويب ، من المهم استكشاف مجموعة واسعة من علامات HTML TAGS ووظائفها. إن فهم كيفية الاستفادة من كل علامة بشكل فعال سوف يعزز قدرتك على إنشاء صفحات ويب مذهلة وتحسينها لمحركات البحث.
الآن أن لديك فهم قوي عن HTML يمكنك الانتقال إلى مواضيع أكثر تقدما مثل CSS لتصميم صفحات الويب أو جافا سكريبت java script لإضافة التفاعل مع الصفحات المتحركة . الاحتمالات لا حصر لها ، ومع html كالاساس الخاص بك ، فانت مجهزة تجهيزا جيدا للتنقل في عالم دائم التطور من تطوير صفحات الويب.
وفي النهاية،HTML ، لغة ترميز النص التشعبي ، هي حجر الأساس لكل صفحة ويب على الإنترنت. من خلال مجموعتها من العلامات أو العناصر ، يوفر هتمل الهيكل والمحتوى اللازم لمتصفحات الويب لتفسير وعرض صفحات الويب بدقة. من خلال إتقان هتمل ، يمكنك الحصول على القدرة على تشكيل الجوانب البصرية والهيكلية لصفحات الويب ، وخلق تجارب جذابة للمستخدمين.
خلال هذا الدليل ، قمنا باستكشاف أساسيات لغة HTML ، بما في ذلك أنواع مختلفة من العلامات Tags ، واستخدامها ، وكيفية إنشاء صفحة ويب أساسية. مع هذه المعرفة ،أنت على استعداد للشروع في رحلة تطوير الويب الخاص بك واستكشاف مفاهيم أكثر تقدما.
تذكر ،html هو مجرد غيض من فيض في تطوير المواقع الاليكترونية وتصميم صفحات الويب. كما يمكنك التعمق في مجال تطوير الشبكة ، سوف تواجه لغات وتقنيات إضافية تكمل HTML، مثل CSS وجافا سكريبت . ستسمح لك هذه الأدوات بنقل صفحات الويب الخاصة بك إلى المستوى التالي ، مما يخلق تجربة تفاعلية مذهلة بصريا لجمهورك.
لذلك ، معرفة قوة HTML، مع معرفة علاماته أو التاج TAGS الاساسية، والاستمرار في توسيع معرفتك لتطوير الشبكات والمواقع. المشهد الرقمي يتطور باستمرار وبسرعة عالية جدا ، ومن خلال كونك شغوفا و قابلا للتكيف ، ستكون مهيأة جيدا للتقدم في عالم تطوير الويب المثير.
أتمني لك القارئ العزيز أن تكون قد استفدت، واتمنى من الله التوفيق لكم جميعا.