عناصر وعلامات html شرح بعض العناصر والعلامات والوسم الخاص بhtml
عناصر وعلامات html
HTML هو اختصار لـ Hyper MArkupe Language. إنها اللغة القياسية لوضع علامات على محتويات متصفحات الويب.
يتم تمثيل HTML بواسطة "العناصر". تعرف العناصر أيضًا باسم "العلامات".
2 - لماذا تحتاج HTML؟
3- هل حالة HTML حساسة؟
خطوات لإنشاء ملف HTML الأول الخاص بك
- قم بتثبيت محرر التعليمات البرمجية
- افتحه
- قم بإنشاء ملف جديد
- احفظه كملف .html
مبروك! لقد قمت بإنشاء ملف HTML الأول الخاص بك. ليس لديك لفهم ذلك في هذه المرحلة. سوف نغطيها قريبا.
شرح الاكواد داخل المربع
1: <! DOCTYPE html> = إنه تصريح للمتصفح بأن هذا ملف HTML. يجب عليك تحديده قبل علامة <html>.
2: <html> </ html> = هذا هو العنصر الجذر لملف HTML. كل شيء تكتبه ينتقل بين <html> و </ html>.
3:<head> </ head> = هذا هو جزء المعلومات الوصفية للمتصفح. لا تحتوي الرموز الموجودة داخل هذه العلامة على مخرجات بصرية.
3:<body> </ body> = هذا هو الجزء الذي يعرضه متصفح الويب. ما تراه بالضبط على موقع الويب هو عرض الأكواد بين <body> و </ body>.
HTML هو التعاون بين مئات العلامات المختلفة. عليك أن تتعلم كيف تعمل. عليك أيضا التأكد من أنهم استخدموها بالطريقة الصحيحة.
تحتوي علامات HTML عادةً على علامة فتح وختام. تحتوي العلامة الافتتاحية على الكلمة الأساسية محاطة أقل من (<) وعلامة أكبر من (>). تحتوي علامة الإغلاق على نفس الشيئ ولكنها مائلة إضافية (/) بعد أقل من (<) تسجيل.
( BODY) علامات الجسم
جميع علامات الجسم تذهب بين <body> و </ body>. لديهم مخرجات بصرية. هذا هو المكان الذي يتم فيه معظم العمل. يجب عليك استخدام هذه العلامات لتكوين محتوى الصفحة الرئيسي الخاص بك وهي التي تظهر في الصفحة.
( HEAD)علامات الرأس
هذه هي علامات العنوان. يتم وضع علامة على العنوان الأكثر أهمية مع <h1> والأقل أهمية مع <h6>. يجب عليك استخدامها في التسلسل الهرمي الصحيح.
الرمز:
<title> </ title>
الاخراج:شاهد الصورة
![]() |
<title> |
تنسيق العلامات
![]() |
تنسيق النص |
<a> </a>
هي علامة لا تقدر بثمن والتي تستخدم في كل مكان تقريبا. لن ترى أي صفحة ويب على الإنترنت بدون رابط رابط واحد على الأقل.
الهيكل هو نفسه. يحتوي على <a> وجزء إغلاق </a>. ينتقل النص الذي تريد إرساءه بين <a> و </a>.
هناك بعض السمات التي تحدد مكان وكيفية انتقال المستخدم بعد النقر عليه.
ahref = ”“ = يعرف الرابط الوجهة. يذهب الرابط بين علامات الاقتباس المزدوجة.
الهدف = "" = يحدد ما إذا كان سيتم فتح عنوان URL في علامة تبويب متصفح جديدة أو في علامة التبويب نفسها. الهدف = "_ blank" هو لعلامة التبويب الجديدة و target = "_ self" هو الفتح في نفس علامة التبويب.
rel = ”“ = يحدد علاقة الصفحة الحالية بالصفحة المرتبطة. إذا كنت لا تثق في الصفحة المرتبطة ، فيمكنك تحديد rel = "nofollow".
انقر هنا للانتقال إلى Google. سيتم فتحه في علامة تبويب جديدة. </ p>
انقر هنا . ستأخذك أيضًا إلى Google ولكن سيتم فتحها في علامة التبويب الحالية. </ p>
الاخراج:شاهد الصورة
1:<img /> هي علامة إغلاق ذاتي. لا يحتاج إلى الإغلاق التقليدي مثل </ img>. هناك بعض السمات التي تحتاج إلى معرفتها قبل أن تتمكن من استخدامها بشكل صحيح.
2:src = ”“ = هذا لتعريف الرابط المصدر للصورة. ضع الرابط الصحيح بين علامات الاقتباس المزدوجة.
3:alt = ”“ = انها تقف على النص البديل. عندما لا يتم تحميل صورتك ، سيعطي هذا النص للمستخدمين فكرة حول الصورة المفقودة.
4:العرض = "" = يعرّف عرض الصورة بالبكسل.
5:الارتفاع = "" = يعرّف ارتفاع الصورة بالبكسل.
الرمز:
الاخراج:شاهد الصورة
<ol> </ ol> و <ul> </ ul>
علامة القائمة هي لإنشاء قائمة بالعناصر. <ol> لتقف على قوائم مرتبة (قائمة مرقمة) و <ul> لتقف على قوائم غير مرتبة (نقاط).
يتم تمييز عناصر القائمة الموجودة داخل <ol> أو <ul> بـ <li> </ li>. لي لتقف على القائمة. يمكنك الحصول على أكبر عدد ممكن من <li> كما تريد داخل علامة <ol> أو <ul> الأصل.
الرمز:
رمز:
هذه قائمة مرتبة: </ p>
- العنصر 1 </ li>
- العنصر 2 </ li>
- العنصر 3 </ li> </ ol> هذه قائمة غير مرتبة: </ p>
- العنصر 1 </ li>
- العنصر 2 </ li>
- العنصر 3 </ li> </ ul>
![]() |
علامة القائمة |
<table> </ table
علامة الجدول هي لإنشاء جدول البيانات. هناك عدد قليل من علامات المستوى الداخلي التي تحدد رؤوس الجداول والصفوف والأعمدة.<table> </ table> هو الرمز الرئيسي الخارجي. في هذه العلامة ، تشير <tr> إلى صف الجدول ، <td> تعني عمود الجدول و <th> تعني رأس الجدول.
الرمز:
الاسم </ th> | العمر </ th> | المهنة </ th> </ tr> |
---|---|---|
Jo | 27 </ td> < td> Businessman </ td> </ tr> | |
Carol </ td> | 26 </ td> | ممرضة </ td> </ tr> |
Simone < / td> | 39 </ td> | الأستاذ </ td> </ tr> </ table> |
![]() |
علامة الجدول |
ملاحظة: القيم الموجودة داخل <tr> الأولى هي عناوين. لذلك ، استخدمنا <th> الذي يطبق تأثير النص الغامق على النص.
تجميع الجدول
يمكنك توسيع وظيفة الجدول باستخدام عناصر تجميع الجدول. ستكون هناك أوقات تحتاج فيها إلى إنشاء جداول كبيرة تنقسم إلى عدة صفحات.
تجميع بيانات جدولك في الرأس والجسم والتذييل ، يمكنك السماح بالتمرير المستقل. ستتم طباعة رأس الصفحة و جزء نصه إلى كل صفحة تمدد فيها جدولك.
علامات تصنيف الجدول هي:
<thead> </ thead> = لإدراج عناوين الجدول. انها تطبع على كل صفحة منقسمة من الجدول.
<tbody> </ tbody> = لالغاء البيانات الرئيسية للجدول. يمكنك الحصول على العدد الذي تريده. تعني العلامة <tbody> مجموعة منفصلة من البيانات.
<tfoot> </ tfoot> = لملء معلومات تذييل الجدول. انها تطبع على كل صفحة منقسمة من الجدول.
يرجى ملاحظة أنه ليس إلزاميًا لاستخدام التجميع. يمكنك استخدامه لجعل جداول أكبر أكثر قابلية للقراءة. في حين أن بعض المطورين المميزين يستخدمون هذه العلامات بشكل ملحوظ كمحددات CSS.
في ما يلي كيفية تجميع جدولنا النموذجي في <thead> و <tbody> و <tfoot>:
الاسم </ th> | العمر </ th> | المهنة </ th> </ tr> </ thead> |
---|---|---|
John </ td> | 27 </ td> | رجل الأعمال </ td> </ tr> |
كارول </ td> | 26 </ td> | ممرضة </ td> </ tr> |
Simone </ td> | 39 </ td> | الأستاذ </ td> </ tr> </ tbody> |
مجموع الأشخاص: </ td> | 3 </ td> </ tr> </ tfoot> </ table> |
![]() |
تجميع الجدول |
شاهد الجزء الثاني من الشرح
COMMENTS