تعلم لغة html من الصفر حتى الاحتراف

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

لحسن الحظ هذه النظرة مخالفة تمامًا للواقع؛ فتعلم البرمجة مثله مثل أي مجال، في بدايتها فقط ستشعر إنك تائه في بحر الرموز والأوسمة، ورويدًا رويدًا سيصبح كل شيء واضحًا كالشمس؛ ولحسن الحظ أيضًا فبداية تعلم البرمجة ليست صعبة على الإطلاق، ولاسيما عند تعلم لغة الـ HTML.

ما هي لغة الـ HTML؟

 لغة HTML أو ما تعرف بالـ Hyper Text Markup Language هي لغة بسيطة تعرف بلغة التوصيف الحيوي للنصوص، وهي لغة وصف وليست لغة برمجة، إذا تعد قاعدة الأساس الذي يتم من خلالها توضيح البنية الأساسية للصفحات وطريقة ظهورها للمستخدم.

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

تعد لغة HTML واحدة من أقدم اللغات التي يتم استخدامها الآن في عالم البرمجة، وهي لغة أنشائها الفيزيائي تيم بيرنرز لي بهدف وجود ما يسمى بارتباط تشعبي بين النصوص وبعضها البعض، بحيث يسهل الانتقال من نص لآخر بمجرد الضغط عليه، وبمرور الوقت وحتى الآن تطورت هذه اللغة تحت رعاية اتحاد الشبكة العالمية World Wide Web Consortium أو ما يعرف اختصارًا بالـ W3C أو WHATWG، لتتناسب مع متطلبات العصر وتواكب المتطلبات الحالية لتصميم المواقع.

تتكون لغة HTML من مجموعة من الأوسمة TAGS والعناصر التي تعد اللبنات الأساسية لتصميم محتوى الصفحات من فقرات وعناوين وصور وأماكن وكذلك أبعاد وتقسيم وتوزيع، وفيها يتم توضيح التعليمات والنصوص بين العلامتين التاليتين: (>، <)؛ بحيث تكون علامة > هي البداية و < هي النهاية، وعند نهاية الترميز بشكل عام، يتم غلق الكود بإضافة علامة / إلى علامة > كالآتي: </……..>.

لماذا اتعلم لغة HTML؟

1.        تعد عملية تعلم لغة الـ html أساسية في أي مرحلة من مراحل تعلم لغات البرمجة، إذا تعد هي قاعدة الأساس الذي من خلاله يتم بناء هيكل الصفحة وبنيتها الأساسية.

2.       يتم استخدام لغة html  في أكثر من 95% من مواقع الويب.

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

4.       يمكن تعلم لغة html  بسهولة وبطريقة مجانية سواء من خلال الدورات المتاحة على مواقع الإنترنت أو أدوات التحرير المجانية.

5.       لا يتطلب الأمر وقتًا أو مجهودًا كبير لإجادة تعلم لغة الـ html، أي بمجرد فهم أساسيات الكتابة، يصبح الأمر سهلًا وبسيطًا.

6.       يتم دعم لغة الـ html  من جميع المتصفحات، لذلك لن تواجه مشكلة في عرض صفحاتك في أي متصفح كان.

7.       تساعدك لغة html في تعلم أسرع للغات البرمجة الأخرى وذلك لتشابه هيكل التصميم.

8.       حتى ولو لم تمارس البرمجة ففهم لغة الـ html يساعدك في التجاوب مع المبرمجين بشكل أفضل وفهم الطريقة المثالية لشرح مشكلتك لهم بسهولة ويسر.

9.       في حالة العمل في أقسام التسويق ولاسيما seo، فأنت في حاجة لمعرفة أساسيات الـ html كضرورة لأداء عملك بكفاءة أكبر.

10.   تساعدك لغة الـ html في جعل محتوى موقعك سهل الاستخدام ومنظم بشكل أكبر للمستخدمين.

11.   من خلال تعلم اساسيات الـ html، ستمتلك القدرة على تأسيس صفحات المواقع بسهولة ويسر، ومن ثم سننتقل إلى مستوى أعلى حيث تتعلم لغات أخرى تساعدك في تحويل هذه الصفحات إلى محتوى أكثر جذبًا وعصرية للمستخدم.

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

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

ما هي أساسيات لغة HTML؟

