جهاز الكمبيوتر أو الهاتف المحمول الذكي الذي تستخدمه الأن هو عبارة عن قطع إلكترونية ومكونات جامدة لا حياة لها , يستخدم الكهرباء للحركة وتلبية الأوامر التي تصدر منك ويقوم بتنفيذ هذه الأوامر طبقاً لبرامج معدة مسبقاً من قبل المبرمجين عليه , هذه البرامج منشأة في الأصل بناءاً على نظام البناء الثنائي الذي تتم برمجة أي جهاز في العالم من خلاله إعتماداً على رقمي الصفر و الواحد.
هذا ليس بموضوعنا ولكن كان لابد من هذا التمهيد لأنه مرتبط إرتباط وثيق أيضاً بتصميم المواقع ولكن بطريقة أسهل بكثير.
فمع تطور العلوم ظهرت لغات برمجة صديقة للمستخدم , لم يعد أحد يستخدم نظام البناء الثنائي إلا أقل القليل الأن ولمجرد الشرح عن علم تاريخي , الأن ظهرت برامج ولغات لها مفردات سهلة بل أن بعضها تتم كتابته كما لو كنت تكتب باللغة الإنجليزية !! هذه البرمجيات واللغات مخصصة لمساعدتك في التصميم والبرمجة وهي سهلة الإستخدام لك.
بالنسبة لمواقع الإنترنت فهناك لغة أساسية لا غنى عنها في أي موقع وهي لغة HTML وهذه اللغة لها إصدارات أخرها هو HTML5.
الدرس الأول - مقدمة وتعريف بلغة HTML
 |
| html and other languages |
ما هي لغة HTML
هي لغة تصميم صفحات الويب , تعلمها سهل لدرجة إنك لا تحتاج إلى أي خبرات تقنية سابقة في حياتك , بل أنه من السهل تدريسها لطلاب المراحل الإبتدائية. علماً بأنها لغة تصميم وليست لغة برمجة , لذا يمكنك إستخدامها لتصميم موقع بسيط أو واجهة ثابتة ولكنك لا تستطيع إستخدامها وحدها لبرمجة موقع إحترافي متقدم , لذا فبعد فتصميم وتطوير المواقع ينقسم على شخصين عادي:
Front-End Developer : وهو مصمم الصفحات الظاهرة للزوار.
Back-End Developer : وهو مطور الموقع المسئول عن برمجته وبرمجة قواعد البيانات.
كلاهما مرتبط بالأخر فلا يمكن لأي منهم أن يعمل بدون الأخر , وبعض الأشخاص المتقدمين مع علمهم للغات التصميم والبرمجة يمكنهم العمل بمفردهم ويكون إسمهم حينها Full-Stack Develoers.
ما يجب أن تتعلمه لتصبح مصمم مواقع
هناك ثلاثة لغات لو أتقنتها ستصبح مصمم مواقع جيد وهي:
HTML بإصداراتها
CSS بإصداراتها
Javascript وبعض مكتباتها مش جيكويري
 |
| أهم لغات لتصمم مصمم مواقع |
بعد أن تتعلم لغة ال HTML و الإضافات التي تم إضافتها عليها في أخر إصدار HTML5 سيكون لديك موقع به العناصر المطلوبة ولكن بدون تنسيق , حينها ستحتاج إلى اللغة المسئولة عن التنسيق وهي لغة ال CSS , كم هي لغة رائعة وسهلة الكتابة وبسيطة الإستخدام وتساعدك بوضع سحر جمال التنسيق والألوان والحركة في موقعك بعد أن تتعلم الأنيميشن بها.
يمكنك دراسة القليل بعد من لغة البرمجة جافاسكريبت لتحترف في HTML5 لأن بعض عناصرها تتطلب الجافاسكريبت أو يمكنك ترك ذلك والإكتفاء بما تعلمته لتعمل كمصمم مواقع Front-End ولكن ليس كمحترف بأعلى درجاته , وإذا أحببت لغة الجافاسكريبت المدهشة التي يمكنك من خلالها برمجة ألعاب كاملة أونلاين على موقعك وليس مجرد برمجة الموقع فقط وأحببت أيضاً أن تدخل في قواعد البيانات وتصميم مواقع وإستايلات خاصة بالوردبريس فعليك فيما بعد دراسة لغة ال PHP .. نعم إنه مشوار طويل قد يأخذ منك في كل لغة من هذه اللغات بين الأسبوع وعدة أشهر طبقاً لخطتك اليومية لتحترفها , ولكن في النهاية ستجد وظيفة جيدة براتب مغري بإنتظارك , على سبيل المثال متوسط مرتبات مصممو المواقع في مصر يتراوح بين 5 ألاف إلى 30 ألف جنيه شهرياً , وخارج مصر قد يصل لمئات الأف بالمصري. وكذلك مطورو المواقع , فما بالك بمن أصبح Full Stack Developer؟
غير أنك بعملك الثابت الذي ستحصل عليه يمكنك العمل حر وصنع موقعك الشخصي لتسويق خدمتك كمصمم أو مطور مواقع وقد تجني من ذلك ملايين بسهولة فيما بعد لو أصبحت في مرتبة مرموقة عالمياً.
هذا العمل ليس صعب .. هو فقط يحتاج إلى التركيز وكثرة التطبيق نظراً لأن البعد عن مجال التكويد والبرمجة والتصميم قد يجعلك تنسى بسهولة ما تعلمته سابقاً , فحاول بقدر الإمكان أن تضع لنفسك وقت لصنع بعض المواقع ولو حتى كمشاريع تضعها في البورتفوليو الخاص بك كلما سمح لك الوقت.
تاريخ لغة HTML
نعود إلى لغة HTML والتي صدر أول إصدار منها عام 1991م , وصدر الكثير من الإصدارات منهم إصدار XHTML وأخر إصدار منها صدر عام 2012 هو HTML5.
كل إصدار كان يقوم بإضافة وسوم جديدة أو حذف وسوم قديمة أو تعديل ما وهكذا , لذا فسنراعي أثناء شرحنا أن نضع لك الوسوم التي تعمل فقط وسنقول لك على الوسوم التي تم حذفها وفيما كانت تستخدم وطريقة إستخدامها أيضاً في درس واحد حتى إذا ما واجهتها في موقع عميل في وقتاً ما يمكنك التعرف على ما يجب عليك فعله مع هذه الوسوم وبما يمكنك إستبدالها ليكون موقع العميل متوافق مع الإصدارات الجديدة.
ملحوظة: معنى إلغاء وسوم أن هذه الوسوم لن تعمل مع المتصفحات الحديثة , وحتى أن بعض الوسوم الجديدة لا تعمل مع كل المتصفحات , وهناك بعض الوسوم التي يجب وضع إضافات لها لتعمل مع كل المتصفحات , وكل ذلك سنشرحه بالتفصيل حتى تمل منا.
معنى كلمة HTML
هي إختصار لجملة Hyper Text Markup Language
الوسوم أو Tags
هي مكونات اللغة الخاصة ببناء عناصر صفحة الويب , تكون مثل:
<html>
التاج السابق هو كود توصيف الصفحة على إنها صفحة HTML ويكون في بداية الصفحة
أما
</html>
وهذا التاج (أو الوسم) هو الخاص بإغلاق صفحة ال html ويكون في نهاية الصفحة
 |
| learn html |
بين هذين التاجين تقوم بوضع كل التاجز الخاصة بصنع صفحتك
كمثال: تقوم بعمل رأس الموقع الذي تضع به معلومات عن الموقع يستخدمها المتصفح ومحركات البحث , كمثال: تضع به التاج الخاص بإظهار عنوان الصفحة بأعلى المتصفح ونفس الإسم في محركات البحث , وكذلك التاج المسئول عن وصف الموقع , وكذلك التاج المسئول عن نوع التشفير , وتاج ملف الإستايل والتنسيق وسنشرح كل تاج من هذه التاجز في درسه الخاص فلا تتعجل وسنوضح الترتيب المثالي لهم مع التعرف على سبب كل ما تقوم بفعله , فإذا كنت تقوم بالتقليد فقط فلن تصبح محترفاً أبدأ وعليك أن تعلم سبب كل شئ ممكن وما هي المعايير العالمية التي ينصح بها خبراء اللغة.
 |
| أحد أشكال تخطيط الموقع |
مثلاً تاج إضافة صورة يكون بالشكل:
<img src="">
وتضع فيه بين علامتي التنصيص رابط الصورة المرغوب بإضافتها(والتي عادة تكون بداخل ملفات الموقع) لا تتعجل سنشرح الطريقة والكود الثابت لذلك وهو أسهل مما تتخيل .
كود الصورة كما سبق ورأيت مجرد تاج واحد فقط ليس له إغلاق , البعض قد يغلق التاج على نفسه وإن كانت المتصفحات الحديثة ولغة HTML5 لا تهتم بذلك الأن , وكما قلنا لكم سنضع التاجز بأحدث الطرق وسنعرفكم على تاريخها أيضاً مع الأمثلة التي ستساعدك على الفهم بسرعة أكبر.
تاج أخر مثل تاج كتابة باراجراف
<p>This is a test paragraph</p>
ستلاحظ أننا قمنا بفتح التاج وكان له نهاية أيضاً , يستخدم هذا التاج لوضع النصوص بداخله في جمل أو فقرات أو حتى لو حرف واحد ليتسمم ما بداخله بمميزات الباراجراف.
معنى ذلك أنه ليس لكل تاج وظيفة فقط بل له مميزات أيضاً.
نقول لك معاً , فعلى سبيل المثال لو قمت بوضع 2 باراجراف بجانب بعضهم البعض سيظهر كلا الباراجرافين فوق بعضهم البعض للزائر !! ذلك لأن تاج الباراجراف يأخذ إفتراضياً صفحة تسمى صفحة البلوك Block أو أنه يتعامل مع ما فيه وحده على أنه يحب أن يكون وحده على السطر وأن يكون أي شئ أخر حوله في سطر أخر وبينه وبينه مسافة ما.
كمثال:
<p>This is a test paragraph</p><p>This is a test paragraph</p>
سيظهر هذين السطرين كما لو كنت أكتب:
This is a test paragraph
This is a test paragraph
ولكن ماذا لو أردت أن أكتب الجملتين بجانب بعضهم البعض؟
هناك الكثير من الطرق منهم مثلاً أن تقوم بكتابة الجملتين في تاج واحد , أو أن تقوم بتغيير وظيفة تاج الباراجراف من blockإلى inline-block أو حتى أن تضع كل جملة منهم في تاج أخر إسمه span كالتالي:
<span>This is a test paragraph. This is a test paragraph</span>
وبذلك ستكون النتيجة:
This is a test paragraph. This is a test paragraph
هذه هي المقدمة والنبذة عن لغة HTML و HTML5 فهل وجدتها صعبة؟
إن أحببتها فإنتقل للدرس التالي ولا تنتظر وستجد أن إستخدام لغة ال HTML أسهل مما تتصور. والدرس التالي سيكون الأدوات التي ستحتاجها لتساعدك على بدء تعلم وتصميم أول موقع لك , ولا تقلق كل شئ مجاني من الألف للياء وحتى رفع موقعك على الإنترنت أو تجربته على جهازك الشخصي كما لو كان أونلاين بالظبط , جميع الأسئلة التي قد تدور في رأسك ستجد إجاباتها فقط بالصبر وإشباع نهمك لهذا العلم , ويمكنك أن تبدأ إنطلاقتك من الأن لو أحببت.
مع أطيب أمنياتنا للجميع بالتوفيق - روميسيا للخدمات الإلكترونية
تعليقات: 0
إرسال تعليق