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

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

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

تركّز هذه المقالة على المبتدئين الجدد الذين ليس لديهم خبرة في لغات البرمجة ، وتحديداً في لغات برمجة الويب ، حيث سنحاول تقديم شرح لـ HTML وآليّة عمل جميع صفحات الويب بها.  

ما هي لغة HTML؟

HTML هي إحدى لغات الترميز. وكلمة HTML هي اختصار لـ Hyper Text Markup Language. وهي مصممة خصيصًا لإنشاء صفحات أولية في مواقع الويب.

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

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

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

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

تاريخها

يعود تاريخ HTML إلى عام 1980 عندما أنشأ الفيزيائي Tim Berners-Lee نموذجًا تشاركيًا بين باحثيه لاستخدام البيانات ومشاركتها. خضعت لغة HTML لعدة تعديلات وتطورات ، حيث بدأت في نسختها القديمة ، HTML 2 ، والتي ظهرت عام 1995.

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

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

تلعب HTML دورًا أساسيًا في صفحات الويب. لا يمكن لصفحة الويب أن تعمل بدون قالب HTML ، ولا في أي حال ، باستثناء بعض الحالات الخاصة. لذلك ، فهي تُعد اللّبِنة الأساسية للمتصفح الذي يوفر المحتوى لزوار المواقع الإلكترونية حول العالم.

مكونات لغة HTML

إنّ تعلّم لغة HTML يقتصر على فهم مكوناتها أولاً ومن ثمّ البدء في تطبيقِ الأمثلة العامة على صفحات الويب وهناك أساس تُبنى عليه صفحات الويب من خلال:

• علامة البداية والنهاية: هي كل ما يمكن رؤيته بين هاتين العلامتين ، مثل الرّأس ومراجع صفحة البرنامج والفقرات والتّذييل وغيرها.

• وسم المحتوى: هو كل ما يمكن كتابته بين علامات المحتوى ، حيث يعمل على حصر الصفحة ومحتوياتها بكل تصميماتها وخطوطها وأقسامها.

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

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

ينبغي علينا أثناءَ تعلّم لغة HTML بناء الصفحة الأولى والتي من خلالها سيُمهّد الطريق للاحترافية في تحليل وتصميم صفحات الويب. سنحاول الآن إنشاء صفحة html الأولى ، ولكن قبل ذلك لِنفهم فكرة كيفيّة الوصول إلى صفحات HTML في أنظمة Windows و Mac.

يتطلّب ذلك إنشاء ملف نصي New Text Document.txt ، ولكن يجب عليك أولاً التأكد من أن الامتداد مفتوح في نظام Windows ، و سأشرح كيفية إلغاء قفل الامتداد على Windows 10 لأنني أعمل عليه ، ومن أجل القيام بذلك ، قم بما يلي:

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

• انقر فوق View للتنقل في القائمة ثم اضغط على Options.

• بعد ظهور المربع ، انقر فوق View ثم قم بالتمرير لأسفل للعثور على Hide Extension For Known File  وقم بإلغاء تحديدها.

• انقر فوق Apply ثم Ok.

الامتدادات

ستلاحظ الآن أن جميع الملفات الموجودة على سطح المكتب بدأت في الظهور بتنسيق الامتداد والآن حان الوقت لتغيير امتداد الملف إلى textpad.html بدلا من New Text Document.txt.

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

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

حان الوقت الآن لإنشاء صفحة 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 من أهم مكونات الصفحة الخارجية فهي تساعد على ظهور الصفحة في محركات البحث. كما أن لها وظائف أخرى متعددة سنتعرف عليها في سطور لاحقة من دورة تعلم لغة HTML.

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

لكن هنا استخدمنا h2 وهي العلامة المناسبة لعنوان الصفحة لظهور العنوان بشكلٍ بارز. بالنسبة للعلامة p ، فقد وضعت فقرة صغيرة بداخلها ، ودعنا أنها  فهو الجزء المخصص لإضافة فقرات داخل الصفحة.

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

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

الآن عزيزي القارئ وبعد أن تعرفت على الدرس الأول من دورة تعلم لغة HTML سنتقدّم خطوة إلى الأمام فقم بنسخ الشيفرة وفهم محتوياتها قبل الاستمرار.

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

هل تعلم أن هناك العديد من سمات html التي تساعد في بناء صفحات الويب الخاصة بنا؟ ، في دورة تعلم لغة HTML. سنركّز على السمات الأكثر شهرة الّتي يتم استخدامها عند إنشاء الصفحات.

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

الصِّفات

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

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

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

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

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

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

يجب أن تعلم أن سمة HTML ليست سوى مجموعة من التنسيقات والمتطلبات التي من الأفضل أن تكون متواجدة في مدونتك ، وهي من عدة أنواع ، بما في ذلك:

• نص المرساة.

• الصور.

• حقول الإدخال.

• الترويسة.

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

نص المرساة

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

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

لاحظ هنا أن كل ما فعلته هو الرجوع إلى موقع Google فقط من خلال تضمين نص Anchor في النص الذي كتبته. لذلك يمكنني القيام بذلك أيضًا على موقعي حيث يمكنني الرجوع إلى إحدى صفحاتي الأخرى لتصبح على النحو التالي:

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

الصور

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

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

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

يعد استخدام الصور في صفحة الويب جزءًا مهمًا بنفس القدر من سمة html وهذا ما يوجب علينا أن نُدلي الضوء عليه أثناء تعلم لغة HTML.

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

نصائح

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

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

حقول الإدخال

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

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

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

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

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

حيث تمكنك من استخدام علامات 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 ربما يتعين علينا في هذا الدرس توضيح أهم المفاهيم مثل html head and body.

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

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

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

• صورة رأسية.

