مرجع HTML5 و CSS3 السريع: الوسوم، الخصائص، وكيفية معاينة صفحات HTML باستخدام عارض HTML عبر الإنترنت
هل تواجه صعوبة في تذكر وسم HTML أو خاصية CSS معينة؟ هذا الدليل لك. يغطي مرجع HTML السريع هذا أهم وسوم HTML5 وخصائص CSS3، مع مقتطفات برمجية عملية. هل تتساءل كيفية معاينة صفحة HTML بدون خادم محلي؟ اكتشف كيف تختبر وتتخيل كل مثال على الفور باستخدام عارض HTML عبر الإنترنت الخاص بنا والمدمج في سير عمل أسرع وأكثر كفاءة.
القائمة النهائية لوسوم HTML5: هيكلة محتوى الويب الخاص بك
HTML (HyperText Markup Language) هو العمود الفقري لكل صفحة ويب. قدمت HTML5 عناصر دلالية تمنح معنى أوضح لمحتواك، مما يحسن كلاً من إمكانية الوصول وتحسين محركات البحث (SEO). إليك تفصيل للوسوم التي ستستخدمها في أغلب الأحيان.
هيكل المستند الأساسي والبيانات الوصفية
هذه الوسوم تشكل الهيكل العظمي لأي مستند HTML، وتوفر معلومات أساسية للمتصفح ومحركات البحث.
| الوسم | الوصف |
|---|---|
<!DOCTYPE html> | يُصرّح بأن نوع المستند هو HTML5. |
<html> | العنصر الجذر لصفحة HTML. |
<head> | يحتوي على معلومات تعريفية (meta-information) حول المستند. |
<title> | يحدد العنوان لعلامة تبويب المتصفح ونتائج البحث. |
<meta> | يوفر بيانات وصفية مثل مجموعة الأحرف، وإعدادات منفذ العرض (viewport)، والوصف. |
<link> | يربط بموارد خارجية، وأكثرها شيوعاً أوراق الأنماط CSS. |
<script> | يدمج أو يربط بكود JavaScript قابل للتنفيذ. |
<body> | يحتوي على محتوى الصفحة المرئي. |
عناصر التقسيم والتجميع الدلالية
استخدم هذه الوسوم لهيكلة المحتوى الخاص بك بشكل منطقي، ومنح معنى لأجزاء مختلفة من تخطيط صفحتك.
| الوسم | الوصف |
|---|---|
<header> | يمثل المحتوى التمهيدي لقسم أو الصفحة بأكملها. |
<nav> | يحتوي على روابط التنقل. |
<main> | يحدد المحتوى الرئيسي المهيمن للمستند. |
<article> | يحدد محتوى مستقلاً ومكتفياً ذاتيًا (مثل منشور مدونة، منشور منتدى). |
<section> | يمثل قسماً مستقلاً من المستند. |
<aside> | يحدد المحتوى الجانبي عن المحتوى الرئيسي (مثل الشريط الجانبي). |
<footer> | يمثل تذييل قسم أو الصفحة بأكملها. |
<div> | حاوية عامة لمحتوى التدفق بدون معنى دلالي. |
دلالات مستوى النص والروابط التشعبية
تُستخدم هذه الوسوم لتنسيق النص ومنحه معنى، بدءاً من العناوين والفقرات وصولاً إلى الروابط.
| الوسم | الوصف |
|---|---|
<h1> إلى <h6> | مستويات العناوين، حيث <h1> هو الأكثر أهمية. |
<p> | يحدد فقرة. |
<a> | ينشئ رابطاً تشعبياً. تحدد السمة href عنوان URL. |
<strong> | يشير إلى نص ذي أهمية شديدة (يُظهره المتصفح بشكل عريض افتراضيًا). |
<em> | يشير إلى نص مؤكد (عادة ما يكون مائلاً). |
<span> | حاوية مضمنة عامة لمحتوى العبارة. |
<br> | يدرج فاصل سطر واحد. |
<blockquote> | يحدد قسماً مقتبساً من مصدر آخر. |
النماذج، المدخلات، والعناصر التفاعلية
النماذج ضرورية لتفاعل المستخدم. تسمح لك هذه الوسوم بجمع مدخلات المستخدم.
| الوسم | الوصف |
|---|---|
<form> | حاوية لإنشاء نموذج HTML لإدخال المستخدم. |
<input> | العنصر الأكثر تنوعاً في النماذج؛ يتم تحديد النوع بواسطة السمة type (مثل: text, password, checkbox, submit). |
<textarea> | يحدد عنصر تحكم إدخال نصي متعدد الأسطر. |
<label> | يحدد تسمية لعنصر <input>. |
<button> | يحدد زراً قابلاً للنقر. |
<select> | ينشئ قائمة منسدلة. |
<option> | يحدد خياراً ضمن قائمة <select>. |
الوسائط، والتضمينات، والمحتوى الخارجي
أضف الحياة إلى صفحاتك بالصور ومقاطع الفيديو والمحتوى المضمن الآخر.
| الوسم | الوصف |
|---|---|
<img> | يدمج صورة. يتطلب السمات src (المصدر) و alt (نص بديل). |
<video> | يدمج مشغل فيديو. |
<audio> | يدمج مشغل محتوى صوتي. |
<iframe> | يحدد إطاراً مضمناً لتضمين مستند آخر داخل المستند HTML الحالي. |
القوائم والجداول: تنظيم البيانات بفعالية
هيكل العناصر ذات الصلة أو البيانات الجدولية بوضوح باستخدام القوائم والجداول.
| الوسم | الوصف |
|---|---|
<ul> | يحدد قائمة غير مرتبة (منقطة). |
<ol> | يحدد قائمة مرتبة (مرقمة). |
<li> | يحدد عنصراً في القائمة ضمن <ul> أو <ol>. |
<table> | يحدد جدولاً. |
<tr> | يحدد صفاً في الجدول. |
<th> | يحدد خلية رأس في الجدول. |
<td> | يحدد خلية بيانات قياسية في الجدول. |
<caption> | يحدد تسمية توضيحية للجدول. |
القائمة النهائية لخصائص CSS3 الأساسية: أَنشِئ صفحات الويب الخاصة بك كمحترف
CSS (Cascading Style Sheets) يضفي الحيوية على HTML الخاص بك، ويتحكم في التخطيط والألوان والخطوط والمظهر المرئي العام. يغطي مرجع CSS السريع هذا الخصائص التي ستحتاجها لإتقان أي تصميم.
محدِّدات CSS وأولوية المحددات (Specificity)
تستهدف المحدِّدات عناصر HTML التي تريد تصميمها. فهمها هو الخطوة الأولى لاستخدام CSS بفعالية.
| محدِّد | مثال | الوصف |
|---|---|---|
| النوع (Type) | p | يحدد جميع عناصر <p>. |
| الفئة (Class) | .my-class | يحدد جميع العناصر التي لها class="my-class". |
| المعرف (ID) | #my-id | يحدد العنصر الوحيد الذي له id="my-id". |
| السمة (Attribute) | [href] | يحدد جميع العناصر التي لها السمة href. |
| السليل (Descendant) | article p | يحدد جميع عناصر <p> داخل <article>. |
| الفئة الزائفة (Pseudo-class) | a:hover | يحدد رابطاً عند مرور مؤشر الفأرة فوقه. |
نموذج الصندوق وخصائص التحجيم
كل عنصر في الصفحة عبارة عن صندوق مستطيل. يحدد نموذج الصندوق كيفية عمل حجمه وحاشيته وحدوده وهامشه معًا.
| الخاصية | قيم مثال | الوصف |
|---|---|---|
width | 100px, 50%, auto | يحدد عرض العنصر. |
height | 100px, 50vh, auto | يحدد ارتفاع العنصر. |
padding | 10px, 5px 10px | يحدد الحشوة بين المحتوى والحد. |
border | 1px solid black | اختصار لتحديد عرض الحد، ونمطه، ولونه. |
margin | 10px, 5px 10px | يحدد الهامش خارج الحد، بين العناصر. |
box-sizing | border-box | يغير كيفية حساب width و height، بما في ذلك الحشوة والحد. |
الطباعة وتصميم النص
تحكم في شكل النص لإنشاء محتوى مقروء وجذاب بصرياً.
| الخاصية | قيم مثال | الوصف |
|---|---|---|
font-family | "Arial", sans-serif | يحدد الخط للعنصر. |
font-size | 16px, 1.2em, 1rem | يحدد حجم النص. |
font-weight | normal, bold, 700 | يحدد سمك الخط. |
color | black, #333, rgb(0,0,0) | يحدد لون النص. |
text-align | left, center, right | محاذاة النص داخل العنصر. |
line-height | 1.5 | يحدد المسافة بين أسطر النص. |
تصميمات مرنة باستخدام فليكس بوكس (Flexbox)
فليكس بوكس هو نموذج تخطيط أحادي البعد لترتيب العناصر في صفوف أو أعمدة. إنه يجعل إنشاء تخطيطات متجاوبة أمراً بديهياً.
| الخاصية (للحاوية) | قيم مثال | الوصف |
|---|---|---|
display | flex | يُمكّن نموذج تخطيط فليكس بوكس. |
flex-direction | row, column | يحدد اتجاه المحور الرئيسي. |
justify-content | center, space-between | يوزع العناصر على طول المحور الرئيسي. |
align-items | center, stretch | يضبط العناصر على طول المحور المتقاطع. |
flex-wrap | nowrap, wrap | يسمح للعناصر بالالتفاف على أسطر متعددة. |
تصميمات قائمة على الشبكة باستخدام شبكة CSS (CSS Grid)
شبكة CSS هي نظام تخطيط ثنائي الأبعاد قوي، يسمح لك بالتحكم في الأعمدة والصفوف في وقت واحد.
| الخاصية (للحاوية) | قيم مثال | الوصف |
|---|---|---|
display | grid | يُمكّن نموذج تخطيط الشبكة. |
grid-template-columns | 1fr 1fr 100px, repeat(3, 1fr) | يحدد أعمدة الشبكة. |
grid-template-rows | auto 100px | يحدد صفوف الشبكة. |
gap | 10px | يحدد حجم الفجوة بين خلايا الشبكة. |
الخلفيات، الحدود، والظلال
أضف عمقاً وأناقة لعناصرك بهذه الخصائص الزخرفية.
| الخاصية | قيم مثال | الوصف |
|---|---|---|
background-color | lightblue, #f0f0f0 | يحدد لون خلفية العنصر. |
background-image | url('image.jpg') | يحدد صورة خلفية. |
border-radius | 5px, 50% | يقوم بتدوير زوايا حد العنصر. |
box-shadow | 10px 5px 5px black | يضيف تأثيراً ظلياً حول إطار العنصر. |
الانتقالات، التحويلات، والرسوم المتحركة
أنشئ واجهات مستخدم ديناميكية وتفاعلية بتأثيرات بصرية سلسة.
| الخاصية | قيم مثال | الوصف |
|---|---|---|
transition | all 0.3s ease-in-out | يُمكّن تغييرات الخصائص السلسة على مدى فترة زمنية معينة. |
transform | rotate(45deg), scale(1.2) | يطبق تحويلاً هندسياً (تدوير/تحجيم/إمالة) في المستوى ثنائي أو ثلاثي الأبعاد. |
animation | slide-in 1s forwards | خاصية مختصرة لتنفيذ رسوم متحركة مُعرفة مسبقًا (via @keyframes). |
لماذا يعتبر عارض HTML (Html Viewer) محرر HTML وعارضك المفضل عبر الإنترنت
امتلاك مرجع سريع رائع هو أمر، ولكن القدرة على التطبيق الفوري ورؤية النتائج هو ما يسرّع التعلم والتطوير حقًا. هنا يصبح محرر HTML عبر الإنترنت مثل Html Viewer حليفك الأقوى.
معاينة مباشرة فورية للتجريب السريع
انسخ أي مقتطف برمجي من هذا الدليل، والصقه في المحرر الخاص بنا، وشاهده وهو يُصيّر (render) في الوقت الفعلي. لا حاجة لحفظ الملفات، أو التبديل بين النوافذ، أو تحديث المتصفح. هذه الحلقة التفاعلية الفورية مثالية لتعديل خصائص CSS إلى حد الكمال أو لفهم كيفية هيكلة وسم HTML جديد لمحتواك. يمكنك اختبار هذه المقتطفات الآن ورؤية السحر بنفسك.
تحرير، وتنسيق، وتصغير الكود بسهولة
أداتنا أكثر من مجرد عارض. إنها حل سير عمل متكامل. إذا جمعت أكواداً من مصادر مختلفة، فإن نقرة واحدة على زر "تنسيق الكود (Beautify)" ستقوم بتنسيقها في هيكل نظيف وقابل للقراءة. عندما تكون جاهزاً للنشر، فإن وظيفة "تصغير الحجم (Minify)" تضغط الكود الخاص بك، مما يحسنه لتحميل أسرع للصفحات. هذه الوظيفة المتكاملة تجعل عملية الترميز بأكملها أكثر سلاسة.
الوصول في أي مكان، في أي وقت: لا يتطلب إعداداً
انسَ أمر تثبيت بيئات تطوير متكاملة (IDEs) ثقيلة أو تكوين بيئات محلية معقدة. محرر HTML هذا عبر الإنترنت يعمل بالكامل في متصفحك. سواء كنت تستخدم جهاز كمبيوتر محمول في مقهى أو كمبيوتر مشترك في مختبر، فإن بيئة تطوير آمنة (sandbox) القوية لـ HTML و CSS الخاصة بك تكون دائماً على بعد عنوان URL، جاهزة كلما ألهمتك الفكرة.
أتقن تطوير الويب بشكل أسرع: مرجع HTML و CSS الأساسي الخاص بك
ضع علامة مرجعية لهذه الصفحة كدليلك النهائي لأساسيات HTML5 و CSS3. استخدمها للعثور بسرعة على الوسم أو الخاصية الصحيحة، وفهم تركيبها (syntax)، وبناء مشاريعك بثقة. والأهم من ذلك، اجمع هذه المعرفة مع القوة العملية لأداتنا. كل مقتطف هنا هو فرصة للتجريب والتعلم. توجه إلى محرر HtmlViewer.cc لإضفاء الحيوية على ورقة الغش هذه وتحويل سير عمل الترميز الخاص بك اليوم.
أسئلة متكررة حول مراجع HTML و CSS السريعة
كيف يمكنني عرض كود HTML بسرعة من موقع ويب أو ملف محلي؟
أسهل طريقة هي استخدام عارض HTML عبر الإنترنت. باستخدام أداتنا، يمكنك لصق الكود مباشرة، أو تحميل ملف HTML، أو حتى إدخال عنوان URL لجلب وعرض مصدر HTML من موقع ويب مباشر. بمجرد التحميل، يمكنك عرض الكود ومعاينته المرئية جنباً إلى جنب، مما يجعله مثالياً للتعلم وتصحيح الأخطاء.
ما هو مرجع HTML و CSS السريع، ولماذا هو مفيد؟
مرجع HTML و CSS السريع هو دليل مرجعي موجز يسرد الوسوم والخصائص والصيغ (syntax) والمفاهيم شائعة الاستخدام. إنه مفيد بشكل لا يصدق للمطورين من جميع المستويات لأنه يوفر الوقت، ويلغي الحاجة إلى حفظ كل تفصيل، ويعمل كمورد سريع وموثوق لتصحيح الأخطاء وبناء صفحات الويب بكفاءة.
هل يمكنني اختبار مقتطفات أكواد HTML5 و CSS3 هذه فوراً عبر الإنترنت؟
بالتأكيد! هذا هو بالضبط ما تم تصميم منصتنا من أجله. يمكنك نسخ أي مثال من هذا الدليل، ولصقه في المحرر على صفحتنا الرئيسية، ورؤية النتيجة فوراً في لوحة المعاينة المباشرة. جرب بحرية وافهم حقًا كيف تتجسد مجموعات الأكواد المختلفة.
كيف يمكنني التأكد من أن HTML و CSS الخاصين بي يمكن الوصول إليهما ومنظمان بشكل جيد؟
ابدأ باستخدام وسوم HTML5 الدلالية (<main>, <nav>, <article>) بشكل صحيح، لأنها توفر معنى جوهرياً. بالنسبة لـ CSS، تأكد من وجود تباين كافٍ في الألوان واستخدم وحدات متجاوبة مثل rem لأحجام الخطوط. ممارسة رائعة هي لصق الكود الخاص بك في المحرر الخاص بنا واستخدام زر "تنسيق الكود (Beautify)". يقوم هذا بتنسيق الكود الخاص بك مع مسافة بادئة صحيحة، مما يسهل مراجعة الهيكل وتحديد المشكلات المحتملة.