بنية مستند HTML: تعلم البنية الأساسية لـ HTML

نشرت: 2020-12-14

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

لقد غيرت طريقة عمل الناس. يتم استخدام HTML و CSS لإنشاء العناصر ومعالجتها على صفحة الويب جنبًا إلى جنب مع جافا سكريبت ، يتيح HTML للمبدعين تحديد أدوار مختلفة لكل عنصر مما يمنح حرية التخصيص الكاملة في عملية الإنشاء.

يرمز HTML إلى Hyper Text Markup Language ، ويستخدم لتصميم صفحات الويب التي يتم عرضها على مواقع الويب.

هناك ثلاثة جوانب رئيسية ، عند وضعها معًا ، تساعد في إنشاء صفحة ويب.

  • بنية HTML - تدعم العناصر الهيكلية
  • نمط CSS - يساعد في التصميم ويعطي نمطًا لتلك العناصر الهيكلية
  • تفاعل JS —يمكن التفاعل بين تلك العناصر

في بنية HTML ، يتم إقران العناصر والعلامات مع بعضها البعض لتمييز المحتوى.

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

تتغير عناصر الفتح والإغلاق ، لكن العلامات تظل كما هي. يتم إدراج العلامات قبل الجمل وفي نهايتها ، مما يتيح تنسيقها على الصفحة. تتكون صفحة الويب المثالية من ثلاثة أقسام رئيسية وأساسية:

  • لقب
  • رئيس
  • الجسم

يُستخدم عنصر الرأس لإبراز بداية / عنوان قسم الرأس. يساعد قسم الرأس دائمًا كوصف للصفحة. المحتوى داخل علامات الرأس ، أي العنوان ، هو ما يتم استخدامه كمصدر لتحديد محتوى الصفحة.

المدرجة أدناه هي جميع العلامات التي يمكن استخدامها في عنصر الرأس:

  • <قاعدة>
  • <ارتباط>
  • <meta>
  • <noscript>
  • <script>
  • <ستايل>
  • <العنوان>

علي سبيل المثال:

<HEAD>

<TITLE> مثال على Hello world في HTML <TITLE>

</HEAD>

تُستخدم عناصر مستوى الكتلة لتحديد أقسام معينة من صفحة الويب ، سواء كانت فقرة أو عناوين فرعية أو بعض القوائم التي يتم إنشاؤها.

الفقرة: <P> و </ P>

العنوان ، المستوى الأول: <H1> العنوان ، المستوى الثاني: <H2> و </ H2>

القاعدة الأفقية: <HR> توسيط: <CENTER>

التذييل : لا توجد علامات خاصة للدلالة عليه ولكن لا يزال من المستحسن أن يكون لديك تذييل على صفحة الويب للمساعدة في تحديد الأقسام التي تتطلب الاتصال بالمؤلف. قد تتضمن قسمًا للأسئلة الشائعة أو بريدًا إلكترونيًا للاشتراك في رسالة إخبارية.

<HTML>

<HEAD>

<TITLE> شركة أحذية <TITLE>

</HEAD>

<الجسم>

<H1> مرحبًا بكم في أحذية مذهلة! </H1>: </H2>

<IMG SRC =. ”.http: //example.com/ images /image1.jpg”> <HR>

<CENTER> لماذا لا تزور <A HREF =..http://www.example1.com/..> مثال على موقع الويب

</A>

</CENTER>

</BODY>

</HTML>

شرح القسم أعلاه العناصر الرئيسية في صفحة ويب لهيكل HTML.

الآن ، نتحرك نحو مصدر HTML ونحاول فهم كيفية استخدامه لفهم بنية البرنامج وعناصره.

كمبتدئ ، يساعد هذا كثيرًا في فهم كيفية تطوير الصفحات الأخرى ، ويمكن استخدامها كمرجع لإنشاء نسخة مخصصة لصفحة الويب الخاصة بك.

انقر فوق الزر الأيمن في أي مكان على صفحة الويب ، ثم حدد "عرض مصدر الصفحة". سيؤدي هذا إلى فتح نافذة تحتوي على الكود المصدري للصفحة.

لتفقد الصفحة

انقر فوق الزر الأيمن في أي مكان على صفحة الويب ، ثم حدد "فحص" لرؤية قائمة وأنواع العناصر المستخدمة لإنشاء صفحة الويب المحددة هذه. سيتضمن كلاً من HTML و CSS ، والتي يمكن تعديلها من خلال لوحة النمط.