بما أن لغة HTML هي في الأساس لغة وصفية، فيجب أن يكون هنالك مجموعة من القواعد أو الأساسيات المعروفة فيها، والتي من خلالها يتم تصميم الهيكل الأساسي للصفحات بكل سهولة، وتعد أشهر هذه الأساسيات الآتي:

1.     DOCTYPE 

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

يتم كتابة هذا الإعلان أو التوصيف في بداية الصفحة حتى قبل البدء في كتابة أي كود آخر، ويكتب بالشكل التالي:

<!DOCTYPE html>

2.     head  و body

يتم استخدام هذا الإعلان في تحديد بداية الصفحة ونهايتها، أو ما يعرف اصطلاحًا بالرأس والجسد، وهو أشبه بعملية لتحديد بنية المنزل وأخر حجر فيها، وفيها يتم استخدام وسم خاص بتحديد البداية، ووسم أخر في نهاية عملية التكويد، لتحديد نهاية الصفحة أيضًا، ويتم كتابته كالآتي:

<head> : ويعرف هذا بوسم البداية ومن بعده يتم تحديد هيكل الصفحة من عناوين ونصوص وفقرات.

</head>: ويعرف بوسم النهاية وفيه يتم تحديد نهاية رأس الصفحة أو بدايتها.

<body>: يتم فيه تحديد جسد الصفحة وما يشتمل عليه من بيانات أساسية سيتم عرضها للمستخدم.

</body>: يتم فيها تحديد نهاية بنية وجسد الصفحة وانتهاء وصف المعلومات فيها.

3.     Title

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

</title> عنوان الصفحة <title> 

4.      H1,h2,h3…..

H أو ما يعرف بالعنوان الرئيسي أو الترويسة الأساسية، يعد عنصر من العناصر الهامة في رسم هيكل أي صفحة خاصة بالمواقع، ومن خلاله يتم تنظيم المعلومات الهامة في الصفحات من خلال تسلسل منطقي للأهم ثم الأقل أهمية ثم الأقل، ويتم هذا من خلال استخدام ترويسة تعرف بالـ h مرقمة طبقًا لطبيعة العنوان أو الـ heading وحجمه كالآتي: 

</h1>العنوان <h1>: هي الترويسة رقم 1 وهي خاصة بالعنوان الرئيسي للصفحة وهو العنوان الأهم والأكبر حجمًا والأول في الصفحة. 

</h2> العنوان <h2>: هي الترويسة رقم 2-وهي خاصة بالعنوان الثاني في الصفحة والذي يعد جزء من المعلومات التي يدور حولها العنوان الرئيسي. 

</h3> العنوان <h3>: هي الترويسة الخاصة بالعنوان الثالث في الصفحة وهو جزء متفرع من الترويسة الثانية. 

</h4> العنوان <h4>: هي الترويسة الخاصة بالعنوان الرابع في الصفحة وهي جزء متسلسل من الترويسة الثالثة. 

</h5> العنوان <h5>: هي الترويسة الخاصة بالعنوان الخامس في الصفحة وتكون أقل حجمًا وأقل أهمية وتتبع في التسلسل الترويسة الرابعة في عملية سرد المعلومات. 

</h6> العنوان <h6>: الترويسة الخاصة بالعنوان السادس في الصفحة وهي الأقل حجمًا وأهمية في الصفحة على الإطلاق وتتبع في التسلسل المنطقي لسرد المعلومات كافة العناوين التي تم ذكرها قبلها. 

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

5.     P

الـ p أو ما تعرف بالـ paragraph هي توصيف خاص بالعناصر التي يتم من خلالها كتابة الفقرات، بحيث تكون <p>  هي بداية الفقرة،  و </p> هي نهايتها، ويتم كتابتها كالآتي:

<p> الفقرة المراد كتابتها، ومن ثم غلق الكود كالآتي: </p>

6.     br

 هي توصيف خاص بالمسافات بين الأسطر، في حالة ما رغم المبرمج في الفصل بين الفقرات وبعضها البعض، ويتم كتابتها كالآتي: <br> في نهاية السطر الترميزي بعد غلق الفقرة. 

7.     Img

 Img هي اختصار للـ  image  وفيها يتم تضمين الصور أما برفعها من رابط معين أو ملف يتم ذكره، ويتم فيها كتابة الكود بالطريقة الآتية:

