ما الفرق بين html , css , javascript

Hasan Hsoub · 12 فبراير

انا بدأت من جديد في تعلم مجال البرمجة وسمعت انه يجب علي استخدام ال html , css ,java script لانشاء موقع على الانترنت هل يمكنكم توضيح الفرق بينهم ولماذا علي استعمالهم مع بعضهم وهل يمكنني استخدام لغة واحدة فقط ؟

Najah Alsaker · 12 فبراير

في البداية ساشرح لك ماهي وظيفة تطوير واجهات المستخدم التي تستخدم هذه اللغات الثلاثة
ان صفحات الويب التي تقوم بزيارتها كل يوم على متصفح الانترنت مبينة بثلاث تقنيات اساسية وهم ال HTML CSS JS ولا يمكننا الاستغناء عن واحدة منهم ان اردنا ان تظهر الصفحة بشكل احترافي , واكبر مثال على ذلك هو صفحة الويب التي تشاهدها الان امامك
دعني اعطيكي لمحة سريعة عن كل واحدة منهم

HTML

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

CSS

تستخدم لغة ال css في انشاء تنسيقات لعناصر ال html , وهي اللغة المسؤولة عن اعطاء تصميمات لصفحات الويب ك الالوان والتنسيقات وجعلها متجاوبة مع كافة انواع الشاشات

javascript

تعتبر هذه اللغة حياة الموقع حيث انه يمكنك من خلالها اضافة تفاعلات للموقع الخاص بك وجعله غير ثابت او اعتيادي

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

image.png.94fdb96da9d73bd730fe971b2a877dd0.png

اولا ف لنبدأ بانشاء ملف index.html ونضع هذه الشيفرة بداخله

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Digital Clock</title>
<style>
/* ثم باضافة شيفرة ال css  
هنا اسفل هذا التعليق  */

</style>
</head>
<body>
  <div class="clock">
    <span id="hours">00</span>:
    <span id="minutes">00</span>:
    <span id="seconds">00</span>
  </div>

 <script>
//    هنا ثم باضافة كود الجافا سكربت اسفل هذا التعليق 

 </script>
</body>
</html>

هنا قمت بكتابة وسوم html للحصول على صف يحتوي على ارقام الساعة لتظهر النتيجة كالأتي

image.png.63735dff16da70eade4a72f6fc837a74.png

ثم دعنا الان ان نضيف شيفرة ال CSS في المكان الذي حددته لك بالكود الماضي

.clock {
  font-family: Arial, sans-serif;
  font-size: 48px; 
  color: #fff; 
  background-color: #008CBA; 
  width: 250px;
  padding: 20px;
  border-radius: 50px; 
  font-weight: bold; 
  border: 5px solid #005566; 
}

باستخدام تنسيقات ال css تمكنت من الحصول على هذا الشكل الذي اريده

image.png.8751412f32ddb9075f383a2eba992124.png

ولكن لهذا الوقت ان هذا العنصر ثابت لذلك حان الوقت الان لدور الجافا سكريبت لتقوم بجعله يتحرك ويقوم باظهار الساعة الفعلية

لذلك دعنا نقوم باضافة الكود التالي في المكان المخصص له الذي قمت بحديده لك سابقا

    function updateTime() {
  const now = new Date();
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  
  document.getElementById('hours').textContent = hours;
  document.getElementById('minutes').textContent = minutes;
  document.getElementById('seconds').textContent = seconds;
}

setInterval(updateTime, 1000);


updateTime();

الأن ستظهر النتيجة كالتالي مثل ما نريدها تماما

image.png.f8bcedb3b31c8b017143704cdcf33ffa.png

اظن انك اصبحت الان على دراية كاملة بطريقة عمل كل لغة ولماذا يجب علينا استخدام الثلاثة في نفس الوقت , بامكانك تطبيق المثال العملي الذي قمت بأعطائه لك

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

وهذه بعض المقالات التي تشرح لك هذه اللغات الثلاث بالتفصيل

HTML

CSS

Javascript

https://wiki.hsoub.com/JavaScript

بالتوفيق لك

تم التعديل في 12 فبراير بواسطة Najah Alsaker

Mustafa Suleiman · 12 فبراير

بشكل بسيط وبدون تعقيد، تلك اللغات هي اللغات الأساسية لمواقع الويب والمبني عليها أي تقنية أخرى خاصة بالويب (المكتبات والإطارات الخاصة بالواجهة الأمامية).

