جميع وسوم و خصائص اللغة في HTML
أهلاً بك! بما أنك هنا، خلينا ندخل في الموضوع مباشرة بدون تعقيدات. HTML (HyperText Markup Language) هي اللغة الأساسية لبناء صفحات الويب. كل شيء تشوفه في أي صفحة ويب مبني على وسوم (Tags) وخصائص (Attributes).
إيش يعني وسم (Tag)؟
الوسم هو تعليمات للمتصفح كيف يعرض المحتوى. أغلب الوسوم تجي على شكل زوج: وسم فتح و وسم إغلاق، زي <p> للمحتوى و </p> لإغلاقه. فيه وسوم فردية ما تحتاج إغلاق، زي <img> أو <br>.
وإيش يعني خاصية (Attribute)؟
الخاصية هي معلومات إضافية للوسم، وتحدد سلوكه أو شكله. دايماً تجي داخل وسم الفتح على شكل اسم_الخاصية="القيمة". مثلاً، في وسم الصورة <img src="صورة.jpg" alt="وصف الصورة">، الـ src والـ alt هي خصائص.
ملاحظة سريعة: ما راح نقدر نغطي كل وسم وكل خاصية بالتفصيل الممل هنا، لأن عددهم كبير جداً ويتطورون باستمرار. الهدف هو نعطيك نظرة شاملة عن أهمها وكيف تشتغل، عشان تقدر تبدأ وتفهم الأساسيات.
هيكل صفحة HTML الأساسي
كل صفحة HTML تبدأ بهذي الوسوم الأساسية:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>عنوان الصفحة</title>
<link rel="stylesheet" href="style.css">
<style>
/* أكواد CSS هنا */
</style>
</head>
<body>
<!-- محتوى الصفحة يجي هنا -->
</body>
</html><!DOCTYPE html>: يعرّف نوع المستند.<html>: الجذر لكل محتوى HTML. الخاصيةlang="ar"تحدد لغة المحتوى.<head>: يحتوي على معلومات عن الصفحة (metadata) ما تظهر للمستخدم مباشرة، زي عنوان الصفحة في تبويبة المتصفح، الروابط لملفات CSS، وغيرها.<meta>: يوفر بيانات وصفية عن الصفحة. مثلاً،charset="UTF-8"يحدد ترميز الأحرف.<title>: عنوان الصفحة اللي يظهر في تبويبة المتصفح.<link>: يربط ملفات خارجية بالصفحة، زي ملفات CSS بالخاصيةrel="stylesheet"وhref="style.css".<style>: لكتابة أكواد CSS مباشرة داخل الصفحة.<body>: هذا هو المكان اللي تحط فيه كل المحتوى المرئي لصفحتك.
وسوم النصوص والتنسيق
هذي الوسوم تستخدم لتنسيق النصوص:
<h1>إلى<h6>: عناوين بمستويات مختلفة (من الأكبر للأصغر).<p>: فقرة نصية عادية.<br>: لإنشاء سطر جديد (كسر سطر).<hr>: لإنشاء خط أفقي فاصل.<b>أو<strong>: لجعل النص غامق (Bold).<strong>له أهمية دلالية أكبر.<i>أو<em>: لجعل النص مائل (Italic).<em>له أهمية دلالية أكبر.<blockquote>: لعرض اقتباسات طويلة.<pre>: لعرض نص منسق مسبقاً، يحافظ على المسافات والأسطر الجديدة.<code>: لعرض جزء من كود برمجي.<span>: حاوية نصية داخلية (inline) تستخدم للتنسيق بواسطة CSS غالباً.<div>: حاوية عامة على مستوى الكتلة (block-level) تُستخدم لتجميع العناصر وتنسيقها.
الروابط والصور
<a>: لإنشاء رابط (hyperlink).href: أهم خاصية، تحدد عنوان URL للرابط.target: تحدد أين يفتح الرابط (_selfفي نفس التبويبة،_blankفي تبويبة جديدة).
<a href="https://example.com" target="_blank">زر موقعنا</a><img>: لإضافة صورة. وسم فردي.src: مسار الصورة.alt: نص بديل للصورة (مهم جداً لتحسين محركات البحث ولضعاف البصر).width,height: لتحديد عرض وارتفاع الصورة.
<img src="صورة.jpg" alt="صورة توضيحية" width="300">
القوائم (Lists)
<ul>: قائمة غير مرتبة (Unordered List) بعلامات نقطية.<li>: عنصر في القائمة.
<ul><li>تفاح</li><li>برتقال</li></ul><ol>: قائمة مرتبة (Ordered List) بأرقام أو أحرف.<li>: عنصر في القائمة.
<ol><li>الخطوة الأولى</li><li>الخطوة الثانية</li></ol><dl>: قائمة وصف (Description List).<dt>: مصطلح الوصف (Description Term).<dd>: وصف المصطلح (Description Description).
<dl><dt>HTML</dt><dd>لغة بناء صفحات الويب.</dd></dl>
الجداول (Tables)
لإنشاء جداول لعرض البيانات المنظمة:
<table>
<thead>
<tr>
<th>الاسم</th>
<th>العمر</th>
</tr>
</thead>
<tbody>
<tr>
<td>أحمد</td>
<td>30</td>
</tr>
<tr>
<td>سارة</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">إجمالي: شخصين</td>
</tr>
</tfoot>
</table><table>: حاوية الجدول بالكامل.<thead>: رأس الجدول.<tbody>: جسم الجدول.<tfoot>: تذييل الجدول.<tr>: صف في الجدول (Table Row).<th>: خلية رأس الجدول (Table Header).<td>: خلية بيانات الجدول (Table Data).- الخصائص الشائعة:
colspan(دمج خلايا أفقياً)،rowspan(دمج خلايا عمودياً).
النماذج (Forms)
لجمع المدخلات من المستخدمين:
<form action="/submit-data" method="POST">
<label for="username">اسم المستخدم:</label>
<input type="text" id="username" name="username" placeholder="أدخل اسمك" required><br><br>
<label for="password">كلمة المرور:</label>
<input type="password" id="password" name="password" required><br><br>
<label for="message">رسالتك:</label>
<textarea id="message" name="message" rows="5" cols="30"></textarea><br><br>
<label for="country">الدولة:</label>
<select id="country" name="country">
<option value="sa">السعودية</option>
<option value="eg">مصر</option>
</select><br><br>
<input type="checkbox" id="agree" name="agree" value="yes">
<label for="agree">أوافق على الشروط</label><br><br>
<button type="submit">إرسال</button>
</form><form>: حاوية النموذج.action: عنوان URL الذي تُرسل إليه البيانات.method: طريقة الإرسال (GETأوPOST).
<input>: عنصر إدخال متعدد الاستخدامات.type: يحدد نوع الإدخال (text, password, email, number, checkbox, radio, submit, button, file, date, etc.).name: اسم حقل الإدخال (مهم جداً لإرسال البيانات).id: معرف فريد للحقل.value: القيمة الافتراضية أو القيمة المختارة.placeholder: نص يظهر داخل الحقل قبل الإدخال.required: يجعل الحقل إلزامياً.
<textarea>: حقل لإدخال نصوص متعددة الأسطر.<select>و<option>: قائمة منسدلة للاختيار.<label>: نص وصفي لحقل الإدخال، مرتبط به عبر خاصيةforوid.<button>: زر (يمكن أن يكونsubmit,reset, أوbutton).
الوسوم الدلالية (Semantic Tags) في HTML5
هذي الوسوم تساعد على فهم هيكل الصفحة بشكل أفضل للمتصفحات ومحركات البحث:
<header>: رأس القسم أو الصفحة.<nav>: قسم يحتوي على روابط التنقل.<main>: المحتوى الرئيسي والفريد للصفحة.<article>: محتوى مستقل بذاته (مثلاً، مقال في مدونة).<section>: قسم عام من المحتوى.<aside>: محتوى جانبي أو ثانوي.<footer>: تذييل القسم أو الصفحة.<figure>و<figcaption>: لتضمين محتوى ذاتي (صورة، كود) مع شرح.<time>: لتمثيل التاريخ أو الوقت.
وسوم الوسائط المتعددة (Media Tags)
<audio>: لتضمين ملف صوتي.src: مسار الملف الصوتي.controls: لإظهار أزرار التحكم (تشغيل، إيقاف).autoplay: للتشغيل التلقائي (غالباً ما يتم حظره من قبل المتصفحات).loop: لتكرار التشغيل.
<audio src="صوت.mp3" controls loop>متصفحك لا يدعم هذا الصوت.</audio><video>: لتضمين ملف فيديو.src: مسار ملف الفيديو.controls: لإظهار أزرار التحكم.autoplay: للتشغيل التلقائي.loop: لتكرار التشغيل.poster: صورة تظهر قبل تشغيل الفيديو.width,height: لتحديد أبعاد الفيديو.
<video src="فيديو.mp4" controls poster="صورة_غلاف.jpg" width="600">متصفحك لا يدعم هذا الفيديو.</video><source>: يستخدم داخل<audio>أو<video>لتوفير مصادر متعددة للملف (بصيغ مختلفة).<iframe>: لتضمين صفحة ويب أخرى داخل صفحتك.src: عنوان URL للصفحة المراد تضمينها.width,height: أبعاد الإطار.
<iframe src="https://example.com" width="600" height="400"></iframe>
الخصائص العامة (Global Attributes)
هذي الخصائص تقدر تستخدمها مع أي وسم HTML تقريباً:
id: معرف فريد للعنصر في الصفحة. يستخدم للوصول للعنصر بالـ CSS أو JavaScript.class: اسم أو أكثر لفئة (class) يمكن تطبيق عليها تنسيقات CSS أو التعامل معها بالـ JavaScript.style: لتطبيق تنسيقات CSS مباشرة على العنصر (يفضل استخدام ملفات CSS خارجية).title: نص يظهر كتلميح عند تمرير مؤشر الفأرة فوق العنصر.data-*: لإنشاء خصائص بيانات مخصصة يمكنك الوصول إليها بالـ JavaScript.hidden: لإخفاء العنصر.lang: لتحديد لغة محتوى العنصر.dir: لتحديد اتجاه النص (ltrمن اليسار لليمين،rtlمن اليمين لليسار).tabindex: لتحديد ترتيب التركيز على العناصر باستخدام لوحة المفاتيح.contenteditable: لجعل محتوى العنصر قابل للتعديل مباشرة في المتصفح.
خلاصة الكلام
اللي ذكرناه هنا هو نظرة سريعة على أهم الوسوم والخصائص في HTML. تذكر إن HTML لغة ضخمة وتتطور باستمرار. أفضل طريقة لتتعلمها هي بالممارسة والتجربة.
نصيحة أخيرة: إذا احتجت قائمة كاملة ومفصلة لكل الوسوم والخصائص، أنصحك بشدة بزيارة MDN Web Docs أو W3Schools HTML Reference. هذي المصادر هي مرجعك الأساسي لأي شيء تحتاجه في HTML.