• كم عدد صفحات موقع الويب الخاص بك.

• بعض تقنيات SEO في تصدّر النتائج.

• ملفات مصادر أخرى يتم ربطها في صفحتك الرئيسية.

• الكلمات الرئيسية والمنافسة.

تشير كل هذه النقاط السابقة إلى عددٍ من التكتيكات المهمّة لامتلاكها في رأسية الموقع وجسم html والتي تساعد في نهوض موقعك جيدًا أمام العامّة من الزائرين.

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

تُعد صور الصفحة الرأسية من أهم الإجراءات التي يجب الاهتمام بها أثناء تعلم لغة HTML. حيث تعتبر صور الرأس من الجوانب المهمة التي يجب أن تأخذها في الاعتبار.

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

في الواقع ، يتم تضمين الصّور داخل علامات الرأس وفي بعض الأحيان في جسم الصفحة Body, وهذه هي الصورة الرئيسية التي ستساعد مواقع الويب على الفهرسة بسرعةٍ ووفق. في جميع محركات البحث من خلال السماح بالزحف إلى صفحاتك.

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

أعداد الصّفحات

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

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

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

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

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

وتضمين عنوان كل صفحة في رأس وجسم html وهذا بالضبط ما أعنيه في عدد الصفحات.

بعض تقنيات SEO

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

• عدد الكلمات التي تحتوي عليها مقالتك.

• الكلمات الرئيسية التنافسية.

• جودة المحتوى.

• نصوص بديلة مقترحة.

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

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

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

من حيث التصميم والتخطيط وألوان الخط التي تتطلب منا ربط بعض المصادر الأخرى مثل مصادر CSS الخارجية.

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

<head>    

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

</head>

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

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

جودةِ المحتوى

لنفترض أن لديك مدونة تتحدث عن السيارات والدراجات ، وتريد كتابة منشور عن سيارات BMW على سبيل المثال. كل ما عليك فعله هو البحث عن أفضل المقالات التي تتحدث حول هذا الموضوع.

يجب أن يكون هنالك مادة ما لتتحدث عنه ويجب إدخال كل عنوان في وصف meta والذي يُعتبر روح html الرأس وقلب الصفحة من جميع النواحي !!. بعض خصائص meta في صفحات الويب:

<meta name="description" content="Welcome to html head and body lesson">

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

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

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

الكلماتِ المفتاحية والتنافسية

تستخدم في الغالب في جودة تحسين محركات البحث عن النتائج والبعض يعتمد عليها في أداء التجارة الإلكترونية والأعمال الحرة. بمجرد إنشاء الكلمات الرئيسية الخاصة بك ، سيكون من السهل على الآخرين رؤيتها في جميع محركات البحث مثل google.

على سبيل المثال, تبحث Google عن كل صفحة في نتائجها بالاعتماد على ما يبحث عنه الجمهور.

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

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

التصميم هو العامل الرئيسي لكيفية ظهور وسوم div أمام الزائرين. حيث أن كل هذه التصميمات تعكس انطباعًا جيدًا للزائرين.

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

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

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

تشبيهات

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

فستجد أن أزرار التحكًم بارزةً للعيان في حين إن قمت بتشغيل لعبة رديئة التصميم أو لا تناسبُك فستُدلي بتقييمٍ سيّء على طاقم التصميم فيها.

في المواقع الإلكترونية الأمر بسيط للغاية ، تقوم بإنشاء بعض وسوم div داخل body ثم تقوم بتصميمه باستخدام لغة CSS لتصبح أكثر جمالًا أثناء حدوث جلَسات الزّائرين. وهذا ينطبق أيضًا على Header و Body و Footer وأيّ شيءٍ مدرج داخل منطقة browser.

ما هو تصميم div في لغة HTML و CSS

لا نريد الخوض في لغة CSS في دورة تعلم لغة HTML ولأن لغة HTML تتطلب بعض الجوانب في CSS ستحاول فهم CSS من خلال المثال الذي سنتطرّق له لاحقًا.

قد تبيّن لك عزيزي القارئ أن لغة CSS هي لغة تصميم وتلوين وتنسيقات ويرمز لها في الإنجليزية  بــ Cascading Style Sheets. التصميم في وسوم div يعني كل إجراء شكلي نستخدمه في منطقة div بغض النظر عن حجم div من حيث الفقرات.

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

<body>

   <div>

In this div we will make an effect on the color and size of the font and background.</div>

   <div>In this div we will keep everything as default without any changing.</div> 

</body  >

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

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

يتم الوصول لوسوم HTML في لغة CSS عن طريق إما (الفئة) الكلاس أو عنوان ID الفريد. في القسم الثاني ، لن أفعل أي شيء فقط منحته فئة باسم فئة div_2 ، لذلك سيتم تطبيق CSS الرئيسي على div_1 ليصبح هكذا:

.div_1    {

     width:500;

   padding:10px; 

   background:#DDD;

   border:1px solid:#CCC;

   margin:10px

  }  

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

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

الحشوات

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

الحدود

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

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

الأبعاد

أحد الأشياء الشهيرة التي نستخدمها في تصميم الويب هو الهوامش(الأبعاد). حيث يتم استخدام الهوامش كثيرًا في أعمدة صفحات متعددة والتي تلتقط الأماكن الصحيحة لكل عنصر من عناصر div.

وتتحكم في العديد من الأشياء مثل المسافات بين الكلمات و div أو المسافات بين div معًا ، أعتقد أنه يستخدم على نطاق واسع في مكتبة CSS المقفلة ولكن يمكنك تجربتها بنفسك.

قُدرات تصميم Div

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

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

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

تظهر التصميمات المعقدة جيدًا في مواقع الويب الشهيرة التي يأتي الأشخاص من جميع أنحاء العالم.

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