أقسام الوصول السريع (مربع البحث)

برمجة8 تطبيقات8 شرح12 html8
📁 آخر الأخبار
0

البنية الأساسية لصفحة للغة HTML الدرس #1

kroom87 kroom87

 لغة HTML أو HyperText Markup Language هي لغة الترميز المستخدمة لإنشاء وتصميم صفحات الويب. إنها لغة البنية الأساسية لمعظم صفحات الإنترنت وتستخدم بالتزامن مع CSS وJavaScript لتطوير مواقع الويب. فيما يلي شرح مفصل عن أساسيات HTML، بنيتها، وبعض العناصر الأساسية:



1. البنية الأساسية لصفحة HTML:

كل مستند HTML يبدأ بإعلان نوع المستند (DOCTYPE) يليه العناصر الأساسية التي تشكل الهيكل العام للصفحة. هذا هو الشكل العام لمستند HTML:

<!DOCTYPE html>
<html>
<head>
    <title>عنوان الصفحة</title>
    <meta charset="UTF-8">
</head>
<body>
    <!-- المحتوى الرئيسي للصفحة يذهب هنا -->
</body>
</html>
  • <!DOCTYPE html>: يُعلن أن الوثيقة هي HTML5.
  • <html>: العنصر الجذر الذي يحتوي كل المحتوى.
  • <head>: يحتوي على المعلومات الوصفية مثل عنوان الصفحة، وصلات الأنماط CSS، السكريبتات وغيرها.
  • <title>: يحدد عنوان الصفحة الذي يظهر في شريط العنوان للمتصفح.
  • <meta charset="UTF-8">: يضمن ترميز الحروف بشكل صحيح.
  • <body>: يحتوي على المحتوى الفعلي للصفحة مثل النصوص، الصور، وغيرها.

2. العناصر الأساسية:

HTML تحتوي على العديد من العناصر التي تساعد في تنظيم وعرض المحتوى. هنا بعض من الأكثر شيوعًا:

  • <h1>, <h2>, ..., <h6>: عناوين بمستويات مختلفة.
  • <p>: يُستخدم للفقرات النصية.
  • <a href="URL">: رابط تشعبي لصفحة أخرى أو موقع.
  • <img src="URL" alt="description">: لإضافة صورة.
  • <ul>, <ol>, <li>: لإنشاء قوائم غير مرتبة أو مرتبة.
  • <table>: لإنشاء جداول. يستخدم بالتزامن مع <tr> (صفوف الجدول)، <th> (خلايا العنوان)، و <td> (خلايا البيانات).

امثله للعناصر الأساسية والعلامات

الروابط: تُستخدم علامة <a> لإنشاء روابط تشعبية، ويتم تحديد وجهة الرابط باستخدام السمة href:
<a href="https://www.example.com">Visit Example</a>
الصور: علامة <img> تستخدم لإدراج الصور، وتحتاج إلى سمتين أساسيتين: src (مصدر الصورة) و alt (نص بديل يظهر في حالة عدم تحميل الصورة):
<img src="image.jpg" alt="Description of the image">

القوائم و الجداول : يمكن إنشاء قوائم مرتبة أو غير مرتبة باستخدام <ul> (غير مرتبة) و <ol> (مرتبة)، وكل عنصر في القائمة يُمثل بـ <li>:
<ul> <li>First item</li> <li>Second item</li> </ul>

شرح الجداول

HTML يوفر عناصر مثل <table>, <tr>, <th>, و <td> لبناء جداول البيانات. هذه العناصر تتيح تنظيم المعلومات بشكل مصفوفات من الصفوف والأعمدة، وتستخدم بشكل كبير في عرض البيانات والإحصائيات.

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>
النتيجة
شرح اخر لتطبيق جدول يشمل كل الرمز