HTML نستخدمها لبناء هيكل الصفحة، أي تخيلي معي جسم السيارة نفسه (الهيكل المعدني).

بعد ذلك نحن بحاجة إلى طلاء ذلك الهيكل وتنسيقه وتجميله صحيح؟ إذن نستخدم لغة CSS.

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

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

لفهم الأمر انظر للصورة التالية:

og.jpg.522a5cc09efef4009bc4d69548b16ea7.jpg

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

محمد_عاطف · 12 فبراير

ان ال html و ال css هى ليست لغات برمجة هى عبارة عن لغة توصيف (markup language) .

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

استخدام ال html و ال css فقط لا يفيد حاليا الا اذا اردت ان تنشئ موقع ثابت (static) غير متغير من شخص الى اخر وهو غير مطلوب كثيرا.

اما ال javascript فهى لا غنى عنها حاليا حيث تمكنك من التلاعب بالعناصر فى الصفحة وجعل الموقع اكثر ديناميكية من حذف وتعديل واضافه عناصر و نصوص حتى بعد تحميل الصفحة .

فيجب عليك استخدام الثلاثة اذا اردت ان تكون مطور واجهات امامية (front end) .

اما اذا لم تكن تريد ان تتعامل مع ال html وال css فيمكنك من ان تصبح مطور واجهات خلفية (back end) تتعامل من السيرفرات وقواعد البيانات فيمكنك مذاكرة لغة برمجة php و اى اطار عمل خاص بها سواء ووردبريس او لارافيل

Mahmoud Hassan19 · 12 فبراير

يمكنني توضيح الفرق بين HTML وCSS وJavaScript، ولماذا يُفضل استخدامهم معًا في تطوير مواقع الويب.

1. HTML :
   - HTML هي لغة توصيف النصوص التي تُستخدم لبناء هيكل صفحة الويب.
   - تُستخدم العناصر (tags) في HTML لتحديد مكونات الصفحة مثل العناوين والفقرات والصور وروابط الهايبرلنك والجداول والنماذج، إلخ.
   - HTML يوفر الإطار الأساسي للصفحة ويُعتبر أساسيًا لبناء أي موقع على الإنترنت.

2. CSS (Cascading Style Sheets):
   - CSS تُستخدم لتحسين شكل وتنسيق صفحة الويب التي تم إنشاؤها بواسطة HTML.
   - تسمح CSS بتعيين مظهر العناصر المحددة، مثل تغيير الألوان والخطوط والهوامش والتباعد بين العناصر.
   - يمكن استخدام CSS لتحقيق تصميم جميل وجذاب لصفحات الويب، وتفعيل تجاوبية الموقع لتكيفه مع مختلف أحجام الشاشات.

3. JavaScript:
   - JavaScript هي لغة برمجة تُستخدم لجعل صفحة الويب ديناميكية وتفاعلية.
   - يُستخدم JavaScript لإضافة وظائف مثل التفاعل مع المستخدم، تحميل المحتوى دون إعادة تحميل الصفحة، التحقق من الإدخالات في نماذج الاستمارة، وإجراءات أخرى تتعلق بالبرمجة.
   - يمكن استخدام JavaScript للتفاعل مع مكونات HTML وتحديث الصفحة بناءً على إجراءات المستخدم.

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

هل يمكن استخدام لغة واحدة فقط؟
- نعم، يمكنك استخدام لغة واحدة فقط إذا كنت تقوم بمشروع صغير أو إذا كنت تستخدم أدوات وإطارات عمل (frameworks) تتيح لك فعل ذلك. على سبيل المثال، يمكنك استخدام إطار عمل مثل React أو Vue.js لتطوير تطبيقات ويب ديناميكية باستخدام JavaScript فقط. ومع ذلك، عند توسيع مشروعك، ستجد أن استخدام HTML، CSS، وJavaScript سيمكنك من الاستفادة من الإمكانيات الكاملة لتطوير موقع ويب متكامل.

- اما اذ كنت تريد تعلم html او css فيجب تعلمهم معا

ما الفرق بين html , css , javascript

السؤال

Hasan Hsoub

رابط هذا التعليق

شارك على الشبكات الإجتماعية

4 أجوبة على هذا السؤال

Recommended Posts

Najah Alsaker

HTML

CSS

javascript

HTML

CSS

Javascript

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

محمد_عاطف

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mahmoud Hassan19

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية