|
| وسوم HTML الأساسية |
في عالم تطوير الويب، تعتبر لغة HTML (HyperText Markup Language) أساسية جدًا. تستخدم HTML لبناء هياكل صفحات الويب وتنسيقها، وتعتبر الوسوم (Tags) الأساسية جزءًا هامًا من هذه اللغة. في هذا المقال، سنستعرض بعض الوسوم الأساسية في HTML ونوضح استخداماتها وأمثلة عملية لكل وسم.
وسوم HTML الأساسية
1. وسم <html>:
يُستخدم هذا الوسم لتعريف بداية ونهاية الصفحة الأساسية في HTML.
مثال:<!DOCTYPE html>
<html>
<head>
<title>عنوان الصفحة</title>
</head>
<body>
<h1>مرحبًا بك في صفحة الويب!</h1>
</body>
</html>2. وسم <head>:
يحتوي هذا الوسم على المعلومات الرئيسية للصفحة مثل عنوان الصفحة ورابط النمط (CSS) والسكريبتات اللازمة.
مثال:<head>
<title>عنوان الصفحة</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>3. وسم <body>:
يحتوي هذا الوسم على محتوى الصفحة القابل للعرض للمستخدم، مثل النص والصور والروابط.
مثال:<body>
<h1>مرحبًا بك في صفحة الويب!</h1>
<p>هذا هو محتوى الصفحة.</p>
<img src="image.jpg" alt="صورة توضيحية">
<a href="https://example.com">رابط موقع خارجي</a>
</body>4. وسم <h1> إلى <h6>:
تُستخدم هذه الوسوم لتعريف عناوين الصفحة بتنسيقات مختلفة، حيث يكون <h1> هو العنوان الرئيسي الأهم و <h6> هو الأدنى أهمية.
مثال:<h1>عنوان رئيسي</h1> <h2>عنوان فرعي</h2> <h3>عنوان فرعي أصغر</h3>
5. وسم <p>:
يُستخدم هذا الوسم لتعريف فقرة نصية في الصفحة.
مثال:<p>هذه هي فقرة نصية في الصفحة.</p>
6. وسم <a>:
يُستخدم هذا الوسم لإنشاء روابط وصلات لصفحات أخرى.
مثال:<a href="https://example.com">انقر هنا لزيارة الموقع</a>
7. وسم <div>:
يستخدم هذا الوسم لتعريف قسم عام في الصفحة، ويساعد في تنظيم وتجميع العناصر.
مثال:<div>
<h3>عنوان القسم</h3>
<p>هذا هو محتوى القسم.</p>
</div>8. وسم <img>:
يُستخدم هذا الوسم لإدراج صورة في الصفحة، حيث يحتوي على معلومات الصورة مثل المسار والنص البديل.
مثال:<img src="image.jpg" alt="صورة توضيحية">
9. وسم <ul> و <li>:
يُستخدم وسم <ul> لإنشاء قائمة غير مرتبة، بينما يُستخدم وسم <li> لتعريف عناصر القائمة.
مثال:<ul>
<li>عنصر 1</li>
<li>عنصر 2</li>
<li>عنصر 3</li>
</ul>10. وسم <table> و <tr> و <td>:
يُستخدم وسم <table> لإنشاء جدول في الصفحة، ويستخدم وسم <tr> لتعريف صفوف الجدول، ويستخدم وسم <td> لتعريف خلايا الجدول.
مثال:<table>
<tr>
<td>خلية 1</td>
<td>خلية 2</td>
</tr>
<tr>
<td>خلية 3</td>
<td>خلية 4</td>
</tr>
</table>11. وسم <form> و <input>:
يُستخدم وسم <form> لإنشاء نموذج يتيح للمستخدم إدخال البيانات، ويستخدم وسم <input> لإضافة حقول إدخال مختلفة مثل النص والبريد الإلكتروني وغيرها.
مثال:<form>
<label for="name">الاسم:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">البريد الإلكتروني:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="إرسال">
</form>هذه كانت بعض الوسوم الأساسية في HTML مع أمثلة توضيحية. يمكن استخدامها كنقطة انطلاق لتعلم اللغة وبناء صفحات الويب الأساسية. قم بممارسة واستكشاف مزيد من الوسوم وقواعدها لتوسيع مهاراتك في تطوير الويب.
جميع الحقوق محفوظة ©
www.webwrd.com