مع شرح الهيكل الأساسي لـ HTML وعلاماتها ، دعنا الآن ننتقل نحو فهم العناصر الأساسية المطلوبة لكتابة المحتوى في HTML.

<p> تُستخدم هذه العلامة في صفحة ويب عندما تكون هناك حاجة لفقرة ، ولإنهائها يتم استخدام علامة </p>.

<br> تُستخدم هذه العلامة لكسر الأسطر وغالبًا ما تستخدم لكتابة سطور مفردة ، سواء كانت جهة اتصال أو عنوان.

<hr> تُستخدم هذه العلامة لفصل محتويات صفحة الويب إلى قسمين.

يتم تنفيذ جميع العلامات هنا في نموذج تعليمة برمجية لصفحة الويب

تعلم: 21 فكرة لمشروع تطوير الويب

إدخال

<html>

<head>

<title> </title>

</head>

<الجسم>

<h1> هيكل HTML </h1>

<p>

بواسطة upGrad التعليم <br>

<hr>

تعلم الأساسيات <br>

<hr>

بواسطة upGrad التعليم <br>

</p>

</body>

</html>

صفات

لجميع العلامات المذكورة ، يتم استخدام سمة عند الحاجة إلى معلومات إضافية. يتم تحديد السمات بمعاملتين ، وهما "القيمة" و "الاسم".

هنا ، تحتوي معلمة "الاسم" على وظيفة لأخذ اسم الخاصية التي تعتبر أنها مخصصة. وللمعامل "value" وظيفة مماثلة لأخذ قيمة أسماء الخصائص المحاذاة مع العنصر.

<img> تُستخدم هذه السمة لإضافة / تضمين صورة في صفحة الويب. ستساعد هذه العلامة في تحديد مسار الصورة. ويشير <الارتفاع> و <العرض> إلى ارتفاع الصورة وعرضها ، على التوالي.

<alt> يتم تطبيق هذه السمة عندما يتعذر تحميل الصورة بسبب خطأ في الاتصال أو لسبب آخر. تعمل علامة alt كعنوان فرعي للصورة.

قم بالتسجيل في دورات هندسة البرمجيات من أفضل الجامعات في العالم. اربح برامج PG التنفيذية أو برامج الشهادات المتقدمة أو برامج الماجستير لتتبع حياتك المهنية بشكل سريع.

قراءة: 8 أفكار ومواضيع مثيرة لمشروع المكدس الكامل

مثال

<html>

<الجسم>

<h2> سمة src </h2>

<p> يتم تعريف صور HTML بعلامة img ، ويتم تحديد اسم ملف مصدر الصورة في سمة src: </p>

<img src = ”img_101.jpg” alt = "صورة فارغة" العرض = "500 ″ الارتفاع =” 600 ″>

</body>

</html>

لتغيير نمط النص وحجمه وخطه وأي وظيفة أخرى متعلقة بالنص ، يتم استخدام علامة <style>

مثال

<html>

<الجسم>

<h2> سمة النمط </ h2>

<p> تُستخدم السمة لتغيير الأنماط ، مثل اللون: </ p>

<p style = ”color: red؛”> هذه فقرة حمراء. </ p>

</body>

</html>

مع تطبيقات تعديل النص ، يوفر HTML أيضًا علامات لتعديل النص لطلبات مخصصة باستخدام هذه العلامات.

  • <b> - نص عريض
  • <strong> - نص مهم
  • <i> - نص مائل
  • <em> - نص مؤكد
  • <mark> - نص محدد
  • <صغير> - نص أصغر
  • <del> - نص محذوف
  • <ins> - نص مدرج
  • <sub> - نص منخفض
  • <sup> - نص مرتفع

لتلخيص المقال ، تعلمنا الميزات التالية وأساسيات HTML:

  • بنية HTML
  • العلامات والعناصر وأنواعها
  • العلامات الأساسية وتطبيقاتها

تساعد كل هذه الميزات والعلامات والسمات في فهم الحاجة إلى HTML.

إذا كنت مهتمًا بمعرفة المزيد حول تطوير البرامج كاملة المكدس ، فراجع برنامج upGrad & IIIT-B's Executive PG في تطوير البرامج الكامل المكدس المصمم للمهنيين العاملين ويقدم أكثر من 500 ساعة من التدريب الصارم ، 9+ مشاريع ، والمهام ، وحالة خريجي IIIT-B ، ومشاريع التخرج العملية العملية والمساعدة في العمل مع الشركات الكبرى.

استعد لمهنة المستقبل

تقدم الآن للحصول على درجة الماجستير في هندسة البرمجيات