الكاتب: محمد السنوسي
📃

عناصر البيانات المرئية في لغة (html)

ماهي العناصر المرئية (Visual Elements) ؟ هي العناصر التي تنشئ محتوي مرئي للمستخدم ويتفاعل معها، مثل: الصور والنصوص والروابط والقوائم والعناوين والجداول وغيرها من البيانات المرئية للمستخدم، جميع العناصر المرئية تكون داخل عنصر الجسم<body>في مستند (html).

أهم العناصر المرئية

عنصر الفقرة<p>

عنصر يستخدم لإضافة فقرة نصية مثال :

<p>هذه فقرة </p>

عناصر العناوين<h1> الي<h6>

وهو عناصر تستخدم لإضافة عناوين داخل صفحات الانترنت، ويمكن من خلالها كتابة عناوين داخل المقالات او المشاركات لتنظيم الصفحة وهذه العناوين عددها ستة عنوان مثال : 

<h1>عنوان اول </h1>
<h2>عنوان ثاني </h2>
<h3>عنوان ثالث </h3>
<h4>عنوان رابع </h4>
<h5>عنوان خامس </h5>
<h6>عنوان سادس </h6>
ملاحظة
  • تستخدم عناصر العناوين لاضافة عناوين فرعية داخل صفحات الانترنت.
  • عنصر العنوان الاول <h1>له اهمية كبيرة لمحركات البحث فهو يمثل العنوان الاساسي للمحتوي ويجب الا يتكرر في الصفحة أكثر من مرة.
  • عنصر العنوان <h2> ثاني اكثر اهمية ويليه عنصر العنوان <h3> ويكون ترتيب بقية العناوين هكذا الي العنصر <h6>وهو يمثل اقل أهمية .

عنصر الصورة <img>

وهو عنصر يستخدم لاظهار صورة للمستخدم، وهو من العناصر التي تحتاج الي سمة تحدد مسار او رابط الصورة مثل السمة srcمثال:

<img src="مسار او رابط الصورة هنا"/>

عنصر الرابط <a>

وهو عنصر يستخدم لإضافةرابط مرئي للمستخدم ،قد يكون الرابط صفحة داخل الموقع نفسه او قد يكون الرابط الي صفحة خارجية صفحة لموقع اخر، وهذا العنصر يحتاج للسمة hrefلتحديد مسار الرابط مثال :

<a href="مسار الرابط">...</a>

عناصر القائمة <ol>و <ul>و<dl>

وهي عناصر تستخدم لعمل قوائم لغرض محدد مثل قائمة اصناف محددة او قائمة نصوص محددة، وهي ثلاث عناصر، ويتم إضافة العنصر <li>داخل هذه القوائم لتنظيم القائمة، هناك ثلاث انواع للقوائم منها قائمة مرتبة<ol> وهي قائمة تضع ترقيم تلقائي للبيانات واخري وقائمة غير مرتبة<ul> وهذه قائمة نقطية تضيف نقاط تلقائيا للبيانات مثال لذلك 

قائمة مرتبة
<ol>
<il>طماطم</li>
<il>تفاح </li>
<il>عنب </li>
</ol>
النتيجة
  1. طماطم
  2. تفاح
  3. عنب
قائمة غير مرتبة نقطية
<ul>
<il>طماطم</li>
<il>تفاح </li>
<il>عنب </li>
</ul>
النتيجة
  • طماطم
  • تفاح
  • عنب

عناصر الجدول<table>

وهو عنصر يستخدم لعمل جدول للبيانات هناك عناصر مصاحبة لعنصر الجدول تستخدم لاضافة صفوف واعمدة مثل العناصر الاتية
<td>و<tr>و<th>و<tbody> وتكون هذه العناصر داخل عنصر الجدول.

كيفية كتابة العناصر المرئية داخل صفحة

يجب ان تكون داخل العنصر <body>هكذا 
<body> هنا </body>

مثال:-
اذا كانت لدينا هذه العناصر 
عنوان جانبي
<h3>العناصر المرئية</h3>
عنصر فقرة نصية <p>هي عناصر تظهر للمستخدم. </p>
سيكون الامر هكذا داخل صفحة الويب 
<!DOCTYPE html>
<html>
<head></head>

<body>
<h3>العناصر المرئية</h3>
<p> .هي عناصر تظهر للمستخدم</p>
</body>

</html>
ستظهر هكذا في الصفحة

العناصر المرئية

هي عناصر تظهر للمستخدم.

ويمكن عمل ذلك تطبيق ذلك عمليا في محرر html
السابقالتالي