حتى تغوص في عالم الويب المليء بكل ما هو جميل ومفيد لابد لك من تعلم أساسيات الدخول إليه ومن ثم الانطلاق بهذا البحر الواسع والمثير.
إن تصميم موقع ويب يحتاج منك معرفة واسعة بالواجهات وغيرها من الشؤون التي سنذكرها لك بالتفصيل عزيزي القارئ لذلك كن معنا اليوم لتحصل على معلومات تفيدك حول أساسيات تطوير الواجهة الأمامية HTML , CSS, JavaScript.
ما هو موقع الويب ومما يتألف؟
موقع الويب: هو مكان يمكن للأفراد والشركات نشر محتوى على الإنترنت ويمكن الوصول إليه عن طريق متصفح ما، يمكن أن يكون الموقع عبارة عن صفحة واحدة أو عدّة صفحات مترابطة تحتوي على معلومات مختلفة كالنصوص والصور والفيديوهات بهدف التواصل أو التعليم أو الترفيه أو التسويق.
عملياً يتألف موقع الويب من أمرين أساسين يجب عليك الإلمام بهما حتى تصبح من المحترفين في تصميم مواقع الويب، وهما Front End و Back End.
ما هي الواجهة الأمامية Front End و بماذا تختلف عن الواجهة الخلفية Back End ؟
سنوضخ لكم الإجابة بشرح مبسط قريب للفهم:
- Front End: الواجهة الأمامية وهي الواجهة التي ستظهر للمستخدم عندما يدخل إلى الموقع أو التطبيقات والتي يستطيع من خلالها معرفة محتوى الموقع والتفاعل مع الصفحة وإلى ما هنالك من أمور وصلاحيات متاحة له.
- Back End: بالمعنى العام هي خلفية الموقع والتي تتم فيها برمجة الموقع من أجل تقديم مهمة معينة لكل غرض في الواجهة الأمامية، والتي تكون من جهة المخدم الـ server وقواعد البيانات Data base، يكفي أن نعرف هذا لليوم لأننا سنتطرق للحديث عنها بشكل مفصل في المقالات القادمة.
أساسيات تطوير الواجهة الأمامية HTML , CSS , JS
كما ذكرنا أنفاً أن الواجهة الأمامية هي واجهة المستخدم “جانب العميل” التي تظهر له وحتى نقوم بتصميمها يجب علينا معرفة أساسيات تطوير الواجهة الأمامية وهي اللغات التصميمة الثلاث والتي تعد الكيان الأساسي لموقع الويب بشكل عام.
HTML:
- تعد من أساسيات تطوير الواجهة الأمامية وهذه الكلمة اختصار للجملة التالية (HyperText Markup Language) أي لغة توصيف النص التشعبي (الفائق).
- هي حجر الأساس لتصميم المواقع وإنشاء الهيكل العام وتحديد المحتوى الذي سيظهر في المتصفح.
- يمكننا أن نقوم ببناء موقع بسيط يحتوي على الصور ومقاطع الفيديو والجداول بالإضافة إلى أمور كثيرة تسمح بها هذه اللغة.
- منذ ظهورها إلى اليوم رأينا عدة إصدارات للـ HTML ولكن الإصدار الأكثر استقرار وتدول بين مطورين الواجهات الأمامية هو HTML 5 الذي تم نشره في 14 ديسمبر عام 2017 كتوصية من W3C.
- لها قالب بداية محدد يبدأ بالشكل التالي:
<html>
<head>
<title> web site </title>
<meta charset=”UTF-8”>
<link href=”style.css” rel=”stylesheet”>
</head>
<body>
<tag> </tag>
</body>
</html>
- تعتمد هذه اللغة على التاغات أو الوسوم <tag> </tag> فهي لغة توصيفية. أي لكل تعليمة وسم بداية ووسم نهاية يوضع داخلها المحتوى الذي تريد أن يظهر في المتصفح على الشاشة. مثال:
<p> paragraph content </p>
- <p> : وسم البداية .
- </p>: وسم النهاية .
- paragraph content: يمثل المحتوى.
- يقسم الشكل العام كما نرى إلى قسمين أساسين هما : <head> , <body>.
- Head: كل ما يوضع فيه لا يظهر للمستخدم وإنما غالباً ما يكون عبارة عن روابط خارجية وتضمين مكتبات الخط والأشكال وصفحات خارجية وملفات تنسيقات وغير ذلك.
- Body: توضع بداخله عناصر html التي تتضمن المحتوى الذي سيظهر للمستخدم.
- ملاحظة هامة: الوسوم أو التاغات على سبيل المثال <span> </span> لا تظهر للمستخدم وإنما يظهر الكلام الذي يوضع بداخلها، فإذا قلنا كالتالي:
<span> IMPORTANT</span> بالتالي ستظهر كلمة IMPORTANT في المتصفح على الشاشة أما الوسوم فلا تظهر.
- عناصر HTML يتم تصنيفها عملياً إلى ثلاثة أصناف كالتالي:
- Block-element: وهي العناصر التي تنزل سطر ويمكن أن تأخذ خاصيتي : width , height. ومن هذه العناصر:
<p>, <h1>, <h2>,..<h6>, <pre>, <div>, <ul>, <ol>, <table>, <form>…
- Inline-element: هذه العناصر التي لا تنزل سطر أي يمكن أن تظهر للمستخدم أكثر من
محتوى على نفس السطر ولا يمكن أن تأخذ خاصيتي : width, height. ومن هذه العناصر:
<span>, <i>, <a>, <input>, <b>, <im>, <mark>, <del> ,<ins>, <sub>, <sup>, <small>….
- Inline-block: هذا النوع من العناصر يتميز أنه يمكن أن يأخذ خاصيتي الطول والعرض لكنه لا يمكنه أن ينزل سطر. أي عندما ستكتب أي عنصر بعده سيظهر معه على نفس السطر. ومن أهم الأمثلة عليه العنصر : img.
<img src=”pic.jpg” width=100px height=200px alt=”this is girl pic”>
- من أهم البرامج التي يمكنك أن تقوم بالتصميم عليها وكتابة لغة الـHTML هو برنامج الفيجوال استيديو وبرنامج السبلايم.
وبهذا تكون هذه اللغة من أهم أساسيات تطوير الواجهة الأمامية. تابع معنا حتى تحصل على معلومات قيّمة ومفيدة لك عزيزي القارئ.
CSS:
- تعد من أساسيات تطوير الواجهة الأمامية وهي اختصار للجملة التالية: Cascading Style Sheets
- تقوم هذه اللغة بتنسيق الهيكل العام للصفحة من حيث الألوان والأحجام والأشكال والهوامش والتباعد وإلى ما هنالك من خصائص عبر تعليمات بسيطة وسهلة تضاف للعنصر من أجل التحكم به.
- يمكن إضافة تعليمات الـ CSS للعناصر إما عن طريق:
- ملف خارجي توضع فيه هذه التعليمات وتربط مع ملف الـ html ضمن الـ head وتسمى هذه الطريقة بـ external وهي الطريقة الأكثر احترافية.
- ضمن تعليمة <style> </style> وتوضع فيها تعليمات الCSS وتكون هذه التعليمة ضمن ملف html في أي مكان داخل الصفحة، ولكن يفضل أن تكون في الـ head، تسمى هذه الطريقة بـ internal.
- داخل تعليمة العنصر نفسه عن طريق الخاصية style التي يمكنك أن تضع من خلالها جميع التنسيقات الخاصة بالـ Css، تسمى هذه الطريقة بـ embedded.
- مهمة هذه اللغة تنسيق كامل للصفحة حيث أن لغة الـ html غير مدعومة لتنسيق أي عنصر أو فقرة.
- ملاحظة هامة: يمكن استخدام أكثر من ملف Css لصفحة html واحدة، بالإضافة إلى أنه يمكن استخدام ملف Css واحد لأكثر من صفحة html وهي طريقة مستخدمة كثيراً لدى الأشخاص المحترفين.
- وفي حديثنا عن الـ css يجب عليك عزيزي القارئ أن تكون على اطلاع بخاصية class – Id ، حيث يعتبران من الخواص الهامة لتحديد العنصر وإضافة الخواص له.
إن لغة CSS جعلت تصميم مواقع الويب أكثر تشويقاً وجمالاً، تابع القراءة وتعرف على المزيد من أساسيات تطوير الواجهة الأمامية.
JavaScript:
هذه اللغة مختلفة عن اللغتين السابقتين ولا تشبه أياً منهما، بالإضافة إلى أنها تبدأ بكلمة java إلا أنه لا يوجد أي صلة بينها وبين لغة جافا. كل ما في القصة أنه في حين كان لغة الجافا هي اللغة مشهورة عالمياً قرر مطوّر لغة JavaScript أن يلفت الأنظار إلى لغته عن طريق وضع كلمة جافا في بدايتها ليس إلا.
تعد لغة JavaScript من اللغات التفاعلية الديناميكية ونرمز لها اختصاراً بـ JS، وهي لغة برمجة عالية المستوى تستخدم في تطوير صفحات الإنترنت وتطبيقات الويب، والتي يجب على المطورين تعلمها لا محالة حيث تتيح لهم إضافة مؤثرات بصرية جذابة وإنشاء نماذج تفاعلية والعديد من المزايا الرائعة.
يمكن إضافة كود الجافا سكريبت إلى الموقع المنشأ عن طريق:
- كتابة كود الجافا سكريبت في ملف خارجي ومن ثم تضمينه في ملف الـ html ضمن الـ head.
- كتابة كود الجافا سكريبت في أي مكان ضمن صفحة الـ html ضمن التاغ <script> </script>. وبفضل أن توضع هذه التعليمة في بداية جسم الصفحة أن في الترويسة head لتكون بشكل احترافي أكثر.
وبهذا تكون قد تعرفت على هذه اللغات الثلاث التي تعد أساسيات تطوير الواجهة الأمامية بشكلها البسيط والاحترافي. عالم الويب هو المكان الأنسب لكل من يهوى التصميم والإبداع ابدأ الآن بالتعرف عليه عن طريق تعلم ما ذكرناه في الأعلى. وأنصحك بزيارة موقع drmuhsen الذي يوفر العديد من الكورسات والدروس المضمونة كي تبدأ التعلم من الصفر حتى تصبح من أكثر الأشخاص احترافية في مجال الويب. سارع الآن للتسجيل ولا تدع الفرصة أن تفوتك.
شرح عن أهم عناصر الـ HTML:
- <p> </p>:
يعد هذا العنصر المسؤول عن وضع النصوص والكلمات بداخله فهو بالأساس اختصار لكلمة paragraph وتأتي أهميته حيث يحتوي على النصوص الطويلة والقصيرة والكلمات والأحرف وغير ذلك.
- <div> </div>:
يعتبر عنصر تقسيمي ويعد من أهم عناصر html ويستخدم بكثره وله دوره المهم في أساسيات تطوير الواجهة الأمامية.
- <ul> </ul>:
إن هذه التعليمة أو التاغ تعد خاصة بالقوائم الغير مرتبة فهي اختصار لـ unorder list حيث يكون المحتوى متناسق وما يميزه هو علامات الترقيم الغير مرتبة مثل الدوائر والمربعات والأقراص الغامقة وغير ذلك. والشكل العام لها:
<ul>
<li> html </html>
<li> css </li>
<li> js </li>
</ul>
هامش: <li> </li> هو التاغ الذي يوضع داخله المحتوى الخاص بالقوائم لكل عنصر.
- <ol> </ol>:
إن هذه التعليمة أو التاغ تعد خاصة بالقوائم المرتبة فهي اختصار لـ order list حيث يكون المحتوى متناسق و مرتب ما يميزه هو علامات الترقيم المرتبة مثل الأرقام اللاتينية والأرقام الإنكليزية وحروف الأبجدية وغير ذلك. والشكل العام لها:
<ol>
<li> html </html>
<li> css </li>
<li> js </li>
</ol>
- <a> </a>:
هذا العنصر الخاص بإنشاء الروابط ويعد من أهم عناصر الصفحة والتعليمة الخاصة به:
< a href= “www.drmuhsen.tech”>
- <input/>:
هذا التاغ خاص بالإدخال حيث يتيح لك خيارات متعددة كإدخال النصوص والمقاطع الكبيرة وانشاء الخيارات والأزرار والوقت والتاريخ وغير ذلك. الشكل العام له:
<input type=”text” value=”first name”/>
ملاحظة: يعد تاغ الإدخال <input> من التاغات التي لا تملك قفلة (لا تملك تاغ نهاية).
- <table> </table>:
هذه التعليمة خاصة بإنشاء الجدول بشكل عام ومن أجل إنشاء عمود نستخدم تعليمة <tr> </tr> ومن أجل إنشاء خلية نستخدم تعليمة <td> </td>.
- <img>:
<img src=”nuture.jpg”>
التعليمة الخاصة بجلب الصورة من مكان ما إلى الموقع الخاص بك وهي أيضاً من التعليمات التي لا تملك تاغ نهاية. حيث قم بوضع اسم الصورة بالإضافة إلى اللاحقة الخاصة بها. ومن لواحق الصور الأكثر شهرة:/…. png / jpg / tif
- <video> </video>:
تاغ خاص لوضع مقاطع الفيديو في الموقع عبر التعليمة التالية:
<video src=”film.mp4”> </video>
- والكثير والكثير من العناصر الخاصة بإنشاء الصفحة…
وبهذا نكون قد تعرفنا بشكل تفصيلي وواضح إلى أهم عناصر الـ html الأكثر استخداماً والأكثر شهرة. تابع المقال معنا لتتعرف أكثر عن أساسيات تطوير الواجهة الأمامية html css javascript.
شرح توضيحي عن ملف CSS وأهم التنسيقات:
يعتبر ملف الـ CSS من الملفات الخاصة بالتنسيقات والتي يتم ربطه مع ملف الـ html . يحتوي هذا الملف العديد من التعليمات وشكلها العام:
Selector { attribute: value; }
Selector: وهو العنصر المحدد لوضع التنسيقات له.
Attribute: وهي الخاصية التي سيأخذها العنصر كاللون أو نوع الخط أو الحجم أو الإطار وإلى ما هنالك.
Value: وهي القيمة التي سوف تطبق على الخاصية ويأخذها العنصر.
مثال سهل وبسيط:
ضمن ملف الـ html تكتب هذه التعليمة:
<p> Hello World </p>
وضمن ملف الـ css نكتب هذه التعليمات الخاصة بالتنسيقات:
P { color: red;
Background-color: gold;
Font-size: 20 px ;}
وفي هذه الحالة ستظهر جملة Hello World باللون الأحمر وبخلفية ذهبية وبحجم خط .20 px
وفي حال أردنا أن نطبق تنسيقات على كافة العناصر الموجودة في ملف الـ html نقوم بوضع رمز * لاستدعاء كافة العناصر وجعلها تأخذ الخصائص المحددة كما هو موضّح:
*{ color: black;
Font-family:
margin: 10 px;
padding: 20px;}
أما بالنسبة لخاصية الـ class فإننا كما ذكرنا نقوم بوضعها مع عنصر html بالشكل التالي:
<p class= ”first”> Welcome to my site </p>
أما في ملف الـ css فإننا نقوم باستدعاء هذا العنصر صاحب كلاس first بالطريقة التالية:
.first{ color: white;
Float: left;
Text-transform: upper;}
أي أننا نقوم بوضع نقطة قبل اسم الكلاس لاستدعائه من أجل وضع خصائص محددة له.
بشكل عام إن الكلاس هو أهم عنصر للتنسيقات واكثر الطرق احترافية لجعل العنصر مميز ومعروف، أي أنه عند وجود أكثر من عنصر <p> وتريد وضع تنسيقات لعنصر <p> محدد، فإننا نقوم بعمل هذه الطريقة الاحترافية والسهلة.
كما أن خاصية id التي ذكرناها تبعاً لها نفس التركيبة والشكل تماماً إلا أن طريقة استدعائها في ملف الـ css تكون عن طريق كتابة #first {…}.
لأخذ العلم إن تنسيقات الـ css كثيرة جداً وتحتاج إلى وقت وجهد كي تتعلمها، أنصح بمتابعة كورس متكامل لها وأرشح لكم كورس د. محسن الممتع والفريد الخاص بأساسيات تطوير الواجهة الأمامية.
بشكل عام عند البدء بتعلم أي لغة جديدة ستشعر بالملل والإحباط ولكن مع تعلم الويب ستشعر بالمتعة لذلك إياك والاستسلام، ابدأ الآن ولا تتردد في طلب المساعدة من المختصين لتعلم أساسيات تطوير الواجهة الأمامية.
الإطارات المستخدمة في تطوير الواجهة الأمامية Front End؟
بالإضافة للغات الثلاث التي ذكرناها في الأعلى يجب أن يستخدم مطورو الواجهة الأمامية بما يسمونه بالإطارات Framework من اجل تسريع عملية البناء والتطوير.
ومن أهم هذه الإطارات :
- React framework
- Angular framework
- Vue.js framework
ولكل إطار من هذه الإطارات ميزات مختلفة وخواص تجعله محط أنظار العديد من المطورين لذلك سنتطرق لاحقاً في مقال أخر للحديث عن هذه الإطارات الثلاثة.
في النهاية أريد أن أخبرك عزيزي القاري أنك عندما ستخطو اول خطواتك في عالم الويب فإنك ستشعر بالسعادة الغامرة والمتعة عندما تتعلم أي معلومة جديدة، لا تنتظر أن تفوتك الفرصة دون أن تصل إلى الاحترافية والتميز في هذا المجال. في حال وجود أي استفسارات أو تساؤلات تخص ما ذكرناه حول أساسيات تطوير الواجهة الأمامية يمكنك أن تتواصل مع موقعنا ولا تنسى أن تقوم بالتسجيل في أكاديمية د. محسن لتعلم البرمجة من الصفر حتى الاحتراف.
