تعلم لغة html حتى الاحتراف .. اعرف التفاصيل
بدأت أهميته البرمجة في الظهور سواء على نطاق معدل الأجور المرتفع أو لكونها واحدة من المجالات المطلوبة بشدة في المستقبل، مع ذلك يخشى عدد كبير من الناس أخذ خطوة حقيقية نحو تعلمها كون الصورة النمطية عن هذا المجال أنه صعب ومعقد ويحتاج إلى معدل عالي من الذكاء والمهارة التقنية.
ولكن في الواقع تعلم البرمجة مثله مثل أي مجال، في بدايتها فقط ستشعر إنك تائه في بحر الرموز والأوسمة، ورويدًا رويدًا سيصبح كل شيء واضحًا كالشمس؛ ولحسن الحظ أيضًا فبداية تعلم البرمجة ليست صعبة على الإطلاق، ولاسيما عند تعلم لغة الـ HTML.
ما هي لغة الـ HTML؟
لغة HTML أو ما تعرف بالـ Hyper Text Markup Language هي لغة بسيطة تعرف بلغة التوصيف الحيوي للنصوص، وهي لغة وصف وليست لغة برمجة، إذا تعد قاعدة الأساس الذي يتم من خلالها توضيح البنية الأساسية للصفحات وطريقة ظهورها للمستخدم.
أي أن لغة HTML هي لغة وصفية تعتمد على مجموعة من الرموز والأوسمة، والتي من خلالها يفهم الحاسوب الطريقة المثالية لعرض الصفحات وما الذي يجب أن يتواجد فيها وطريقة عرضها كذلك. أي إذا رغبنا في أن نبسط مفهوم هذه اللغة، سنقول إنها أشبه بعملية تأسيس القواعد الأساسية لتشييد منزل وما يترتب عليه من شكل نهائي عند التنفيذ.
تعد لغة HTML واحدة من أقدم اللغات التي يتم استخدامها الآن في عالم البرمجة، وهي لغة أنشائها الفيزيائي تيم بيرنرز لي بهدف وجود ما يسمى بارتباط تشعبي بين النصوص وبعضها البعض، بحيث يسهل الانتقال من نص لآخر بمجرد الضغط عليه، وبمرور الوقت وحتى الآن تطورت هذه اللغة تحت رعاية اتحاد الشبكة العالمية World Wide Web Consortium أو ما يعرف اختصارًا بالـ W3C أو WHATWG، لتتناسب مع متطلبات العصر وتواكب المتطلبات الحالية لتصميم المواقع.
تتكون لغة HTML من مجموعة من الأوسمة TAGS والعناصر التي تعد اللبنات الأساسية لتصميم محتوى الصفحات من فقرات وعناوين وصور وأماكن وكذلك أبعاد وتقسيم وتوزيع، وفيها يتم توضيح التعليمات والنصوص بين العلامتين التاليتين: (>، <)؛ بحيث تكون علامة > هي البداية و < هي النهاية، وعند نهاية الترميز بشكل عام، يتم غلق الكود بإضافة علامة / إلى علامة > كالآتي: </……..>.
ما هي أساسيات لغة 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 منها:
1) متابعة الحلقات التعليمية المنشورة في قنوات اليوتيوب، والتي يمكن من خلالها متابعة التعليمات خطوة بخطوة وتنفيذها.
2) من خلال متابعة مواقع التعليم الإلكتروني ولاسيما المتخصصة في البرمجة في مطالعة المقالات وتطبيق النصائح الخاصة بها.
3) من خلال الممارسة والتطبيق المستمر مع التغذية العقلية لأنواع المشكلات المختلفة وكيفية تجنبها من البداية.
4) الاشتراك في الدورات والكورسات التعليمية أون لاين والتطبيق العملي أول بأول.
5) الاستعانة بمرشد أو معلم عن بعد والتدرج في التعليم خطوة بخطوة من خلال نصائحه ومتابعته المستمرة لمستواك.
كل هذه الخطوات يمكن من خلالها تعلم لا فقط لغة html من المنزل، لكن لغات البرمجة بشكل عام، لكني دعني أكون صريحًا معك، وأخبرك أن الاعتماد الذاتي على النفس في عملية التعلم ولاسيما في البرمجة أحيانًا ما لا يصلح للجميع، إذا سريعًا ما يعلن البعض استسلامهم وعدم رغبتهم في خوض الأمر مجددًا، وذلك كونهم قد يشعرون ببعض من قلة الثقة في قدراتهم، أو لأنهم لا يعرفون ما هي الخطوة التالية التي يجب عليهم أن يتخذوها أو هل هم يسيرون في الطريق الصحيح للتعلم أم لا؟!
وفي هذه الحالة دعنا ننتقل إلى إجابة هذه المعضلة، وذلك بتقديم الطريقة الصحيحة التي يمكنك من خلالها لا تعلم لغة الـ html فقط، بل أيضًا من اجادة لغات برمجة أخرى وتصميم وتطوير المواقع بسهولة كذلك!
لماذا اتعلم لغة 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. لن تحتاج بعد ذلك إلى انتظار فريق البرمجة للتعامل مع المشاكل البسيطة في صفحات الويب، إذا من رؤية الأكواد الخاصة بالصفحة، ستتمكن من معرفة موضع المشكلة وحلها إذا كنت تمتلك الصلاحية أو الإبلاغ عنها لسرعة حل الأعطال، وهو بدوره ما سيثير إعجاب مديرك ويساعد في تحسين صورتك في العمل.
