Also Like

last posts

Creating a simple page Html

تحليل عناصر HTML وعلاماته

ما هي HTML؟

HTML هي لغة ترميز النصوص لخلق صفحات الويب. تعتمد نظام الـ tags أو الوسوم، حيث تستخدم علامات تحاط بقوسين مائلين لتحديد المحتوى.




كيف تعمل العناصر؟

تتكون معظم عناصر HTML من علامة افتتاح < وإغلاق > تحتوي اسم العنصر، مثل:

<p>This is a paragraph.</p>

هذا يمثل فقرة. بعض العناصر لا تحتوي على محتوى، مثل <br> و<hr>

تحليل علامة <p>

علامة <p> تمثل الفقرة (paragraph)، وتستخدم عادة لتقسيم النص إلى فقرات قصيرة قابلة للقراءة.

العلامة الافتتاحية هي <p> والعلامة الختامية هي </p>، ويمكن وضع المحتوى النصي بينهما كما يلي:

<p>This is a simple paragraph.</p>

إنشاء صفحة HTML

يمكن إنشاء ملفات HTML باستخدام أي محرر نصوص، مثل كود بين (CodePen) أو نوتباد (Notepad) أو فيزوال ستوديو كود (Visual Studio Code).

يجب حفظ الملفات بامتداد .html أو .htm حتى يتم التعرف عليها كملفات HTML. يمكن كتابة أبسط صفحة HTML بالشكل التالي:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple paragraph.</p>
</body>
</html>

العلامات الأساسية في HTML

هناك العديد من العلامات الشائعة تستخدم لتنسيق النصوص وإضافة وسائط مثل الصور والأزرار وجداول البيانات وغيرها.

الاختلاف بين العناصر والعلامات

  • العناصر: video, audio, table، تمثل محتوى.
  • العلامات: <video>, <audio>, <table>، تعرّف العناصر في HTML.

 شرح الوسووم  <tags> :


‏>‏!DOCTYPE‏>
‏ تحدد نسخة HTML المستخدمة في المستند. في هذه الحالة HTML5.
<‎html‎>
يفتح الصفحة. لا يجب وضع أي ترميز بعد علامة الإغلاق‏‎<‏html‎/>‏. يعلن سمة lang للغة الرئيسية للصفحة باستخدام رموز اللغة ISO ‏(‏en للإنجليزية‏)‏.

‎<‎head‎>
يفتح قسم head، والذي لا يظهر في نافذة المتصفح الرئيسية ولكن يحتوي أساسًا على معلومات حول ملف HTML، وتسمى بالبيانات الوصفية. كما يمكنه أيضًا احتواء استيراد من أوراق الأنماط والسكربتات الخارجية. العلامة الختامية هي <‎/head‎>‏.

‎<‎meta ‎>
تعطي المتصفح بعض البيانات الوصفية عن المستند. سمة charset تعلن ترميز الحروف المستخدمة. يجب على مستندات HTML الحديثة دائمًا استخدام UTF-8، حتى لو لم يكن ذلك متطلبًا. في HTML، علامة <‎meta‎>‏ لا تتطلب علامة إغلاق.

‎<‎title‎>
عنوان الصفحة. النص المكتوب بين هاتين العلامتين <‎title‎>‏ و<‎/title‎>‏ سيظهر في علامة تبويب الصفحة أو في شريط العنوان للمتصفح.

‎<‎body‎>
يفتح الجزء من المستند الذي يتم عرضه على المستخدمين، أي كل المحتوى المرئي أو السمعي للصفحة. لا يجب إضافة أي محتوى بعد علامة الإغلاق‏<‎/body‎>‏.

‎<‎h1‎> 
عنوان مستوى 1 للصفحة.

مميزات HTML5

قدمت HTML5 العديد من الميزات الجديدة مثل عناصر لإضافة فيديو وصوت ورسومات متحركة وغيرها تساعد في خلق تجارب متكاملة على الويب.

Comments



Font Size
+
16
-
lines height
+
2
-