مدونة عربيكو التعليمية: لغة (html) المقدمة

HTML هي لغة ترميز أساسية في تطوير الويب، تستخدم في بناء هيكل صفحات الانترنت، تتكون من وسوم وعناصر وسمات، وتتكامل مع بعض اللغات الأخري في تطوير الويب.

الوسوم html

الوسوم هي كل مايكتب بين علامتي الزاوية<...>،وهي التي تحدد نوعية العنصر وتتحكم في بداية العنصر نهايته في الصفحة، لكل عنصر وسم يختلف عن الاخر في الصفحات، مثال لذلك:- الوسم<a>يشير لنوع العنصر رابط ، بينما الوسم<p> يشير لنوع العنصر فقرة نصية.
تنقسم الوسوم من حيث الشكل الي:-
وسم البداية: يحدد بداية العنصر مثال:-<h1>
وسم النهاية: يحدد نهاية العنصر مثال:-</h1>
وسوم ذاتية الاغلاق: يحدد نهاية العناصر التي تحتوي علي وسم واحد مثال:-<meta charset="UTF-8"/>

مثال لوسوم html:-

<html>  <head>  </body>  </title>  <p> 
<meta charset="UTF-8"/>  <h1>   </h2>

عناصر html

هي المكونات الأساسية لبناء صفحة الويب، يتكون العنصر من وسم واحد او وسمين زائد محتوي.
العناصر التي تتكون من وسمين غالبا ماتحتوي علي محتوي مرئي في الشاشة مثل النصوص والصور والروابط والقوائم وغيرها، بينما العناصر التي تتكون من وسم واحد عادة ما تحتوي علي محتوي وصفي للمتصفحات او محركات البحث.

أهم انواع العناصر

العناصر الوصفية :تقدم وصفا للمتصفحات ومحركات البحث.
العناصر المرئية :تعرض كل ماهو مرئي في الصفحة.

أمثالة لعناصر وصفية:-

<meta charset="UTF-8"/>
يصف ترميز الاحرف.

<link href="..."/>
يصف ايقونة الصفحة.

<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
يصف كيفية عرض الصفحة في الشاشات المختلفة.

أمثالة لعناصر مرئية:-

<h1>...</h1>
يعرض عنوان جانبي مرئي

<p>...</p>
يعرض فقرة نصية مرئية.

<ol>...</ol>
يعرض قائمة مرئية

سمات html

هي عبارة عن معلومات إضافية تضاف للعنصر أو تخصصه أو تغير سلوكه او تحدد وظيفته في الصفحة، بعض عناصر html لا تعمل الا بوجود سمة تحدد وظيفة العنصر في الصفحة، وبعضها يعمل بدون سمة، تكتب السمات داخل وسم البداية للعنصر، ويمكن إضافة أكثر من سمة للعنصر كل سمة تقوم بوظيفة محددة في العنصر نفسه، ويجب فصل اسم السمة واسم العنصر بفراغ وإضافة علامة =بعد اسم السمة لتحديد قيمة السمة، ويجب ان تكون قيمة السمة بين علامتي التنصيص "..."واذا كانت هناك أكثر من سمة يجب الفصل ايضا بفراغ بين اسم السمة والاخري، انظر كيفية إضافة سمات داخل عنصر:-

<html lang="ar">...</html>
عنصر يحتوي علي سمة واحدة.

<html lang="ar" dir="ltr">...</html>
عنصر يحتوي علي أكثر من سمة.

ملف Html

هو الهيكل الاساسي لصفحات الانترنت، يتكون من إعلان وثيقة الصفحة وعناصر متعددة أهمها عنصر الجذر وعنصر الرأس وعنصر الجسم انظر ادناه مثال لملف html.

<!DOCTYPE html>
  <html>

     <head>...</head>   

     <body>...</body>

 </html>

يبدأ ملف صفحة html بإعلان وثيقة الصفحة، ثم وسم البداية لعنصر الجذر، وينتهي بوسم النهاية لعنصر الجذر.

إعلان وثيقة الصفحة  <!DOCTYPE html>

وسم البداية لعنصر الجذر  <html>

يسمي باسم عنصر الرأس  <head>

يسمي باسم عنصر الجسم <body>

وسم النهاية لعنصر الجذر  </html>

☆ملاحظات هامة

وسم النهاية هو نفسه وسم البداية متبوعا ب/قبل اسم العنصر
<html> هو العنصر الاب لجميع العناصر.
<head> يهتم بالعناصر الوصفية في الصفحة.
<body> يهتم بالعناصر المرئية في الصفحة.
العناصر التي تحتوي علي وسم واحد، تغلق بعلامة الشرطة /بعد اسم العنصر

تكامل html مع لغات تطوير الويب الاخري

تعتبر لغة html هي الاهم في تطوير الويب دورها الأساسي هو تكوين بنية الصفحة بمعني اخر هي التي تقوم بتكوين محتوي الصفحة، ولكنها لاتهتم بمظهر المحتوي، هناك لغة Css تهتم بمظهر الصفحة، وهناك لغة جافاسكريبت تقوم بإضافة التفاعلية مع الصفحة، يتم اضافة هذه اللغات داخل ملف ملف htmlعن طريق عنصر محدد او سمة محددة، ويمكن شرح التكامل بطريقة مختصرة أكثر.
html: هي الهيكل العظمي للبيت
Css: هي لون وشكل البيت.
javascript: هي الانارة والديكور وغير ذلك.

كيفية كتابة صفحة ويب بسيطة

لكتابة صفحة بسيطة فيها عنوان جانبي زائد فقرة نصية.مثال:-

<!DOCTYPE html>
<html>

  <head>
   <title>صفحة ويب بسيطة</title>
    </head>   

     <body>
   <h2>صفحتي البسيطة</h2>
  <p>مرحبا بكم في صفحتي البسيطة.</p>
 </body>

</html>

المعاينة

صفحتي البسيطة

مرحبا بكم في صفحتي البسيطة.

الان تطبيق مباشر داخل محرر html النتيجة مباشرة

☆الخلاصة: html هي الغة الأساسية لكافة صفحات الويب، وهي تهتم بهيكل صفحات الإنترنت، وتعتبر عناصرها مكونات أساسية لصفحات الانترنت.