20/02/2024
تعلم أساسيات HTML

الدرس الأول – مقدمة فى HTML لغة البرمجة الرئيسية لإنشاء صفحات الويب

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

  • HTML اختصار لـ Hyper Text Markup Language ، بينما معناها الحرفي “لغة ترميز النصوص التشعبية”
  • HTML هى لغة البرمجة الرئيسية لإنشاء صفحات الويب أو web pages
  • لغة HTML هى التي تصف أو تحدد البنية الأساسية لمحتوى صفحة الويب
  • HTML تتكون من سلسلة من العناصر أو ما يسمى Elements
  • العناصر أو Elements هى التى تخبر المتصفح كيف يعرض محتوى الصفحة
  • العناصر أو Elements تقوم بعمل تبويب للصفحة. مثل “هذا عنوان” أو “هذه فقرة”. أو “هذا رابط”. أو “هذه صورة” …. إلخ

مثال على صفحة بسيطة مكتوبة بأكواد أو لغة HTML

 <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html> 

مقدمة فى HTML – شرح العناصر أو Elements فى المثال السابق

<!DOCTYPE html> هذا العنصر أو الكود يعرف الكمبيوتر بأن هذه الصفحة مكتوبة بلغة HTML5

<html> هو العنصر الرئيسيى أو الجذرى (root) لأى صفحة HTML ويحتوى على كل الأكواد الأخرى للصفحة

<head> يحتوي على المعلومات الوصفية أو (meta information) عن صفحة HTML مثل العنوان

<title> يقوم بتحديد عنوان الصفحة والذي يظهر فى شريط العنوان الخاص بالمتصفح (title bar) أو عنوان تبويب الصفحة (tab)

<body> يحتوى على الجزء المرئي من الصفحة مثل الفقرات أو العناوين. أو الجداول. أو الصور وهكذا

<h1> لكتابة العنوان العريض أو (large heading)

<p> لكتابة الفقرة أو (paragraph)

مقدمة فى HTML – ما هو العنصر أو (element) فى HTML؟

يكون شكله كالتالى: حيث (tag name) هو اسم العنصر ويسمى علامة أو وسم (tag)
بينما العنصر (element) فهو كل الكود من وسم البداية (start tag) حتى وسم النهاية (end tag)

 <tagname>المحتوى يكون هنا...</tagname> 

كما في المثال التالي:

<h1>عنوان</h1>
<p>فقرة.</p> 
علامة البداية أو (start tag)محتوى العنصر أو (element content)علامة النهاية أو (end tag)
<h1>عنوان</h1>
<p>فقرة.</p>
<br>لا يحتوى على شيء أو فارغليس له علامة نهاية

ملحوظة: بعض العناصر لا تحتوى على محتوى أو content مثل عنصر br . كما أن هذا النوع من العناصر يسمى عنصر فارغ (empty element). وكذلك أيضا لا يحتوى على وسم نهاية (end tag)

مقدمة فى HTML – متصفحات الويب أو (web browsers)

الغرض من متصفحات الويب أو ال browsers مثل (Chrome, Edge, Firefox, Safari) هى قراءة ملفات HTML . وكذلك أيضا عرضها بطريقة صحيحة

محرر النصوص HTML Editor

كذلك أيضا فى الصورة التالية توضيح لبناء صفحة HTML:

مقدمة فى HTML

لاحظ: المحتوى داخل الجزء الأبيض في العنصر body هو الذي يظهر فى المتصفح أو ال browser. بينما المحتوى بداخل العنصر title يظهر فى شريط العنوان.

تاريخ HTML كما هو موضح في الجدول التالي:

السنةالإصدار
1989تيم بيرنرزلى اخترع www
1991تيم بيرنرزلي اخترع HTML
1993ديف راجيت طور HTML+
1995فريق عمل HTML قام بإصدار HTML 2.0
1997تم اصدار HTML 3.2
1999تم اصدار HTML 4.01
2000تم اصدار XHTML 1.0
2008أول ظهور HTML5
2012WHATWG بداية اصدار HTML5 – Living Standard
2014W3C بداية اصدار HTML5
2016اصدار HTML 5.1
2017W3C اصدار HTML 5.1 2nd Edition
2017W3C اصدار HTML 5.2

كذلك أيضا هذا الشرح يتبع آخر اصدار من HTML5



روابط أو لينكات كورس تعلم أساسيات البرمجة بلغة HTML باللغة العربية كاملة

  1. مقدمة فى HTML لغة البرمجة الرئيسية لإنشاء صفحات الويب
  2. محرر النصوص الأداة الرئيسية لكتابة أكواد HTML
  3. الأكواد الأساسية فى HTML ومحتويات الملف الرئيسي
  4. االسمات (Attributes) لإضافة معلومات لعناصر HTML
  5. العناوين Headings فى HTML العناصر <h1> حتى <h6>
  6. الفقرات Paragraphs لعمل كتلة من النص فى HTML
  7. تصميم صفحات HTML بواسطة CSS وتنسيقها بطرق مختلفة
  8. تنسيق النص فى HTML باستخدام العناصر لعرض النص بطريقة خاصة
  9. الاقتباس فى HTML بالعنصر blockquote و q و abbr و cite و bdo
  10. كيفية التعليق داخل كود HTML وأهميته للمبرمج
  11. الألوان فى HTML وكيفية اضافتها بـ 6 طرق مختلفة
  12. الروابط أو اللينكات (Links) للتنقل بين صفحات HTML
  13. الصور فى HTML شرح مفصل بالأمثلة
  14. الجداول HTML Tables شرح مفصل باللغة العربية بالأمثلة
  15. القوائم HTML Lists شرح مفصل باللغة العربية بالأمثلة
  16. أنواع العناصر Block و inline فى HTML والفرق بينهما
  17. شرح السمة class والسمة id فى HTMl والفرق بينهما
  18. شرح الإطارات HTML Iframes باللغة العربية
  19. HTML Forms – شرح الفورم باللغة العربية بالتفصيل

admin

المشرف العام على موقع gaawy

View all posts by admin →