الصفحة الرئيسية/ التقنية / لغة HTML دورة كاملة للمبتدئين

لغة HTML دورة كاملة للمبتدئين


for Large تمت الكتابة بواسطة : محمد

for Large for Mobile

نرحب بكم في دورة تعلم لغة HTML الكاملة والتي تضم شروحات أوليّة للمبتدئين.

في هذه الدورة سوف يتمكن المطور من فهم أساسيات اللغة المتعلقة بلغات الويب الوصفيّة.

دورة تعلم لغة HTML تمكن المطور أيضًا من القدرة على إنشاء صفَحات ويب بسيطة قابلة لتوسيع مهامها لاحقًا.

بالإضافة إلى شرح غالبية أساسيات الصفحات  وتغطية كل ما يحتاجه المطور بواسطة قوة لغة HTML.

 

 

متطلبات تعلم لغة HTML

  • جهاز حاسوب مكتبي أو لابتوب (لا يمكن تطبيق الأمثلة بواسطة الهاتف).
  • نظام تشغيل ويندوز أو Linux.
  • متصفح ويب جوجل كروم أو Mozilla أو Internet Explorer.

 

معلومات قبل البدء

لغات البرمجة متعدّدة السبل والاستخدامات حيث أن منها ما يخدم أغراض متدنية المستوى مثل لغة سي .

على سبيل المثال عمليات المعالجة المنخفضة ولغة الآلة ، وبعضها متخصص في برمجة الألعاب أو محركات البحث والتصفح.

ومع ذلك فإن بعض لغات البرمجة تتركز مهامها على إنشاء وتنفيذ برامج الويب وهو ما يتم نقله وشرحه في هذا المقال.

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

وبالتالي سوف يتم تقديم شرح لـ HTML وآليّة عمل صفحات الويب معها.  

 

من مميزات لغة HTML ؟

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

ولا شك بأنها تعتبر هيكلاً رئيسيًا لصفحات الويب وخاصة في ظل استخدام الفقرات والعناوين والروابط.

وبالتالي في حال عدم وجود قالب HTML سوف تكون الصفحة مجرد فوضى مختلطة من النصوص والصور.

 

ما هي لغة HTML؟

HTML هي إحدى لغات الترميز. وكلمة HTML هي اختصار لـ Hyper Text Markup Language.

صممت خصيصًا لإنشاء صفحات أولية في مواقع الويب.

تعتمد HTML على إضافة العناصر في مكوناتها ، ابتداءً من بناء صفحات الويب.

حيث تتيح من خلالها إمكانية ارفاق الصور والنصوص والروابط المخفية ومقاطع الصوت والفيديو.

وتساعد هذه المكونات أيضًا على إضافة فقرات وروابط وغيرها من الاقتباسات.

ما يسمح للمطور  بعمليات الفرز والتنسيق بين عناصر كل من صفحات الويب الخاصة به.

وتتضمن لغة HTML مزايا عدة منها القدرة على تضمين بعض النصوص والعمليات الإجرائية من لغات تطوير مختلفة.

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

بل حتى أنها تشترك أيضًا مع لغة CSS في الجوانب الجمالية من خلال ترتيب عناصر المحتوى وتخطيطها.

 

تاريخ ظهور HTML

يعود أول ظهور لــ HTML إلى عام 1993 عندما أنشأ الفيزيائي Tim Berners-Lee نموذجًا تشاركيًا لاستخدام البيانات ومشاركتها.

كما خضعت لغة HTML إلى تعديلات وتحسينات أخرى ، تناولت معها مجموعة من الإصدارات منها نسختها القديمة ، HTML 2 ، التي ظهرت عام 1995.

عادة ما يعمل المطورون على  إضافة بعض الصّيغ الرياضية الفريدة التي لم تتوفر في الإصدار القديم.

وخاصة تلك التي تم إدراجها ضمن  HTML الإصدار الثالث.

تم تطوير اللغة على نحو متتالي حتى الإصدار الخامس حاليًا.

وهو الإصدار الذي وفر انسجامًا عاليًا مع لغة تصميم CSS.

