اصبحت HTML اقوى من أي وقت مضى
إليك بعض الوسوم الرائعة في HTML التي يمكنك استخدامها دون الحاجة الى JS
تابع التعليقات
إليك بعض الوسوم الرائعة في HTML التي يمكنك استخدامها دون الحاجة الى JS
تابع التعليقات
1- الوسم <dialog>
يستخدم لإظهار نافذة منبثقة تفاعلية للمستخدم
مثال
<dialog open>
<p>Dialog Content</p>
</dialog>
يستخدم لإظهار نافذة منبثقة تفاعلية للمستخدم
مثال
<dialog open>
<p>Dialog Content</p>
</dialog>
2- الوسم <details> & <Summary>
يستخدم لإظهار محتوى قابل للطي
مثال
<details open>
<summary>Heading</summary>
<p>Some extremely long content…</p>
</details>
يستخدم لإظهار محتوى قابل للطي
مثال
<details open>
<summary>Heading</summary>
<p>Some extremely long content…</p>
</details>
3- الوسم <picture>
يسمح العنصر للمطورين بتحديد مصادر مختلفة لنفس الصورة. استنادًا إلى السمات التي تم تمريرها إلى تلك المصادر ، يحدد المستعرض الصورة المراد تنزيلها واستخدامها.
يسمح العنصر للمطورين بتحديد مصادر مختلفة لنفس الصورة. استنادًا إلى السمات التي تم تمريرها إلى تلك المصادر ، يحدد المستعرض الصورة المراد تنزيلها واستخدامها.
4- الوسم <input>
يستخدم عند التحقق من الصحة بشكل فوري مع اختيار اللون المناسب
مثال
<input type="color" />
Number inputs:
<input type="number" min="0" max="99" />
كما تلاحظ تم تحديد المدخلات بانها عددية فقط
خلاف ذلك سوف يظهر اللون الاحمر للتنبيه
يستخدم عند التحقق من الصحة بشكل فوري مع اختيار اللون المناسب
مثال
<input type="color" />
Number inputs:
<input type="number" min="0" max="99" />
كما تلاحظ تم تحديد المدخلات بانها عددية فقط
خلاف ذلك سوف يظهر اللون الاحمر للتنبيه
5- الوسم <main>
يستخدم لتحديد النص الاساسي في الصفحة
يستخدم لتحديد النص الاساسي في الصفحة
6 - الوسم <nav>
يمكنك تجميع الارتباطات links الخاصة بالصفحة على شكل جدول باستخدام الوسم nav
مثال
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
يمكنك تجميع الارتباطات links الخاصة بالصفحة على شكل جدول باستخدام الوسم nav
مثال
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
7- الوسم <header> يستخدم لتحديد راس الصفحة وفصله عن بقية المكونات
مثال
<header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
مثال
<header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
8- الوسم <pre> يستخدم لاظهار النص المكتوب كما هو على سبيل المقال قطعة او خبر
مثال :
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
مثال :
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
9- الوسم <time>
يستخدم لاظهار الوقت والتاريخ حسب التنسيق المطلوب
مثال :
<p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p>
<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>
<p><b>Note:</b> The time element does not render .
يستخدم لاظهار الوقت والتاريخ حسب التنسيق المطلوب
مثال :
<p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p>
<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>
<p><b>Note:</b> The time element does not render .
10- الوسم <mark> يستخدم هذا الوسم لتمييز كلمة او جملة بعلامة مائية للفت انتباه القاريء
مثال :
<p>Do not forget to buy <mark>milk</mark> today.</p>
مثال :
<p>Do not forget to buy <mark>milk</mark> today.</p>
جاري تحميل الاقتراحات...