19 علامات HTML شائعة الاستخدام يجب معرفتها للمبتدئين
نشرت: 2022-12-08إذا كنت تريد أن تصبح مطورًا للواجهة الأمامية ، فإن إحدى النصائح الأكثر شيوعًا التي ستحصل عليها هي تعلم HTML. لغة ترميز النص التشعبي ، والمختصرة باسم HTML ، هي أساس معظم صفحات الويب.
يتكون HTML من أشياء مختلفة ، مثل العلامات والسمات والعناصر. سيكون تركيزنا على علامات HTML. نستخدم علامات HTML لإخبار المتصفحات بكيفية تنظيم المحتوى في عناوين وعناوين وفقرات وصور وغير ذلك الكثير. وبالتالي ، فإن علامات HTML تشبه الكلمات الرئيسية التي تحدد كيفية عرض المتصفح أو تنسيقه للمحتوى.
تقرأ الخوادم علامات HTML من أعلى إلى أسفل. لا توجد قيود على عدد علامات HTML التي يجب أن تحتويها صفحة الويب.
- يتم تضمين كافة علامات HTML في
<> - تؤدي كل علامة HTML وظيفة مختلفة
- معظم علامات HTML بها فتح
<tag>وإغلاق</tag>
علامات HTML مقابل عناصر HTML مقابل سمات HTML
يستخدم معظم الأشخاص المصطلحات علامات وعناصر HTML بالتبادل. لكن هل هم نفس الشيء؟ من الناحية الفنية ، تختلف عناصر HTML وعلامات HTML.
تحدد علامات HTML عناصر HTML. لتحقيق ذلك ، يتم تغليف المحتوى باستخدام اسم علامة فتح وإغلاق يتطابق مع محتوى العلامة التي نعمل معها.
هذا مثال على عنصر HTML:
<p> This is a paragraph </p><p> مثال على علامة HTML
توفر سمات HTML معلومات إضافية حول عناصر HTML في المستند. تم العثور على السمات داخل عناصر HTML.
هذا مثال على سمة HTML
<button id=" SubmitOrder" class="btn">Order</button>علامات HTML يجب أن يعرفها الجميع
لقد تطورت HTML كلغة ترميز على مر السنين منذ أن قدمها Tim Berners-Lee في عام 1993. وكان أول إصدار HTML يحتوي على 18 علامة. يتم إضافة علامات جديدة مع كل إصدار HTML ؛ أحدث ترقية كانت HTML5 في عام 2014.
تُظهر المقارنة الوثيقة بين HTML و HTML5 أن الأخير يحتوي على علامات دلالية مثل <article> و <header> و <footer> التي تصف المحتوى بوضوح. لدينا الآن أكثر من 100 علامة HTML. فيما يلي بعض العلامات الأكثر شيوعًا التي يجب أن تعرفها:
<! DOCTYPE>
DOCTYPE ليس علامة من الناحية الفنية ولكنه تصريح يخبر المتصفح بنوع الملف الذي سيتم تحميله. تخبر هذه العلامة المتصفح بنوع HTML الذي سيتم تحميله.
في HTML5 ، يمكنك التصريح عن ملفك كملف
<!DOCTYPE html>أو
<!doctype html>ملاحظة: لا يحتوي الإعلان على علامة إغلاق ولا يتأثر بحالة الأحرف.
<html> </html>
تأتي العلامة <html>… .. </html> بعد علامة DOCTYPE. تحدد هذه العلامة المستند كصفحة ويب ؛ سيتم تضمين كل عنصر آخر في الداخل. تحدد علامة HTML بداية ونهاية مستند HTML.
يتم تمثيل علامة <html> كـ ؛
<html>Content</html><head> </head>
يتم تمثيل قسم الرأس في مستند HTML بعلامة <head>. هذه العلامة مضمنة داخل علامة <html> وتقدم معلومات عامة حول صفحة الويب.
تحتوي علامة <head> على علامات أخرى تقدم تفاصيل عن صفحة الويب ، مثل عنوان الصفحة ومؤلفها. لا يتم عرض محتويات هذه العلامة على صفحة الويب
هذا هو بناء الجملة لعلامة <head> ؛
<head> …….. </head><title> </title>
تعلن العلامة <title> عن عنوان صفحة الويب. هذه العلامة مضمنة في علامة <head>. ستظهر علامة <title> على شريط العنوان أو علامة التبويب في نافذة المتصفح ولكن ليس على صفحة الويب الفعلية.
بناء الجملة لعلامة <title> هو ؛
<title>HTML Tags for Beginners</title>عندما تكون داخل علامة <head> ، ستظهر كـ ؛
<head> <title>HTML Tags for Beginners</title> </head><body> </body>
تعرض علامة <body> كل المحتوى المرئي على صفحة الويب. يمكن العثور على الصور والروابط والنص العادي ومقاطع الفيديو والمزيد داخل علامتي <body> و </ body>.
تتضمن بعض العلامات الأخرى التي ستجدها داخل النص علامة <p> للفقرة و <a> علامة للصور و <strong> علامة للنص الغامق وعلامة <ol> لقائمة مرتبة ، على سبيل المثال لا الحصر.
صيغة العلامة <body> هي ؛
<body> Content </body><h1> إلى <h6> العلامات
يمكن أن يكون هناك ما يصل إلى 6 علامات عناوين في مستند HTML. يتم تمثيل كل علامة برقم يبدأ من 1 إلى 6 مثل <h1> و <h2> و <h3> و <h4> و <h5> و <h6>.
H1 هي أكبر علامة عنوان ، بينما H6 هي الأصغر.
في مستند HTML ، يمكن تمثيل علامات العناوين على النحو التالي:
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>يتم تضمين العلامات من <h1> إلى <h6> داخل علامة <body>.
على سبيل المثال ، سيتم وضع علامة <H1> كـ ؛
<body> <h1> This is heading 1 >/h1> </body><p> </p>
يتم استخدام <p> </p> أو ببساطة علامة الفقرة عندما تريد هيكلة المحتوى في فقرة. لن يؤدي الضغط على زر "إدخال" في مستند HTML في محرر التعليمات البرمجية إلى إنشاء فقرة جديدة.
إذا كنت تريد أكثر من فقرة واحدة ، فيجب عليك استخدام العديد من علامات <p> </p> في المستند الخاص بك. يجب وضع علامات الفقرة داخل علامة <body>.
بناء الجملة لعلامة فقرة هو ؛
<p> ….some content here….</p>إذا كنت ترغب في الحصول على أربع فقرات ، فسيتم تنظيم الكود الخاص بك على النحو التالي ؛
<body> <p>Content for first paragraph.</p> <p>Content for the second paragraph.</p> <p>Content for the fourth paragraph.</p> </body><b> </b>
ستعمل العلامة <b> </b> أو العلامة الغامقة ببساطة على تنسيق أي محتوى بين <b> الافتتاح والختام </ b> بالخط العريض.
يمكن أن تكون العلامة الغامقة بين عنوان مثل H1 أو حتى داخل علامة فقرة.
هذه أمثلة على علامة غامقة ؛
<b> Bold Tag </b>ستظهر عبارة "Bold Tag" بالخط العريض.
<h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1>سيتم كتابة النسخة الخامسة بخط عريض.
<i> </i>
العلامة المائلة ، التي يُشار إليها بـ <i> ، تجعل النص مائلًا داخل العلامات.
على سبيل المثال ، إذا كان لدينا
<i> These are italics </i>ستظهر الكلمات " هذه مائلة " بخط مائل.
<u> </u>
يتم استخدام علامة التسطير ، أو <u> ، عندما تريد تسطير جزء معين من النص في مستند HTML.
على سبيل المثال ، إذا كان لدينا ؛
<u> underline these words </u>سيتم تسطير العبارة بين العلامات.
<center> </center>
تُستخدم علامة المركز ، <center> ، لتوسيط المحتوى في مستند HTML.
على سبيل المثال ، إذا كانت لدينا علامة h2 مكتوبة كـ <h2> Centering Content in HTML </h2> ، فيمكننا توسيطها على النحو التالي ؛
<center> <h2> Centering Content in HTML </h2> </center><span> </span>
علامة Span ، <span> ، هي حاوية مضمنة عامة لا تأتي بنمط افتراضي. يمكنك استخدام علامة span لتجميع النصوص التي تريد تنسيقها.
يمكنك تمديد علامة داخل علامات أخرى مثل العناوين والفقرات ؛
<h2> Learn HTML <span> from experts </span> and be ready for the market </h2> <p> Learn HTML <span> from experts </span> and be ready for the market </p><div> </div>
علامة القسمة ، والمختصرة باسم div ، هي علامة تسمح لك بتجميع علامات مختلفة في مستند HTML.
يمكن إعطاء علامة div "فئة" لإضافة نمط خارجي باستخدام CSS.
هذه هي الطريقة التي يتم بها تمثيل div الذي يحوي علامة h1 و h2 وعلامة فقرة.
<div > <h1> Learn HTML </h1> <h2> HTML Tags </h2> <p> HTML is a markup language……… </p> </div><em> </em>
يستخدم التركيز ، أو <em> العلامة ، للتأكيد على كلمات معينة في مستند HTML.
سيظهر المحتوى بين العلامات <em> مائلًا أو مائلًا.
يمكن أن يظهر المحتوى الذي تم التأكيد عليه داخل فقرة في محرر التعليمات البرمجية كما يلي ؛
<p> The meeting will start at <em> 0800 hrs </em>, please keep time </p><sup> </sup>
تسمح العلامة <sup> أو علامة superscript للنص المرفق بأن يكون فوق البقية. وخير مثال على ذلك هو عندما تريد تربيع رقم X وتمثيله رياضيًا لتعطيك X 2
سيكون بناء الجملة لـ <sup> داخل علامة فقرة ؛
<H1> Harveys <sup>TM </sup> Company Limited </H1><sub> </sub>
العلامة المنخفضة أو <sub> هي عكس العلامة المرتفعة. سيظهر المحتوى المضمن في علامة <sub> أسفل السطر العادي للنص. وخير مثال على ذلك هو كتابة الصيغة الكيميائية للماء على شكل H 2 0.
سيكون بناء الجملة للعلامة المنخفضة ؛
Remember that H <sub> 2 </sub> 0 is the chemical formula for water<br>
<br> هي علامة ذاتية الإغلاق تعني فاصل. سيبدأ كل المحتوى بعد <br> في سطر جديد.
سيكون بناء الجملة لـ <br> داخل فقرة ؛
<p> HTML is the abbreviation of Hypertext Markup Language <br> There has been an ongoing debate as to whether it is a programming language or not <br> However, we cannot downplay its importance <br> HTML has been used in more than 95% of websites today </p><ol> </ol> و <li> </li>
يجب استخدام علامة القائمة المرتبة أو <ol> مع علامة أخرى مثل <li>.
يمكن أن يظهر الاثنان على محرر التعليمات البرمجية كـ ؛
<ol> <li> Asia </li> <li> Africa </li> <li> Europe </li> </ol>عند عرضها على المتصفح ، ستظهر المحتويات مرقمة.
<img src = ”” />
قد ترغب في إضافة صورة لجاذبية بصرية أو حتى شعار. تكون علامة الصورة ذاتية الإغلاق ، <img src = ”” /> مفيدة في مثل هذه الحالة.
سيكون بناء الجملة لعلامة الصورة ؛
<img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/>يمثل المحتوى المضمن في علامات الاقتباس عنوان URL المصدر.
تغليف
يوجد أكثر من 100 علامة HTML ، ولكن ما سبق هو العلامات التي يجب أن تعرفها كمبتدئ. يتم دعم HTML في معظم برامج تحرير التعليمات البرمجية ، وبالتالي فأنت متأكد من أنك لن تخطئ أبدًا عند بدء التعلم.