اشتمل هذا الإصدار على العديد من العلامات والإضافات الجديدة ، مثل شاشات الرسم القماشية والعديد من الميزات الفريدة في إدخال البيانات.

كما تضمن معه أيضًا ميزة الإكمال التلقائي وبعض ميزات شريط التقدم وأدوات الكتابة الجديدة ليحل بدوره أداءً أفضل من ذي قبل.

تلعب HTML دورًا أساسيًا في صفحات الويب.

وبالتالي لا يمكن لصفحة الويب أن تعمل دون قالب HTML ، ولا في أي حال من الأحوال باستثناء بعض الحالات.

لذلك ، فهي اللّبِنة الأساسية للمتصفح التي غالبًا ما تدعم محتوى صفحات الويب باستمرار.

 

مكونات لغة HTML

  • علامة البداية والنهاية : يتضمن علامات الرّأس ومراجع صفحة البرنامج والفقرات والتّذييل وغيرها.
  • وسم المحتوى: كل ما يمكن كتابته بين علامات المحتوى ، ويعمل على حصر الصفحة ومحتوياتها بكافة تصاميمها وخطوطها وأقسامها.
  • علامة العنصر: أي عنصر فريد ومميّز يضاف بالداخل ويكون قلب صفحة HTML.

 

1.بناء الصفحة الأولى

ينبغي أثناءَ تعلّم لغة HTML بناء الصفحة الأولى التي من خلالها يتم إدراك معايير التحليل وتصميم صفحات الويب.

نحاول الآن إنشاء صفحة html ، لكن يتوجب المعرفة بكيفيّة الوصول إلى صفحات HTML في أنظمة Windows و Mac.

يتطلّب الأمر إنشاء ملف نصي New Text Document.txt ، يجب التأكد أولاً من أن الامتداد مفتوح في نظام Windows.

ومن أجل القيام بذلك ، نقوم بعمل بما يلي:

  • فتح أيقونة الكمبيوتر الموجود على سطح المكتب في نظام ويندوز 10.
  • النقر على View للتنقل في القائمة ثم الضغط على Options.
  • عند ظهور المربع ، النقر فوق View ثم نقوم بالتمرير لأسفل للعثور على Hide Extension For Known File  ثم نقوم بإلغاء التحديد.
  • النقر على Apply ثم Ok.

 

 

الامتدادات

يمكن ملاحظة بأن جميع الملفات الموجودة على سطح المكتب بدأت في الظهور مع نهاية الامتداد.

والآن نستطيع تغيير امتداد الملف إلى textpad.html بدلاً من New Text Document.txt.

وبالتالي بعد تغيير الامتداد عند محاولة فتح الملف سيظهر الملف كما لو أنه صفحة ويب فارغة  بامتداد html .

على سبيل المثال فإن  كل ما يتم كتابته في الملف سوف يظهر على هيئة HTML.

 

<html> 
<head>
 <title>my first html page</title> 
</head>
 <body> 
<h2>Welcome to HTML code</h2> 
<p>This is your first web page</p>
 <!--We use _blank target to open link in other page-->
 <a href = "http://www.google.com" target = "_blank">Hello Google</a>
 <img src= "http://placehold.it/100/100" title = "hello"> <input type = "text" value = "New">
 </body>
 </html>

 

تحتوي الشيفرة السابقة على علامة html ، وهي العلامة الرئيسية للصفحة وداخلها رأسان(head).

وهما الجزء المسؤول عن إضافة بعض خصائص الصفحة مثل العنوان الرئيسي وأيقونة الموقع ومكتبات CSS و مصادر أخرى.

 

وسوم Head

يعتبر وسم head واحدًا من أهم مكونات الصفحة الخارجية حيث أنه يساعد في ظهور الصفحة في محركات البحث.

كما أن له وظائف أخرى متعددة يمكن التعرف عليها في سطور لاحقة من هذه الدورة.

أما بالنسبة لوسوم الجزء Body فهي تمثل جسم وهيكل صفحة الويب من الداخل.

ويمكن أن تحتوي على جميع علامات HTML المختلفة والمتنوعة.

