الدرس 1: كيف تنشئ موقعك الشخصي بطريقة الاكواد ؟

ملاحظة : لا يمكن مشاهده بقيه الدروس الا اذا قمت بالتسجيل في الدوره
اضغط هنا وأضف اسمك
ومن هنا

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




في البداية أقترح عليكم أن تطرحوا على أنفسكم هذا السؤال البسيط و المهم في نفس الوقت : كيف تعمل موا قع الويب؟
بدون إطالة هذا هو فهرس الدرس الأول من القسم الأول :

1. طريقة عمل مواقع الويب 2. HTML5 و CSS 3 لغتين لإنشاء المواقع 3. محرر النصوص 4. المتصفحات

1. طريقة عمل مواقع الويب

كــيــف تــعــمــل مــواقـــع الــويـــب؟

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

لقد سمعت ب HTML5 و CSS 3 هل لهما علاقة بإنشاء المواقع ؟

بالطبع فكل المواقع تستند على هاتين اللغتين.. إنهما لغتين عالميتين..
لغة HTML تم اختراعها من طرف المبرمج Tim Berners-Lee عام 1991
Tim Berners-Lee ما زال يتابع باهتمام تطورالانترنت .. لقد أنشأ ما يسمى
World Wide Web Consortium (W3C) التي تعرف إصدارات جديدة من لغات الانترنت

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

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

HTML(HyperText Markup Language) دورها إدارة و تنظيم المحتوى.. بواسطتها يتم كتابة محتوى الصفحات من نصوص و صور.... (CSS (Cascading Style Sheets دورها إدارة مظهر الصفحات ( تصميم, تحديد المواضع, ديكور, ألوان.....

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

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

• · HTML1 الاصدار الأول الذي أنشئ من طرف سنة 1991
  
• · HTML2أصدرت هذه النسخة من طرف سنة 1994 شكلت قاعدة للنسخ الأخرى
  
• · HTML3اصدرت سنة 1996 أضيف فيها خاصيات جديدة مثل الجداول, التطبيقات, تحديد مواضع النصوص حول الصور إلخ.
  
• · HTML4اصدرت سنة 1998 أضيف إليها خاصية
  الإطارات التي تقسم الصفحة إلى أجزاء و التحسينات على النماذج لكن الإضافة
  الأهم كانت استخدام أوراق الأنماط أي ال CSS
  
• · HTML5الاصدار الأخير .. جاءت بمجموعة
  من التحسينات مثل إمكانية إضافة الفيديوهات , ميزات جديدة للنماذج و أفضل
  تصميم للمحتوى و هي النسخة التي سنحاول تعلمها معا
  
• · CSS1 ظهر هذا الاصدار ابتداء من سنة 1996 تضمن القواعد الأساسية لهذا الاصدار
  
• · CSS2 اصدر سنة 1999 ثم اكتملت في
  الإصدار CSS 2.01 , أضيف اليها تطبيقات جديدة تمكننا من استخدام تقنيات
  تحديد المواقع الدقيقة التي تسمح لنا بعرض العناصر حيثما اردنا على الصفحة.
  
• · CSS3 النسخة الأخيرة أضيف إليها ميزات كانت منتظر بفارغ الصبر مثل الحواف المدورة. التدرجات، الظلال إلخ
  

3. محرر النصوص

مــا هــو البرنامج الدي سأحتاجه لإنشاء موقعي ؟

هناك في الواقع العديد من البرامج المخصصة لإنشاء المواقع. لكن أود أن أؤكد
لكم أنكم لن تضطروا لدفع قرش واحد لشراء برنامج ما دام لديكم كل ما
تحتاجونه.. نعم إنه البرنامج Bloc-Notes الذي يعرفه الجميع
غريب ولكنه حقيقي: يمكن للمرء أن ينشئ موقع على شبكة الانترنت فقط باستخدام
المفكرة .. ومع ذلك، هناك الآن العديد من البرامج القوية ولم يبقى أحد
يستخدم المفكرة, و يمكننا تصنيف هذه البرمج إلى فئتين:
هذه البرامج سهلة جدا في الاستخدام يمكن من خلالها أن تنشئوا مواقع دون
دراية كبيرة بلغة معينة , من بين أفضل منها Mozilla Composer, Microsoft
Expression Web, Dreamweaver ويجب على كل مصمم موقع جيد عاجلا أو آجلا أن
يتعرف على HTML و CSS، لذلك لا أنصح باستخدام هذه البرامج
برامج تحرير النصوص: هذه هي البرامج المخصصة لكتابة التعليمات البرمجية.
يمكن للمرء عادة استخدامها مع لغات متعددة، وليس فقط HTML و CSS. لقد
برهنوا انهم حلفاء أقوياء لمصممي الويب!.
سأدعوكم إلى استخدام محرر نصوص في هذه الدورة حسب نوع نظام التشغيل لديكم.

• · نظام التشغيل ويندوز:
  

هناك الكثير من برامج تحرير النصوص لا أستطيع تقديمها لكم جميعا. ومع ذلك
أدعوكم للنظر في Notepadواحد من أكثر البرامج استخداما بين تلك المتاحة
لنظام التشغيل Windows. هذا البرنامج هو بسيط، حر و بكل اللغات
أقترح عليكم أن تفعلوا العملية التالية: انتقلوا إلى القائمة HTML<