<table border="1">
  <caption>Table Caption</caption>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1.1</td>
      <td>Data 1.2</td>
      <td>Data 1.3</td>
    </tr>
    <tr>
      <td>Data 2.1</td>
      <td>Data 2.2</td>
      <td>Data 2.3</td>
    </tr>
    <tr>
      <td>Data 3.1</td>
      <td>Data 3.2</td>
      <td>Data 3.3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
      <td>Footer 3</td>
    </tr>
  </tfoot>
</table>

نتيجة تطبيق الكود

شرح العناصر:

  • <table>: عنصر الجدول الرئيسي.
  • border="1": خاصية لإضافة حدود للجدول (يمكن تعديل القيمة أو إزالتها حسب الحاجة).
  • <caption>: عنوان الجدول (اختياري).
  • <thead>: رأس الجدول الذي يحتوي على صف أو أكثر من رؤوس الأعمدة.
  • <tr>: صف في الجدول.
  • <th>: خلية رأسية في الجدول (تستخدم في رأس الجدول).
  • <tbody>: جسم الجدول الذي يحتوي على صف أو أكثر من البيانات.
  • <td>: خلية بيانات في الجدول.
  • <tfoot>: تذييل الجدول الذي يحتوي على صف أو أكثر من تذييلات الأعمدة (اختياري).
يمكنك تعديل هذا الكود حسب احتياجاتك وإضافة المزيد من الصفوف والأعمدة كما ترغب. 

3. النماذج والإدخالات:

نماذج HTML تُستخدم لجمع المعلومات من المستخدمين. يمكن أن تشتمل على أنواع مدخلات مختلفة مثل النصوص، كلمات المرور، وأزرار الاختيار:<form>: تعريف النموذج.

النماذج: تُستخدم علامة <form> لبدء نموذج وتتضمن سمات مثل action (الصفحة التي تُعالج البيانات) و method (طريقة إرسال البيانات: GET أو POST):

مثال

<form action="/submit_form" method="post">

  <label for="name">Name:</label>

  <input type="text" id="name" name="name">

  <input type="submit" value="Submit">

</form>

 تطبيق


شرح بعض الحقول

  • <input>: حقل إدخال. جميع الاكواد هنا 
  • <label>: تسمية مرتبطة بعنصر إدخال.
  • "input type="submit  زر ادخال

4. سمات العناصر:

كل عنصر في HTML يمكن أن يحتوي على سمات تحدد خصائص أو سلوكيات معينة. مثلاً، العنصر <a> يحتوي على السمة href التي تحدد وجهة الرابط.

5. CSS وJavaScript:

CSS تُستخدم لتحديد مظهر صفحة الويب. يمكن تضمين CSS داخل HTML بطرق مختلفة:

  • Inline CSS: يتم تعريف الأنماط مباشرة داخل عناصر HTML باستخدام السمة style.
    <p style="color: red;">This text is red.</p>
  • Internal CSS: يتم كتابة الأنماط داخل القسم <head> باستخدام علامة <style>.
    <style>
  body { color: blue; }
  p { margin: 20px; }
</style>
  • External CSS: يُفضل استخدام ملفات CSS الخارجية لتنظيم الأنماط بشكل أفضل وتحسين أداء الصفحة.
    • <link rel="stylesheet" type="text/css" href="styles.css">

JavaScript والتفاعلية

JavaScript يمكن استخدامها لإضافة التفاعلية إلى صفحات الويب. يمكن تضمين JavaScript مباشرة داخل علامات <script> أو يمكن ربط ملفات JavaScript الخارجية:

<script>
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

الاستخدامات العملية:

يمكن استخدام HTML لبناء كل شيء من مواقع الويب البسيطة إلى التطبيقات الويب المعقدة. يتم استخدامه في البريد الإلكتروني التسويقي، تطوير الألعاب، تطبيقات الويب، وأكثر من ذلك.

HTML هي الأساس الذي يُبنى عليه الويب، ومعرفة جيدة بها ضرورية لأي مطور ويب.


kroom87
kroom87

مقالات قد تهمك

تعليقات