لقد تم استخدام h2 وهي العلامة المناسبة لعنوان الصفحة لظهور العنوان بشكلٍ بارز.

بالنسبة للعلامة p ، تم وضع فقرة صغيرة بداخلها.

أما وسم الروابط فهو مسؤول عن تضمين الروابط سواء كانت داخلية أو خارجية.

وبالنسبة للوسوم الأخيرة يستخدم الأول لإرفاق وإدراج صورة في المحتوى والثاني يستخدم على نطاق كبير في عمليات الإدخال المتنوعة.

 

2.السمات في لغة HTML

هناك العديد من سمات HTML التي تساعد في بناء صفحات الويب.

في دورة تعلم لغة HTML يتم النركّيز على السمات الأكثر شهرة أو تلك الّتي يتم استخدامها باستمرار.

باستخدام هذه الميزات الخاصة في إدارة المحتوى ، سوف يتمكن المطور من تشكيل صفحات على نحو لن يغفل عنه جانب التنسيق.

ما يساعد في إعادة صياغة الجمل والعبارات بطرق شتى تسهل عملية القراءة .

 

الصِّفات

تدعم بنية الويب وجود خصائص مشتركة في لغات التصميم مثل حجم الخط وألوان النصّ وغيرها.

وخاصة أنه يمكن تنفيذها وإجراء تعديلات عليها بواسطة لغاتٍ أخرى مساندة مثلَ JavaScript أو CSS.

لكن في بعض الأحيان ، قد ينفر البعض من تلك الصفحات التي تحتوي على تنسيق سيّئ أو محتوى يفتقر إلى خطوط متعددة أو مرتبة جيدًا.

وهو ما لا يرغبه المطورون عند إنشاء مدونة أو حتى مجلة قائمة على استقبال زيارات الجمهور.

بالتالي سوف نذكر بعض أنواع ومزايا HTML الأساسية التي دونها لن تعمل صفحات المواقع على نحو جيد وخاصة في عمليات الفهرسة.

 

ما هي السمات في HTML؟

يجب إدراك بأن سمة HTML ليست سوى مجموعة من التنسيقات والمتطلبات التي من المستحسن تضمينها في صفحات الويب.

وهي على أنواع عدة ، بما في ذلك:

  • نص المرساة.
  • الصور.
  • حقول الإدخال.
  • الترويسة.

 

نص المرساة

وهي واحدة من أهم خصائص سمات HTML في بناء المحتوى.

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

يمكن أن تسمح المرساة من إنشاء روابط خارجية لتوثيق المحتوى بالمراجع وهو مطلب موصى به في مواقع الويب الشهيرة.

 

<div> 
Hello , You can visit <a href="https://www.hiperaktif.org/">This article</a>. 
</div>

الصور

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

على سبيل المثال عند قراءة كتاب أو منشور  دون وجود صورة تدل على وصف أو تعبير للأحداث يمكن أن يثير ذلك بعض الملل في مخيلة القارئ.

وبالتالي لا بد وجود صورة على الأقل على صفحة الويب من أجل وصف تعبيري للمحتوى ،

يمكن تضمين وسوم الصور بالطريقة ذاتها في هذا الكود.

<div>
  <img src= "http://hiperaktif.org/wp-content/uploads/2022/03/c-course-.png" title = "hello">
 </div>

تم إضافة علامة من HTML وترميزها بالرمز img ويمكن من خلالها وضع الرابط الذي يشير إلى موقع الصورة على موقع الويب أو من المصادر.

 

حقول الإدخال

تعد حقول الإدخال واحدة من المسائل التي يجب إدراكها أثناء العمل بواسطة HTML وخاصة أنها تُضفي طابعا تفاعليًا عند بناء الصفحات.

<div>  Enter your password <input type = "password" >  </div>

وهناك العديد من حقول الإدخال التي تتيح للمستخدم العديد من سمات وطبيعة البيانات المدخلة.

في المثال السابق تم تحديد نوع الإدخال إلى المتصفح مثل كلمة المرور.

 

التّرويسة ورأسية المحتوى