<img src="example.com/example.jpg">

8.     a

 يتم استخدام هذا العنصر للإشارة على الروابط الخارجية التي يتم تضمنيها إلى الصفحة، ويتم كتابته كالآتي:

a href=https:www…………/>>

9.     ol  و ul

 يتم استخدام هاتين العنصرين في تصميم القوائم المتسلسلة والغير متسلسلة أي التعداد النقطي والعددي، وفيها يتم بدأ الكود بالترميز المناسب للقائمة المنشودة، ومن ثم ترتيب النصوص بما يتوافق مع هذا الترتيب كالآتي:

فإذا رغب المبرمج في إنشاء قائمة غير متسلسلة، يتم بدأ الترميز كالآتي:

<ul>

<li>…….</li>

<li>…….</li>

<li>…….</li>

</ul>

 أما في حالة التسلسل المنطقي والعددي للقائمة، فسيتم كتابة الكود كالآتي، بحيث تكون ol هي طريقة الترتيب، وli هم العناصر المراد ترتيبها:

<ol>

<li>…….</li>

<li>…….</li>

<li>…….</li>

</ol>

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

من العناصر التي يتم استخدامها أيضًا كل من الآتي:

1)      <b> :  يتم استخدامها لجعل النص مكتوب بخط عريض bold.

2)      <strong> : يتم فيها كتابة  النصوص وتميزها بتصميم واضح وقوي.

3)      <I>: يتم استخدامها لكتابة النصوص بطريقة مائلة.

4)      <mark> : يتم استخدامها في تمييز خلفيات النصوص.

5)      <u>:  يتم استخدامها في وضع خطوط اسفل النصوص.

6)      <sub>: يتم استخدامها في اختيار أسلوب كتابة يتم فيها خفض النص عن معدل السطر الطبيعي.

7)      <sup>: يتم استخدامها في اختيار أسلوب كتابة  يتم فيه كتابة النصوص بشكل مرتفع عن مستوى السطر الطبيعي.

8)      <strik> : يتم استخدامه لوضع خط أفقي على النصوص بغرض شطبها.

9)      <small> : يتم استخدامها لتقليص حجم النصوص وظهورها بنص أصغر.

والآن بعدما ألقينا نظرة على أساسيات لغة الـ html، هل مازالت أن هذه اللغة صعبة؟

هل لغة HTML صعبة وكم من الوقت احتاج لتعلمها؟

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

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

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

ما الفرق بين لغة البرمجة HTML ولغة البرمجة HTML5؟

تعد لغة الـ html5 تطور طبيعي وإصدار حديث للغة الـ html وليست لغة مخالفة أو منافسة لها، إنما لغة تم تطويرها من خلال اتحاد الشبكة العالمية World Wide Web Consortium بهدف حل المشكلات والثغرات التي لم تكن الإصدارات السابقة من html قادرة على حلها أو التعامل معها مثل:

1)      التعامل مع الوسائط المتعددة المختلفة.

2)      تدعيم التعامل مع المواقع والأطراف الخارجية الثالثة بكل سهولة ويسر.

3)      التعامل مع الـ JavaScript وتحسين تجربة المستخدم.

4)      دعم التعامل مع vector graphics.

5)      التعامل مع الموقع الجغرافي بدون الحاجة إلى استخدام إضافات أو برامج خارجية.

6)      يمكن رسم الأشكال الهندسية بسهولة من خلال الـ html5  بخلاف الإصدارات الاقدم.

7)      الترميز الخاص بـ doctype أكثر بساطة وسهولة عن الإصدارات الأخرى بكثير.

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

9)      يمكن في html5 إستخدام خاصية السحب والإفلات في كتابة التوصيف، بخلاف الإصدارات الأخرى.

10)  تحتوي لغة html5 هي طرق حفظ وتخزين متنوعة تناسب احتياجات المبرمج المختلفة.

11)  تتجاوب لغة html5 بشكل أفضل مع أجهزة الهواتف المحمولة بخلاف الإصدارات الأقدم من نفس اللغة.

12)  تسمح لغة html 5 باستخدام ملفات تعريف الارتباط بسهولة والمعروفة باسم cookies.

