ما هو HTML؟
ترمز HTML إلى H yper T ext M arkup L anguage
HTML هي لغة الترميز القياسية لصفحات الويب
عناصر HTML هي اللبنات الأساسية لصفحات HTML
يتم تمثيل عناصر HTML بعلامات <>
عناصر HTML
عنصر HTML هو علامة بداية وعلامة نهاية بها محتوى بينهما:
<h1> هذا عنوان </ h1>
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | This is a Heading | </h1> |
| <p> | This is paragraph. | </p> |
سمات HTML
- يمكن أن تحتوي عناصر HTML على سمات
- توفر السمات معلومات إضافية حول العنصر
- تأتي السمات في أزواج الاسم / القيمة مثل charset = "utf-8"
مستند HTML بسيط
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Page Title</title>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is
another paragraph.</p>
</body>
</html>
شرح المثال
عناصر HTML هي اللبنات الأساسية لصفحات HTML.
- يعرّف
<!DOCTYPE html>الإعلان هذا المستند على أنه HTML5 - العنصر
<html>هو العنصر الجذر لصفحة HTML - تحدد السمة
langلغة المستند - يحتوي
<meta>العنصر على معلومات وصفية حول المستند - تحدد السمة
charsetمجموعة الأحرف المستخدمة في المستند - يحدد
<title>العنصر عنوانًا للمستند - يحتوي
<body>العنصر على محتوى الصفحة المرئي - يحدد
<h1>العنصر عنوانًا كبيرًا - يحدد
<p>العنصر فقرة
مستندات HTML
يجب أن تبدأ جميع مستندات HTML بإعلان نوع المستند <!DOCTYPE html>:.
يبدأ مستند HTML نفسه بـ <html>وينتهي بـ </html>.
يقع الجزء المرئي من مستند HTML بين <body>و </body>.
بنية مستند HTML
يوجد أدناه تصور لمستند HTML (صفحة HTML):
ملاحظة: يتم فقط عرض المحتوى الموجود داخل قسم <body> (المنطقة البيضاء أعلاه) في المتصفح.
عناوين HTML
يتم تعريف عناوين HTML بعلامات <h1>to <h6>.
<h1>يحدد العنوان الأكثر أهمية. <h6>يحدد العنوان الأقل أهمية:
مثال
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
فقرات HTML
يتم تعريف فقرات HTML بالعلامات <p>:
مثال
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
روابط HTML
يتم تعريف روابط HTML بالعلامات <a>:
مثال
<a href="https://www.w3schools.com">This is a link</a>
يتم تحديد وجهة الارتباط في hrefالسمة.
صور HTML
يتم تعريف صور HTML بالعلامات <img>.
الملف المصدر ( src) ، والنص البديل ( alt) ،
widthويتم heightتوفيرها كسمات:
مثال
<img src="img_w3schools.jpg" alt="W3Schools" style="width:120px;height:150px"
أزرار HTML
يتم تعريف أزرار HTML بالعلامات <button>:
مثال
<button>Click me</button>
قوائم HTML
يتم تعريف قوائم HTML <ul>بعلامات (قائمة غير مرتبة / ذات تعداد نقطي) أو
<ol>(قائمة مرتبة / مرقمة) ، متبوعة <li>
بالعلامات (عناصر القائمة):
مثال
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
جداول HTML
يتم تعريف جدول HTML <table>بعلامة.
يتم تعريف صفوف الجدول بالعلامات <tr>.
يتم تعريف رؤوس الجدول بالعلامات <th>. (غامق ومتمركز بشكل افتراضي).
يتم تعريف خلايا الجدول (البيانات) بالعلامات <td>.
مثال
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
برمجة HTML
يمكن أن يكون لكل عنصر HTML سمات .
بالنسبة لتطوير وبرمجة الويب ، فإن أهم السمات هي المعرف والفئة . غالبًا ما تُستخدم هذه السمات لمعالجة عمليات التلاعب بصفحات الويب القائمة على البرامج.
| يصف | مثال |
|---|---|
| بطاقة تعريف | <table id = "table01" |
| صف دراسي | <p class = "normal"> |
| نمط | <p style = "font-size: 16px"> |
| البيانات- | <div data -id = "500"> |
| عند النقر | <input onclick = "myFunction ()"> |
| على الفأرة فوق | <a onmouseover ="this.setAttribute('style'،'color:red')"> |
دروس HTML كاملة
لقد كان هذا وصفًا موجزًا لـ HTML.
للحصول على برنامج تعليمي HTML كامل ، انتقل إلى W3Schools HTML Tutorial .
للحصول على مرجع كامل لعلامة HTML ، انتقل إلى مرجع علامة W3Schools .