26‏/04‏/2015

تعلم واحتراف طريقة تصميم المواقع على الانترنت ب HTML وCSS (فيديو)

لا تضيع وقتك على الانترنت وتعلم: كيفية انشاء مدونة مجانا للمساهمة في محتوى الانترنت والربح منها.

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

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

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

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

إنشاء موقع ويب أو ويب سايت مجاني في دقائق

للإشارة فقط فتعلم اساسيات الHTML  و CSS  مثلا لا يتطلب أكثر من 24 ساعة أي يوم واحد فقط.

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

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

كيفية تصميم عمل وانشاء موقع ويب الكتروني 

هناك الكثير من لغات البرمجة التي تستعمل في انشاء مواقع الويب على الانترنت اليوم، ويبقى أهمها:

HTML

 يعتبر الأكثر استعمالا وهو الأساس طبعا وكلمة HTML هي تلخيص ل Hyper Text Markup Language. وهذه اللغة تسمح باستعمال علامات لتنظيم وتقسيم محتوى اي صفحة ويب لأجزاء.

 CSS

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

Javascript

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

PHP

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

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

طريقة تصميم المواقع على الانترنت بلغتي HTML  و CSS


طريقة تصميم صفحة ويب وتجربتها على المتصفح

 هذا الدرس بالفيديو يوضح طريقة انشاء مثال لصفحة ويب html بسيطة وتجربتها على المتصفح:





 دروس فيديو بالعربي لتعلم تصميم المواقع بHTML وCSS

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

الفرق بين html و css

لغة html يتم استعمالها لبناء عناصر صفحة ويب، وهي التي تحدد نوع الأجزاء المركبة لها مثل:

  • فقرة
  • عنوان
  • جدول
  • خانة
بينما لغة css تقوم بالتحكم في شكل html بتحديد:

  • حجم الخط
  • الألوان
  • الطول والعرض
  • التوجيه والتموضع
لائحة الدروس بالفيديو:

دروس تعلم أساسيات html

  1.  بنية صفحة ويب Web Page Structure وأدوات التصميم
  2. المعلمات markup
  3. اللوائح  lists
  4. الروابط Links 
  5. الصور Images
  6. الجداول Tables 
  7. الاستمارات Forms
  8. عناصر تقسيم صفحة ويب 
  9. اضافة مشغل الصوت والفيديو 

دروس تعلم أساسيات css

  1. تقديم: معلومات مشرح المحددات
  2. الالوان Colors
  3. النصوص texts
  4. نظام الصندوق Box Module
  5. اللوائح Lists
  6. الجداول Tables
  7. الإستمارات Forms
  8. الصور Images
  9. الهيكل Layout

التطبيق على مثال



بعد هذا يمكنكم القيام بخطوة تالية لتعلم لغات أخرى مثل Javascript و PHP.

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

لا تنسوا مشاركتنا ارائكم ولماذا ترغبون بتعلم تصميم المواقع؟

قد تود قراءة:

لكل سؤال أو إضافة، يرجى كتابة تعليقك في الخانة اسفله