تعلم معي HTML5 & CSS3

الأربعاء، 26 يونيو 2013

الدرس الأول : وسوم وهيكلية لغة HTML5

بسم الله الرحمن الرحيم

اللهم صل على سيدنا محمد الوصف والوحي والرسالة والحكمة وعلى آله وصحبه وسلم تسليما

السلام عليكم

نبدأ اليوم درسنا الأول لتعلم لغة HTML5 ، وهي أحدث إصدار من لغة HTML متوافق مع web 2.0

ولقد اطلعت على بعض المواقع العربية والأجنبية وتعلمت منها ما يلي :-
لغة HTML5 تهتم بتنسيق وتنظيم المحتوى من نصوص وفقرات وعناوين
أما لغة CSS3 فتهتم بتنسيق المظهر الخارجي من ألوان وخطوط وخلفيات
أما لماذا نتعلم اللغتان معا فلأن أحدهما تكمل الأخرى .

تتألف لغة HTML5 من مجموعة من الوسوم Tags ولكل وسم بداية ونهاية وسنتعرف بالبداية على الوسوم التالية :

وسم html    وهو الوسم الأساسي الذي يجمع بين بدايته ونهايته جميع الوسوم الأخرى
                 ويكتب <html> عند البداية    ويكتب <html/> عند النهاية

وسم head    ومن خلاله يتم تنسيق الجزء العلوي من الصفحة كالعنوان ووصف الموقع
                 ويكتب <head> عند البداية    ويكتب <head/> عند النهاية

وسم title      ومن خلاله يتم كتابة عنوان الصفحة الظاهر في أعلى المتصفح
                 ويكتب <title> عند البداية ويكتب <title/> عند النهاية

وسم body وهو الوسم الذي يضم بين طرفيه جميع الوسوم التي يبنى منها متن الصفحة
                 ويكتب <body> عند البداية    ويكتب <body/> عند النهاية

ولكي نبدأ بتعلم لغة HTML5 علينا القيام بتحميل برنامج ++ Notepad من الرابط التالي : http://notepad-plus-plus.org/

والآن قم بتنصيب البرنامج وافتح صفحة جديدة ولنبدأ معاً بكتابة الكود الأول .
أول ما علينا القيام به هو الذهاب إلى قائمة الترميز Encoding واختيار الترميز Encode in UTF-8 لكي نتمكن من الكتابة باللغة العربية .
ثم اكتب معي هذا الوسم

<! DOCTYPE html >

وهو بمثابة إعلام للحاسوب بأنك ستتحدث معه بلغة html وليس بلغة أخرى .
واكتب بعده الوسوم التالية :

<html>

<head>

<title>

عنوان الصفحة

</title>

</head>

<body>

متن الصفحة

</body>

</html>

ثم احفظ الصفحة بصيغة html وذلك بالذهاب لقائمة File واختيار Save As

وستظهر هيكلية الكود في برنامج ++ Notepad كالتالي :

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

الآن إذهب معي إلى قائمة Run واختر منها Launch in Chrome , Firefox, IE وحسب المتصفح لديك لعرض الصفحة وستظهر كما يلي :-

تهانينا للجميع ، لقد قمنا بإنشاء صفحتنا الأولى بلغة HTML5 .

وسأكتفي بهذا القدر من المعلومات للدرس الأول علني أكون قد أفدتك بها كما استفدت منها، وسأحاول ما استطعت أن لا أتوقف وأن أستمر في التعلم وتعليمك معي درسا آخر .

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

الأحد، 23 يونيو 2013

تعلم معي HTML5 و CSS3 .. فلنبدأ

بسم الله الرحمن الرحيم

اللهم صل على سيدنا محمد الوصف والوحي والرسالة والحكمة وعلى آله وصحبه وسلم تسليما

السلام عليكم ..

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

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

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

واليوم قد عزمت على العودة من جديد للتعلم بدافع الشغف لتعلم شيء جديد ، لا أجزم أني سأكمل الطريق لكن ما من شك أني بدأت الخطوة الأولى .

فإن كنت تريد مرافقتي فلنبدأ إذا ..

السؤال الأول : ما هي أفضل لغة أتعلمها ؟ ما هي أسهل لغة ؟ ما هو أقصر طريق للوصول ؟ لقد بحثت عن إجابة لهذا السؤال في المواقع العربية والأجنبية وياله من جدل طويل ، إلا أنني استخلصت منه أن درجات السلّم لابد أن تمر باللغات التالية :-
HTML5 و CSS3
PHP و MySQL
Dreamweaver CS5
JQuery
Wordpress

ياله من جنون ! هل سأتعلم كل هذه اللغات ؟ هل سيستوعبها دماغي بعد هذا الجمود الطويل ؟ لقد مر على تعلمي لغة بيسك تسعة عشر عاما ولا أتذكر منها سوى اسمها ، أنا من زمن حواسيب IBM وصخر ، فكيف لي بهذا المشوار الطويل الذي لا أظن بأني سأكمله ، ومن أين سآتي بالوقت ؟ أنا لا أملك حتى ساعة واحدة في اليوم ، لا أظن أن هناك رجلا في العالم أكثر انشغالا مني .

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

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

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

هاني سلطان