الجمعة، 26 أكتوبر 2012
هذا هو الدرس الأول من دورة احتراف لغة html5/css3 , سنتناول فيه عدة محاور لتوضيح طبيعة المهمة التي تنتظرنا في الدروس القادمة :
1- ماهية html5
2- ماهية css3
3- أمثلة على مواقع مصممة ب html5/css3
4- كيف نبدأ ؟
5- صفحتنا الأولى بـ html5/css3
6- فيديو تطبيقي مصور
1- ماهية html5
html هي اختصار لـ Hypertext Markup Language وهي لغة برمجية بسيطة أنشأت عام 1991 باصدارها الأول html 1.0 وكانت بامكانيات محدودة آنذاك , تسمح فقط بإظهار النصوص وبدون أي صور أو إضافات جمالية وتوالت التحسينات والتطوير في اللغة إلى غاية آخر إصدارhtml5 والتي نزلت مؤخرا وبامكانيات مبهرة فاصبح بامكاننا التحكم بشكل أفضل بمحتوى الصفحة وبالفيديو والصور والكثير من الإضافات الجمالية الأخرى التي سنتعرف عليها أثناء هذه الدورة.
جميع إصدارات هذه اللغة معنية وبشكل أساسي باضافة وترتيب محتوى صفحة الويب من نصوص وصور وفيديوهات وصوتيات ... الخ .
2- ماهية css3
css اختصار لـ Cascading Style Sheets .
كانت صفحات الويب المصممة بـ html قبل نرول css تفتقد إلى الجمال والترتيب والتنسيق , ومع أول إصدار لـ css عام 1996 أصبح بإمكاننا عرض صفحاتنا بشكل أفضل وتنسيق نتحكم في جميع تفاصيله , نوعية الخط المستخدم في الصفحة والألوان والخلفية ...الخ, ومع الإصدار الأخير css3 أضيفت الكثير من الخصائص الجمالية الأخرى مثل ظل النص وتوهجه وانحناءات الإطارات والكثير من المزايا الأخرى التي نحن على موعد معها ان شاء الله في هذه الدورة .
3- أمثلة على مواقع مصممة ب html5/css3
الخلاصة أن html5 تُستخدم في إضافة محتوى الصفحة و css3 في عرض ذالك المحتوى بشكل جميل ومنسق .
وهذه بعض الأمثلة لمواقع عالمية مصممة بـ html 5 و css3 ... الموقع الأول هو موقعي التجاري (عالمي أيضا :) )
http://www.ejiwen.com/
http://www.htc.com/www/
http://beta.theexpressiveweb.com/
صدقني , ليس هناك حدود وانت تصمم موقعك , أي فكرة إبداعية يمكن تطبيقها إستنادا إلى الكم الهائل من الخيارات والمزايا المتاحة أمامك في html5/css3 .. ومع نهاية هذه الدورة ستدرك ذالك ;)
4- كيف نبدأ ؟
نحن نتعامل مع كودات ورموز برمجية ولذالك من الضروري أن نجد محرر نصوص يسهل لنا عملية تحرير وحفظ ملفاتنا النصية , هناك العديد من الخيارات أولهما هو برنامج بلوك نوت الظاهر في الصورة :
وهو موجود في جميع إصدارات أنظمة المايكروسفت من اكس بي إلى غاية ويندوز 8 وهناك محرر آخر أكثر احترافية وهو برنامج نوت باد بلس بلس وهو مثل بلوك نوت ولكنه بمميزات أكبر وهو الظاهر في الصورة أسفله
البرنامج الأخير يقوم بتلوين مختلف الوسوم والأوامر المستخدمة في صفحاتنا مايمنحنا وضوح أكبر أثناء كتابة الكود مع مزايا أخرى كثيرة سنكتشفها معا وهذا الأخير هو الذي سنعتمد عليه في هذه الدورة وهو مجاني ومتاح للتحميل .
الأمر الآخر , بعد كتابة كودات صفحتنا سنقوم بحفظها بامتداد (.html) لنقوم باستعراضها في أي متصفح انترنت , وجميع الأجهزة التي تحتوي أنظمة مايكروسوفت تحتوي أيضا على متصفح انترنت اكسبلورر , يمكن الإعتماد على أي متصفح آخر وهو ماننصح بها لنضمن أكبر توافق بين صفحاتنا المكتوبة بـ html5/css3 والمتصفحات التي ستعرض تلك الصفحات ... أنصحكم بتحميل متصفح غوغل كروم وهو مجاني أيضا .
الخلاصة : أن ماينقصنا عن البداية الصحيحة على جميع انظمة المايكروسفت هو وجود برنامجي :
نوت باد بلس بلس يمكنكم تحميله من : هنا
ومتصفح غوغل كروم , يمكنكم تحميله من : هنا
يبقى أهم شيء وهو معرفة مفردات اللغة التي سنكتبها في المحرر ونخاطب بها المتصفح ليفهم شكل ومحتوى الصفحة التي نريد , أي معرفة html5 لإنشاء المحتوى و css3 لطريقة عرض الصفحة والموقع بشكل جميل وهو موضوع هذه الدورة :)
5- صفحتنا الأولى بـ html5
يمكن استخدام html5 وحده كمرحلة أولى وبعد إنتهائنا من المحتوى والتخطيط الأساسي للصفحة يمكننا إضافة شكل وطريقة عرض جذابة من خلال css3 , سنقوم الآن بكتابة كود بسيط لصفحة html5 ونشرحه قدر الإمكان ...لا يُطلب منك الفهم الكلي لهذا الكود لأنه مجرد مثال تقريبي لما ستكون عليه الدروس القادمة وسنعود للكود مرات عديدة وبتفصيل أكبر .
فيما يلي كود بسيط لصفحة مكتوبة بـ html5 :
الكود السابق يمكننا نسخه وإضافته في محرر نوت باد بلس بلس بعد تثبيته , الفيديو المرفق يشرح جزاءا من تلك العملية
ا - نقوم بانشاء مجلد على سطح المكتب ليضم مستقبلا جميع الملفات المتعلقة بموقعنا .
ب - نتوجه إلى محررنا نوت باد بلس بلس ونختار لغة البرمجة التي سنستخدمها وهي html ..موضح في الفيديو المرفق.
ج - نختار أيضا نوعية الترميز لتدعم الكتابة بالعربية ونختارها utf-8 ... موضح في الفيديو المرفق
د - ننسخ الكود المعطى أعلاه ونقوم بإلصاقه في محررنا نوت باد بلس بلس .
هـ - نقوم بحفظ الملف بصيغة صفحات html وحفظه في مجلدنا الذي أنشأناه سابقا على سطح المكتب ... موضح أيضا في الفيديو.
الكود السابق هو الكود القياسي لصفحة ويب وهو مكون من عدة أوامر سنقوم بشرحها :
<DOCTYPE html!> هذا الكود يخبر المتصفح بطبيعة الصفحة التي سنعرضها ونقول له أنها مصممة بـhtml5 وأنها صفحة انترنت .
<head> </head> بين الوسمين يتم إضافة جميع مايتعلق بجزء الصفحة العلوي وبعض الأمور الأخرى التي سنتعرف عليها في وقتها .
<title> </title> بين الوسمين نكتب عنوان الصفحة الذي سيظهر في أعلى المتصفح .
<body> </body> بين الوسمين يتم إضافة محتوى الصفحة من نصوص وصور وغيرها والتي ستظهر في جسم الصفحة
وهذا هو شكل الصفحة التي ستظهر لنا بعد حفظ هذا الكود :
جميل أن تتحول كل تلك الطلاسم السحرية إلى صفحة منظمة مثل تلك ... هذه هي روعة لغات البرمجة
المتصفح يقوم بترجمة كل تلك الوسوم إلى مايناسبها , لأننا هنا خاطبناه بلغة يفهمها وهي html5 وأخبرناه بالوضعية التي نريد بها هذا النص أو ذاك وقام هو بتنفيذ تلك الأوامر مباشرة ... يجب هنا أن نراعي الترتيب والدقة في كتابة الوسوم وفي الدرس القادم ان شاء الله سنخوض معمقا في تلك التفاصيل .
6- فيديو تطبيقي مصور
هذا فيديو مصور لتطبيق كل ما ذكرناه في هذا الدرس
أتمنى أن يكون هذا الشرح كافي لتواكبو معنا الدروس القادمة وأي سؤال أنا جاهز , شكرا لكم.
1- ماهية html5
2- ماهية css3
3- أمثلة على مواقع مصممة ب html5/css3
4- كيف نبدأ ؟
5- صفحتنا الأولى بـ html5/css3
6- فيديو تطبيقي مصور
1- ماهية html5
html هي اختصار لـ Hypertext Markup Language وهي لغة برمجية بسيطة أنشأت عام 1991 باصدارها الأول html 1.0 وكانت بامكانيات محدودة آنذاك , تسمح فقط بإظهار النصوص وبدون أي صور أو إضافات جمالية وتوالت التحسينات والتطوير في اللغة إلى غاية آخر إصدارhtml5 والتي نزلت مؤخرا وبامكانيات مبهرة فاصبح بامكاننا التحكم بشكل أفضل بمحتوى الصفحة وبالفيديو والصور والكثير من الإضافات الجمالية الأخرى التي سنتعرف عليها أثناء هذه الدورة.
جميع إصدارات هذه اللغة معنية وبشكل أساسي باضافة وترتيب محتوى صفحة الويب من نصوص وصور وفيديوهات وصوتيات ... الخ .
2- ماهية css3
css اختصار لـ Cascading Style Sheets .
كانت صفحات الويب المصممة بـ html قبل نرول css تفتقد إلى الجمال والترتيب والتنسيق , ومع أول إصدار لـ css عام 1996 أصبح بإمكاننا عرض صفحاتنا بشكل أفضل وتنسيق نتحكم في جميع تفاصيله , نوعية الخط المستخدم في الصفحة والألوان والخلفية ...الخ, ومع الإصدار الأخير css3 أضيفت الكثير من الخصائص الجمالية الأخرى مثل ظل النص وتوهجه وانحناءات الإطارات والكثير من المزايا الأخرى التي نحن على موعد معها ان شاء الله في هذه الدورة .
3- أمثلة على مواقع مصممة ب html5/css3
الخلاصة أن html5 تُستخدم في إضافة محتوى الصفحة و css3 في عرض ذالك المحتوى بشكل جميل ومنسق .
وهذه بعض الأمثلة لمواقع عالمية مصممة بـ html 5 و css3 ... الموقع الأول هو موقعي التجاري (عالمي أيضا :) )
http://www.ejiwen.com/
http://www.htc.com/www/
http://beta.theexpressiveweb.com/
صدقني , ليس هناك حدود وانت تصمم موقعك , أي فكرة إبداعية يمكن تطبيقها إستنادا إلى الكم الهائل من الخيارات والمزايا المتاحة أمامك في html5/css3 .. ومع نهاية هذه الدورة ستدرك ذالك ;)
4- كيف نبدأ ؟
نحن نتعامل مع كودات ورموز برمجية ولذالك من الضروري أن نجد محرر نصوص يسهل لنا عملية تحرير وحفظ ملفاتنا النصية , هناك العديد من الخيارات أولهما هو برنامج بلوك نوت الظاهر في الصورة :
البرنامج الأخير يقوم بتلوين مختلف الوسوم والأوامر المستخدمة في صفحاتنا مايمنحنا وضوح أكبر أثناء كتابة الكود مع مزايا أخرى كثيرة سنكتشفها معا وهذا الأخير هو الذي سنعتمد عليه في هذه الدورة وهو مجاني ومتاح للتحميل .
الأمر الآخر , بعد كتابة كودات صفحتنا سنقوم بحفظها بامتداد (.html) لنقوم باستعراضها في أي متصفح انترنت , وجميع الأجهزة التي تحتوي أنظمة مايكروسوفت تحتوي أيضا على متصفح انترنت اكسبلورر , يمكن الإعتماد على أي متصفح آخر وهو ماننصح بها لنضمن أكبر توافق بين صفحاتنا المكتوبة بـ html5/css3 والمتصفحات التي ستعرض تلك الصفحات ... أنصحكم بتحميل متصفح غوغل كروم وهو مجاني أيضا .
الخلاصة : أن ماينقصنا عن البداية الصحيحة على جميع انظمة المايكروسفت هو وجود برنامجي :
نوت باد بلس بلس يمكنكم تحميله من : هنا
ومتصفح غوغل كروم , يمكنكم تحميله من : هنا
يبقى أهم شيء وهو معرفة مفردات اللغة التي سنكتبها في المحرر ونخاطب بها المتصفح ليفهم شكل ومحتوى الصفحة التي نريد , أي معرفة html5 لإنشاء المحتوى و css3 لطريقة عرض الصفحة والموقع بشكل جميل وهو موضوع هذه الدورة :)
5- صفحتنا الأولى بـ html5
يمكن استخدام html5 وحده كمرحلة أولى وبعد إنتهائنا من المحتوى والتخطيط الأساسي للصفحة يمكننا إضافة شكل وطريقة عرض جذابة من خلال css3 , سنقوم الآن بكتابة كود بسيط لصفحة html5 ونشرحه قدر الإمكان ...لا يُطلب منك الفهم الكلي لهذا الكود لأنه مجرد مثال تقريبي لما ستكون عليه الدروس القادمة وسنعود للكود مرات عديدة وبتفصيل أكبر .
فيما يلي كود بسيط لصفحة مكتوبة بـ html5 :
<!DOCTYPE html><html>
<head><title>عنوان الموقع </title></head ><body>
محتوى الموقع
</body>
</html>
الكود السابق يمكننا نسخه وإضافته في محرر نوت باد بلس بلس بعد تثبيته , الفيديو المرفق يشرح جزاءا من تلك العملية
ا - نقوم بانشاء مجلد على سطح المكتب ليضم مستقبلا جميع الملفات المتعلقة بموقعنا .
ب - نتوجه إلى محررنا نوت باد بلس بلس ونختار لغة البرمجة التي سنستخدمها وهي html ..موضح في الفيديو المرفق.
ج - نختار أيضا نوعية الترميز لتدعم الكتابة بالعربية ونختارها utf-8 ... موضح في الفيديو المرفق
د - ننسخ الكود المعطى أعلاه ونقوم بإلصاقه في محررنا نوت باد بلس بلس .
هـ - نقوم بحفظ الملف بصيغة صفحات html وحفظه في مجلدنا الذي أنشأناه سابقا على سطح المكتب ... موضح أيضا في الفيديو.
الكود السابق هو الكود القياسي لصفحة ويب وهو مكون من عدة أوامر سنقوم بشرحها :
<DOCTYPE html!> هذا الكود يخبر المتصفح بطبيعة الصفحة التي سنعرضها ونقول له أنها مصممة بـhtml5 وأنها صفحة انترنت .
<html> يسمى الوسم الإفتتاحي الأساسي لصفحة ويب وهو يحتوي على جميع العناصر ومكونات الصفحة ويغلق عند نهاية تلك المكونات بإضافة سلاش "شحطة" في بدايته <html/> .
<title> </title> بين الوسمين نكتب عنوان الصفحة الذي سيظهر في أعلى المتصفح .
<body> </body> بين الوسمين يتم إضافة محتوى الصفحة من نصوص وصور وغيرها والتي ستظهر في جسم الصفحة
وهذا هو شكل الصفحة التي ستظهر لنا بعد حفظ هذا الكود :
المتصفح يقوم بترجمة كل تلك الوسوم إلى مايناسبها , لأننا هنا خاطبناه بلغة يفهمها وهي html5 وأخبرناه بالوضعية التي نريد بها هذا النص أو ذاك وقام هو بتنفيذ تلك الأوامر مباشرة ... يجب هنا أن نراعي الترتيب والدقة في كتابة الوسوم وفي الدرس القادم ان شاء الله سنخوض معمقا في تلك التفاصيل .
6- فيديو تطبيقي مصور
هذا فيديو مصور لتطبيق كل ما ذكرناه في هذا الدرس
أتمنى أن يكون هذا الشرح كافي لتواكبو معنا الدروس القادمة وأي سؤال أنا جاهز , شكرا لكم.
...merci bcp
ردحذفبإنتظار الدرس الثاني بفارغ الصبر
ردحذفتلميذتك ....
السلام عليكم شكرا أخي على المدونة الرائعة وقد بدأت للتو التعرف عليها وسأواصل معكم في الدورة هذه وأنا فخور لأنه أصبح لدينا مثل هذه المواقع
ردحذفشكرااااااا
ردحذف