شرح عناصر وعلامات html

HTML (لغة ترميز النص الفائق)

هي اللغة الأساسية لإنشاء صفحات الويب. تتكون HTML من مجموعة من العناصر (Elements) والعلامات (Tags) التي تُستخدم لتنظيم وهيكلة المحتوى على صفحة الويب. إليك شرح وافي وكامل عن عناصر وعلامات HTML:

مفهوم العناصر والعلامات

العنصر (Element):

هو المكون الأساسي في HTML، ويتكون من علامة بداية وعلامة نهاية، مع المحتوى بينهما.

<p>هذا نص داخل فقرة.</p>

<p>: علامة البداية.
</p>: علامة النهاية.
هذا نص داخل فقرة.: المحتوى.

العلامة (Tag):

هي الجزء الذي يحدد بداية ونهاية العنصر.

علامة البداية: <tagname>
علامة النهاية: </tagname>

أنواع العناصر

عناصر ذات علامة بداية ونهاية:

مثل <p>, <h1>, <div>, <a>.

عناصر ذات علامة واحدة (عناصر فارغة):

مثل <img>, <br>, <hr>, <input>.

الهيكل الأساسي لصفحة HTML

<!DOCTYPE html>
<html>
  <head>
    <title>عنوان الصفحة</title>
  </head>
  <body>
    <h1>مرحبًا بالعالم!</h1>
    <p>هذه صفحة ويب بسيطة.</p>
  </body>
</html>

<!DOCTYPE html>: يحدد نوع المستند كـ HTML5.
<html>: العنصر الرئيسي الذي يحتوي على كل المحتوى.
<head>: يحتوي على معلومات عن الصفحة مثل العنوان والروابط إلى ملفات CSS وJavaScript.
<title>: يحدد عنوان الصفحة الذي يظهر في شريط المتصفح.
<body>: يحتوي على المحتوى الرئيسي للصفحة.

أهم العناصر والعلامات في HTML

عناصر النص

<h1> إلى <h6>: عناوين بستة مستويات مختلفة (من الأكبر إلى الأصغر).

<h1>عنوان رئيسي</h1>
<h5>عنوان فرعي</h5>

<p>: فقرة نصية.

<p>هذه فقرة نصية.</p>

<strong> أو <b>: نص عريض (لتأكيد الأهمية).

<strong>نص مهم</strong>

<em> أو <i>: نص مائل (لتأكيد التركيز).

<em>نص مائل</em>

<br>: فاصل أسطر (بدون علامة نهاية).

<p>هذا نص<br>مع فاصل أسطر.</p>

<hr>: خط أفقي (فاصل مرئي).

<hr>

الروابط والصور

<a>: رابط تشعبي.

<a href="https://www.example.com">زيارة الموقع</a>

<img>: إدراج صورة.

<img src="image.jpg" alt="وصف الصورة">

src: مسار الصورة.
alt: نص بديل يظهر إذا لم يتم تحميل الصورة.

القوائم

<ul>: قائمة غير مرتبة (نقاط).

<ul>
  <li>عنصر 1</li>
  <li>عنصر 2</li>
</ul>

<ol>: قائمة مرتبة (أرقام).

<ol>
  <li>عنصر 1</li>
  <li>عنصر 2</li>
</ol>

<li>: عنصر في القائمة.

الجداول

<table>: جدول.

<tr>: صف في الجدول.

<th>: عنوان العمود.

<td>: خلية في الجدول.

<table>
  <tr>
    <th>الاسم</th>
    <th>العمر</th>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>25</td>
  </tr>
</table>

النماذج (Forms)

<form>: نموذج لإدخال البيانات.

<input>: حقل إدخال.

<textarea>: منطقة نصية كبيرة.

<button>: زر.

<form>
  <label for="name">الاسم:</label>
  <input type="text" id="name" name="name">
  <button type="submit">إرسال</button>
</form>

العناصر الهيكلية

<div>: حاوية عامة لتجميع العناصر.

<div>
  <p>هذا نص داخل div.</p>
</div>

<span>: حاوية نصية صغيرة.

<p>هذا <span style="color:red;">نص</span> ملون.</p>

<header>: رأس الصفحة.

<footer>: تذييل الصفحة.

<nav>: قائمة التنقل.

<section>: قسم من الصفحة.

<article>: محتوى مستقل (مثل مقال).

السمات (Attributes)

السمات توفر معلومات إضافية عن العناصر.

<a href="https://www.example.com" target="_blank">زيارة الموقع</a>

href: يحدد عنوان الرابط.
target="_blank": يفتح الرابط في نافذة جديدة.

العناصر المتقدمة

<iframe>: إدراج صفحة ويب داخل أخرى.

<iframe src="https://www.example.com"></iframe>

<audio> و <video>: إدراج ملفات صوتية ومرئية.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<canvas>: لرسم الرسومات باستخدام JavaScript.

<canvas id="myCanvas" width="200" height="100"></canvas>

العناصر الدلالية (Semantic Elements)

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

<header>
  <h1>عنوان الموقع</h1>
</header>
<nav>
  <a href="/">الرئيسية</a>
  <a href="/about">من نحن</a>
</nav>
<main>
  <article>
    <h5>مقال جديد</h5>
    <p>محتوى المقال.</p>
  </article>
</main>
<footer>
  <p>حقوق النشر © 2023</p>
</footer>

نصائح عامة

استخدم عناصر دلالية مثل <header>, <footer>, <article> لتحسين قابلية الوصول وفهم المحتوى.
تأكد من إغلاق جميع العلامات بشكل صحيح.
استخدم سمات alt للصور لتحسين SEO وإمكانية الوصول.
قم باختبار صفحتك في متصفحات مختلفة لضمان التوافق.

هذا شرح شامل لعناصر وعلامات HTML. يمكنك استخدام هذه العناصر لإنشاء صفحات ويب تفاعلية وجذابة!

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار