الدرس الأول من القسم الأول: كيف ننشئ موقعا على الانترنت

أهلا و سهلا و مرحبا بالجميع في الدرس الأول من دورة تعليم لغتي بناء المواقع 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<<H<< هذا سيسمح للبرنامج بمعرفة أننا سوف ندخل HTML.

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

وهناك محررات اخرى متاحة لنظام التشغيل Windows. إذا كانت المفكرة + + لا تناسبكم، يمكنكم محاولة

jEdit ;PSpad ;ConTEXT ;

.

·         نظام التشغيل لينكس:

يمكنك محاولة أحد البرامج التالية: gEdit ;Kate ;vim ;Emacs ;jEdit.

·        نظام التشغيل ماك OS X

يمكنك محاولة أحد البرامج التالية: :jEdit ;Smultron ;TextWrangler

4.     المتصفحات

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

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

انته الدرس الأول من القسم الأول .. أضرب لكم  موعدا في الدرس الثاني من القسم الأول دائما و على مدونتكم للإفـــــادة

Tweet

تنبيه : أرجو عدم نسخ المحتوى بدون ذكر المصدر و السلام

بقلم مطوري البلوجر

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

تعليقك يساعدنا على المواصلة و يدعمنا نفسيا فلا تبخل علينا برأيك

قسم : لغــة CSS,لغــة HTML