HTML (لغة ترميز النص التشعبي) هي لغة النشر الأكثر شيوعًا على شبكة الويب العالمية. html توفر طريقة قياسية لبرنامج مستعرض الويب لعرض النصوص والصور بحيث تظهر في المتصفحات في جميع أنحاء العالم.
يتكون HTML من علامات أو تعليمات تخبر المتصفح بكيفية تنسيق وترتيب المحتوى المعروض على صفحة ويب، بالإضافة إلى مكان العثور عليه.
دليل لغة البرمجة HTML
HTML هي لغة تستخدم لإنشاء صفحات الويب والمستندات الأخرى على الإنترنت. HTML هي اللغة التي تستخدم لتحديد هيكل صفحة ويب. يتضمن الهيكل عناصر مثل العناوين والفقرات والقوائم والجداول. جميع العلامات محاطة بأقل من (<) وأكبر من (>) الرموز.
هناك بعض العلامات التي تحتاج إلى علامات فتح وإغلاق. تحدد هذه العلامات بداية ونهاية وثيقة html على التوالي. تبدأ العلامات المستخدمة في الارتباط بالصفحات أو المواقع الأخرى المراسيات.
عندما تصل هذه المراسي إلى مواقع الويب الأخرى التي تفتحها فقط في نافذة جديدة إذا قمت بتمكين حظر المنبثقة على متصفحك.
HTML هي اللغة الأكثر استخدامًا على الويب. إنها لغة ترميزية، بمعنى أنها تحدد كيفية ظهور المحتوى على صفحة الويب الخاصة بك. يتكون html من العلامات والسمات التي هي نص داخل أقواس زاوية <>. تخبر العلامة نوع العنصر الذي تستخدمه وتخبر سماته بمزيد من المعلومات عنه مثل الحجم أو اللون أو الخط أو مصدر الصورة.
دليل بسيط لـ HTML
إذا كنت مستخدمًا جديدًا لـ HTML، فقد تشعر ببعض الغموض حول كيفية التقدم للأمام بأي نوع من الزخم. حتى لو كنت من ذوي الخبرة في لغة البرمجة html، فمن السهل أن تفقد مسار المراجع. لقد أنشأنا دليل بسيط لأهم تنسيقات لغة البرمجة HTML لمساعدتك على تقدم تعلمك.
أوصيك باستخدام دليل ترميز HTML هذا كأساس للرجوع إلى كيفية استخدام العلامات المستخدمة بشكل متكرر وتنفيذها. تحتوي هذه المقالة على قدر كبير من المعلومات، لذلك انصحك بالرجوع إليها بشكل متكرر واستخدامها كنقطة مرجعية يمكنك الرجوع إليها عندما تحتاج إلى فهم أعمق لـ html.
يوفر هذا الدليل مواد إضافية تتناول التفاصيل وتشرح طريقة عمل العلامات الفردية. سيساعدك هذا في تجميع مورد شامل لـ HTML بالإضافة إلى فهم الآليات الكامنة وراء الكود لمساعدتك على المضي قدمًا في تعلمك. إذا كنت بحاجة إلى فك أي علامة في html.
نظرة عامة على مستند HTML
<html> ... </html>
تقوم علامة html بتغليف مستند HTML بالكامل. علامة HTML هي عنصر الجذر الذي يتم عرضه في بداية ونهاية مستند HTML.
<head> ... </head>
تلتقط علامة الرأس رأس صفحة HTML التي تحتوي على علامات العنوان، وروابط لأوراق الأنماط والنصوص، بالإضافة إلى البيانات الوصفية وما إلى ذلك).
<title> نص </ title>
تعرض علامة العنوان عنوان الصفحة. تظهر هذه العلامة في شريط عنوان المتصفح وتستخدم بالمثل لوضع إشارة مرجعية على الصفحة. يتم استخدامه أيضًا لمحركات البحث.
<body> ... </body>
تتضمن علامة النص الأساسي مضمون مستند HTML، حيث تعرض كل النص والصور المعروضة.
معلومات المستند HTML
<base/>
تحدد العلامة الأساسية عنوان URL افتراضيًا وهدفًا افتراضيًا لجميع الروابط في مستند HTML. إنها أداة يدوية للصفحات التي تحتوي على العديد من الروابط الداخلية.
<meta/>
تصف العلامة الوصفية البيانات الوصفية داخل مستند HTML. وهذا ما يفسر مواد إضافية حول html . بما في ذلك التاريخ والوقت والوصف وما إلى ذلك.
<link/>
تنشئ علامة الارتباط اتصالات بورقة أنماط خارجية وصفحات ومستندات خارجية أخرى.
<style> ... </style>
تحدد علامة النمط معلومات النمط في مستند HTML.
<script> ... </script>
تتضمن علامة البرنامج النصي عبارات البرمجة أو منافذ روابط البرامج النصية الخارجية.
هيكل الوثيقة HTML
<h1..h6> .. </ h1..h6>
تعبر هذه العلامات من <h1> إلى <h6> عن عناوين HTML. ويعد h1 هو العنوان الأكثر أهمية، بينما h6 هو الأقل أهمية. غالبًا ما يتم تقسيمها لوصف أقسام مختلفة من المحتوى على صفحة HTML.
<p> ... </p>
هذه هي علامة الفقرة، وهي واحدة من أكثر العلامات استخدامًا في HTML.
<br/>
علامة الفاصل تحدد فاصل الأسطر. تقوم بتقسيم النص الذي يحتاج إلى التمييز في سطور مختلفة. ونلاحظ أنه لا توجد علامة نهاية لفاصل الأسطر لأنها فارغة.
<div> ... </div>
تشير علامة div إلى وجود تقسيم في مستند HTML.
<span> ... </span>
تستخدم علامة الامتداد لتجميع العناصر المضمنة لصفحة html. يتم استخدامه بشكل شائع للجمع بين عناصر التصميم بشكل جماعي.
<hr />
علامة القاعدة الأفقية هي إضافة تقوم بإعلام تغيير في موضوع الصفحة.
علامات HTML5
مع إدخال علامات HTML5 الجديدة التي أصبحت شائعة جدًا وجزءً مهمًا من أي مستند HTML.
<article> ... </article>
تحدد علامة المقالة مقالة داخل المستند.
<aside> ... </aside>
تحدد العلامة الجانبية المحتوى داخل الشريط الجانبي للمستند.
<bdi>...</bdi>
تعزل علامة bdi أجزاء من النص ، مما يتيح تشكيل النص في اتجاهات مختلفة.
<details> ... </details>
تقوم علامة التفاصيل بتسمية المعلومات التكميلية التي يمكن للمستخدم عرضها أو إخفاؤها.
<dialog> ... </dialog>
تحدد علامة الحوار نافذة حوار.
<figure> ... </figure>
علامة الشكل هي امتداد محتوى مستقل يتضمن رسومات وصور ومخططات وما إلى ذلك.
<figcaption> ... </figcaption>
تستخدم علامة التعليق التوضيحية عنصر <figure> لوصف الشكل، والذي غالبًا ما يكون صورة.
<footer> ... </footer>
تُظهر علامة التذييل بشكل طبيعي تذييل المستند أو المقطع.
<header> ... </header>
تُظهر علامة الرأس رأس المستند أو القسم.
<main> ... </main>
توضح العلامة الرئيسية المحتوى الرئيسي لصفحة HTML.
<mark> ... </mark>
علامة العلامة التي تعرض مقياسًا للنص المميز داخل المحتوى.
<menuitem>...</menuitem>
علامة menuitem هي قائمة سياق بها عناصر مختلفة يمكن للمستخدم استدعاءها من قائمة منبثقة.
<meter> ... </meter>
علامة العداد هي مقياس يصف قياسًا قياسيًا ضمن سلسلة محددة.
<nav> ... </nav>
تعبر علامة التنقل عن روابط التنقل للمستخدم.
<progress>...</progress>
تشير علامة التقدم بشكل غير مفاجئ إلى تطور المهمة.
<rp> ... </rp>
تشير علامة rp إلى النص الذي لا يدعم التعليقات التوضيحية بلون أحمر.
<rt> ... </rt>
علامة rt هي وصف للأحرف في طباعة.
<ruby> ... </ruby>
تعرض علامة Ruby تعليقًا توضيحيًا بلون.
<section> ... </section>
تحدد علامة القسم الكتل في المستند التي يمكن أن تكون أي فصول أو عناوين أو رؤوس أو تذيلات إلخ.
<summary> ... </summary>
علامة الملخص هي عنوان يمكن اكتشافه لعناصر <details>.
<time> ... </time>
تعبر علامة الوقت بشكل طبيعي عن الوقت والتاريخ.
<wbr>
علامة فاصل كلمة تشير إلى فاصل سطر داخل المحتوى.
التنسيق - دليل بسيط لـ html
<strong>. </strong>
تعرف العلامة باسم علامة العبارة التي تعبر عن نص رئيسي. غالبًا ما يتم تمييزه بالخط العريض بواسطة المتصفحات للتعبير عن أهميته.
<b> ... </b>
تعد علامة b علامة بديلة لإنشاء نص غامق يلفت الانتباه إلى النص. إنه مخصص للنص والكلمات والعبارات التي لم يتم إبرازها.
<font> ... </font>
تعد علامة الخط طريقة قديمة للإشارة إلى حجم النص ومساحته ولونه، وهي طريقة قديمة الآن في HTML5.
<abbr> ... </abbr>
هذا الاختصار الذي يساعد في تحديد الاختصارات، مع السماح في نفس الوقت بالوصول إلى النموذج الكامل.
<acronym> ... </acronym>
علامة الاختصار غير مدعومة في HTML5 ولكنها تحمل تأثيرًا مشابهًا لعلامة الاختصار.
<q> ... </q>
تحدد العلامة q اقتباسًا قصيرًا.
<sub> ... </sub>
تشير العلامة الفرعية إلى نص منخفض أصغر ويوضع نصف سطر أدنى من النص السابق.
<sup> ... </sup>
تشير علامة sup إلى نص مرتفع. بالعكس إلى النص الفرعي ، يظهر نصف سطر أعلى من النص السابق، مرة أخرى بحجم أصغر.
<tt> ... </tt>
لم تعد علامة tt مدعومة في html 5. إنها علامة قديمة تشير إلى نص الآلة الكاتبة.
<em> ... </em>
هذه هي علامة التأكيد التي تؤكد أهمية العبارات أو الكلمات وغالبًا ما يتم عرضها بخط مائل.
<i> ... </i>
علامة I هي طريقة بديلة لإنشاء نص بخط مائل.
<address> ... </address>
تعرض علامة العنوان معلومات الاتصال بمالك / مؤلف الصفحة.
<dfn> ... </dfn>
تستخدم علامة التعريف لترميز الأمر المهم للمصطلح.
<code> ... </code>
علامة الكود هي علامة عبارة تحدد جزءًا من كود الكمبيوتر.
<strike> ... </strike>
علامة الإضراب غير مدعومة في HTML5 ولكنها تشير إلى نص يتوسطه خط.
<cite> ... </cite>
علامة الموقع هي نقطة مرجعية للمعلومات المفيدة للعناوين والاقتباسات والتعليقات التوضيحية والعبارات في المستند.
<pre> ... </pre>
العلامة المسبقة هي نص منسق مسبقًا في مساحة أحادية تحافظ على المسافات وفواصل الأسطر.
<del> ... </del>
تشير علامة del إلى النص المحذوف من المستند.
<ins> ... </ins>
تظهر علامة الإدراج النص الذي تم دمجه في مستند.
<small> ... </ small>
تستخدم العلامة الصغيرة للتعبير عن نص أصغر. كما أن لها معنى مزدوجًا ضمن HTML5، مما يشير إلى المعلومات التي قد تكون غير صالحة أو غير دقيقة أو غير ذات صلة.
<blockquote> ... </blockquote>
تحدد علامة blockquote قسمًا من النص يتم اقتباسه عادةً من مصدر بديل.
<bdo> ... </bdo>
علامة bdo هي تجاوز ثنائي الاتجاه ، والذي يتجاوز اتجاه النص.
<a href=”> ... </a>
هذه العلامة هي نص رابط للارتباط التشعبي.
<a href="mailto:"> ... </a>
هذه العلامة عبارة عن ارتباط يرسم رسالة صادرة إلى عنوان بريد إلكتروني معين أو عناوين.
<a href=”tel://###-###"> ... </a>
هذه العلامة هي رابط مفيد يسمح بالنقر فوق الأرقام. تزداد شعبيتها بسبب سهولة استخدامها لمستخدمي الهواتف المحمولة.
<a name="name”> ... </a>
هذه العلامة هي نقطة ارتساء تنقل المستخدمين إلى عناصر معينة.
<a href="#name”> ... </a>
تنقل هذه العلامة المستخدمين إلى عناصر div.
<img />
هذه العلامة هي ببساطة لإظهار الصور.
src = ”url”
تعرض هذه العلامة عنوان URL للصورة.
alt=”text”
تعرض هذه العلامة نصًا بديلاً بوظيفة توضيح محتوى الصورة ومحتواها للمستخدمين.
height=””
هذه العلامة هي القدرة على الإشارة إلى الارتفاع بالنسبة المئوية أو البكسل.
width=””
هذه العلامة هي القدرة على الإشارة إلى العرض بالنسبة المئوية أو وحدات البكسل.
align=””
تحدد هذه العلامة محاذاة الصورة بالنسبة للنص الموجود على الصفحة.
border=””
تشير هذه العلامة إلى عرض الحد.
vspace = ””
تظهر هذه العلامة التباعد أعلى وأسفل الصورة.
hspace = ””
هذه العلامة ، كما هو مذكور أعلاه ، تظهر مسافات أعلى وأسفل الصورة.
<map> ... </map>
تتيح لك علامة الخريطة أن تعرض للمستخدمين أن الصورة قابلة للنقر.
<map name=””>...</map>
تشير هذه العلامة إلى اسم الخريطة المتصلة بين الصورة والخريطة.
<area />
تشير علامة المنطقة إلى منطقة خريطة الصورة.
<ol> ... </ol>
تحدد هذه العلامة قائمة مرتبة إما مرقمة أو مرقمة.
<ul> ... </ul>
تشير هذه العلامة أيضًا إلى قائمة ولكنها غير مرتبة بدون أي ترتيب معين أو أهمية .
<li> ... </li>
تشير هذه العلامة إلى عنصر قائمة يمكن ترقيمه أو ترقيمه بأحرف أو تعداد نقطي.
<dl> ... </dl>
هذه علامة قائمة وصفية، وعادة ما تكون مخصصة لعناصر القائمة التي تتطلب تعريفات.
<dt> ... </dt>
تقوم هذه العلامة بتسمية اسم مصطلح ضمن قائمة وصفية.
<dd> ... </dd>
تصف هذه العلامة اسمًا في قائمة الوصف.
<form> ... </form>
هذه العلامة تنشئ نموذج HTML.
action=”url”
تحدد علامة عنوان URL لإجراء النموذج مكان إرسال المعلومات عند المستخدم
method=””
تطلب علامة الأسلوب كيفية إرسال البيانات.
enctype = ””
تطلب هذه العلامة كيفية تشفير البيانات عند إرسالها مرة أخرى.
the server.
الإكمال التلقائي
تعد علامة الإكمال التلقائي إضافة أنيقة تحدد ما إذا كان النموذج يجب أن يحتوي على الإكمال التلقائي.
novalidate
تأمر هذه العلامة بالتحقق من صحة النموذج عند الإرسال.
accept-charsets
تكتشف هذه العلامة ترميزات الأحرف في عمليات إرسال النماذج.
target
ترشد العلامة الهدف إلى مكان إظهار استجابة النموذج بعد الإرسال.
<fieldset> ... </fieldset>
تحدد علامة مجموعة الحقول موقع مجموعة كافة الحقول في النموذج.
<label> ... </label>
علامة تسمية حقل بسيطة ، توجه المستخدم إلى المعلومات التي يجب إدخالها.
<legend> ... </legend>
تشير علامة وسيلة الإيضاح إلى تسمية توضيحية لعنصر <fieldset>.
<input />
تعتبر علامة الإدخال عنصرًا فارغًا ، تحدد نوعًا معينًا من معلومات الحقل التي يجب الحصول عليها من المستخدم.
سمات نوع الإدخال - Input type attributes
type=””
تحدد علامة النوع نوع إدخال الحقل وعادةً ما تتضمن مربع الاختيار والنص وكلمات المرور والتاريخ / الوقت.
name=””
تظهر علامة الاسم اسم النموذج.
value=””
تظهر علامة القيمة معلومات حقل الإدخال.
size=””
تصف علامة الحجم عرض عنصر الإدخال.
maxlength = ""
تعرض علامة maxlength أكبر عدد مسموح به من أحرف عنصر الإدخال.
- تضمن العلامة المطلوبة اكتمال عنصر <input> بالكامل قبل أن يرسل المستخدمون النموذج.
step=””
تحدد علامة الخطوة الفواصل الزمنية القانونية لحقل الإدخال.
width=””
تشير علامة العرض إلى عرض البكسل لعنصر <input>.
height=””
تشير علامة الارتفاع إلى ارتفاع البكسل لعنصر <input>.
placeholder=””
تساعد علامة العنصر النائب المستخدم من خلال شرح قيمة عنصر <input>.
pattern=””
تُظهر علامة النمط تعبيرًا عاديًا كمرجع لعنصر <input>، مما يضمن قيام المستخدمين بتقديم معلومات دقيقة.
min=””
تعرض علامة min أصغر قيمة مسموح بها لكل عنصر من عناصر <input>.
max=””
تعرض علامة max أكبر قيمة مسموح بها لكل عنصر من عناصر <input>.
- تضمن علامة التركيز التلقائي تركيز عنصر <input> بعد التحميل.
disabled
تقوم العلامة المعطلة بإلغاء تنشيط عنصر <input> في النموذج.
<textarea> ... </textarea>
تحدد هذه العلامة إدخال نص كبير للرسائل الأطول.
<select> ... </select>
تظهر علامة التحديد مربعًا منسدلًا للمستخدمين للاختيار من بين عدد من التحديدات.
name=””
تظهر علامة الاسم اسم صندوق تركيبة منسدلة.
size=””
تحدد علامة الحجم مقدار البدائل المنسدلة.
مضاعف - multiple
العلامة المتعددة هي توفير العديد من التحديدات في وقت واحد.
مطلوب - required
كما يوحي الاسم ، تستلزم العلامة المطلوبة اختيار قيمة بالفعل قبل أن يتمكن المستخدم من إرسال نموذج.
ضبط تلقائي للصورة - autofocus
تضمن علامة ضبط تلقائي للصورة تركيز القائمة المنسدلة بشكل روتيني بعد التحميل.
<optgroup> ... </optgroup>
تحدد علامة optgroup مجموعة الخيارات بالكامل.
<option>...</option>
تحدد علامة الخيار أحد التحديدات المعروضة في القائمة المنسدلة.
value=””
توضح علامة القيمة قيمة الخيار التي يمكن الحصول عليها للاختيار.
selected
تحدد العلامة المحددة التحديد الافتراضي.
<button> ... </button>
تحدد علامة الزر الزر القابل للنقر للمستخدمين لإرسال الخيارات.
<table> ... </table>
تشير علامة الجدول إلى جميع معلومات الجدول وتضمينها.
<caption>… </caption>
تحدد علامة التسمية التوضيحية شرح جدول.
<thead> ... </thead>
يتم استخدام علامة thead لتجميع محتوى الرأس داخل جدول html.
<tbody> ... </tbody>
تُستخدم علامة tbody لتجميع محتوى الجسم في جدول html.
<tfoot> ... </tfoot>
تُستخدم علامة tfoot لتجميع محتوى التذييل داخل جدول html.
<tr> ... </tr>
تحدد علامة tr صفًا في جدول html.
<th> ... </th>
تحدد العلامة th خلية رأس في جدول html.
<td> ... </td>
تحدد العلامة td خلية قياسية في جدول html.
<colgroup> ... </colgroup>
تحدد علامة colgroup مجموعة من الأعمدة في جدول.
<object> ... </object>
تحدد علامة الكائن كائنًا مضمنًا ، والذي يمكن أن يكون في مجموعة متنوعة من أنواع الملفات.
height=””
تحدد علامة الارتفاع ارتفاع الكائن بالبكسل.
width=””
تحدد علامة العرض عرض الكائن بالبكسل.
type=””
تحدد علامة النوع نوع الوسائط التي تتضمنها البيانات.
usemap = ””
علامة uesmap هذه هي التسمية الموجودة داخل <object> لصورة من جانب العميل.
<iframe> ... </iframe>
تشير علامة iframe إلى إطار مضمّن.
سمات iFrame
name=””
علامة الاسم هي تسمية <frame>
src = ””
تظهر علامة src أصل عنوان URL للمستند الأولي المراد تضمينه في <frame>.
srcdoc = ””
تحدد علامة srcdoc مادة HTML التي يتم تقديمها داخل <frame> في الصفحة الحالية.
width=””
تحدد علامة العرض عرض <frame>.
<param />
تعد علامة param علامة تخصيص ترفق معلمات إضافية بمحتوى iframe.
<embed> ... </embed>
إجراءات علامة التضمين كسفينة لتطبيق خارجي أو مكون إضافي إضافي.
السمات المضمنة - Embed Attributes
height=””
تحدد علامة الارتفاع ارتفاع المحتوى المضمن.
width=””
تحدد علامة العرض عرض المحتوى المضمن.
src = ””
علامة src هي أصل عنوان URL للملف الخارجي الذي يتم تضمينه.
type=””
في هذا المثال، تحدد علامة النوع نوع الوسائط للمحتوى المضمن المراد تضمينه.
المصدر: W3Schools
سعدنا بوجودك 😍 شكراً لك اترك تعليقك بمدى أستفادتك من المحتوى دعمنا لنا وسيتم الرد عليك في أقرب وقت. يسعدنا دائماً اقتراحاتكم بخصوص المحتوى وأذا كان لديك أى أستفسار لاتترد بالتعليق أو المراسلة عبر صندوق البريد.