عناصر وعلامات html شرح بعض العناصر والعلامات والوسم الخاص بhtml
عناصر وعلامات html
 |
| شرح عناصر وعلامات html |
اولا:
HTML هو اختصار لـ Hyper MArkupe Language. إنها اللغة القياسية لوضع علامات على محتويات متصفحات الويب.
يتم تمثيل HTML بواسطة "العناصر". تعرف العناصر أيضًا باسم "العلامات".
2 - لماذا تحتاج HTML؟
يمكن لمتصفحات الويب عرض موقع ويب فقط عند كتابته بلغة مدعومة. HTML هي لغة الترميز الأكثر شيوعًا ولها أعلى قبول لمتصفحات الويب.
لهذا السبب تحتاج HTML.
3- هل حالة HTML حساسة؟
HTML ليست حساسة لحالة الأحرف. لكن أفضل الممارسات هي كتابة HTML مع الحالات المناسبة.
خطوات لإنشاء ملف HTML الأول الخاص بك
يمكنك إنشاء ملف HTML أساسي باستخدام المفكرة على جهاز الكمبيوتر الخاص بك. ولكن سيكون من المؤلم لكتابة العديد من خطوط الرموز.
أنت بحاجة إلى محرر الشفرة. سيعمل محرر الشفرة الجيد على تسهيل كتابة الرموز الكبيرة وتنظيمها.
أنا استخدم والتوصية المفكرة + + (مجاني ومفتوح المصدر) لكتابة لغات الويب. هناك برامج تحرير أخرى قد تستخدمها مثل نص سامية, ذرة وما إلى ذلك.
هنا هو ما عليك القيام به:
- قم بتثبيت محرر التعليمات البرمجية
- افتحه
- قم بإنشاء ملف جديد
- احفظه كملف .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 هو التعاون بين مئات العلامات المختلفة. عليك أن تتعلم كيف تعمل. عليك أيضا التأكد من أنهم استخدموها بالطريقة الصحيحة.
تحتوي علامات HTML عادةً على علامة فتح وختام. تحتوي العلامة الافتتاحية على الكلمة الأساسية محاطة أقل من (<) وعلامة أكبر من (>). تحتوي علامة الإغلاق على نفس الشيئ ولكنها مائلة إضافية (/) بعد أقل من (<) تسجيل.
( BODY) علامات الجسم
جميع علامات الجسم تذهب بين <body> و </ body>. لديهم مخرجات بصرية. هذا هو المكان الذي يتم فيه معظم العمل. يجب عليك استخدام هذه العلامات لتكوين محتوى الصفحة الرئيسي الخاص بك وهي التي تظهر في الصفحة.
( HEAD)علامات الرأس
جميع علامات الرأس تذهب بين <head> و </ head>. أنها تحتوي على معلومات التعريف لمستعرض الويب ومحركات البحث. هم في الأساس ليس لديهم الإخراج البصري اي معناها لاتظهلر في الصفحة.
<h1> </ h1>
<h2> </ h2>
<h3> </ h3>
<h4> </ h4>
<h5> </ h5>
<h6> </ h6>
هذه هي علامات العنوان. يتم وضع علامة على العنوان الأكثر أهمية مع <h1> والأقل أهمية مع <h6>. يجب عليك استخدامها في التسلسل الهرمي الصحيح.
الرمز:
الاخراج:شاهد الصورة
هذه هي علامات العنوان. يتم وضع علامة على العنوان الأكثر أهمية مع <h1> والأقل أهمية مع <h6>. يجب عليك استخدامها في التسلسل الهرمي الصحيح.
الرمز:
 |
| علامات العنوان |
<title> </ title>
الرمز:
تحدد علامة العنوان عنوان صفحة الويب التي تكون مرئية في علامة تبويب المتصفح. يتم استخدام هذه المعلومات من خلال برامج الويب ومحركات البحث. يمكنك الحصول على أعلى عنوان واحد لكل ملف HTML.الاخراج:شاهد الصورة
 |
| <title> |
تنسيق العلامات
يمكن تنسيق النص في ملف html باستخدام العديد من علامات التنسيق. سيكون ذلك ضروريًا عندما تريد تمييز كلمة أو سطر من المحتوى الخاص بك.
الرمز:
الاخراج:شاهد الصورة
 |
| تنسيق النص |
<a> </a>
هي علامة لا تقدر بثمن والتي تستخدم في كل مكان تقريبا. لن ترى أي صفحة ويب على الإنترنت بدون رابط رابط واحد على الأقل.
الهيكل هو نفسه. يحتوي على <a> وجزء إغلاق </a>. ينتقل النص الذي تريد إرساءه بين <a> و </a>.
هناك بعض السمات التي تحدد مكان وكيفية انتقال المستخدم بعد النقر عليه.
ahref = ”“ = يعرف الرابط الوجهة. يذهب الرابط بين علامات الاقتباس المزدوجة.
الهدف = "" = يحدد ما إذا كان سيتم فتح عنوان URL في علامة تبويب متصفح جديدة أو في علامة التبويب نفسها. الهدف = "_ blank" هو لعلامة التبويب الجديدة و target = "_ self" هو الفتح في نفس علامة التبويب.
rel = ”“ = يحدد علاقة الصفحة الحالية بالصفحة المرتبطة. إذا كنت لا تثق في الصفحة المرتبطة ، فيمكنك تحديد rel = "nofollow".
انقر هنا للانتقال إلى Google. سيتم فتحه في علامة تبويب جديدة. </ p>
انقر هنا . ستأخذك أيضًا إلى Google ولكن سيتم فتحها في علامة التبويب الحالية. </ p>
الاخراج:شاهد الصورة
 |
<a> </a> |
img>
1:<img /> هي علامة إغلاق ذاتي. لا يحتاج إلى الإغلاق التقليدي مثل </ img>. هناك بعض السمات التي تحتاج إلى معرفتها قبل أن تتمكن من استخدامها بشكل صحيح.
2:src = ”“ = هذا لتعريف الرابط المصدر للصورة. ضع الرابط الصحيح بين علامات الاقتباس المزدوجة.
3:alt = ”“ = انها تقف على النص البديل. عندما لا يتم تحميل صورتك ، سيعطي هذا النص للمستخدمين فكرة حول الصورة المفقودة.
4:العرض = "" = يعرّف عرض الصورة بالبكسل.
5:الارتفاع = "" = يعرّف ارتفاع الصورة بالبكسل.
الرمز:
الاخراج:شاهد الصورة
 |
img> |
<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