رموز html 2020

  



اصبحت HTML اقوى من أي وقت مضى 

إليك بعض الوسوم الرائعة في HTML التي يمكنك استخدامها دون الحاجة الى JS 

1- الوسم <dialog>

يستخدم لإظهار نافذة منبثقة تفاعلية للمستخدم 

مثال 

<dialog open>

  <p>Dialog Content</p>

</dialog>

2- الوسم <details> & <Summary>

يستخدم لإظهار محتوى قابل للطي 

مثال 

<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" />

كما تلاحظ تم تحديد المدخلات بانها عددية فقط 

خلاف ذلك سوف يظهر اللون الاحمر للتنبيه 


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>


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>


8- الوسم <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 as anything special in any of the major browsers.</p>


10- الوسم <mark> يستخدم هذا الوسم لتمييز كلمة او جملة بعلامة مائية للفت انتباه القاريء 

مثال :


<p>Do not forget to buy <mark>milk</mark> today.</p>

 لي مشاهدات المزيد اضغط :هناء 

Post a Comment

syria.suv@gmail.com

Previous Post Next Post

ADS

Ammar Johmani Magazine publisher News about syria and the world.