13)  تمتلك لغة html5  وسوم أكثر من الإصدارات السابقة لنفس اللغة وأكثر مناسبة لمتطلبات المواقع الحديثة.

والآن بعدما تعرفت على كل من مفهوم لغة html وأهميتها واساسيتها وكذلك الإصدار الحديث منها المعروف باسم html5، دعنا الآن ننتقل إلى الإجابة على السؤال التالي:

هل يمكن تعليم نفسي لغة HTML في المنزل؟

نعم يمكنك تعلم لغة html بسهولة من المنزل، فأنت لا تحتاج إلى أكثر من كمبيوتر ومحرر أكواد، وستتمكن من استعراض الصفحات التي تقوم بتصميمها لحظة بلحظة، أما فيما يتعلق بطريقة التعلم نفسها، فهناك طرقة متنوعة لتعلم لغة html منها:

1)      متابعة الحلقات التعليمية المنشورة في قنوات اليوتيوب، والتي يمكن من خلالها متابعة التعليمات خطوة بخطوة وتنفيذها.

2)      من خلال متابعة مواقع التعليم الإلكتروني ولاسيما المتخصصة في البرمجة في مطالعة المقالات وتطبيق النصائح الخاصة بها.

3)      من خلال الممارسة والتطبيق المستمر مع التغذية العقلية لأنواع المشكلات المختلفة وكيفية تجنبها من البداية.

4)      الاشتراك في الدورات والكورسات التعليمية أون لاين والتطبيق العملي أول بأول.

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

كل هذه الخطوات يمكن من خلالها تعلم لا فقط لغة html من المنزل، لكن لغات البرمجة بشكل عام، لكني دعني أكون صريحًا معك، وأخبرك أن الاعتماد الذاتي على النفس في عملية التعلم ولاسيما في البرمجة أحيانًا ما لا يصلح للجميع، إذا سريعًا ما يعلن البعض استسلامهم وعدم رغبتهم في خوض الأمر مجددًا، وذلك كونهم قد يشعرون ببعض من قلة الثقة في قدراتهم، أو لأنهم لا يعرفون ما هي الخطوة التالية التي يجب عليهم أن يتخذوها أو هل هم يسيرون في الطريق الصحيح للتعلم أم لا؟!

وفي هذه الحالة دعنا ننتقل إلى إجابة هذه المعضلة، وذلك بتقديم الطريقة الصحيحة التي يمكنك من خلالها لا تعلم لغة الـ html فقط، بل أيضًا من اجادة لغات برمجة أخرى وتصميم وتطوير المواقع بسهولة كذلك!

كيف يمكنك احتراف لغة html؟

يمكنك احتراف لغة html بسهولة من خلال الاطلاع على دبلومة تطوير المواقع التابعة لأكاديمية إعمل بيزنس، وهي دبلومة تجمع في داخلها كل سبل تعليم البرمجة من المنزل من جهة، وفي نفس الوقت تساعدك في تحقيق حلمك في أن تصبح مبرمج محترف من جهة أخري؛ حيث تتسم هذه الدبلومة بالآتي:

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

2.       عملية الدراسة تتم بالتدريج، بحيث تبدأ معك من أساسيات التعامل مع html5 وصولًا لتطوير واجهات المستخدم والتعامل مع أنواعها المختلفة كذلك.

3.       بجانب لغة html فأنت ستتعلم في هذه الدبلومة كيفية التعامل مع لغة css وجافا سكريبت، بالإضافة إلى كيفية إدارة وإنشاء قواعد البيانات بسهولة.

4.       من خلال دبلومة تطوير المواقع، ستتعلم كل من طرق التعامل مع الجداول وتنفيذ جمل الاستعلام المختلفة، بالإضافة إلى التعامل مع المتغيرات والـ control flow وغيرها.

5.       تتناول دبلومة تطوير المواقع أيضًا كل من التعامل مع نظام MySQL وتطوير واجهات المستخدم والتعامل مع API واستخدام إطار عمل LARAVEL.

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

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

يحصل الدارس أيضًا في نهاية الدبلومة وبعد نجاحه في اجتياز الاختبارات على شهادة نجاح معتمدة من أكاديمية إعمل بيزنس وكذلك جامعة EBU، كما يحصل على كافة الموارد التعليمية بعد انتهائها في مدة لا تزيد عن 24 ساعة.

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