وهي بدورها إحدى علامات HTML يتم استخدامها بكثرة في صفحات موقع الويب وخاصة في المنشورات الكبيرة.

 إنها تمثل سمات HTML التي لا غنى عنها وخاصة أنها تمنح أولويات ترتيب المحتوى في الصفحات.

<div>

  <h2>This is H2</h2>  

<h3>This is H3</h3>  

<h4>This is H4</h4>  

<h5>This is H5</h5>  

<h6>This is H6

</h6> 

</div>

عند نسخ الكود السابق في المتصفح ، يمكن ملاحظة تباين واختلاف حجم الخطوط في كل علامة محددة.

السبب في ذلك هو أن وسم h هو جزء خاص في تحديد حجم خط قياسي من كبير إلى صغير ، أو العكس.

 

3.إستخدامات head و Body

 يتعين علينا في هذه الدورة شرح أهم المفاهيم التي تدور حول html head and body.

ولا يمكن الإشارة إليها على أنها مجرد عناوين بسيطة وأمور تخلو من الأهميّة بل هي هيكل لصفحات الويب متمثلاً  برأسية الموقع وبعض روابط الإحالات والمصادر الخارجية.

وهناك أيضًا رأسية html لإضافة css يمكن بناؤها قبل البدء في إنشاء وتكوين صفحة المحتوى.

 

الصور الرأسية

صور الصفحة الرأسية هي أداة تتيح التعرف على هيكل الصفحة من الخارج.

كما أنها تعد جانبًا هامًا حول إثراء محتوى HTML وخاصة كلما تعلق الأمر بنشر محتوى ويب مليء بالمعلومات والمواضيع الهامة.

على سبيل المثال عادة ما يتم زيارة العديد من المواقع الإلكترونية يوميًا مع ملاحظة أن كل مقال أو موضوع يحتوي على صورة واحدة على الأقل في العنوان الرئيسي قبل الفقرة.

في الواقع ، يتم تضمين الصّور داخل علامات الرأس وفي بعض الأحيان في جسم الصفحة Body.

وهذه هي الصورة الرئيسية التي تساعد على ظهور وترقى صفحات HTML وخاصة عند عمليات الفهرسة.

 

 

المصادر الخارجية

عند العمل في لغة HTML يحتاج المطور أحيانًا إلى ربط مكتبات CSS وجافا سكريبت في صفحات الموقع.

وفي غالب الأمر يمكن أن تحمل الصفحة بعض المصادر الخارجية من أجل إضفاء مزيدًا من التصاميم الهيكلية.

على سبيل المثال يمكن أن تضم الصفحة روابط تعود إلى مكتبات الخطوط وألوانها.

حيث تساعد المكتبات الخارجية على ربط بعض المصادر مثل CSS وغيرها.

<head>    

<link rel="stylesheet" href="style.css"> 

</head>

 

 

4.تخصيص الوسوم باستخدام CSS

هناك عدة طرق لإنشاء صفحة جيدة منسقة الألوان وتدخل هذه المرحلة في نطاق عملية التصميم.

بالتالي فإن التصميم يلعب دور كبير في شكلية ظهور الصفحات أمام الزائر.

سيبدو الأمر سيئًا للغاية في حال كتابة منشور رائع في ظل تصميم ضعيف يكاد يخلو من جانب الترتيب.

 

 

 

الخلاصة

  • تهانينا بإتمام المستوى الأول من دورة تعلم لغة HTML.
  • يمكن نسخ جميع شيفرات الدورة وتطبيقها في المحررات.
  • جميع الشروحات في دورة تعلم لغة HTML تم الاستناد إليها من مصادر خارجية.

 

 

المراجع

  1. ^ لغة توصيف النص الفائق.
  2. ^ What are the Benefits of Using HTML in Web Pages?.
  3. ^ A Brief History of HTML.

وقت النشر : 2023-02-04 16:36:18 ·

1    التصنيفات






2    مقالات من التقنية

يعتمد هذا الموقع على عرض الإعلانات في تحقيق الدخل ، نشكر تفهمكم الدائم ونتمنى لكم قضاء وقت رائع ... وشكراً :D .