ما هي أساسيات HTML؟
نشرت: 2023-09-25HTML (لغة ترميز النص التشعبي) هي لبنة أساسية في تصميم الويب في مقاطعة أورانج. إنها لغة ترميزية تُستخدم لإنشاء بنية صفحة الويب ومحتواها وهي أساس جميع مواقع الويب. ربما واجه جميع مصممي الويب لغة HTML في حياتهم المهنية!
HTML هي اللغة القياسية المستخدمة لإنشاء صفحات الويب الثابتة، وهي صفحات لا تتغير بدون تحرير يدوي لكود HTML، مما يعني أنه لا يمكن للمستخدمين التأثير عليها.
أساسيات HTML
HTML عبارة عن مجموعة من العناصر أو العلامات، ويمثل كل عنصر مكونًا محددًا لصفحة الويب. يبدو بسيطا، أليس كذلك؟ هذا لأنه كذلك! يتم إنشاء مستندات HTML هذه باستخدام محرر نصوص ويتم حفظها بامتداد .html. يجب أن يحتوي مستند HTML الأساسي على العناصر التالية حتى يعمل بشكل صحيح:
إعلان <!DOCTYPE>
يعمل إعلان <!DOCTYPE> بمثابة الإجراء الافتتاحي لمستند HTML الخاص بك، مما يمهد الطريق عن طريق إعلام المتصفح بالإصدار المحدد من HTML الذي تستخدمه. فكر في الأمر كمقدمة ودية تقول: "مرحبًا أيها المتصفح، سوف نرقص على إيقاع HTML5!" HTML5 هو النجم الحالي للعرض في عالم تطوير الويب، وهو يقدم عددًا كبيرًا من الميزات والتحسينات المثيرة للجدول. لذلك، عندما تقوم بتضمين هذا الإعلان، فإنك تخبر المتصفح بشكل أساسي بالاستعداد لتجربة HTML حديثة ومليئة بالميزات. إنها طريقتك لضمان تقديم محتوى الويب الخاص بك بشكل صحيح والاستفادة من جميع إمكانيات HTML5 الرائعة.
<!DOCTYPE html>
العنصر <HTML>
فكر في العنصر <html> باعتباره العنصر الرئيسي في مستند HTML الخاص بك. إنه الرئيس، والكلب الأعلى، والشخص الذي يبقي كل شيء منظمًا. مثلما يدير الرئيس شركة، فإن العنصر <html> يدير صفحة الويب بأكملها. إنها نقطة البداية والحاوية لجميع العناصر الأخرى التي ستستخدمها لإنشاء محتوى الويب الخاص بك.
داخل عنصر <html> هذا، ستجد مخططًا لصفحة الويب الخاصة بك، بما في ذلك عنصري <head> و<body>. يحتوي العنصر <head> على معلومات مهمة حول مستندك، مثل العنوان والعلامات الوصفية والروابط إلى الموارد الخارجية. وفي الوقت نفسه، يحتوي عنصر <body> على كل المحتوى المرئي الذي يراه المستخدمون عند زيارتهم لموقع الويب الخاص بك.
لذا، باختصار، عنصر <html> هو الصورة الكبيرة، والقائد الأعلى، والمنظم النهائي لمستند HTML الخاص بك. فهو يضمن أن كل شيء يسير بسلاسة وأن صفحة الويب الخاصة بك منظمة ومقدمة بشكل صحيح لجمهورك.
عنصر <الرأس>
يشبه عنصر <head> عقل المستند الخاص بك، حيث يحتوي على معلومات مهمة مثل العنوان والعلامات الوصفية والروابط لأشياء رائعة مثل أوراق الأنماط والبرامج النصية. لذلك، على الرغم من أن عنصر <head> قد لا يكون مرئيًا على صفحة الويب الخاصة بك، إلا أنه يلعب دورًا حيويًا في ضمان ظهور موقعك بشكل رائع وأداء جيد وتواصل فعال مع كل من المستخدمين ومحركات البحث. إنه يشبه مركز القيادة الذي يساعد صفحة الويب الخاصة بك على العمل بأفضل حالاتها.
عنصر <العنوان>
يحدد العنصر <title> عنوان المستند الذي يظهر في شريط عنوان المتصفح. إنه ليس مجرد متطلب تقني ولكنه أيضًا أداة قوية للتواصل. تعد صياغة عنوان واضح وموجز وذو صلة أمرًا ضروريًا لضمان سهولة التعرف على صفحة الويب الخاصة بك والوصول إليها وجاذبيتها لكل من المستخدمين ومحركات البحث.
عنصر <الجسم>
يحتوي العنصر <body> على كافة محتويات صفحة الويب، مثل النصوص والصور ومقاطع الفيديو والعناصر الأخرى. إنها تشبه المسرح الرئيسي في المسرح، حيث تتم كل الأحداث في مستند HTML الخاص بك. إنها واحدة من اللبنات الأساسية لأي صفحة ويب، ودورها واضح تمامًا ولكنه أساسي: فهو يحتوي على كل المحتوى المرئي الذي يراه المستخدمون عند زيارتهم لموقع ويب.
عناصر HTML
يتم تضمين عناصر HTML في علامات الفتح والإغلاق، محاطة بأقواس زاوية. تبدأ العلامة الافتتاحية باسم العنصر، متبوعة بأي سمات في شكل أزواج من الاسم والقيمة. علامة الإغلاق هي نفس علامة الفتح تمامًا، ولكنها تحتوي على شرطة مائلة للأمام (/) قبل اسم العنصر كنوع من الملاحظة الختامية.
على سبيل المثال، تقوم التعليمة البرمجية التالية بإنشاء صفحة HTML بسيطة:
<!DOCTYPE html>
<أتش تي أم أل>
<الرأس>
<title>صفحتي الأولى بتنسيق HTML</title>
</الرأس>
<الجسم>
<h1>مرحبًا بك في موقع الويب الخاص بي</h1>
<p>هذه هي صفحتي الأولى بتنسيق HTML.</p>
</الجسم>
</html>
هنا، العنصر <html> هو العنصر الجذر، ويحتوي على العنصرين <head> و<body>. يحتوي العنصر <head> على العنصر <title> الذي يحدد عنوان المستند. يحتوي العنصر <body> على محتوى الصفحة، والذي يتضمن عنوانًا وفقرة. في مستند HTML النموذجي، يجب أن تبدأ بالعنصر الأكبر أولاً (في هذه الحالة، HTML) ثم تنتقل إلى الأجزاء الأصغر أثناء إنشاء الصفحة (على سبيل المثال، الرأس، العنوان، النص الأساسي، وما إلى ذلك).
سمات HTML
توفر سمات HTML معلومات إضافية حول عنصر ما ويتم تضمينها في علامة الفتح. إنهم يعملون نوعًا ما كواصف. تشمل السمات الأكثر شيوعًا ما يلي:
سمة المعرف
تحدد سمة المعرف عنصرًا وفي JavaScript وCSS للتعامل مع العنصر.
سمة الطبقة
تقوم سمة الفئة بتجميع العناصر معًا، مما يسمح بتصميمها باستخدام CSS.
سمة النمط
سمة النمط هي ميزة HTML أنيقة تتيح لك تطبيق الأنماط مباشرة على عنصر فردي، مباشرة في تعليمات HTML البرمجية. إنه يشبه إعطاء هذا العنصر المعين تغييرًا في الموضة، وتحديد أشياء مثل الألوان والخطوط والمسافات دون الحاجة إلى إنشاء ورقة أنماط منفصلة. يمكن أن يكون هذا مفيدًا عندما تريد إجراء تغيير سريع لمرة واحدة على مظهر أحد العناصر دون التأثير على بقية أنماط موقع الويب الخاص بك. لذا، فهي أداة الانتقال الخاصة بك لإضافة لمسة من التفرد إلى عناصر محددة في تصميم الويب الخاص بك.
سمة هريف
يتم استخدام سمة href في الروابط لتحديد عنوان URL للصفحة الوجهة.
خاتمة
HTML هو أساس تصميم الويب وهو ضروري لإنشاء صفحة ويب جيدة التنظيم. إنها الخطوات الأولى لموقع ويب متكامل! وبالتالي، يعد فهم أساسيات HTML أمرًا ضروريًا لأي شخص يريد إنشاء موقع ويب. HTML هي لغة ترميزية تشتمل على العناصر والسمات والمحتوى. يمثل كل عنصر مكونًا محددًا لصفحة الويب، وتوفر السمات معلومات إضافية حول العنصر. باستخدام لغة HTML، يمكنك الحصول على العناصر اللازمة لإنشاء موقع ويب منظم وجذاب بصريًا وتفاعلي.
راجع المقالة ذات الصلة هنا: https://www.drivetrafficmedia.com/the-different-coding-languages-of-web-design/
